/* ============================================================
   BLOG
   Tre colonne che NON partono alla stessa altezza. Lo scarto e' la
   composizione: allineate in cima diventerebbero una tabella, e una
   tabella di articoli si legge come un elenco invece che come una
   pagina.
   Da 900 pixel in giu' lo scarto sparisce, perche' in colonna sola
   non e' piu' una composizione ma solo un buco.
   ============================================================ */

.blog-griglia{
  display:grid; gap:clamp(28px,3.6vw,54px);
  grid-template-columns:1fr;
  align-items:start;
}
@media(min-width:900px){
  .blog-griglia{grid-template-columns:1fr 1fr minmax(200px,.66fr)}
  /* Lo scarto: scende la SECONDA colonna, non la prima. La prima
     porta l'articolo fissato e i piu' recenti, e deve restare il
     punto piu' alto della pagina: se scendeva lei, il pezzo piu'
     vecchio finiva in cima a destra. La terza sale appena. */
  .blog-scesa{margin-top:clamp(56px,7vw,104px)}
  .blog-lato{margin-top:clamp(8px,1.4vw,20px)}
}
.blog-colonna{display:grid; gap:clamp(30px,3.8vw,58px); align-content:start}

/* ---------- un articolo ---------- */
.posta{display:grid; gap:12px}
.posta-media{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r3); border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--sup-3),var(--sup-1));
  aspect-ratio:16/10;
  box-shadow:var(--om-1);
}
.posta-grande .posta-media{aspect-ratio:4/3}
.posta-foto{
  position:absolute; inset:0; display:block;
  background-size:cover; background-position:50% 45%;
  transition:transform var(--d4) var(--curva-entra);
}
.posta-media:hover .posta-foto,
.posta-media:focus-visible .posta-foto{transform:scale(1.035)}

/* Il filo di luce sul bordo alto, come sulle altre lastre. */
.posta-media::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:1;
  background:linear-gradient(90deg,var(--teal),var(--violet));
  opacity:0; transition:opacity var(--d2) var(--curva-secca);
}
.posta-media:hover::before,.posta-media:focus-visible::before{opacity:.85}

.posta-data{
  margin:0; font-family:var(--m); font-size:var(--t-mini); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--testo-tenue);
}
.posta-titolo{
  margin:0; font-family:var(--m); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(19px,2.1vw,26px); line-height:1.22;
}
.posta-grande .posta-titolo{font-size:clamp(21px,2.6vw,31px)}
.posta-titolo a{
  color:var(--testo); text-decoration:none;
  transition:color var(--d2) var(--curva-secca);
}
.posta-titolo a:hover,.posta-titolo a:focus-visible{color:var(--teal)}
.posta-sunto{
  margin:0; max-width:42ch;
  font-size:var(--t-s); line-height:1.62; color:var(--testo-soft);
}
.posta-vai{margin:2px 0 0}
.posta-vai a{
  font-family:var(--m); font-size:var(--t-xs); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); text-decoration:none;
}
.posta-vai a:hover,.posta-vai a:focus-visible{text-decoration:underline; text-underline-offset:4px}

/* ---------- la spalla ---------- */
.blog-lato{display:grid; gap:14px; align-content:start}
.blog-lato .occhiello{margin:0 0 2px}
.occhiello-secondo{margin-top:clamp(18px,2.4vw,32px) !important}

.recenti{display:grid; gap:14px}
.recente{
  display:grid; grid-template-columns:74px 1fr; gap:13px; align-items:start;
  text-decoration:none;
}
.recente-foto{
  display:block; aspect-ratio:4/3; border-radius:var(--r1);
  border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--sup-3),var(--sup-1));
  background-size:cover; background-position:50% 45%;
}
.recente-testo{display:grid; gap:3px; min-width:0}
.recente-testo b{
  font-family:var(--m); font-size:13px; font-weight:700; line-height:1.32;
  color:var(--testo); transition:color var(--d2) var(--curva-secca);
}
.recente:hover .recente-testo b,
.recente:focus-visible .recente-testo b{color:var(--teal)}
.recente-testo i{
  font-style:normal; font-family:var(--m); font-size:var(--t-mini);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--testo-tenue);
}

/* ---------- gli argomenti ---------- */
.etichette{display:flex; flex-wrap:wrap; gap:8px; margin:0}
.etichetta{
  font-family:var(--m); font-size:var(--t-xs); text-decoration:none;
  color:var(--testo-soft); background:var(--sup-3);
  border:1px solid var(--linea); border-radius:var(--r-tondo);
  padding:6px 13px;
  transition:color var(--d2) var(--curva-secca),
             border-color var(--d2) var(--curva-secca);
}
.etichetta:hover,.etichetta:focus-visible{
  color:var(--teal); border-color:rgba(var(--teal-rgb),.45);
}

/* ---------- finche' e' una prova ----------
   Un segnaposto che si confonde con un articolo vero e' il modo piu'
   rapido per pubblicare per sbaglio del testo finto. */
.avviso-bozza{
  margin:0; padding:14px 18px; border-radius:var(--r2);
  border:1px dashed rgba(var(--avviso-rgb),.45);
  background:rgba(var(--avviso-rgb),.05);
  font-family:var(--m); font-size:var(--t-xs); line-height:1.6;
  color:var(--avviso);
}
[data-bozza] .posta-foto,[data-bozza] .recente-foto,
[data-bozza].recente .recente-foto{
  background-image:repeating-linear-gradient(-45deg,
    rgba(var(--bianco-rgb),.02) 0 10px, transparent 10px 20px);
}

/* ============================================================
   LA PAGINA DI UN ARTICOLO
   Colonna stretta e basta. Un testo lungo si legge se la riga e'
   corta: sopra i settanta caratteri l'occhio perde il capo riga.
   ============================================================ */

.articolo{max-width:none}
.articolo-testa{max-width:62ch; margin:0 0 clamp(22px,3vw,38px)}
.articolo-briciole{
  margin:0 0 14px; font-family:var(--m); font-size:var(--t-mini);
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--testo-tenue);
}
.articolo-briciole a{color:var(--teal); text-decoration:none}
.articolo-briciole a:hover{text-decoration:underline; text-underline-offset:4px}
.articolo-briciole span{margin:0 8px; opacity:.5}

.articolo-titolo{
  margin:0 0 14px; font-family:var(--m); font-weight:700;
  letter-spacing:-.025em; line-height:1.13;
  font-size:clamp(27px,4.6vw,48px); color:var(--testo);
  text-wrap:balance;
}
.articolo-data{
  margin:0 0 18px; font-family:var(--m); font-size:var(--t-xs);
  font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--testo-tenue);
}
.articolo-agg{
  margin-left:12px; padding-left:12px;
  border-left:1px solid var(--linea); color:var(--teal);
}
.articolo-sommario{
  margin:0; font-size:clamp(17px,1.7vw,21px); line-height:1.55;
  color:var(--testo-soft);
}

/* Il tetto di altezza decide quanto si taglia. A 460 la copertina, che
   e' 16:10, diventava una fascia panoramica: 195 pixel su 875 spariti
   in verticale, e su una copertina con un ritratto quello che sparisce
   e' la cima della testa. A 560 il taglio verticale quasi non c'e'
   piu' e, quando c'e', tocca i lati - dove c'e' solo fondo. */
.articolo-cover{
  width:100%; aspect-ratio:16/10; max-height:min(64vh,560px);
  margin:0 0 clamp(26px,3.4vw,46px);
  background-size:cover; background-position:50% 38%;
  border-radius:var(--r4); border:1px solid var(--linea);
  box-shadow:var(--om-2);
}

/* ---------- il corpo ----------
   ATTENZIONE all'unita' ch: e' la larghezza dello ZERO, che in Inter
   e' piu' larga della lettera media. 68ch sembravano 68 caratteri e
   invece ce ne stavano OTTANTASEI, misurati sulla pagina vera. Sopra
   gli ottanta l'occhio perde l'inizio della riga dopo, e il testo
   sembra pieno d'aria anche quando l'interlinea e' giusta. 58ch ne
   fanno circa settantatre, che e' la misura in cui si legge. */
.articolo-corpo{max-width:58ch}
/* L'interlinea era 1.68 e lo stacco fra paragrafi 1.15em: sommati
   facevano sembrare il testo slegato, come se ogni frase stesse per
   conto suo. Un corpo lungo si legge meglio un po' piu' compatto -
   il respiro glielo da' gia' la colonna stretta. */
.articolo-corpo p{
  margin:0 0 1em; font-size:var(--t-m); line-height:1.6;
  color:var(--testo-soft);
}
.articolo-corpo p:last-child{margin-bottom:0}
.articolo-corpo strong{color:var(--testo); font-weight:600}
.articolo-corpo em{color:var(--testo-soft)}
.articolo-corpo a{color:var(--teal); text-underline-offset:3px}
/* Un titolo deve stare piu' vicino a cio' che introduce che a cio'
   che chiude: lo spazio sopra e' grande, quello sotto stretto. */
.articolo-corpo h2{
  margin:clamp(30px,3.4vw,46px) 0 12px;
  font-family:var(--m); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(20px,2.3vw,28px); line-height:1.22; color:var(--testo);
}
.articolo-corpo h3{
  margin:clamp(22px,2.6vw,32px) 0 9px;
  font-family:var(--m); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(17px,1.8vw,21px); color:var(--testo);
}
.articolo-corpo ul{margin:0 0 1em; padding-left:1.1em}
.articolo-corpo li{
  margin-bottom:.38em; font-size:var(--t-m); line-height:1.58;
  color:var(--testo-soft);
}
.articolo-corpo li:last-child{margin-bottom:0}
.articolo-corpo li::marker{color:var(--teal)}
.articolo-corpo blockquote{
  margin:1.5em 0; padding:2px 0 2px 20px;
  border-left:2px solid rgba(var(--teal-rgb),.5);
}
.articolo-corpo blockquote p{
  margin:0; font-size:clamp(17px,1.8vw,22px); line-height:1.5;
  color:var(--testo);
}
.articolo-corpo code{
  font-family:var(--m); font-size:.9em; color:var(--teal);
  background:var(--sup-3); border:1px solid var(--linea);
  border-radius:5px; padding:2px 6px;
}
.articolo-corpo hr{
  margin:clamp(28px,3.4vw,44px) 0; border:0; height:1px;
  background:linear-gradient(90deg, var(--linea), transparent);
}

/* ---------- le fonti, a scomparsa ----------
   <details> nativo: si apre col clic e col tabulatore, non serve una
   riga di JavaScript, e soprattutto le fonti restano NEL DOCUMENTO
   anche da chiuse. Un elenco costruito da codice al clic i motori di
   ricerca non lo vedono - e queste fonti sono esattamente la cosa
   che vogliamo far vedere.

   Il numero sul distintivo conta le TESTATE, non i link, e l'elenco
   mostra una riga per testata: i due numeri sono la stessa cosa.
   Un distintivo che dice cinque sopra sette righe e' un distintivo
   di cui non ci si fida piu'. */

.articolo-fonti{
  max-width:min(62ch, 100%); margin:clamp(34px,4.2vw,56px) 0 0;
  padding:0; border:0; background:none;
}

.fonti-scatola{border:0}

/* Il distintivo. La freccetta di sistema si toglie in due modi
   diversi perche' i browser non sono d'accordo fra loro. */
.fonti-badge{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px; border-radius:var(--r-tondo);
  border:1px solid rgba(var(--teal-rgb),.34);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.09), rgba(var(--teal-rgb),.04));
  font-family:var(--m); font-size:var(--t-s); font-weight:700;
  color:var(--teal); letter-spacing:.01em;
  transition:border-color var(--d2) var(--curva-secca),
             box-shadow var(--d2) var(--curva-secca),
             background var(--d2) var(--curva-secca);
}
.fonti-badge::-webkit-details-marker{display:none}
.fonti-badge::marker{content:""}
.fonti-badge:hover,.fonti-badge:focus-visible{
  border-color:rgba(var(--teal-rgb),.62);
  background:linear-gradient(180deg, rgba(var(--teal-rgb),.15), rgba(var(--teal-rgb),.06));
  box-shadow:0 0 26px -8px var(--alone-teal);
}
.fonti-badge:active{transform:scale(.985); transition-duration:var(--d1)}

/* La spunta e' oro, non turchese: e' un sigillo, non un comando.
   Se fosse dello stesso colore del testo sparirebbe dentro. */
.fonti-spunta{
  width:19px; height:19px; flex:none;
  fill:none; stroke:var(--oro); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(var(--oro-rgb),.45));
}
.fonti-parola{flex:1; min-width:0}

/* La freccia gira quando si apre. */
.fonti-freccia{
  width:8px; height:8px; flex:none; margin-left:2px;
  border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--d2) var(--curva-secca);
}
.fonti-scatola[open] .fonti-freccia{
  transform:rotate(-135deg) translate(-2px,-2px);
}

/* Il dentro: compare con un movimento breve, non con un salto. */
.fonti-dentro{
  margin-top:16px; padding:clamp(18px,2.2vw,26px);
  border-radius:var(--r3); border:1px solid var(--linea);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
  animation:fontiAprono var(--d3) var(--curva-entra) both;
}
@keyframes fontiAprono{
  from{opacity:0; transform:translate3d(0,-6px,0)}
  to{opacity:1; transform:none}
}

.fonti-nota{
  margin:0 0 16px; font-size:var(--t-s); line-height:1.6;
  color:var(--testo-soft);
}
.fonti{margin:0; padding-left:1.3em; display:grid; gap:13px}
.fonti li{font-size:var(--t-s); line-height:1.45}
.fonti li::marker{color:var(--testo-tenue); font-family:var(--m)}
.fonti a{color:var(--teal); text-underline-offset:3px}
.fonte-editore{
  display:block; margin-top:4px;
  font-family:var(--m); font-size:var(--t-mini); font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--testo-tenue);
}

/* Sul telefono il distintivo prende tutta la riga: in linea si
   spezzerebbe a meta' parola. */
@media(max-width:560px){
  .fonti-badge{display:flex; width:100%; padding:12px 14px; font-size:var(--t-xs)}
  .fonti{padding-left:1.1em; gap:15px}
}

@media (prefers-reduced-motion:reduce){
  .fonti-dentro{animation:none}
  .fonti-freccia,.fonti-badge{transition:none}
}

.articolo-chiude{max-width:62ch; margin-top:clamp(34px,4vw,52px); display:grid; gap:20px}
.articolo-altri{margin-top:clamp(44px,5.4vw,76px)}
.articolo-altri .blog-colonna{
  display:grid; gap:clamp(26px,3.2vw,44px);
}
@media(min-width:760px){
  .articolo-altri .blog-colonna{grid-template-columns:1fr 1fr}
}

.etichetta-viva{
  color:var(--teal); border-color:rgba(var(--teal-rgb),.5);
  background:rgba(var(--teal-rgb),.07);
}
/* Una bozza si distingue a colpo d'occhio anche nell'indice. */
.posta-bozza .posta-media{border-style:dashed; border-color:rgba(var(--avviso-rgb),.4)}
.posta-bozza .posta-data b{color:var(--avviso)}

/* ============================================================
   L'ARTICOLO CON LA SPALLA
   Il testo a sinistra, e a destra dove andare dopo. Chi finisce
   di leggere non deve tornare indietro per trovare altro.
   La spalla RESTA FERMA mentre si scorre: un articolo lungo la
   farebbe sparire dopo due schermate, e tanto varrebbe non averla.
   ============================================================ */

.articolo-impianto{
  display:grid; gap:clamp(30px,3.6vw,58px);
  grid-template-columns:1fr; align-items:start;
}
@media(min-width:980px){
  .articolo-impianto{grid-template-columns:minmax(0,1fr) minmax(210px,.4fr)}
  .articolo-spalla{
    position:sticky; top:clamp(84px,9vw,104px);
    max-height:calc(100vh - 140px); overflow-y:auto;
    /* niente barra di scorrimento visibile: e' una spalla, non un
       riquadro dentro il riquadro */
    scrollbar-width:none;
  }
  .articolo-spalla::-webkit-scrollbar{display:none}
}
.articolo-principale{min-width:0}

/* La spalla e' piu' stretta della colonna del testo: le schede
   devono restringersi con lei. */
.articolo-spalla .recente{grid-template-columns:62px 1fr; gap:11px}
.articolo-spalla .recente-testo b{font-size:12.5px}

/* Sotto i 980 la spalla scende in fondo, e prende un po' d'aria
   sopra per non attaccarsi ai bottoni. */
@media(max-width:979px){
  .articolo-spalla{
    padding-top:clamp(24px,3.4vw,36px);
    border-top:1px solid var(--linea);
  }
  .articolo-spalla .recenti{
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
  }
}
@media(max-width:560px){
  .articolo-spalla .recenti{grid-template-columns:1fr}
}

/* Con la spalla accanto, la colonna del testo non ha piu' bisogno
   del proprio tetto: glielo da' la griglia. Ma sotto i 980, quando
   la spalla scende, il tetto torna a servire. */
@media(min-width:980px){
  .articolo-corpo{max-width:min(58ch, 100%)}
  .articolo-testa, .articolo-fonti, .articolo-chiude{max-width:min(62ch, 100%)}
}

/* La pagina del blog quando non c'e' ancora niente. Non un cartello
   "sta arrivando" in mezzo al nulla: cosa ci sara', e due modi per
   accorgersene senza dover tornare a controllare. */
.vuoto{max-width:60ch}
.vuoto-riga{
  margin:0 0 var(--s4); color:var(--soft); line-height:1.65; text-wrap:pretty;
}