.top{padding-top:calc(var(--head-h) + var(--s-9));padding-bottom:calc(var(--s-6) + var(--s-8) + var(--s-4))}
.top__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6)}
.top__d .mk{display:inline-block}
.top__lead{padding-bottom:var(--s-1);font-size:var(--t-para);line-height:var(--lh-para-md)}
.top__lead a{padding-block:var(--s-3);margin-block:calc(var(--s-3) * -1)}
.top__lead .tp,.jl__coda .tp{margin-inline:-.14em}
.top__rig{margin-top:var(--s-7)}

.fea{background:var(--ink);padding-top:var(--s-9);padding-bottom:var(--s-9);overflow:hidden}
.fea__row{display:grid;grid-template-columns:30% minmax(0,1fr);align-items:start}
.fea__head{padding-right:var(--s-6)}
.fea__h{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-weight:800;text-transform:uppercase}
.fea__note{margin-top:var(--s-2);font-size:var(--t-para-md);line-height:var(--lh-para-md);opacity:.62}
.fea__nav{display:flex;margin-top:var(--s-5)}
.fea .slz__track{gap:calc(var(--s-3) * 3)} /* 36px: i titoli di due storie vicine non si toccano */
.fea__row.is-drag .slz__track{transition:none;cursor:grabbing}
.fea__card{position:relative;display:block;width:42vw;color:inherit;text-decoration:none}
.fea__fig{position:relative;display:block;width:100%}
.fea__fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fea__tag{
  position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;
  height:auto;min-height:var(--sp-in);max-width:100%;
  padding:0 var(--sp-pad);
  white-space:normal;
  background:var(--paper);color:var(--ink);
}
.fea__meta{margin-top:var(--s-3);font-size:var(--t-menu);line-height:1.4;letter-spacing:var(--tr-menu);text-transform:uppercase;font-weight:700}
/* titoli delle storie: corpo e peso misurati, sotto il titolo di sezione */
.fea__t{
  display:block;margin-top:var(--s-2);padding-right:var(--s-4);
  font-size:clamp(20px,calc(var(--t-h2) * .68),24px);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);
  font-weight:600;
}
.fea__go{
  margin-top:var(--s-3);
  opacity:.01;transform:translateY(6px);
  transition:opacity var(--t-quick) var(--e-out),transform var(--t-quick) var(--e-out);
}
.fea__card:hover .fea__go,.fea__card:focus-visible .fea__go{opacity:1;transform:none}
.fea__card:hover .fea__go .sp-quad,.fea__card:focus-visible .fea__go .sp-quad{width:calc(100% - var(--sp-gap) * 2)}
.fea__card:hover .fea__go > :not(.sp-quad),.fea__card:focus-visible .fea__go > :not(.sp-quad){color:var(--paper)}
@media (hover:none){
  .fea__go{opacity:1;transform:none}
}

.jl{background:var(--ink);padding-top:var(--s-9);padding-bottom:var(--s-11)}
.jl__bar{margin-bottom:var(--s-9)}
@media (max-width:1180px){
  .jl__bar .sp-filtro{flex-wrap:wrap;height:auto;padding-block:var(--sp-aria);gap:var(--sp-aria) var(--sp-pad)}
  .jl__bar .sp-filtro__viste{flex-wrap:wrap}
}
/* quando i temi vanno a capo, ogni cella ha il suo bordo su tutti i lati:
   fessure da 1px su uno sfondo a righe, e le celle si allargano a riempire la riga */
@media (max-width:1180px), (pointer:coarse){
  .jl__bar .sp-filtro__viste{gap:1px;padding:1px;border:0;background:var(--sp-orlo)}
  .jl__bar .sp-filtro__viste button{flex:1 1 auto;justify-content:center;border:0;background:var(--paper)}
  .jl__bar .sp-filtro__viste button + button{border-left:0}
  .jl__bar .sp-filtro__viste button[aria-pressed="true"]{background:var(--ink)}
}
@media (pointer:coarse){
  .jl__bar .sp-filtro{height:auto;padding-block:var(--sp-aria);align-items:flex-start}
  .jl__bar .sp-filtro__eti{padding-top:calc((var(--dito) - 1em) / 2)}
  .jl__bar .sp-filtro__viste{flex-wrap:wrap}
  .jl__bar .sp-filtro__viste button{
    display:inline-flex;align-items:center;
    min-height:var(--dito);
  }
}

.jl__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;column-gap:var(--s-6);row-gap:var(--s-10);
}
.jc{display:block;grid-column:span 1}
.jc[hidden]{display:none}
.jc__fig{position:relative;width:100%}
.jc__fig img{display:block;width:100%;height:auto}
.jc__pill{
  position:absolute;left:0;top:0;
  display:inline-flex;align-items:center;
  height:auto;min-height:var(--sp-in);max-width:100%;
  padding:0 var(--sp-pad);
  white-space:normal;
  background:var(--paper);color:var(--ink);
}
.jc__t{
  margin-top:var(--s-2);
  font-size:clamp(20px,calc(var(--t-h2) * .68),24px);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);
  font-weight:600;text-transform:none;
  font-variation-settings:"wdth" 100;font-stretch:100%;
}
.jc__t .band{display:block;padding-inline:var(--filo);padding-block:var(--s-0)}
/* gli span interni (.san/.band) hanno un peso 800 globale: qui seguono il titolo */
.jc__t .san,.jc__t .band,.fea__t .san,.fea__t .band{font-weight:inherit}
.jc__m{
  margin-top:var(--s-3);padding-inline:var(--filo);
  font-size:var(--t-menu);line-height:1.4;
  letter-spacing:var(--tr-menu);text-transform:uppercase;font-weight:700;
}
.jc__m .jc__sub{font-weight:400;opacity:.62}
.jl__void{grid-column:1 / -1;padding-left:var(--filo);font-size:var(--t-para);line-height:var(--lh-para)}
.jl__more{margin-top:var(--s-9);display:flex;justify-content:center}
.jl__more[hidden]{display:none}

.jl__end{margin-top:var(--s-11)}
.jl__coda{
  margin-top:var(--s-4);padding-left:var(--filo);padding-right:var(--filo);
  font-size:var(--t-para);line-height:var(--lh-para);
}
.jl__coda a{padding-block:var(--s-3);margin-block:calc(var(--s-3) * -1)}

.ev{background:var(--ink);padding-top:var(--s-11);padding-bottom:var(--s-11)}
.ev__h{font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);font-weight:800;text-transform:uppercase;padding-left:var(--filo)}
.ev__lead{margin-top:var(--s-2);padding-left:var(--filo);font-size:var(--t-para);line-height:var(--lh-para);opacity:.62}
.ev__rig{margin-top:var(--s-6)}
.ev__list{margin-top:0}
.ev__row{
  display:grid;
  grid-template-columns:30% 20% 20% 30%;
  align-items:baseline;
  padding-block:var(--s-4);
  border-bottom:1px solid var(--linea);
}
.ev__row > *{padding-inline:var(--filo)}
.ev__when{font-size:var(--t-menu);line-height:1.4;letter-spacing:var(--tr-menu);text-transform:uppercase;font-weight:700}
.ev__what{font-size:var(--t-para);line-height:var(--lh-para);font-weight:700}
.ev__film,.ev__note{font-size:var(--t-para-md);line-height:var(--lh-para-md);opacity:.62}
.ev__head .ev__when,.ev__head > *{font-size:var(--t-menu);line-height:1.4;letter-spacing:var(--tr-menu);text-transform:uppercase;font-weight:700;opacity:.62}
.ev__row--vuoto .ev__what,.ev__row--vuoto .ev__film,
.ev__row--vuoto .ev__note,.ev__row--vuoto .ev__when{opacity:.5}
.ev__list--vuota{border-top:1px solid var(--linea)}

.pk{background:var(--ink);padding-top:var(--s-11);padding-bottom:var(--s-11)}
.pk__h{padding-left:var(--filo);max-width:24ch}
.pk__rig{margin-top:var(--s-6)}
.pk__act{margin-top:var(--s-6);padding-left:var(--filo);display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.pk__note{font-size:var(--t-menu);line-height:1.4;letter-spacing:var(--tr-menu);text-transform:uppercase;font-weight:700;opacity:.62}

/* 1023 e non 1024: _sistema.css riapre il desktop a min-width:1024px (righe 1026 e 1492).
   A esattamente 1024px valevano tutte e due le fasce, e la pagina prendeva la tipografia
   desktop dal sistema col layout tablet di questo foglio. */
@media (max-width:1023px){
  .top{padding-bottom:calc(var(--s-5) + var(--s-8) + var(--s-4))}
  .top__row{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .top__row .top__lead{width:100%;text-align:left;padding-inline-end:0;padding-bottom:0}
  .fea{padding-top:var(--s-7);padding-bottom:var(--s-7)}
  .fea__row{grid-template-columns:minmax(0,1fr);row-gap:var(--s-5)}
  .fea__head{padding-right:0}
  .fea__nav{margin-top:var(--s-3)}
  .fea__card{width:78vw}
  .jl{padding-top:var(--s-7);padding-bottom:var(--s-9)}
  .jl__bar{margin-bottom:var(--s-7)}
  .jl__grid{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:var(--s-4)}
  .jc,.jl__void{grid-column:1}
  .jc{margin-top:var(--s-5)}
  .ev{padding-top:var(--s-9);padding-bottom:var(--s-9)}
  /* niente altezza minima centrata su tablet e telefono: lasciava vuoti sopra il titolo e sotto l'ultima riga */
  .ev.schermo-80{min-height:auto;align-content:start}
  .ev__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:var(--s-1)}
  .ev__head{display:none}
  .pk{padding-top:var(--s-9);padding-bottom:var(--s-9)}
  .pk__act{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
}
@media (max-width:767px){
  .top{padding-bottom:calc(var(--s-5) + var(--s-8))}
}