/* ═══ HOME — la grammatica di ful-agency.com (28/10/2026, terza strada) ══════════════════════════ */
body:has(#about){--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(#about){--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)}

/* ═══ ABOUT ════════════════════════════════════════════════════════════════════════════════════ */
/* i titoli di sezione: maiuscolo, stretti, come le parole grandi ma un gradino sotto */
.ab-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}
.ab-h3{margin:0;font-size:clamp(1.6rem,2.9vw,3.1rem);font-weight:600;letter-spacing:-.05em;line-height:1.02;text-wrap:balance}
:is(.ab-h1,.ab-cit,.ab-entra__tit,.ab-h3,.ab-lead){display:flow-root}
:is(.ab-h1,.ab-entra__tit) i{font-style:normal;color:var(--arancio)}

/* 1 · LA COPERTINA: la foto a tutto schermo, il velo solo in alto (testata) e in basso (parole) */
.ab-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)}
.ab-testa__foto{position:absolute;inset:0;z-index:-1;overflow:hidden}
.ab-testa__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}   /* F6 bottega: la rivista aperta al centro, dietro il titolo una foto e non lettere */
.ab-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,.88) 0,rgba(10,8,6,.6) 38%,rgba(10,8,6,.1) 70%,rgba(10,8,6,0) 85%)}
.ab-testa__in{position:relative}
.ab-testa__k{margin:0 0 clamp(20px,2vw,32px)}
.ab-h1{margin:0;max-width:13em;font-size:min(clamp(2.5rem,.9rem + 6.4vw,7.6rem),11.5svh);font-weight:600;text-transform:uppercase;
  letter-spacing:-.055em;line-height:.88;text-wrap:balance}
.ab-testa__piede{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:24px;align-items:end;
  margin-top:clamp(32px,3.4vw,56px);padding-top:16px;border-top:1px solid rgba(255,255,255,.32)}
.ab-testa__dek{grid-column:1/7;margin:0;max-width:44ch;font-size:clamp(1.05rem,1.25vw,1.3rem);font-weight:300;line-height:1.4;color:rgba(255,255,255,.82)}
.ab-testa__cta{grid-column:8/13;justify-self:end;display:flex;flex-wrap:wrap;gap:10px}
/* il bottone pieno, per l'azione che conta (sul nero: bianco; sul chiaro: carbone) */
.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 .ab-testa__in{visibility:hidden}

/* 2 · LA STORIA */
.ab-storia{padding:var(--sezione) 0 0}
.ab-storia .et{margin:0 0 clamp(28px,3vw,44px)}
.ab-cit{margin:0 0 clamp(52px,6vw,100px);max-width:15ch;font-size:clamp(2.6rem,7.4vw,8.6rem);font-weight:600;letter-spacing:-.06em;line-height:.86;
  text-transform:uppercase;text-wrap:balance}
.ab-storia__txt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:28px;border-top:1px solid var(--ink);padding-top:16px}
.ab-lead{grid-column:1/7;margin:0;font-size:clamp(1.3rem,1.9vw,1.9rem);font-weight:600;letter-spacing:-.035em;line-height:1.16;text-wrap:pretty}
.ab-due{grid-column:8/13;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.5;color:var(--grigio)}
.ab-due p{margin:0 0 1em}.ab-due p:last-child{margin:0}
/* la frase corretta come una bozza: «mai niente» si barra in arancio, e sopra compare la correzione (il tavolo della copertina) */
.ab-cit__corr{position:relative;display:inline-block;padding-top:.46em;white-space:nowrap}   /* lo spazio della correzione lo prende solo la sua riga */
.ab-cit__corr s{text-decoration:none;position:relative}
@font-face{font-family:"Caveat";src:url(caveat-latin.woff2) format("woff2");font-weight:400 700;font-display:swap}   /* OFL 1.1, Google Fonts: la penna */
.ab-cit__riga{position:absolute;left:-.05em;width:calc(100% + .1em);top:30%;height:.3em;overflow:visible}
.ab-cit__riga path{fill:none;stroke:var(--arancio);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;   /* in unità del disegno: alto .3em = 20, quindi 2,6 ≈ .04em, un tratto di penna */
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(.7,0,.2,1)}
.ab-cit:not(.corretta) .ab-cit__riga{visibility:hidden}   /* ⛔ il pallino della punta prima che il tratto parta */
.ab-cit.corretta .ab-cit__riga path{stroke-dashoffset:0}
.ab-cit__corr em{position:absolute;left:.2em;top:.02em;font-family:"Caveat",cursive;font-weight:600;font-style:normal;font-size:.5em;letter-spacing:0;line-height:1;text-transform:none;
  color:var(--arancio);white-space:nowrap;transform-origin:0 100%;
  opacity:0;transform:translateY(18px) rotate(-3deg);filter:blur(6px);transition:opacity .6s .45s,transform .6s .45s cubic-bezier(.2,.7,.2,1),filter .6s .45s}
.ab-cit.corretta em{opacity:1;transform:rotate(-3deg);filter:none}
/* le foto vere del 2014: polaroid ingiallite che escono dai nomi, al passaggio del mouse o al tocco */
.ab-nome{all:unset;position:relative;cursor:pointer;text-decoration:underline dotted var(--arancio);text-decoration-thickness:2px;text-underline-offset:.18em}
.ab-nome:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}
.ab-pol{position:absolute;z-index:5;left:50%;bottom:calc(100% + 12px);width:clamp(140px,11vw,172px);padding:9px 9px 0;pointer-events:none;
  background:linear-gradient(170deg,#f7f0de,#ebdfc2);box-shadow:0 1px 1px rgba(0,0,0,.08),0 18px 30px -12px rgba(40,25,10,.5);
  opacity:0;transform:translate(calc(-50% + var(--dx,0px)),14px) rotate(0deg);transition:opacity .3s,transform .45s cubic-bezier(.2,.7,.2,1)}
.ab-nome:hover .ab-pol,.ab-nome:focus-visible .ab-pol,.ab-nome.aperta .ab-pol{opacity:1;transform:translate(calc(-50% + var(--dx,0px)),0) rotate(var(--r))}
.ab-pol__f{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#3a3127}
.ab-pol__f img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.5) saturate(.7) contrast(.9) brightness(1.04)}
.ab-pol__f::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;
  background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(110,70,25,.38)),linear-gradient(160deg,rgba(255,220,150,.18),rgba(120,90,40,.12))}
.ab-pol__d{display:block;padding:8px 0 10px;font-family:"Caveat",cursive;font-size:1.35rem;font-weight:600;letter-spacing:0;line-height:1;color:#2b2722;text-align:center;transform:rotate(-1.5deg)}

/* 3 · LA SCENA: cinque date su un filetto che si riempie — a PASSI: cinque pose esatte a
   p = 0 · .22 · .44 · .66 · .88 (t intero), _moto2.js aggancia lì (data-passi="5" data-fine=".88") */
.ab-scena{height:calc(100vh * 4.4);position:relative;margin-top:var(--sezione);background:var(--carbone);color:#fff;
  --q:min(1, calc(var(--p,1) / .88)); --t:calc(var(--q) * 4)}
.ab-k{--in:clamp(0, (var(--t) - var(--i) + .5) * 4, 1); --out:clamp(0, (var(--i) + .5 - var(--t)) * 4, 1)}
.ab-scena__fermo{position:sticky;top:0;height:100vh;width:var(--wrap);margin-inline:auto;padding-block:calc(var(--hd-cond,80px) + clamp(20px,4vh,44px)) 34px;   /* sotto la testata condensata: la misura il JS */
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(28px,5vw,90px);
  grid-template-areas:"testa foto" "anno foto" "testo foto" "linea linea";grid-template-rows:1fr auto 1fr auto}
.ab-scena__testa{grid-area:testa;align-self:end}
.ab-scena__testa .et{margin:0 0 18px}
.ab-anni{grid-area:anno;position:relative;height:clamp(5.5rem,3.6rem + 8vw,11rem);overflow:hidden;margin-top:clamp(14px,3vh,34px)}
.ab-anni div{position:absolute;inset:0;display:flex;align-items:flex-end;will-change:transform;
  --x:calc(var(--i) - var(--t)); /* a contachilometri: fermo per ±0,25, poi l'anno nuovo spinge via il vecchio, senza vuoti */
  transform:translate3d(0, calc((clamp(0, var(--x) * 2 - .5, 1) + clamp(-1, var(--x) * 2 + .5, 0)) * 104%), 0)}
.ab-anni b{display:block;font-size:clamp(5rem,3rem + 8vw,11.5rem);font-weight:600;letter-spacing:-.065em;line-height:.8}
.ab-anni b i{font-style:normal;color:var(--arancio)}
.ab-testi{grid-area:testo;display:grid;align-self:start;margin-top:18px;max-width:40ch}
.ab-testi>div{grid-area:1/1;opacity:min(var(--in), var(--out));will-change:transform,opacity;
  transform:translate3d(0, calc((1 - var(--in)) * 18px - (1 - var(--out)) * 18px), 0)}
.ab-testi h3{margin:0 0 10px;font-size:clamp(1.3rem,1.8vw,1.8rem);font-weight:600;letter-spacing:-.04em;line-height:1.08}
.ab-testi p{margin:0;font-size:clamp(1rem,1.15vw,1.15rem);font-weight:300;line-height:1.45;color:var(--su-notte)}
.ab-testi .ab-anno-min{display:none}
.ab-foto{grid-area:foto;position:relative;align-self:center;justify-self:end;height:100%;max-height:calc(100vh - 230px);
  aspect-ratio:1/1;max-width:100%;overflow:hidden;background:#241d17}
.ab-q{position:absolute;inset:0;margin:0;overflow:hidden;z-index:var(--i);
  --w:clamp(0, (var(--t) - var(--i) + .6) * 2.2, 1);
  clip-path:inset(calc((1 - var(--w)) * 100%) 0 0 0)}
.ab-q__in{position:absolute;inset:0;will-change:transform;transform:scale(calc(1.14 - var(--w) * .14))}
.ab-q__in img{display:block}
/* l'inizio: FUL 9 (2013) sulla pagina di giornale delle free press, che resta scura dietro */
.ab-q__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(.35) brightness(.5)}
.ab-cop--9{height:72%;aspect-ratio:678/960}
/* il sito: le foto degli articoli a mosaico, che salgono una dopo l'altra */
.ab-q--sito .ab-q__in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;background:#241d17}
.ab-q--sito img{width:100%;height:100%;object-fit:cover;transform:translate3d(0,calc((1 - var(--w)) * (30% + var(--j) * 12%)),0)}
/* le copertine: si aprono a ventaglio mentre il quadro sale */
.ab-q--carta .ab-q__in,.ab-q--inizio .ab-q__in{background:#241d17}
.ab-cop{position:absolute;left:50%;top:50%;height:66%;width:auto;aspect-ratio:480/679;object-fit:cover;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  transform:translate(-50%,-50%) translate(calc(var(--x) * var(--w)),calc(var(--y) * var(--w))) rotate(calc(var(--r) * var(--w)))}

.ab-q--festa img{width:100%;height:100%;object-fit:cover}
/* 2021: F.U.C.K. largo in alto, i due libri sotto, che salgono uno dopo l'altro */
.ab-q--libri .ab-q__in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;background:#241d17}
.ab-l{width:100%;height:100%;object-fit:cover;transform:translate3d(0,calc((1 - var(--w)) * (30% + var(--j) * 12%)),0)}
.ab-l--f{grid-column:1/3;object-position:50% 55%}
.ab-l--c{object-position:42% 62%}
.ab-l--s{object-position:80% 55%}
.ab-q figcaption{z-index:3;position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;
  background:rgba(10,8,6,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;
  font-size:.6875rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.ab-q figcaption::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--arancio)}
.ab-linea{grid-area:linea;position:relative;list-style:none;margin:34px 0 0;padding:0 0 26px;height:1px;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 0 0/100% 1px no-repeat}
.ab-linea::before{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--arancio);transform:scaleX(var(--q));transform-origin:left}
.ab-linea li{position:absolute;top:-5px;left:calc(var(--i) * 25%);font-size:.75rem;font-weight:600;letter-spacing:.02em}
.ab-linea li::before{content:"";display:block;width:11px;height:11px;border-radius:50%;background:var(--carbone);border:1px solid #fff;margin-left:-5.5px}
.ab-linea li::after{content:"";position:absolute;top:0;left:-5.5px;width:13px;height:13px;border-radius:50%;background:var(--arancio);opacity:var(--in)}
.ab-linea li span{position:absolute;top:22px;transform:translateX(-50%);opacity:calc(.4 + .6 * var(--in))}
.ab-linea li:first-child span{transform:none;left:-5px}
.ab-linea li:last-child span{transform:translateX(-100%);left:6px}

/* 3b · IL MURO DELLE COPERTINE: sul nero, attaccato alla scena; due file che il giro della pagina fa scorrere in versi opposti */
.ab-muro{background:var(--carbone);color:#fff;padding:clamp(40px,5vw,80px) 0 var(--sezione);overflow:clip}
.ab-muro__testa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:18px;align-items:end;
  border-top:1px solid rgba(255,255,255,.32);padding-top:16px;margin-bottom:clamp(40px,5vw,72px)}
.ab-muro__testa .et{grid-column:1/-1;margin:0}
.ab-muro__testa .ab-h2{grid-column:1/8;max-width:13em}
.ab-muro__dek{grid-column:9/13;margin:0;max-width:36ch;font-size:clamp(1rem,1.15vw,1.15rem);font-weight:300;line-height:1.45;color:var(--su-notte)}
.ab-fila{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,1.4vw,22px);width:max-content;will-change:transform}
.ab-fila+.ab-fila{margin-top:clamp(18px,2.2vw,34px)}
.ab-fila[data-verso="1"]{margin-left:calc(-1 * clamp(150px,15vw,250px))}
.ab-fila li{width:clamp(150px,15vw,250px)}
.ab-fila figure{margin:0;aspect-ratio:480/679;overflow:hidden;background:#241d17;transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s}
.ab-fila img{width:100%;height:100%;object-fit:cover}
.ab-fila p{margin:12px 0 0;font-size:.75rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--su-notte);transition:color .4s}
.ab-fila p b{color:#fff;margin-right:.4em;transition:color .4s}
@media(hover:hover){
  .ab-fila li:hover figure{transform:translateY(-10px) rotate(-1.5deg);box-shadow:0 26px 50px -18px rgba(0,0,0,.8)}
  .ab-fila li:hover p b{color:var(--arancio)}
}

/* 4 · LA REDAZIONE: il nome grande col numero, poi nove ritratti a mattoni (cinque sopra, quattro sotto, sfalsati di mezzo passo) */
.ab-red{padding-top:var(--sezione)}
.hm-cat__nome [data-pg]{display:inline-block;overflow:clip;padding:.08em .02em .3em 0;margin-bottom:-.25em;vertical-align:top}
.ab-red__intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:20px;align-items:end;
  border-top:1px solid var(--ink);padding-top:16px;margin-bottom:clamp(52px,6vw,96px)}
.ab-red__intro .ab-h3{grid-column:1/7;max-width:18ch}
.ab-red__dek{grid-column:8/13;margin:0;max-width:46ch;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.45;color:var(--grigio)}
.ab-team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4vw,64px) 16px}
/* il fondo è la notte delle miniature degli autori; il passaggio accende l'arancio da sotto e ridà i colori */
.ab-p__foto{position:relative;aspect-ratio:4/5;margin:0;overflow:clip;background:#1A1511;isolation:isolate}
.ab-p__foto::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--arancio);clip-path:inset(100% 0 0 0);transition:clip-path .8s cubic-bezier(.22,1,.36,1)}
.ab-p__foto img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;transform-origin:50% 100%;
  filter:grayscale(1) contrast(1.08) brightness(.96);transition:filter .6s,scale .9s cubic-bezier(.22,1,.36,1)}
.ab-p.on .ab-p__foto::before{clip-path:inset(0)}
.ab-p.on .ab-p__foto img{filter:none;scale:1.05}
.ab-p.on .ab-p__nome{color:var(--arancio)}
.ab-p__nome{transition:color .4s}
@media(hover:hover){
  .ab-p:hover .ab-p__foto::before{clip-path:inset(0)}
  .ab-p:hover .ab-p__foto img{filter:none;scale:1.05}
  .ab-p:hover .ab-p__nome{color:var(--arancio)}
}
.ab-p__dida{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;margin:var(--v-foto) 0 0}
.ab-p__nome{grid-column:1;grid-row:1;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:600;letter-spacing:-.035em;line-height:1.1}
.ab-p__n{grid-column:2;grid-row:1;font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;padding-top:.2em}
.ab-p__dida span{grid-column:1/-1;margin-top:6px;font-size:.8125rem;line-height:1.35;color:var(--grigio)}

/* 5 · FUL IN NUMERI: la tavola del media kit, due righe da quattro (online, carta), poi di cosa scriviamo */
.ab-conti{padding-top:var(--sezione)}
.ab-conti__testa .et{margin:0 0 clamp(20px,2vw,32px)}
.ab-conti__testa .pg{margin:0 0 clamp(40px,5vw,80px)}
.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)}
.ab-cosa__testa{grid-column:1/5}
.ab-cosa__testa .ab-h3{margin:0 0 18px}
.ab-cosa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:28px;margin-top:clamp(40px,5vw,80px)}
.ab-cosa__dek{margin:0;max-width:34ch;font-size:clamp(1.02rem,1.2vw,1.2rem);font-weight:300;line-height:1.45;color:var(--grigio)}
.ab-barre{grid-column:6/13;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ab-barre li{display:grid;grid-template-columns:2.6rem minmax(0,10rem) minmax(0,1fr) 3rem;align-items:center;column-gap:16px;padding:14px 0;border-bottom:1px solid var(--filo)}
.ab-barre b{font-weight:600;font-size:clamp(.98rem,1.1vw,1.1rem);letter-spacing:-.02em}
.ab-b__n{font-size:.75rem!important;letter-spacing:0!important;font-variant-numeric:tabular-nums;color:var(--grigio)}
.ab-barre em{font-style:normal;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ab-barra{height:2px;position:relative;background:var(--filo)}
.ab-barra i{position:absolute;left:0;top:-1px;bottom:-1px;width:calc(var(--v) * 100%);background:var(--ink);transform-origin:left}
.ab-barra i::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--arancio)}

/* 6 · ENTRA IN FUL: sul nero, il nastro dei mestieri in testa */
.ab-entra{margin-top:var(--sezione);background:var(--carbone);color:#fff;overflow:clip}
.ab-nastro{overflow:hidden;border-bottom:1px solid rgba(255,255,255,.16);padding:18px 0}
.ab-nastro__in{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);width:max-content;animation:ab-nastro 38s linear infinite;
  font-size:clamp(2rem,4.4vw,4.6rem);font-weight:600;letter-spacing:-.055em;line-height:1;text-transform:uppercase}
.ab-nastro__in i{flex:none;width:.22em;height:.22em;border-radius:50%;background:var(--arancio)}
@keyframes ab-nastro{to{transform:translateX(-50%)}}
.ab-entra__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;row-gap:56px;align-items:center;padding:var(--sezione) 0}
.ab-entra__corpo{grid-column:1/7}
.ab-entra__tit{margin:0 0 clamp(28px,3vw,44px);font-size:clamp(2.3rem,4.6vw,5.2rem);font-weight:600;letter-spacing:-.06em;line-height:.88;text-transform:uppercase;text-wrap:balance}
.ab-entra__dek{margin:0 0 32px;max-width:44ch;font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:300;line-height:1.42;color:var(--su-notte)}
.ab-manda{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid rgba(255,255,255,.32);max-width:48ch}
.ab-manda li{display:grid;grid-template-columns:3rem minmax(0,1fr);padding:14px 0;border-bottom:1px solid rgba(255,255,255,.16);font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.42}
.ab-manda b{font-size:.75rem;font-weight:600;padding-top:.3em;color:var(--arancio)}
.ab-feste{grid-column:8/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ab-feste>div{display:flex;flex-direction:column;gap:16px}
.ab-feste>div:last-child{padding-top:clamp(40px,8vw,130px)}
.ab-f{position:relative;aspect-ratio:4/5;margin:0;overflow:clip;background:#222}
.ab-f--q{aspect-ratio:1/1}
.ab-f img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover}

/* 7 · LA CHIUSA: la fascia «Scopri FUL» della home, rovesciata in chiaro (dopo viene il banner nero) */
.ab-fine{margin-top:0;background:transparent;color:var(--ink)}   /* ⛔ margine e imbottitura insieme: il vuoto raddoppiava */
.ab-fine .sc{border-top-color:var(--ink)}
.ab-fine .sc li+li,.ab-fine .sc li:last-child{border-color:var(--filo)}
.ab-fine .sc__k{color:var(--grigio)}
.ab-fine .sc__k .pc__n{color:var(--ink)}
.ab-fine .sc__foto{background:var(--sporco)}
.ab-fine .sc__fr{border-color:var(--filetto-forte)}

@media(max-width:1000px){
  .ab-testa__dek,.ab-testa__cta{grid-column:1/-1;justify-self:start}
  .ab-lead,.ab-due,.ab-red__intro .ab-h3,.ab-red__dek,.ab-cosa__testa,.ab-barre,.ab-entra__corpo,.ab-feste,.ab-muro__testa .ab-h2,.ab-muro__dek,.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}
}
@media(max-width:900px){
  .ab-scena{height:calc(100vh * 4)}
  .ab-scena__fermo{grid-template-columns:1fr;grid-template-areas:"testa" "anno" "foto" "testo" "linea";
    grid-template-rows:auto auto minmax(0,1fr) auto auto;padding-block:calc(var(--hd-cond,130px) + 18px) 22px}
  .ab-anni{height:clamp(4.2rem,17vw,6.5rem);margin:14px 0 12px}
  .ab-anni b{font-size:clamp(4.6rem,19vw,7.5rem)}
  .ab-foto{justify-self:stretch;max-height:none;aspect-ratio:auto;height:100%;min-height:0}
  .ab-cop{height:74%}.ab-cop--9{height:78%}
  /* 2021 al telefono: due sole, affiancate e quasi quadrate (sua, 29/10: «meno tagliate, al massimo F.U.C.K. e Crafting») */
  .ab-q--libri .ab-q__in{grid-template-columns:1.15fr 1fr;grid-template-rows:minmax(0,1fr)}
  .ab-l--f{grid-column:auto;object-position:42% 50%}.ab-q__in .ab-l--s{display:none}.ab-l--c{object-position:47% 60%}
  .ab-testi{margin-top:14px}
  .ab-linea{margin-top:22px}
}
@media(max-width:700px){
  .ab-num b{font-size:clamp(2rem,10vw,2.6rem)}
  .ab-muro__testa .ab-h2{font-size:1.75rem}
  .ab-testa{min-height:min(max(560px,92svh),900px)}
  .ab-testa__cta .fb{flex:1 1 auto;justify-content:space-between}
  .ab-scena__testa .ab-h2{font-size:1.75rem}
  /* al telefono l'interlinea resta regolare: la correzione si appoggia SOPRA il testo, con un alone di carta per leggersi (sua, 29/10) */
  .ab-cit__corr{padding-top:0}.ab-cit__corr em{top:auto;bottom:calc(100% - .34em);z-index:2;font-size:.56em;
    text-shadow:2px 0px 0 #fff,-2px 0px 0 #fff,0px 2px 0 #fff,0px -2px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff,3px 0px 0 #fff,-3px 0px 0 #fff,0px 3px 0 #fff,0px -3px 0 #fff,0 0 8px #fff}
  .ab-team{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
  .ab-p:last-child{grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
  .ab-barre li{grid-template-columns:2.2rem minmax(0,1fr) 3rem;row-gap:10px;column-gap:10px}
  .ab-barre .ab-barra{grid-column:2/-1;grid-row:2}
  .ab-feste>div:last-child{padding-top:60px}
}
@media (prefers-reduced-motion:reduce){
  .ab-nastro__in{animation:none}
  .ab-fila{flex-wrap:wrap;width:auto;padding-inline:var(--gronda,20px)}.ab-fila[data-verso="1"]{margin-left:0}
  .ab-scena{height:auto}
  .ab-scena__fermo{position:relative;height:auto;grid-template-rows:auto}
  .ab-anni,.ab-linea{display:none}
  .ab-foto{height:70vh}
  .ab-q{--w:1;clip-path:none;opacity:0}.ab-q:last-child{opacity:1}
  .ab-testi{display:block;max-width:none}
  .ab-testi>div{opacity:1;transform:none;margin-bottom:1.2em}
  .ab-testi .ab-anno-min{display:inline}
}

/* «BY THE NUMBERS» al telefono andava a capo a metà parola (NUMBE/RS): le lettere sono spezzate una per una per il
   movimento, quindi il titolo si rimpicciolisce quanto basta a tenere la riga intera (01/11/2026) */
#ab-num-t{font-size:min(clamp(3.1rem,11vw,12.5rem),10.8vw)}