/* ═══ HOME — la grammatica di ful-agency.com (28/10/2026, terza strada) ══════════════════════════ */
body:has(#magazine){--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(#magazine){--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:calc(13em / var(--k,1));text-wrap:balance}   /* la misura ⛔ si stringe col corpo: un titolo lungo rimpicciolito sta in meno righe (01/11: «per titoli troppo lunghi non va bene») */
.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)}

/* ═══ PUBBLICITÀ ═══════════════════════════════════════════════════════════════════════════════ */
.pb-h2{margin:0;font-size:clamp(2rem,4vw,4.4rem);font-weight:600;letter-spacing:-.055em;line-height:.9;text-transform:uppercase;text-wrap:balance}
.pb-h3{margin:0;font-size:clamp(1.35rem,2.1vw,2.2rem);font-weight:600;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.pb-tit{margin:0;font-size:clamp(2.3rem,5.4vw,6.2rem);font-weight:600;letter-spacing:-.06em;line-height:.88;text-transform:uppercase;text-wrap:balance}
:is(.pb-h1,.pb-h2,.pb-h3,.pb-tit){display:flow-root}
:is(.pb-h1,.pb-tit) i{font-style:normal;color:var(--arancio)}
.pb-nw{white-space:nowrap}
.pb-dek{margin:0;max-width:46ch;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.45;color:var(--grigio)}
/* la testa di ogni sezione: l'etichetta, poi il titolo a sinistra e il sommario a destra sul filetto */
.pb-sez{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:18px;align-items:end;margin-bottom:clamp(44px,5vw,84px)}
.pb-sez>:first-child{grid-column:1/-1;margin:0 0 clamp(8px,1vw,16px)}
.pb-sez>h2{grid-column:1/8;max-width:15em}
.pb-sez .pb-dek{grid-column:9/13}
.pb-sez--notte .pb-dek{color:var(--su-notte)}
.pb-sez--notte .hm-nl__k{margin:0 0 clamp(8px,1vw,16px)}

/* 1 · LA COPERTINA (la stessa di About) */
.pb-testa{position:relative;isolation:isolate;overflow:clip;display:flex;align-items:flex-end;background:var(--carbone);color:#fff;
  min-height:min(max(640px,100svh),1100px);padding:calc(var(--hd-h,150px) + 48px) 0 clamp(28px,3.4vw,52px)}
.pb-testa__foto{position:absolute;inset:0;z-index:-1;overflow:hidden}
.pb-testa__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.pb-testa__foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,6,.55) 0,rgba(10,8,6,0) 200px),
             linear-gradient(0deg,rgba(10,8,6,.9) 0,rgba(10,8,6,.62) 42%,rgba(10,8,6,.12) 72%,rgba(10,8,6,0) 86%)}
.pb-testa__in{position:relative}
.pb-testa__k{margin:0 0 clamp(20px,2vw,32px)}
.pb-h1{margin:0;max-width:14em;font-size:min(clamp(2.3rem,.8rem + 6vw,7.2rem),10.5svh);font-weight:600;text-transform:uppercase;
  letter-spacing:-.055em;line-height:.88;text-wrap:balance}
.pb-testa__piede{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:24px;align-items:end;
  margin-top:clamp(28px,3vw,48px);padding-top:16px;border-top:1px solid rgba(255,255,255,.32)}
.pb-testa__txt{grid-column:1/8}
.pb-testa__dek{margin:0;max-width:46ch;font-size:clamp(1.05rem,1.25vw,1.3rem);font-weight:300;line-height:1.4;color:rgba(255,255,255,.86)}
.pb-testa__p{margin:12px 0 0;max-width:62ch;font-size:clamp(.9rem,.95vw,1rem);font-weight:300;line-height:1.5;color:rgba(255,255,255,.66)}
.pb-testa__cta{grid-column:8/13;justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}
.fb--pieno{background:#fff;color:var(--carbone)}
@media(hover:hover){.fb--pieno:hover{background:var(--arancio);color:var(--carbone)}}
.fb--giu .fb__f{rotate:135deg}
.hm-js .pb-testa__in{visibility:hidden}
.pb-testa-p2{display:none;padding-top:28px}
.pb-testa-p2 .pb-dek{color:var(--ink)}

/* 2 · DOVE FINISCE QUELLO CHE COMPRI: la carta alta, il sito quadrato e più in basso, il social largo che chiude */
.pb-dove{padding-top:var(--sezione)}
.pb-can{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:clamp(56px,6vw,100px);border-top:1px solid var(--ink);padding-top:16px}
.pb-c__foto{position:relative;margin:0;overflow:clip;background:var(--sporco)}
.pb-c__foto img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}
.pb-c--carta{grid-column:1/6}.pb-c--carta .pb-c__foto{aspect-ratio:4/5}
.pb-c--sito{grid-column:7/12;margin-top:min(14vw,220px)}.pb-c--sito .pb-c__foto{aspect-ratio:1/1}
.pb-c--social{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:end}
.pb-c--social .pb-c__foto{grid-column:5/13;grid-row:1;aspect-ratio:3/2}
.pb-c--social .pb-c__txt{grid-column:1/5;grid-row:1;padding-bottom:4px}
.pb-c__k{display:flex;gap:12px;margin:var(--v-foto) 0 12px;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.pb-c__k b{font-variant-numeric:tabular-nums;color:var(--arancio)}
.pb-c__p{margin:14px 0 0;max-width:42ch;font-size:clamp(1rem,1.1vw,1.12rem);font-weight:300;line-height:1.45;color:var(--grigio)}

/* 3 · LA COMMUNITY: le serate sul nero, a griglia sfalsata */
.pb-comm{margin-top:var(--sezione);padding:var(--sezione) 0;background:var(--carbone);color:#fff;overflow:clip}
.pb-comm .pb-sez>h2{max-width:12em}
.pb-mos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:clamp(40px,5vw,80px);align-items:start}
.pb-t{margin:0}
.pb-t__f{position:relative;overflow:clip;background:#241d17}
.pb-t__f img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}
.pb-t figcaption{margin-top:12px;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.pb-t figcaption span{color:var(--su-notte);font-weight:500}
.pb-t--a{grid-column:1/8}.pb-t--a .pb-t__f{aspect-ratio:3/2}
.pb-t--b{grid-column:9/13;margin-top:min(12vw,190px)}.pb-t--b .pb-t__f{aspect-ratio:4/5}
.pb-t--c{grid-column:2/6}.pb-t--c .pb-t__f{aspect-ratio:4/5}
.pb-t--d{grid-column:7/13;margin-top:min(-4vw,-20px)}.pb-t--d .pb-t__f{aspect-ratio:4/3}
.pb-t--e{grid-column:1/5;margin-top:min(6vw,90px)}.pb-t--e .pb-t__f{aspect-ratio:1/1}
.pb-t--f{grid-column:6/12}.pb-t--f .pb-t__f{aspect-ratio:4/3}
.pb-t--g{grid-column:3/7}.pb-t--g .pb-t__f{aspect-ratio:3/4}
.pb-t--h{grid-column:8/13;margin-top:min(9vw,140px)}.pb-t--h .pb-t__f{aspect-ratio:3/2}

/* 4 · I NUMERI: la tavola di About, identica (le righe .ab-num vengono dal suo sorgente) */
.pb-conti{padding-top:var(--sezione)}
.pb-conti>.wrap>.et{margin:0 0 clamp(20px,2vw,32px)}
.pb-conti .pg{margin-bottom:clamp(20px,2.4vw,36px)}
.pb-conti__dek{margin:0 0 clamp(40px,5vw,80px) auto}
.ab-num small{display:block;margin-top:8px;max-width:26ch;font-size:.75rem;line-height:1.4;color:var(--grigio);opacity:.8}
/* il media kit è la terza riga della tavola (Francesco 29/10: «potevi collocarlo meglio»): stessa griglia, copertina, parole, bottone */
.pb-kit{margin-bottom:0}
.pb-kit__in{grid-column:3/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr auto;column-gap:16px;row-gap:24px}
.pb-kit__cop{display:block;grid-column:1/3;grid-row:1/3;border-left:1px solid var(--filo);padding-left:16px}
.pb-kit__cop img{display:block;width:100%;height:auto;box-shadow:0 18px 36px -18px rgba(17,15,13,.55);transition:transform .6s var(--e)}
@media(hover:hover){.pb-kit:hover .pb-kit__cop img{transform:translateY(-6px) rotate(-1.5deg)}}
.pb-kit__t{grid-column:3/5;border-left:1px solid var(--filo);padding-left:16px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
.pb-kit__t p{margin:12px 0 0;max-width:40ch}
.pb-kit .pb-h3{font-size:clamp(1.3rem,1.8vw,1.9rem)}
.pb-kit__b{grid-column:3/5;padding-left:17px;justify-self:start;align-self:start}
.pb-kit .fb--pieno{background:var(--carbone);color:#fff}  /* il pieno bianco è per il nero: qui il fondo è chiaro */
@media(max-width:700px){
  .pb-kit__in{grid-column:1/-1;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:20px;margin-top:20px}
  .pb-kit__cop{grid-column:1;grid-row:auto;border:0;padding:0;max-width:440px}.pb-kit__t{grid-column:1;padding-left:0;border:0}
  .pb-kit__b{grid-column:1;padding-left:0} }
/* 8b · le domande: sul nero, a filetti; il più gira in croce quando si apre */
.pb-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;margin-top:var(--sezione)}
.pb-faq__txt{grid-column:1/5}.pb-faq__l{grid-column:6/13;border-top:1px solid rgba(255,255,255,.5)}
.pb-faq details{border-bottom:1px solid rgba(255,255,255,.16)}
.pb-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:600;letter-spacing:-.02em;line-height:1.25;transition:color .3s var(--e)}
.pb-faq summary::-webkit-details-marker{display:none}
.pb-faq summary i{position:relative;flex:none;width:14px;height:14px;transition:transform .5s var(--e)}
.pb-faq summary i::before,.pb-faq summary i::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--arancio)}
.pb-faq summary i::after{transform:rotate(90deg)}
.pb-faq details[open] summary i{transform:rotate(45deg)}
.pb-faq details p{margin:0 0 22px;max-width:56ch;font-size:clamp(.95rem,1.05vw,1.05rem);font-weight:300;line-height:1.5;color:var(--su-notte)}
@media(hover:hover){.pb-faq summary:hover{color:var(--arancio)}}
.pb-c__p a{color:inherit;text-decoration:underline;text-decoration-color:var(--arancio);text-decoration-thickness:2px;text-underline-offset:.2em}

.ab-num{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;border-top:1px solid var(--ink);padding-top:16px;margin-bottom:clamp(48px,5vw,84px)}
.ab-num__k{grid-column:1/3;margin:0;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.ab-num ol{grid-column:3/13;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
.ab-num li{border-left:1px solid var(--filo);padding:0 0 0 16px}
.ab-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}
.ab-num b i{font-style:normal;color:var(--arancio)}
.ab-num p{margin:16px 0 0;max-width:22ch;font-size:clamp(.95rem,1.05vw,1.05rem);font-weight:300;line-height:1.38;color:var(--grigio)}

/* 5 · CHI TI LEGGE: foto e parole alla pari, a lati alterni (Francesco 29/10: «bilanciata meglio fra testi e immagini») */
.pb-chi{padding-top:var(--sezione)}
.pb-mom{list-style:none;margin:0;padding:0;display:grid;row-gap:clamp(48px,6vw,104px);border-top:1px solid var(--ink);padding-top:clamp(28px,3vw,48px)}
.pb-mom>li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;align-items:center}
.pb-mom__f{grid-column:6/13;grid-row:1;position:relative;aspect-ratio:3/2;overflow:clip;background:var(--sporco)}
.pb-mom__f img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}
.pb-mom>li:nth-child(1) .pb-mom__f img{object-position:50% 30%}
.pb-mom__t{grid-column:1/5;grid-row:1}
.pb-mom__a{display:block;margin-top:clamp(18px,1.6vw,24px);padding-top:12px;border-top:1px solid var(--filo);font-size:15px;line-height:1.35;color:inherit;text-decoration:none;transition:color .4s var(--e)}
.pb-mom__a span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--arancio);margin-bottom:4px}
.pb-mom__a:hover{color:var(--arancio)}
.pb-mom>li:nth-child(even) .pb-mom__f{grid-column:1/8}
.pb-mom>li:nth-child(even) .pb-mom__t{grid-column:9/13}
.pb-mom__n{display:block;margin-bottom:clamp(16px,1.6vw,24px);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--arancio)}
.pb-mom .pb-h3{font-size:clamp(1.8rem,3.2vw,3.4rem);letter-spacing:-.05em;line-height:1}
.pb-mom p{margin:clamp(16px,1.6vw,24px) 0 0;max-width:34ch;font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:300;line-height:1.45;color:var(--grigio)}

/* 6 · COME POSSIAMO AIUTARTI: tre box; al passaggio il nero sale dal basso e le voci scorrono una dopo l'altra */
.pb-cosa{padding-top:var(--sezione)}
.pb-str{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pb-s{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:clamp(22px,2.2vw,34px);background:var(--sporco);
  transition:color .5s var(--e)}
.pb-s__su{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(40px,5vw,88px)}
.pb-s__n{margin:0;font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums}
.pb-s__pt{position:relative;z-index:-1;width:12px;height:12px;border-radius:50%;background:var(--arancio);transition:transform .8s var(--e)}
.pb-s .pb-h3{font-size:clamp(1.7rem,2.5vw,2.7rem);letter-spacing:-.05em}
.pb-s__scopo{margin:12px 0 clamp(28px,3vw,44px);max-width:30ch;font-size:clamp(1rem,1.1vw,1.1rem);font-weight:300;line-height:1.4;color:var(--grigio);transition:color .5s var(--e)}
.pb-s ul{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--ink);transition:border-color .5s var(--e)}
.pb-s ul li{padding:14px 0;border-bottom:1px solid var(--filo);transition:border-color .5s var(--e)}
.pb-s ul li:last-child{border-bottom:0;padding-bottom:0}
.pb-s ul b{display:block;font-size:clamp(1rem,1.1vw,1.1rem);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.pb-s ul span{display:block;margin-top:4px;font-size:.875rem;line-height:1.4;color:var(--grigio);transition:color .5s var(--e)}
@media(hover:hover){
  /* il pallino si allarga dal suo posto fino a riempire il box: i testi restano fermi */
  .pb-s:hover .pb-s__pt{transform:scale(150)}
  .pb-s:hover :is(.pb-s__scopo,ul span){color:rgba(17,15,13,.72)}
  .pb-s:hover ul li{border-color:rgba(17,15,13,.22)}
}

/* 9 · COME SI COMINCIA (con dentro le guide), E SCRIVICI: sul nero */
.pb-via{margin-top:var(--sezione);padding:var(--sezione) 0;background:var(--carbone);color:#fff;overflow:clip}
.pb-passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;row-gap:48px}
.pb-passi li{border-top:1px solid rgba(255,255,255,.32);padding-top:16px}
.pb-passi__n{display:block;margin-bottom:clamp(28px,3vw,52px);font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--arancio)}
.pb-passi .pb-h3{font-size:clamp(1.6rem,2.4vw,2.6rem);letter-spacing:-.05em}
.pb-passi p{margin:14px 0 0;max-width:38ch;font-size:clamp(1rem,1.1vw,1.12rem);font-weight:300;line-height:1.45;color:var(--su-notte)}
.pb-guide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:40px;align-items:end;
  margin-top:clamp(72px,8vw,140px);border-top:1px solid rgba(255,255,255,.32);padding-top:clamp(28px,3vw,48px)}
.pb-guide__txt{grid-column:1/5;align-self:start}
.pb-guide__txt .hm-nl__k{margin:0 0 clamp(16px,1.6vw,24px)}
.pb-guide__txt p:last-child{margin:14px 0 0;max-width:30ch;font-size:clamp(1rem,1.1vw,1.12rem);font-weight:300;line-height:1.45;color:var(--su-notte)}
.pb-guida{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pb-guida--tel{grid-column:6/9}.pb-guida--cop{grid-column:9/13}
.pb-cop{position:relative;display:block;height:clamp(380px,36vw,560px);overflow:hidden;transition:transform .6s var(--e),box-shadow .6s var(--e);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pb-cop img{display:block;width:100%;height:100%;object-fit:cover}
.pb-cop--cop{aspect-ratio:848/1200}
.pb-cop--tel{aspect-ratio:600/1301;padding:7px;border-radius:clamp(28px,2.6vw,40px);background:#2b2622;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.8)}
.pb-cop--tel img{border-radius:clamp(22px,2.1vw,33px)}
@media(hover:hover){.pb-guida:hover .pb-cop{transform:translateY(-8px) rotate(-1.5deg)}}
.pb-guida__k{margin:4px 0 0;font-size:.875rem;line-height:1.4;color:var(--su-notte)}
.pb-guida__k b{display:block;margin-bottom:2px;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.pb-scrivi{margin-top:var(--sezione);border-top:1px solid rgba(255,255,255,.32);padding-top:clamp(28px,3vw,48px)}
.pb-scrivi .pb-tit{max-width:14em;margin-bottom:clamp(24px,2.6vw,40px)}
.pb-scrivi .pb-dek{color:var(--su-notte);max-width:52ch}
.pb-mail{display:inline-block;margin-top:clamp(32px,3.6vw,56px);font-size:clamp(1.3rem,4.6vw,4.6rem);font-weight:600;letter-spacing:-.05em;line-height:1.05;
  color:#fff;text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--arancio),var(--arancio)) 0 100%/0 3px no-repeat;transition:background-size .6s var(--e)}
.pb-mail i{font-style:normal;color:var(--arancio)}
@media(hover:hover){.pb-mail:hover{background-size:100% 3px}}

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

@media(max-width:1000px){
  .pb-faq__txt,.pb-faq__l{grid-column:1/-1}.pb-faq__l{margin-top:24px}
  .pb-testa__txt,.pb-testa__cta{grid-column:1/-1;justify-self:start;justify-content:flex-start}
  .pb-sez>h2,.pb-sez .pb-dek{grid-column:1/-1}
  .ab-num__k,.ab-num ol{grid-column:1/-1}
  .ab-num ol{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px;margin-top:20px}
  .pb-str,.pb-passi{grid-template-columns:minmax(0,1fr)}
  .pb-mom__t,.pb-mom>li:nth-child(even) .pb-mom__t{grid-column:1/6}
  .pb-mom__f{grid-column:7/13}.pb-mom>li:nth-child(even) .pb-mom__f{grid-column:1/7}
  .pb-mom>li:nth-child(even) .pb-mom__t{grid-column:8/13}
  .pb-guide__txt{grid-column:1/-1}
  .pb-guida--tel{grid-column:1/6}.pb-guida--cop{grid-column:6/13}
}
@media(max-width:700px){
  .pb-testa{min-height:min(max(560px,92svh),900px)}
  .pb-testa__cta .fb{flex:1 1 auto;justify-content:space-between}
  .pb-testa__p{display:none}   /* al telefono la copertina tiene il sommario; il secondo paragrafo scende sotto */
  .pb-testa-p2{display:block}
  .pb-c--carta,.pb-c--sito{grid-column:1/-1;margin-top:0}
  .pb-c--sito{grid-column:3/-1}
  .pb-c--social .pb-c__foto,.pb-c--social .pb-c__txt{grid-column:1/-1;grid-row:auto}
  .pb-mos{row-gap:28px}
  .pb-mos{grid-auto-flow:row dense}
  .pb-t--a,.pb-t--d,.pb-t--h{grid-column:1/-1;margin-top:0}
  .pb-t--f{grid-column:7/13;margin-top:48px}
  .pb-t--c,.pb-t--e{grid-column:1/7;margin-top:0}
  .pb-t--b,.pb-t--g{grid-column:7/13;margin-top:48px}
  .pb-t figcaption{font-size:.6875rem}
  .ab-num b{font-size:clamp(2rem,10vw,2.6rem)}
  .pb-mom>li,.pb-mom>li:nth-child(n){grid-template-columns:minmax(0,1fr);row-gap:20px}
  .pb-mom__f,.pb-mom__t,.pb-mom>li:nth-child(n) .pb-mom__f,.pb-mom>li:nth-child(n) .pb-mom__t{grid-column:1;grid-row:auto}
  .pb-mom .pb-h3{font-size:1.9rem}
  .pb-mom__n{margin-bottom:12px}
  .pb-s__su{margin-bottom:36px}
  .pb-cop{height:auto;width:100%}
  .pb-guida--tel{grid-column:1/6}.pb-guida--cop{grid-column:7/13}
  .pb-guida .fb{padding:0 14px 0 16px}
  /* al telefono le colonne sono strette (138/168 px): il bottone dice solo «Scarica», la riga sopra dice già cosa */
  @media(max-width:560px){.pb-guida .fb__l:nth-child(n+8){display:none}}
}


.ng-testa{padding-block:clamp(36px,4.4vw,64px) clamp(24px,2.6vw,36px);display:flex;justify-content:space-between;align-items:end;gap:var(--gap);flex-wrap:wrap}
.ng-testa .dek{max-width:34ch}
.ng-vai{display:flex;gap:6px 22px;flex-wrap:wrap;font-size:.84rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.ng-vai a{text-decoration:none;border-bottom:1px solid var(--filetto-forte);padding-bottom:3px}
.ng-vai a:hover{border-color:var(--ink)}
.ng-tessere{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:clamp(64px,8vw,128px)}   /* ⭐ staccate dalla sezione dopo (Francesco 28/10) */
.ng-t{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(34px,4vw,60px) clamp(20px,3vw,48px) 0;min-height:clamp(560px,52vw,780px)}
.ng-t .occhiello{justify-content:center}
.ng-t .t-h2{font-size:var(--hero)}
/* ⭐ IL PREZZO si legge per primo (Francesco 28/10: «va fatto vedere che è scontato»): il prezzo vero grande, il pieno
   barrato accanto e lo sconto in percentuale; sotto, in piccolo, cosa c'è compreso */
.ng-t__prezzo{display:flex;align-items:baseline;justify-content:center;gap:.5em;margin:14px 0 6px;font-size:clamp(1.6rem,2.2vw,2.1rem);font-weight:600;letter-spacing:-.01em}
.ng-t__prezzo s{font-size:.55em;font-weight:400;color:var(--ink-tenue)}
.ng-t__prezzo small{font-size:.5em;font-weight:400;color:var(--ink-tenue)}
.ng-sconto{align-self:center;font-size:.42em;font-weight:600;letter-spacing:.06em;padding:.3em .6em .25em;border-radius:99px;background:var(--arancio);color:var(--ink)}
.ng-t__incluso{margin:0 0 18px;color:var(--ink-tenue);font-size:.95rem}
/* ⭐ TUTTO IL BOX È IL LINK, ⛔ bottoni (Francesco 28/10: «se tutto è cliccabile, è inutile che ci siano i pulsanti»):
   un link che copre il box (66 → pagina prodotto, abbonamento → pagina abbonamento). A dire che si clicca c'è la
   FRECCIA nel cerchio in alto a destra, che si riempie quando il mouse è sul box. Col Tab il box si illumina tutto. */
/* ⭐ il box sotto il mouse SI ALZA dall'altro (Francesco 28/10: «non si percepisce il rilievo rispetto all'altro box»): cresce,
   sale e prende un'ombra lunga; l'altro arretra e si spegne un poco. `scale`/`translate`, ⛔ transform: quello lo usa l'entrata data-m */
.ng-t{cursor:pointer;transition:scale .7s var(--curva),translate .7s var(--curva),box-shadow .7s var(--curva),filter .7s var(--curva)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ng-t:hover{z-index:5;scale:1.03;translate:0 -8px;box-shadow:0 44px 70px -26px rgba(24,18,12,.5),0 14px 26px -12px rgba(24,18,12,.28)}
  .ng-tessere:has(.ng-t:hover) .ng-t:not(:hover){scale:.975;filter:brightness(.82) saturate(.8)}}
.ng-t>.ng-t__tutto{position:absolute;inset:0;z-index:3}
.ng-t:has(.ng-t__tutto:focus-visible){outline:2px solid var(--arancio);outline-offset:3px}
.ng-t>.ng-t__fr{position:absolute;top:clamp(14px,1.8vw,24px);right:clamp(14px,1.8vw,24px);z-index:2;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;border:1px solid currentColor;font-size:1.15rem;line-height:1;transition:background .35s,color .35s,border-color .35s}
.ng-t__fr span{display:block;transform:rotate(-45deg);transition:transform .45s var(--curva)}
.ng-t:hover .ng-t__fr span{transform:rotate(0)}
.ng-t--num:hover>.ng-t__fr{background:var(--ink);border-color:var(--ink);color:#fff}
.ng-t--abb:hover>.ng-t__fr{background:var(--arancio);border-color:var(--arancio);color:var(--ink)}
.ng-t--num{background:var(--carta-calda)}
.ng-t__dentro{margin:0 0 24px;max-width:38ch;color:var(--ink-tenue);font-size:.95rem}
.ng-mano{position:relative;width:min(44%,280px);margin:auto 0 clamp(40px,5vw,72px);perspective:1800px}
/* ⭐ HOVER del 66 — la rivista si APRE in 3D (Francesco 28/10): la copertina gira sul dorso e mostra sul retro e sotto
   una DOPPIA VERA col titolo e un'immagine (Francesco 28/10: «una coppia con titolo e immagine che sia corretta, ma non
   Protti»): pp. 36-37, Pietro Leopoldo — il titolo sul retro della copertina, il busto sotto, a destra; tutta la rivista scivola a destra di mezza pagina, così la doppia aperta resta al centro */
.ng-libro{position:relative;transform-style:preserve-3d;transform:rotate(-2deg);transition:transform 1.15s var(--curva)}
.ng-cop{position:relative;display:block;transform-style:preserve-3d;transform-origin:0 50%;transition:transform 1.15s var(--curva)}
.ng-cop .riv--grande{width:100%;backface-visibility:hidden}
.ng-libro .riv--retro{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;box-shadow:-1px 1px 0 #f6f4ef,-2px 2px 0 #d9d4cb,0 1px 2px rgba(24,18,12,.18),-10px 18px 30px -12px rgba(24,18,12,.32)}
.riv--retro::before{background:linear-gradient(270deg,rgba(30,22,14,.24) 0,rgba(30,22,14,.07) 3%,transparent 9%)}
.riv--retro::after{display:none}
.ng-libro .riv--dentro{position:absolute;inset:0;transform:translateZ(-1px)}
.riv--dentro::after{display:none}
.ng-t--num:hover .ng-libro,.ng-t--num.aperto .ng-libro{transform:translateX(50%) rotate(0deg)}
.ng-t--num:hover .ng-cop,.ng-t--num.aperto .ng-cop{transform:rotateY(-174deg)}
.ng-t--abb .ng-t__prezzo small,.ng-t--abb .ng-t__incluso{color:var(--su-notte)}
.ng-t--abb .ng-t__incluso{max-width:40ch}
.ng-t__incluso,.ng-t__dentro{text-wrap:balance}
@media (max-width:600px){.ng-t{padding-top:74px}.ng-t>.ng-t__fr{width:40px;height:40px}}   /* sul telefono il cerchio sta sopra la scritta, ⛔ addosso */
.ng-ven{position:absolute;left:50%;bottom:-8%;width:min(86%,560px);height:62%;transform:translateX(-50%)}
.ng-ven .riv{position:absolute;bottom:0;left:calc(var(--k) * 20%);width:40%;
  transform-origin:50% 100%;transform:rotate(calc((var(--k) - 1.5) * 5deg)) translateY(calc(var(--k) * -3%));transition:transform .8s var(--curva),opacity .6s}
.ng-ven .riv i{display:none}
.ng-t--abb{container-type:inline-size}
.ng-t--abb>*{position:relative;z-index:2}
.ng-t--abb>.ng-ven{position:absolute;z-index:1}
/* ⭐ HOVER dell'abbonamento — il MOSAICO di tutte le copertine, come l'hero di FUL Agency (Francesco 28/10): piano inclinato
   di 12°, sette colonne che scorrono in versi alterni, un velo scuro al centro che lascia leggere. Entra in dissolvenza
   sotto il ventaglio, che resta e si apre; corre solo finché c'è il mouse (sul telefono: finché la tessera è in vista) */
.ng-t--abb>.ng-mos{position:absolute;inset:0;z-index:0;overflow:hidden;opacity:0;transition:opacity .9s var(--curva)}
.ng-mos::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 66% 46% at 50% 30%,rgba(10,8,6,.9),rgba(10,8,6,.52) 82%)}
.ng-mos__piano{--col:calc((100cqw * 1.1 + 30cqw) / 7);--spazio:clamp(6px,.7vw,10px);position:absolute;left:50%;top:50%;height:160%;display:flex;gap:var(--spazio);
  transform:translate(-50%,-50%) rotate(-12deg) scale(1.08);transition:transform 1.4s var(--curva)}
.ng-mos__col{width:var(--col);flex:none}
.ng-mos__nastro{display:flex;flex-direction:column;gap:var(--spazio);animation:ng-sale 70s linear infinite;animation-play-state:paused;will-change:transform}
.ng-mos__col:nth-child(even) .ng-mos__nastro{animation-name:ng-scende}
.ng-mos__nastro img{display:block;width:100%;height:auto;aspect-ratio:240/340;object-fit:cover;background:#1c1a18}
@keyframes ng-sale{from{transform:translateY(0)}to{transform:translateY(-33.3333%)}}
@keyframes ng-scende{from{transform:translateY(-33.3333%)}to{transform:translateY(0)}}
.ng-t--abb:hover>.ng-mos,.ng-t--abb.aperto>.ng-mos{opacity:1}
.ng-t--abb:hover .ng-mos__piano,.ng-t--abb.aperto .ng-mos__piano{transform:translate(-50%,-50%) rotate(-12deg)}
.ng-t--abb:hover .ng-mos__nastro,.ng-t--abb.aperto .ng-mos__nastro{animation-play-state:running}
/* ⭐ i numeri RESTANO sopra il mosaico (Francesco 28/10: «mantieni anche i numeri, facendoli fare un movimento»): il ventaglio
   si APRE — le copertine si allargano, ruotano di più e salgono, una dopo l'altra — come una mano che le sparpaglia */
.ng-ven .riv{box-shadow:0 18px 40px -14px rgba(0,0,0,.6)}
.ng-t--abb:hover .ng-ven .riv,.ng-t--abb.aperto .ng-ven .riv{transition-delay:calc(var(--k) * 70ms);
  transform:translateX(calc((var(--k) - 1.5) * 8%)) rotate(calc((var(--k) - 1.5) * 8deg)) translateY(calc(-7% - var(--k) * 1.5%))}
@media (prefers-reduced-motion:reduce){.ng-libro,.ng-cop,.ng-ven .riv,.ng-mos__piano{transition:none}.ng-mos__nastro{animation:none}}
.ng-sf .testa-sez{margin-bottom:clamp(28px,3vw,48px)}
.sf-banco{display:grid;justify-items:center;gap:22px}
.sf-libro{width:100%;max-width:1120px;display:flex;justify-content:center}
.sf-libro>div{width:100%}
.sf-p{background:#f1eee8;overflow:hidden;position:relative}
/* ⭐ carta OPACA (Francesco 28/10: «meno lucido»): la grana e il tono smorzato sono CUOCIUTI nelle JPG (/tmp/ng4/cuoci.py),
   ⛔ filtri o strati sopra le pagine: durante il giro li ridipingeva a ogni fotogramma, ed era lì che scattava */
.sf-p::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
.sf-p.--left::after{background:linear-gradient(270deg,rgba(30,22,14,.20) 0,rgba(30,22,14,.07) 2.5%,transparent 8%)}
.sf-p.--right::after{background:linear-gradient(90deg,rgba(30,22,14,.18) 0,rgba(30,22,14,.06) 2.5%,transparent 8%)}
/* l'ombra sul tavolo è FERMA, sotto il libro: un drop-shadow sul blocco si ricalcolava a ogni fotogramma del giro */
.sf-libro{position:relative}
.sf-libro::before{content:"";position:absolute;left:8%;right:8%;bottom:-2%;height:6%;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(18px);pointer-events:none;transition:transform .9s cubic-bezier(.65,0,.35,1)}
/* chiusa al centro · aperta a tutta larghezza (sfoglia.js mette data-stato): la carta scivola di un quarto e l'ombra si
   stringe sulla sola pagina che si vede; la barra, da chiusa, è il solo tasto «Sfoglia» */
.sf-carta{transition:transform .9s cubic-bezier(.65,0,.35,1)}
.sf-banco[data-stato="chiusa"]:not([data-una="1"]) .sf-carta{transform:translateX(-25%)}
.sf-banco[data-stato="retro"] .sf-carta{transform:translateX(25%)}
.sf-banco:is([data-stato="chiusa"],[data-stato="retro"]):not([data-una="1"]) .sf-libro::before{transform:scaleX(.5)}
/* il tasto sta SOPRA la copertina chiusa, al centro (Francesco 03/11): finché non lo si preme la rivista non si gira,
   e la barra sotto resta al suo posto ma spenta, così aprendo niente salta */
/* il tasto è un BOLLINO bianco con l'onda arancio: sulla copertina scura si legge come un tasto, ⛔ come impaginato (scelto da Francesco fra quattro strade, 03/11/2026) */
.sf-libro .sf-apri{position:absolute;left:50%;top:50%;z-index:40;width:108px;height:108px;padding:0;border:0;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;align-content:center;gap:7px;cursor:pointer;transform:translate(-50%,-50%);box-shadow:0 14px 36px rgba(0,0,0,.45);transition:opacity .35s ease,visibility .35s,transform .45s var(--curva)}
.sf-apri svg{width:30px;height:30px;transition:transform .35s var(--curva)}
.sf-apri b{font:600 10.5px/1 var(--font);letter-spacing:.16em;text-transform:uppercase}
.sf-apri::before,.sf-apri::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--arancio);animation:sf-onda 2.6s cubic-bezier(.22,1,.3,1) infinite;pointer-events:none}
.sf-apri::after{animation-delay:1.3s}
.sf-libro .sf-apri:hover{transform:translate(-50%,-50%) scale(1.06)}
.sf-apri:hover svg{transform:translateY(-2px)}
.sf-apri:focus-visible{outline:2px solid var(--arancio);outline-offset:5px}
@keyframes sf-onda{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}
.sf-banco[data-stato="chiusa"] .sf-apri{transition:opacity .35s ease .75s,visibility .35s .75s,transform .45s var(--curva)}
.sf-banco[data-una="1"] .sf-apri{width:76px;height:76px;gap:5px}.sf-banco[data-una="1"] .sf-apri svg{width:23px;height:23px}.sf-banco[data-una="1"] .sf-apri b{font-size:8.5px;letter-spacing:.14em}
.sf-banco[data-una="1"] .sfx__tit{margin-top:3cqw}
.sf-banco:not([data-stato="chiusa"]) .sf-apri{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.sf-banco[data-stato="chiusa"] .sf-carta{pointer-events:none}
.sf-barra{transition:opacity .35s ease,visibility .35s}
.sf-banco[data-stato="chiusa"] .sf-barra{opacity:0;visibility:hidden}
/* sotto la pagina che si gira verso la copertina (o verso il retro) non c'è niente: si vede il fondo della sezione */
.sf-vuota{background:transparent}
@media (prefers-reduced-motion:reduce){.sf-carta,.sf-libro::before,.sf-apri,.sf-barra{transition:none}.sf-apri::before,.sf-apri::after{animation:none;opacity:0}}
.sf-p>img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none}
.sf-barra{display:flex;align-items:center;gap:18px;width:min(100%,640px)}
.sf-barra .btn{min-width:52px;padding:0}
.sf-dida{flex:1;text-align:center;margin:0;color:var(--su-notte);font-size:.9rem}
.sf-dida b{color:#fff;font-weight:600}
.sf-tabs{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;display:flex;justify-content:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.sf-tab{all:unset;cursor:pointer;display:grid;justify-items:center;gap:12px;width:clamp(64px,7vw,96px)}
.sf-tab .riv{width:100%;opacity:.62;transition:opacity .35s,transform .45s var(--curva)}
.sf-tab b{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--su-notte);display:flex;align-items:center;gap:.45em}
.sf-tab b::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--arancio);transform:scale(0);transition:transform .35s var(--curva)}
.sf-tab:hover .riv{opacity:.9}
.sf-tab[aria-pressed="true"] .riv{opacity:1;transform:translateY(-8px)}
.sf-tab[aria-pressed="true"] b{color:#fff}.sf-tab[aria-pressed="true"] b::before{transform:scale(1)}
.sf-tab:focus-visible{outline:2px solid var(--arancio);outline-offset:6px}
/* la COPERTINA: carta nera STAMPATA (la trama è cotta in carta-nera.jpg, ⛔ filtri), Inter leggero grande coi tasselli
   arancio dentro le righe, e il sommario numerato. Misure in cqw: scala con la pagina */
.sf-p{container-type:size}
.sfx{position:absolute;inset:0;display:flex;flex-direction:column;padding:6cqw 6.5cqw 7cqw;text-align:left;color:#f4f1ea;
  background:#191816 url(https://firenzeurbanlifestyle.com/wp-content/uploads/2026/11/mg-sfoglia-carta-nera.webp) center/cover}
.sfx__testa{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:4cqw;border-bottom:.25cqw solid rgba(244,241,234,.28)}
.sfx__testa img{width:15cqw;height:auto}
.sfx__testa p{margin:0;font-size:2.7cqw;font-weight:500;text-transform:uppercase;letter-spacing:.08em;line-height:1.45;text-align:right;color:rgba(244,241,234,.72)}
.sfx__tit{margin:7cqw 0 0;font-size:13.2cqw;font-weight:300;line-height:1;letter-spacing:-.035em}
.sfx__tas{display:inline-block;height:.74em;width:auto;aspect-ratio:3/2;object-fit:cover;vertical-align:-.04em;margin:0 .04em}
.sfx__som{list-style:none;margin:auto 0 0;padding:0;font-size:2.85cqw;font-variant-numeric:tabular-nums}
.sfx__som li{display:grid;grid-template-columns:7.5cqw 1fr auto;gap:2cqw;align-items:baseline;padding:1.35cqw 0;border-top:.2cqw solid rgba(244,241,234,.18)}
.sfx__som span,.sfx__som i{font-style:normal;color:rgba(244,241,234,.55);letter-spacing:.04em}
.sfx__som b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfx--retro{align-items:center;justify-content:flex-end}
.sfx--retro img{width:16cqw;height:auto;opacity:.8}
.ng-arr .testa-sez{margin-bottom:clamp(28px,3vw,44px)}
.ng-ann{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,4.2fr);gap:var(--gap);padding:clamp(26px,2.8vw,40px) 0;border-top:1px solid var(--filetto)}
.ng-ann__anno{margin:0;font-size:clamp(1.7rem,2.8vw,2.6rem);font-weight:600;letter-spacing:-.02em;line-height:1}
.ng-ann__testa p{margin:8px 0 0;color:var(--ink-tenue);font-size:.88rem}
.ng-cat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.4vw,40px) var(--gap);max-width:1000px}
.ng-c__nome em{font-style:normal;font-weight:400;color:var(--ink-tenue);font-size:.82em;margin-left:.3em}
.mg-info.ng-info{border-top-width:1px;padding-top:clamp(28px,3vw,40px)}
.mg-info.ng-info h4{font-size:clamp(1.15rem,1.5vw,1.35rem);letter-spacing:-.01em;text-transform:none;font-weight:600;margin:0 0 14px}
.mg-info.ng-info dl{gap:0}
.mg-info.ng-info dt,.mg-info.ng-info dd{padding:12px 0;border-bottom:1px solid var(--filetto)}
.mg-info.ng-info dt{color:var(--ink);text-wrap:pretty;padding-right:16px}
.mg-info.ng-info dd{white-space:nowrap}
.mg-info.ng-info p{line-height:1.5;margin-top:16px}
.ng-c{display:block;text-decoration:none}
/* la RIVISTA: copertina + dorso incollato a sinistra + il blocco delle pagine che spunta a destra e sotto + luce + ombra.
   Il dorso è PIATTO, come una brossura vera: solo la cordonatura, una piega netta a pochi mm dal bordo (Francesco 30/10:
   «i magazine non hanno la costola stondata» — la sfumatura chiaro-scuro di prima la faceva sembrare un tubo) */
.riv{position:relative;display:block;aspect-ratio:480/679;background:#e9e6e0;
  box-shadow:1px 1px 0 #f6f4ef,2px 2px 0 #d9d4cb,3px 3px 0 #f2efe9,4px 4px 0 #cfc9bf,
    0 1px 2px rgba(24,18,12,.22),6px 12px 20px -8px rgba(24,18,12,.30),16px 30px 46px -18px rgba(24,18,12,.30);
  transition:transform .55s var(--curva),box-shadow .55s var(--curva)}
.riv img{width:100%;height:100%;object-fit:cover;display:block}
.riv::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 2.6%,rgba(0,0,0,.20) 2.6%,rgba(0,0,0,.20) 2.9%,rgba(255,255,255,.22) 2.9%,rgba(255,255,255,.22) 3.3%,rgba(255,255,255,0) 3.3%)}
.riv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 34%,rgba(0,0,0,0) 66%,rgba(0,0,0,.10) 100%)}
.notte .riv{box-shadow:1px 1px 0 #f6f4ef,2px 2px 0 #d9d4cb,3px 3px 0 #f2efe9,4px 4px 0 #cfc9bf,0 1px 2px rgba(0,0,0,.5),8px 16px 30px -6px rgba(0,0,0,.6)}
.ng-c:hover .riv{transform:translateY(-8px) rotate(-1deg);
  box-shadow:1px 1px 0 #f6f4ef,2px 2px 0 #d9d4cb,3px 3px 0 #f2efe9,4px 4px 0 #cfc9bf,
    0 1px 2px rgba(24,18,12,.18),10px 22px 30px -10px rgba(24,18,12,.30),24px 46px 60px -22px rgba(24,18,12,.32)}
.ng-c__nome{display:block;margin-top:16px;font-weight:600;font-size:clamp(1rem,1.15vw,1.15rem);letter-spacing:-.005em;transition:color .3s}
.ng-c:hover .ng-c__nome{color:var(--arancio)}
.ng-c__pr{display:flex;align-items:center;flex-wrap:wrap;gap:.25em .5em;margin-top:4px}
.ng-c__pr b{font-weight:600;font-size:clamp(1rem,1.15vw,1.15rem)}
.ng-c__pr s{color:var(--grigio);font-size:.85rem}
.ng-c__pr i{font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.05em;padding:.28em .55em .22em;border-radius:99px;background:var(--arancio);color:var(--ink)}
.ng-riga b::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--arancio);transform:scale(0);transition:transform .35s var(--curva)}
.ng-ogg:hover .ng-riga b::before{transform:scale(1)}
.ng-altro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gap);align-items:start}
.ng-ogg-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.ng-ogg{display:block;text-decoration:none}
.ng-ogg .cornice{aspect-ratio:4/5}
.ng-ogg .cornice img{transition:transform .9s var(--curva)}
.ng-ogg:hover .cornice img{transform:scale(1.05)}
.ng-riga{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--filetto)}
.ng-riga b{font-weight:600;text-transform:uppercase;display:flex;align-items:center;gap:.5em}
.ng-riga span{color:var(--ink-tenue);white-space:nowrap}
.mg-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);border-top:2px solid var(--ink);padding-top:22px;margin-top:var(--blocco)}
.mg-info h4{margin:0 0 12px;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.mg-info dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 16px}
.mg-info dt{color:var(--ink-tenue)}.mg-info dd{margin:0;font-weight:600;text-align:right}
.mg-info p{color:var(--grigio);font-size:.84rem;margin:14px 0 0}
@media(max-width:860px){
  .ng-tessere{grid-template-columns:1fr}
  .ng-t{min-height:clamp(520px,128vw,680px)}
  .ng-ann{grid-template-columns:1fr}
  .ng-altro{grid-template-columns:1fr}
  .mg-info{grid-template-columns:1fr}}
@media(max-width:560px){
  .ng-cat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ng-ogg .ng-riga{flex-direction:column;align-items:flex-start;gap:2px}}

/* ═══ MAGAZINE E SHOP ══════════════════════════════════════════════════════════════════════════ */
.mz-testa .pb-testa__foto img{object-position:50% 22%}   /* K7 Duomo, verticale: la cupola e la testata FUL sopra il titolo */
.mz-testa .pb-h1{max-width:12em}

/* 3 · COSA C'È DENTRO */
.mz-dentro{padding-top:var(--sezione)}
.mz-rub{list-style:none;margin:0 0 clamp(44px,5vw,84px);padding:16px 0 0;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:6px 0;
  font-size:clamp(1.15rem,1.7vw,1.75rem);font-weight:600;letter-spacing:-.03em;line-height:1.2;text-transform:uppercase}
/* Francesco 30/10 («fai le cose per bene»): le rubriche a 3.4rem gridavano quanto il titolo e lo schiacciavano; ora sono
   un indice, un gradino sotto. E il titolo va su due righe fisse al computer, ⛔ una riga sola che galleggia sotto un buco */
.mz-dentro .pb-sez>h2{max-width:none}
.mz-a{display:block}
.mz-rub li{display:inline-flex;align-items:center;white-space:nowrap}
.mz-rub li:not(:last-child)::after{content:"";width:.24em;height:.24em;margin:0 .42em;border-radius:50%;background:var(--arancio);flex:none}
.mz-gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:clamp(36px,4vw,64px);align-items:stretch}
.mz-g{grid-column:var(--col);margin:0;display:flex;flex-direction:column;min-width:0}
.mz-g__f{position:relative;flex:1;overflow:clip;background:var(--sporco)}
.mz-g__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* la doppia pagina detta l'altezza della riga e ⛔ si taglia: è carta stampata, con la sua ombra */
.mz-g--doppia .mz-g__f{flex:none;aspect-ratio:1500/1058;background:#fff;
  box-shadow:0 1px 2px rgba(24,18,12,.16),0 22px 44px -24px rgba(24,18,12,.42);transition:transform .6s var(--e),box-shadow .6s var(--e)}
@media(hover:hover){.mz-g--doppia:hover .mz-g__f{transform:translateY(-6px);box-shadow:0 1px 2px rgba(24,18,12,.16),0 34px 60px -26px rgba(24,18,12,.5)}}
.mz-g figcaption{margin-top:14px;font-size:.8125rem;line-height:1.4;color:var(--grigio);text-wrap:pretty}
.mz-g figcaption b{margin-right:6px;font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}

/* 4 · L'ABBONAMENTO: una fascia bassa sul nero */
.mz-abb{margin-top:var(--sezione);padding:clamp(64px,7vw,112px) 0;background:var(--carbone);color:#fff;overflow:clip}
.mz-abb__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:48px;align-items:center}
.mz-abb__txt{grid-column:1/7}
.mz-abb .pb-h2{max-width:12em}
.mz-abb__riga{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px clamp(24px,3vw,44px);margin-top:clamp(28px,3vw,44px)}
.mz-abb__prezzo{display:flex;align-items:baseline;gap:12px;margin:0}
.mz-abb__prezzo b{font-size:clamp(3.2rem,2rem + 3.6vw,5.6rem);font-weight:600;letter-spacing:-.06em;line-height:.8;font-variant-numeric:tabular-nums}
.mz-abb__prezzo span{font-size:.9375rem;color:var(--su-notte)}
.mz-abb__l{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.32);display:grid;gap:10px;
  font-size:clamp(1rem,1.1vw,1.1rem);font-weight:300;line-height:1.4}
.mz-abb__l li{display:flex;gap:12px;align-items:baseline}
.mz-abb__l li::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--arancio);flex:none;transform:translateY(-.08em)}
.mz-abb__nota{margin:20px 0 0;max-width:52ch;font-size:.875rem;line-height:1.5;color:var(--su-notte)}
.mz-abb__riv{grid-column:7/13;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(8px,1vw,16px);align-items:end}
.mz-abb__riv li{transform:translateY(calc(var(--k) * -14px));transition:transform .8s var(--e)}
.mz-abb__riv small{display:block;margin-top:14px;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--su-notte)}
@media(hover:hover){.mz-abb:hover .mz-abb__riv li{transform:translateY(calc(var(--k) * -14px - 10px)) rotate(calc((var(--k) - 1.5) * 2deg))}}

/* 2 · IL NEGOZIO: le tessere di 11-negozio, sotto la galleria degli arretrati, il link in fondo */
.mz-neg{padding-top:var(--sezione)}
.mz-neg .ng-tessere{margin-bottom:0}
.mz-arr{margin-top:clamp(64px,7vw,120px)}
.mz-neg__vai{display:flex;justify-content:flex-end;margin-top:clamp(24px,2.6vw,40px)}

/* 6 · LA CHIUSA: «Scopri FUL»; le voci con il sommario sotto il titolo */
.mz-fine{margin-top:var(--sezione)}
.sc__p{grid-column:1/10;grid-row:3;margin-top:10px;max-width:52ch;font-size:clamp(.95rem,1.05vw,1.05rem);font-weight:300;line-height:1.45;color:var(--grigio)}
.mz-fine .sc__foto{grid-row:1/4}.mz-fine .sc__fr{grid-row:1/4}

@media(max-width:1000px){
  .mz-abb__txt,.mz-abb__riv{grid-column:1/-1}
  .mz-abb__riv{max-width:560px}
}
@media(max-width:700px){
  .mz-rub{font-size:clamp(1.05rem,4.6vw,1.3rem)}
  .mz-a{display:inline}
  /* al telefono la galleria SCORRE di lato, una pagina alla volta, tutte alla stessa altezza */
  .mz-gal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
  .mz-gal::-webkit-scrollbar{display:none}
  .mz-g{flex:0 0 84%;scroll-snap-align:center}
  .mz-g__f,.mz-g--doppia .mz-g__f{flex:none;aspect-ratio:1500/1058}
  .mz-abb__riga .fb{flex:1 1 auto;justify-content:space-between}
  .mz-neg__vai{justify-content:stretch}.mz-neg__vai .fb{flex:1;justify-content:space-between}
  .sc__p{grid-column:1/10;grid-row:3;font-size:.9375rem}
  .mz-fine .sc__foto{grid-row:2/4}
}