/* FUL — pagina nuova · CATEGORIA (archivio.php, IT + EN), 02/11/2026. Viene DOPO home.css (lo accoda ful-nuova-archivio.php come dipendenza):
   le schede, il pezzo grande, la pill, il bottone e il cursore sono quelli della home. Qui: le variabili della home sulla pagina
   categoria (in home.css stanno su body:has(#home)), il CSS di v2/categoria.py copiato com'è, e in fondo le aggiunte del tema
   (testa delle pagine 2+, scheda senza foto, numeri di paginate_links). ⛔ articolo.css insieme: ridefinisce .cr */
body:has(#categoria){--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)}
body:has(#categoria){--v-foto:16px;--v-meta:12px;--v-tit:clamp(16px,1.4vw,20px);--v-tit-l:16px}

/* ═══ CATEGORIA ════════════════════════════════════════════════════════════════════════════════ */
/* LA TESTA: la testata vera ci sta sopra trasparente (--hd-h la misura il JS) */
.ca-testa{position:relative;overflow:clip;background:var(--carbone);color:#fff}
.ca-nome{margin:0;font-size:clamp(3.4rem,10.4vw,13rem);font-weight:600;letter-spacing:-.06em;line-height:.84;text-transform:uppercase}
.ca-nome__t{display:inline}
.ca-nw{white-space:nowrap}   /* al telefono va a capo PRIMA della «&», ⛔ «CULTURA &» sopra e «ARTE» da sola */
.ca-nome__t [class*=-mask]{padding:.1em 0 .3em;margin:-.1em 0 -.3em}   /* la maschera delle parole: aria per accenti e gambe */
.ca-nome .hm-cat__n{color:rgba(255,255,255,.7)}

/* A · COPERTINA: la foto a tutto schermo; il velo solo in alto (testata) e in basso (parole), il centro resta vivo */
.ca-testa--a{display:flex;align-items:flex-end;min-height:min(max(600px,88svh),1000px);padding:calc(var(--hd-h,150px) + 48px) 0 clamp(28px,3.4vw,52px)}
.ca-a__foto{position:absolute;inset:0}
.ca-a__foto img{width:100%;height:100%;object-fit:cover}
.ca-a__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,15,13,.62) 0,rgba(17,15,13,0) 26%,rgba(17,15,13,0) 42%,rgba(17,15,13,.8) 100%)}
.ca-a__in{position:relative}
.ca-a__pezzo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:24px;margin-top:clamp(28px,3.4vw,52px);padding-top:16px;
  border-top:1px solid rgba(255,255,255,.32);color:#fff;text-decoration:none}
.ca-a__k{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;grid-column:1;font-size:.8125rem;color:rgba(255,255,255,.75)}
.ca-a__k>span{white-space:nowrap}   /* «In copertina · 28/10» ⛔ si spezza dietro una pill lunga (Aperitivo & Cocktail) */
.ca-a__k .pl{color:#fff;border-color:rgba(255,255,255,.4)}
.ca-a__tit{grid-column:1;max-width:30ch;margin-top:var(--v-meta);font-size:clamp(1.25rem,1.9vw,1.9rem);font-weight:600;letter-spacing:-.04em;line-height:1.08;text-wrap:pretty;justify-self:start}
/* la sottolineatura sta sulle PAROLE, riga per riga (Francesco 29/10: «non deve sottolineare il nulla»): ⛔ sul riquadro del titolo, che è largo 30ch anche quando la riga è corta */
:is(.ca-a__tit,.ct__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)}
.ca-a__vai{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);transition:background-color .5s var(--e),color .5s var(--e)}
@media(hover:hover){:is(.ca-a__pezzo:hover .ca-a__tit,.ct__capo:hover .ct__tit) .ti{background-size:100% 2px}.ca-a__pezzo:hover .ca-a__vai{background:#fff;color:var(--carbone)}}


/* IL FILTRO (Francesco 29/10: le pill col pallino e il numero «bruttissime»): un INDICE di parole grandi, come il nome
   col suo numero in apice; le voci spente in grigio, quella scelta in nero, e il pallino arancio della rivista che
   SCIVOLA da una voce all'altra (il JS ne scrive la posizione). Resta attaccato sotto la testata scorrendo (--hd-c) */
.ca-filtri{position:sticky;top:var(--hd-c,0px);z-index:20;background:var(--carta);transition:box-shadow .3s}
.ca-filtri.su{box-shadow:0 1px 0 var(--filo)}
.ca-filtri__in{padding-block:clamp(20px,2.2vw,32px) clamp(16px,1.8vw,26px)}
.ca-filtri__lista{position:relative;display:flex;flex-wrap:nowrap;align-items:baseline;gap:6px clamp(14px,1.45vw,30px);margin-left:-20px;padding-left:20px;overflow-x:auto;scrollbar-width:none}
.ca-filtri__lista::-webkit-scrollbar{display:none}
.ca-f{flex:none;position:relative;padding:0;border:0;background:none;cursor:pointer;font:inherit;font-size:clamp(1.05rem,1.3vw,1.3rem);font-weight:600;letter-spacing:-.045em;line-height:1.15;
  color:rgba(20,20,20,.42);white-space:nowrap;transition:color .45s var(--e)}
.ca-f sup{position:relative;top:-.15em;margin-left:.22em;font-size:.4em;font-weight:600;letter-spacing:0;vertical-align:top}
.ca-f:hover,.ca-f[aria-pressed=true]{color:var(--ink)}
.ca-f:focus-visible{outline:2px solid var(--arancio);outline-offset:4px}
.ca-filtri__punto{position:absolute;left:0;top:0;width:9px;height:9px;border-radius:50%;background:var(--arancio);
  transform:translate(var(--px,6px),var(--py,12px));transition:transform .7s var(--e)}

/* I PEZZI: il ritmo delle sezioni della home, sulla carta */
.ca-corpo{padding:clamp(8px,1vw,16px) 0 var(--sezione)}
.ca-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.ca-gr{grid-template-columns:repeat(3,minmax(0,1fr));margin:clamp(40px,4vw,64px) 0 0;row-gap:56px;border-top:0;padding-top:0}
.ca-gr .pc__foto{aspect-ratio:3/2}
.ca-gr .pc__tit{font-size:clamp(1.15rem,1.4vw,1.4rem);letter-spacing:-.04em;line-height:1.1}
.ca-gr+.ct{margin-top:clamp(80px,8vw,140px)}

/* LE PAGINE: il bottone per andare avanti, e i numeri come sul sito */
.ca-pag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:clamp(80px,8vw,140px);padding-top:16px;border-top:1px solid var(--ink)}
.ca-pag__k{margin:0;font-size:.875rem;color:var(--grigio)}
.ca-pag__n{display:flex;align-items:center;gap:4px;font-size:.875rem;font-weight:600}
.ca-pag__n>*{display:grid;place-items:center;min-width:40px;height:40px;border-radius:99px;text-decoration:none;color:var(--ink)}
.ca-pag__n a{transition:background-color .3s}
.ca-pag__n a:hover{background:var(--carta-calda)}
.ca-pag__n [aria-current]{background:var(--ink);color:#fff}
.ca-pag__n .ca-pag__o{min-width:24px;color:var(--grigio)}

.hm-js .ca-testa :is(.ca-nome,.ca-a__pezzo){visibility:hidden}

/* sotto i 1280 le 11 voci ⛔ stanno in una riga: scorrono di lato e sfumano a destra, come al telefono (⛔ due righe con due voci sole sotto) */
@media(max-width:1279px){
  .ca-filtri__lista{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
}
@media(max-width:1000px){
  .ca-gr{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .ca-nome{font-size:15.5vw;line-height:.86}
  .ca-testa--a{min-height:min(max(560px,84svh),760px)}
  .ca-a__vai{width:44px;height:44px}
  .ca-a__tit{font-size:1.3rem}
  .ca-filtri__in{padding-block:16px 14px;padding-right:0}
  .ca-filtri__lista{padding-right:var(--pad,20px);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .ca-f{font-size:1.35rem}
  .ca-gr{grid-template-columns:minmax(0,1fr);row-gap:0;margin-top:28px;border-top:1px solid var(--filo)}
  .ca-gr .pc__foto{aspect-ratio:1/1}
  .ca-gr .pc__tit{font-size:1.2rem}
  .ca-gr+.ct{margin-top:72px}
  .ca-pag{flex-direction:column;align-items:stretch}
  .ca-pag .fb{justify-content:center;width:100%}
  .ca-pag__n{justify-content:center}
}

/* ═══ AGGIUNTE DEL TEMA (⛔ nel prototipo) ═══════════════════════════════════════════════════════════ */
/* B · dalla seconda pagina: ⛔ copertina, il nome sulla carta sotto la testata piena, e a che pagina sei */
.ca-testa--b{background:var(--carta);color:var(--ink);padding:calc(var(--hd-h,150px) + clamp(32px,4vw,64px)) 0 clamp(20px,2.4vw,36px)}
.ca-testa--b .ca-nome .hm-cat__n{color:var(--grigio)}
.ca-b__k{margin:clamp(16px,1.6vw,24px) 0 0;font-size:.875rem;color:var(--grigio)}
/* la scheda di un pezzo senza foto in evidenza: ⛔ scartata, il logo sul fondo al posto della foto */
.pc__foto .ca-vuota,.ct__foto .ca-vuota{position:absolute;inset:0;width:34%!important;height:auto!important;max-width:120px;margin:auto;object-fit:contain!important;opacity:.16;scale:1!important}
.ct__foto .ca-vuota{top:0;left:0}
/* i numeri di paginate_links(): la stessa grammatica dei numeri del prototipo */
.ca-pag__n .page-numbers{display:grid;place-items:center;min-width:40px;height:40px;border-radius:99px;text-decoration:none;color:var(--ink)}
.ca-pag__n .page-numbers.current{background:var(--ink);color:#fff}
.ca-pag__n .page-numbers.dots{min-width:24px;color:var(--grigio)}
.ca-vuota-t{padding:clamp(40px,5vw,80px) 0}