/* =============================================================================
   COMPONENTI DELLA HOMEPAGE
   Ogni blocco è autonomo e legge solo i token semantici. Nessuna misura in
   pixel scritta a mano: tutto passa dalla scala.
   ========================================================================== */

/* --- salto al contenuto: primo elemento focalizzabile della pagina --------- */
.lm-salta{
  position:absolute; left:var(--lm-sp-4); top:var(--lm-sp-4); z-index:100;
  transform:translateY(-200%);
  background:var(--lm-accento-solido); color:var(--lm-su-accento);
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-0); font-weight:var(--lm-peso-forte);
  padding:var(--lm-sp-3) var(--lm-sp-4); border-radius:var(--lm-raggio); text-decoration:none;
}
.lm-salta:focus{ transform:translateY(0); }

/* --- testata --------------------------------------------------------------- */
/* La fascia del nome e del menu gira sul fondo scuro su tutte le pagine, mentre
   il corpo resta sulla carta. Si rimappano i token invece di ridipingere i
   figli: nome, righe di servizio e navigazione leggono gia' da --lm-testo,
   --lm-testo-3 e --lm-riga, quindi seguono senza una regola in piu'. Sul
   registro Scorie la pagina e' gia' scura e la fascia prosegue il fondo. */
.lm-testata{
  --lm-fondo:          var(--lm-inchiostro);
  --lm-testo:          var(--lm-carta);
  --lm-testo-2:        var(--lm-scorie-testo-2);
  --lm-testo-3:        var(--lm-scorie-testo-2);
  --lm-riga:           rgba(247, 245, 240, .22);
  --lm-riga-tenue:     rgba(247, 245, 240, .14);
  --lm-accento-testo:  var(--lm-ruggine-400);

  background: var(--lm-fondo);
  color: var(--lm-testo);
  border-bottom: var(--lm-bordo-testata) double var(--lm-testo);
}
.lm-testata__interno{ padding-block:var(--lm-sp-5) var(--lm-sp-3); text-align:center; }
.lm-testata__nome{
  font-family:var(--lm-font-titolo); font-weight:var(--lm-titolo-peso);
  /* Scala propria, non --lm-passo-6: con 0,14em di crenatura «LUCA MONTICELLI»
     occupa circa 11,2 volte il corpo, e il gradino generico la faceva sforare
     sotto i 360px. Il minimo di 1,5rem è calcolato su quel rapporto. */
  font-size:clamp(1.5rem, 7.4vw, 3.85rem);
  line-height:1; letter-spacing:.14em;
  text-transform:uppercase; margin:0;
  overflow-wrap:break-word;
}
.lm-testata__nome a{ color:inherit; text-decoration:none; }
.lm-testata__righe{
  display:flex; flex-wrap:wrap; gap:var(--lm-sp-2) var(--lm-sp-5); justify-content:space-between;
  margin-top:var(--lm-sp-3);
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000);
  letter-spacing:.16em; text-transform:uppercase; color:var(--lm-testo-3);
}
@media (max-width:640px){ .lm-testata__righe{ justify-content:center; text-align:center; } }

.lm-nav{ border-bottom:var(--lm-bordo) solid var(--lm-riga); }
.lm-nav__lista{
  list-style:none; margin:0; padding-block:var(--lm-sp-2);
  display:flex; flex-wrap:wrap; gap:var(--lm-sp-2) var(--lm-sp-6); justify-content:center;
}
.lm-nav__lista a{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); font-weight:var(--lm-peso-medio);
  letter-spacing:.15em; text-transform:uppercase; color:var(--lm-testo); text-decoration:none;
  /* 24px minimi a qualunque larghezza: il WCAG 2.2 (2.5.8) non riguarda solo
     il tocco, vale per ogni dispositivo di puntamento. */
  display:inline-flex; align-items:center; min-height:24px;
}
.lm-nav__lista a:hover{ color:var(--lm-accento-testo); text-decoration:underline; }
.lm-nav__voce--marcata a{ color:var(--lm-accento-testo); font-weight:var(--lm-peso-forte); }
/* Al dito servono bersagli veri: sotto i 640px le voci diventano alte 44px.
   Su desktop il puntatore è preciso e la barra resta sottile. */
@media (max-width:640px){
  .lm-nav__lista{ gap:0 var(--lm-sp-5); padding-block:0; }
  .lm-nav__lista a{ display:flex; align-items:center; min-height:44px; padding-block:0; }
}

/* --- presentazione del personal brand -------------------------------------- */
.lm-presentazione{
  padding-block:calc(var(--lm-sp-6) * var(--lm-densita));
  border-bottom:var(--lm-bordo) solid var(--lm-riga);
}
.lm-presentazione__interno{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--lm-sp-6);
  align-items:center;
}
.lm-presentazione__frase{
  font-family:var(--lm-font-titolo); font-weight:var(--lm-titolo-peso);
  font-size:var(--lm-passo-4); line-height:1.14; letter-spacing:var(--lm-titolo-cren);
  margin:0; max-width:22ch;
}
.lm-presentazione__testo{
  margin-top:var(--lm-sp-3); color:var(--lm-testo-2);
  font-size:var(--lm-passo-1); line-height:1.58; max-width:58ch;
}
.lm-presentazione__ritratto{
  width:132px; height:132px; border-radius:50%; object-fit:cover;
  filter:saturate(.9); flex:none;
}
@media (max-width:768px){
  .lm-presentazione__interno{ grid-template-columns:1fr; gap:var(--lm-sp-4); }
  .lm-presentazione__ritratto{ width:96px; height:96px; order:-1; }
}

/* --- apertura: storia principale + colonna delle letture -------------------- */
.lm-apertura__interno{
  display:grid; grid-template-columns:minmax(0,1fr) var(--lm-colonna-fianco);
  border-bottom:var(--lm-bordo) solid var(--lm-riga);
}
.lm-apertura__principale{
  padding:var(--lm-sp-6) var(--lm-sp-6) var(--lm-sp-7) 0;
  border-right:var(--lm-bordo) solid var(--lm-riga);
  min-width:0;
}
.lm-apertura__fianco{ padding:var(--lm-sp-6) 0 var(--lm-sp-7) var(--lm-sp-5); min-width:0; }
@media (max-width:1024px){
  .lm-apertura__interno{ grid-template-columns:1fr; }
  .lm-apertura__principale{
    padding:var(--lm-sp-5) 0; border-right:0;
    border-bottom:var(--lm-bordo) solid var(--lm-riga);
  }
  .lm-apertura__fianco{ padding:var(--lm-sp-5) 0; }
}

/* --- scheda articolo, tre varianti ------------------------------------------ */
.lm-articolo{ min-width:0; }
.lm-articolo__figura{ margin:0 0 var(--lm-sp-4); }
.lm-articolo__immagine{
  width:100%; height:auto; display:block; object-fit:cover;
  background:var(--lm-superficie-cava); filter:saturate(.88);
}
/* L'APERTURA NON TAGLIA E NON DEFORMA.
   L'immagine conserva le proprie proporzioni: lo spazio è riservato dagli
   attributi width/height, quindi niente scarto di impaginazione anche senza
   aspect-ratio imposto. È il componente che si adatta all'immagine, non il
   contrario — la variante orizzontale/verticale la decide il PHP leggendo le
   dimensioni reali dell'allegato. */
.lm-articolo--apertura .lm-articolo__immagine{
  width:100%; height:auto; aspect-ratio:auto; object-fit:contain;
  /* mai oltre la larghezza naturale: il tetto lo passa il PHP, che conosce le
     dimensioni dell'allegato. Venti immagini d'archivio stanno sotto i 600px. */
  max-width:min(100%, var(--lm-figura-max, 100%));
  margin-inline:auto;
}

/* Immagine orizzontale (rapporto >= 1,4): sopra il titolo, a piena larghezza.
   È il caso classico della fotografia editoriale. */
.lm-articolo--apertura.lm-articolo--orizzontale .lm-articolo__figura{ margin-bottom:var(--lm-sp-4); }

/* Immagine quadrata o verticale: affiancata al testo. Una grafica quadrata a
   piena larghezza diventerebbe alta quanto la colonna, e tagliarla in
   panoramica ne cancellerebbe il testo. */
.lm-articolo--apertura.lm-articolo--verticale{
  display:grid;
  grid-template-columns:minmax(0,var(--lm-apertura-figura,340px)) minmax(0,1fr);
  gap:0 var(--lm-sp-6);
  align-items:start;
}
.lm-articolo--apertura.lm-articolo--verticale .lm-articolo__figura{ margin:0; }
/* La colonna di testo diventa il contenitore di riferimento: da qui in giu'
   le unita' cqi misurano lei, non la finestra. */
.lm-articolo--apertura.lm-articolo--verticale .lm-articolo__testo{
  container-type:inline-size;
}
.lm-articolo--apertura.lm-articolo--verticale .lm-articolo__titolo{
  margin-top:var(--lm-sp-2);
  font-size:var(--lm-passo-apertura);
  line-height:1.08;
  /* nessuna parola schiacciata: si va a capo, non si comprime.
     break-word interviene solo su parole piu' lunghe della riga. */
  overflow-wrap:break-word;
  hyphens:manual;
}
/* Titoli oltre i 70 caratteri: un gradino piu' basso, cosi' restano entro le
   quattro righe senza toccare il testo. La classe la mette il PHP contando i
   caratteri — il CSS non sa contare. */
.lm-articolo--apertura.lm-articolo--verticale.lm-articolo--titolo-lungo .lm-articolo__titolo{
  font-size:var(--lm-passo-apertura-lungo);
}
.lm-articolo--apertura.lm-articolo--verticale .lm-articolo__sommario{
  font-size:var(--lm-passo-1);
  max-width:42ch;
}

/* Variante orizzontale: il titolo ha tutta la colonna, ma una riga larga 892px
   sarebbe illeggibile. Si limita la misura, non il corpo. */
.lm-articolo--apertura.lm-articolo--orizzontale .lm-articolo__titolo{
  max-width:26ch;
  overflow-wrap:break-word;
}
@media (min-width:1200px){
  /* con piu' spazio la figura puo' crescere senza togliere respiro al testo */
  .lm-articolo--apertura.lm-articolo--verticale{ --lm-apertura-figura:380px; }
}
@media (max-width:768px){
  /* Impilato: immagine sopra, poi occhiello, titolo, sommario, metadati.
     La gerarchia resta quella della versione a due colonne, solo in verticale. */
  .lm-articolo--apertura.lm-articolo--verticale{ grid-template-columns:1fr; gap:0; }
  .lm-articolo--apertura.lm-articolo--verticale .lm-articolo__figura{ margin-bottom:var(--lm-sp-4); }
  /* A tutta colonna la riga arriverebbe a 35 caratteri: troppo per un titolo.
     Il limite e' in ch, quindi segue il carattere qualunque variante sia attiva. */
  .lm-articolo--apertura.lm-articolo--verticale .lm-articolo__titolo{ max-width:24ch; }
  .lm-articolo--apertura.lm-articolo--verticale .lm-articolo__sommario{ max-width:46ch; }
}

/* Le schede del fiume mantengono un taglio costante: in una griglia a tre
   colonne il ritmo visivo conta più della fedeltà al singolo ritaglio, e a
   quella dimensione la perdita è contenuta. 4/3 e non panoramico, così una
   grafica quadrata perde il meno possibile. */
.lm-articolo--media .lm-articolo__immagine{ aspect-ratio:4/3; object-fit:cover; object-position:center; }
.lm-articolo__titolo{
  font-family:var(--lm-font-titolo); font-weight:var(--lm-titolo-peso);
  letter-spacing:var(--lm-titolo-cren); line-height:var(--lm-int-stretta); margin:var(--lm-sp-2) 0 0;
}
.lm-articolo--apertura .lm-articolo__titolo{ font-size:var(--lm-passo-5); }
.lm-articolo--media   .lm-articolo__titolo{ font-size:var(--lm-passo-3); line-height:var(--lm-int-media); }
.lm-articolo__titolo a{ color:var(--lm-testo); text-decoration:none; }
.lm-articolo__titolo a:hover{ color:var(--lm-accento-testo); text-decoration:underline; text-underline-offset:.14em; }
.lm-articolo__sommario{
  margin-top:var(--lm-sp-3); color:var(--lm-testo-2); line-height:1.52; max-width:var(--lm-misura-stretta);
}
.lm-articolo--apertura .lm-articolo__sommario{ font-size:var(--lm-passo-3); }
.lm-articolo--media   .lm-articolo__sommario{ font-size:var(--lm-passo-00); }
.lm-articolo__meta{
  display:flex; flex-wrap:wrap; gap:var(--lm-sp-2) var(--lm-sp-4);
  margin-top:var(--lm-sp-3);
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000);
  letter-spacing:.13em; text-transform:uppercase; color:var(--lm-testo-3);
  font-variant-numeric:tabular-nums;
}
/* senza immagine il titolo prende il posto della figura: nessun buco */
.lm-articolo--senza-immagine .lm-articolo__titolo{ margin-top:0; }
.lm-articolo--senza-immagine{ border-top:var(--lm-bordo-forte) solid var(--lm-accento); padding-top:var(--lm-sp-4); }

/* --- fiume degli ultimi articoli -------------------------------------------- */
.lm-fiume__lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
}
.lm-fiume__voce{
  padding:var(--lm-sp-5) var(--lm-sp-5) var(--lm-sp-6);
  border-right:var(--lm-bordo) solid var(--lm-riga); min-width:0;
}
.lm-fiume__voce:first-child{ padding-left:0; }
.lm-fiume__voce:last-child{ padding-right:0; border-right:0; }
@media (max-width:1024px){
  .lm-fiume__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lm-fiume__voce{ padding-inline:var(--lm-sp-4); }
  .lm-fiume__voce:nth-child(2n){ border-right:0; padding-right:0; }
  .lm-fiume__voce:nth-child(2n+1){ padding-left:0; }
}
@media (max-width:640px){
  .lm-fiume__lista{ grid-template-columns:1fr; }
  .lm-fiume__voce{
    padding:var(--lm-sp-5) 0; border-right:0;
    border-bottom:var(--lm-bordo) solid var(--lm-riga);
  }
  .lm-fiume__voce:last-child{ border-bottom:0; padding-bottom:0; }
}

/* --- intestazione di sezione ------------------------------------------------ */
.lm-sez__intestazione{
  display:flex; align-items:baseline; gap:var(--lm-sp-4); flex-wrap:wrap;
  padding-bottom:var(--lm-sp-3); border-bottom:var(--lm-bordo-forte) solid var(--lm-testo);
}
.lm-sez__titolo{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); font-weight:var(--lm-peso-forte);
  letter-spacing:var(--lm-cren-etichetta); text-transform:uppercase; margin:0; color:var(--lm-testo);
}
.lm-sez__nota{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-00);
  color:var(--lm-testo-3); margin:0 0 0 auto;
}
@media (max-width:640px){ .lm-sez__nota{ margin-left:0; } }

/* --- competenze: comunicazione, formazione, intelligenza artificiale -------- */
.lm-competenze{ padding-block:calc(var(--lm-sp-7) * var(--lm-densita)); border-bottom:var(--lm-bordo) solid var(--lm-riga); }
.lm-competenze__lista{
  list-style:none; margin:var(--lm-sp-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--lm-sp-5);
}
.lm-competenza{ display:flex; flex-direction:column; gap:var(--lm-sp-2); min-width:0; }
.lm-competenza__numero{
  font-family:var(--lm-font-titolo); font-size:var(--lm-passo-3);
  color:var(--lm-accento); line-height:1; font-variant-numeric:lining-nums tabular-nums;
}
.lm-competenza__titolo{
  font-family:var(--lm-font-titolo); font-weight:var(--lm-titolo-peso);
  font-size:var(--lm-passo-3); line-height:var(--lm-int-media); margin:0;
}
.lm-competenza__testo{ color:var(--lm-testo-2); font-size:var(--lm-passo-00); line-height:1.6; }
.lm-competenza__rimando{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); font-weight:var(--lm-peso-forte);
  letter-spacing:.12em; text-transform:uppercase; margin-top:auto; padding-top:var(--lm-sp-2);
}
@media (max-width:768px){ .lm-competenze__lista{ grid-template-columns:1fr; gap:var(--lm-sp-6); } }

/* --- Reparto Scorie: identità del registro scorie dentro la rassegna -------- */
.lm-scorie{ padding-block:calc(var(--lm-sp-7) * var(--lm-densita)); }
.lm-scorie__interno{
  display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--lm-sp-7); align-items:center;
}
.lm-scorie__copertina{
  width:200px; height:auto; aspect-ratio:1061/1653; display:block;
  box-shadow:var(--lm-ombra-libro); background:var(--lm-superficie-cava);
}
.lm-scorie__occhiello{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); font-weight:var(--lm-peso-forte);
  letter-spacing:var(--lm-cren-etichetta); text-transform:uppercase; color:var(--lm-accento-testo);
}
.lm-scorie__citazione{
  font-family:var(--lm-fam-manifesto); font-weight:400;
  font-size:var(--lm-passo-5); line-height:1.02; letter-spacing:.006em; text-transform:uppercase;
  margin:var(--lm-sp-3) 0 0; max-width:19ch; color:var(--lm-testo);
}
.lm-scorie__testo{
  margin-top:var(--lm-sp-4); color:var(--lm-testo-2);
  font-size:var(--lm-passo-1); line-height:1.6; max-width:54ch;
}
.lm-scorie__azioni{ display:flex; flex-wrap:wrap; gap:var(--lm-sp-3); margin-top:var(--lm-sp-5); }
@media (max-width:768px){
  .lm-scorie__interno{ grid-template-columns:1fr; gap:var(--lm-sp-5); }
  .lm-scorie__copertina{ width:150px; }
}

/* --- progetti --------------------------------------------------------------- */
.lm-progetti{ padding-block:calc(var(--lm-sp-7) * var(--lm-densita)); border-bottom:var(--lm-bordo) solid var(--lm-riga); }
.lm-progetti__lista{
  list-style:none; margin:var(--lm-sp-5) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;
}
.lm-progetti__voce{
  padding:var(--lm-sp-4) var(--lm-sp-5); border-right:var(--lm-bordo) solid var(--lm-riga); min-width:0;
}
.lm-progetti__voce:first-child{ padding-left:0; }
.lm-progetti__voce:last-child{ border-right:0; padding-right:0; }
.lm-progetti__anno{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); letter-spacing:.13em;
  color:var(--lm-testo-3); font-variant-numeric:tabular-nums;
}
.lm-progetti__titolo{
  font-family:var(--lm-font-titolo); font-weight:var(--lm-titolo-peso);
  font-size:var(--lm-passo-1); line-height:var(--lm-int-media); margin:var(--lm-sp-1) 0 0;
}
.lm-progetti__titolo a{ color:var(--lm-testo); text-decoration:none; }
.lm-progetti__titolo a:hover{ color:var(--lm-accento-testo); text-decoration:underline; }
.lm-progetti__coda{ margin-top:var(--lm-sp-5); }
@media (max-width:768px){
  .lm-progetti__lista{ grid-template-columns:1fr; }
  .lm-progetti__voce{
    padding:var(--lm-sp-4) 0; border-right:0; border-bottom:var(--lm-bordo) solid var(--lm-riga-tenue);
  }
  .lm-progetti__voce:last-child{ border-bottom:0; }
}

/* --- piede ------------------------------------------------------------------ */
.lm-pie{ border-top:var(--lm-bordo-forte) solid var(--lm-testo); padding-block:var(--lm-sp-6) var(--lm-sp-7); }
.lm-pie__interno{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--lm-sp-6); align-items:start;
}
.lm-pie__nome{
  font-family:var(--lm-font-titolo); font-size:var(--lm-passo-3); letter-spacing:.1em;
  text-transform:uppercase; margin:0;
}
.lm-pie__testo{ margin-top:var(--lm-sp-2); color:var(--lm-testo-3); font-size:var(--lm-passo-00); max-width:48ch; }
.lm-pie__gruppi{ display:flex; flex-wrap:wrap; gap:var(--lm-sp-7); }
.lm-pie__titolo{
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); font-weight:var(--lm-peso-forte);
  letter-spacing:var(--lm-cren-etichetta); text-transform:uppercase; color:var(--lm-testo-3); margin:0 0 var(--lm-sp-3);
}
.lm-pie__lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--lm-sp-1); }
.lm-pie__lista a{
  font-size:var(--lm-passo-00); color:var(--lm-testo-2); text-decoration:none;
  display:inline-flex; align-items:center; min-height:24px;   /* WCAG 2.2 · 2.5.8 */
}
@media (max-width:640px){
  .lm-pie__lista{ gap:0; }
  .lm-pie__lista a{ min-height:36px; }   /* al dito serve piu' agio */
}
.lm-pie__lista a:hover{ color:var(--lm-accento-testo); text-decoration:underline; }
.lm-pie__chiusura{
  margin-top:var(--lm-sp-6); padding-top:var(--lm-sp-4); border-top:var(--lm-bordo) solid var(--lm-riga-tenue);
  font-family:var(--lm-font-ui); font-size:var(--lm-passo-000); letter-spacing:.06em; color:var(--lm-testo-3);
  display:flex; flex-wrap:wrap; gap:var(--lm-sp-2) var(--lm-sp-5); justify-content:space-between;
}
@media (max-width:768px){
  .lm-pie__interno{ grid-template-columns:1fr; }
  .lm-pie__gruppi{ gap:var(--lm-sp-6); }
}

/* --- bersagli dei link autonomi ----------------------------------------------
   Il WCAG 2.2 (2.5.8) esenta i link dentro una frase, ma occhielli, note di
   sezione e rimandi sono link a sé stanti: 24px minimi a ogni larghezza, non
   solo su mobile — la norma riguarda ogni dispositivo di puntamento.
   inline-flex e non padding, per non alterare il ritmo verticale. */
.lm-occhiello a,
.lm-sez__nota a,
.lm-competenza__rimando a,
.lm-progetti__anno + .lm-progetti__titolo a,
.lm-pie__chiusura a{
  display:inline-flex; align-items:center; min-height:24px;
}
/* Le voci della classifica: con un carattere piu' compatto alcune scendono a
   una riga sola e il link finisce sotto i 24px. Emerge solo con Caslon, ma la
   regola vale per entrambe le varianti. */
.lm-piu-letti__titolo-voce a{
  display:inline-block; min-height:24px;
}