/* ═══════════════════════════════════════════════════════════════════════
   main.css — i blocchi del sito.
   Direzione «Officina Notturna»: blocchi pieni, grottesca stretta a misure
   grosse, immagini spente che si accendono al passaggio, e il verde solo
   dove c'è qualcosa di attivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra ──────────────────────────────────────────────────────────────
   La voce corrente è un campo verde pieno, non un sottolineato: è la
   traduzione più diretta di «il verde dice dove sei». */
.barra{background:var(--pece);border-bottom:1px solid var(--filo);position:relative;z-index:10}
.barra-dentro{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px}
.marchio{
  font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'wdth' 76;
  font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--bianco);padding:6px 0;
}
.marchio:hover{color:var(--verde)}
/* Il nome non si spezza mai: su 375px andava a capo fra «Simone» e «Pizzi». */
.marchio{white-space:nowrap}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.menu>li{display:flex;align-items:center}
.menu a{display:block;padding:7px 12px;font-size:13.5px;font-weight:500;color:var(--spento);
  transition:background .16s,color .16s}
.menu a:hover{color:var(--testo)}
/* Solo le voci della barra, non i link dentro la tendina: quelli hanno il
   loro trattamento più sotto. Vale sia per «page» sia per «true», perché
   dentro una sottocategoria la sezione è accesa senza essere la pagina. */
.menu>li>a[aria-current]{background:var(--verde);color:var(--nero);font-weight:700}

/* ── La tendina delle sottocategorie ──────────────────────────────────────
   Il nome della sezione resta un link; la freccia accanto apre l'elenco delle
   figlie. Si apre in tre modi, e i primi due non hanno bisogno di JavaScript:
   col mouse sopra, col tabulatore dentro (:focus-within), e col click sulla
   freccia — che è l'unico che funziona su uno schermo tattile, dove il mouse
   sopra non esiste. Lo stato sta su aria-expanded e il CSS lo legge da lì:
   nessuna classe che ripeta quello che l'attributo già dice. */
.voce-con-tendina{position:relative}
.voce-con-tendina>a{padding-right:4px}
.tendina-apri{
  background:none;border:0;cursor:pointer;color:var(--spento);
  font-size:10px;line-height:1;padding:9px 8px 9px 2px;
  transition:color .16s,transform .16s;
}
.tendina-apri:hover{color:var(--testo)}
.tendina-apri[aria-expanded="true"]{color:var(--verde);transform:rotate(180deg)}

.tendina{
  display:none;position:absolute;top:100%;left:0;z-index:30;
  min-width:250px;max-width:min(340px,80vw);
  margin:0;padding:6px 0;list-style:none;
  background:var(--pece);border:1px solid var(--filo);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.tendina a{padding:8px 15px;font-size:13px;color:var(--spento);white-space:normal}
.tendina a:hover{background:var(--pannello);color:var(--testo)}
.tendina [aria-current]{background:transparent;color:var(--verde);font-weight:700}
/* «Tutti — Sezione» apre l'elenco ed è staccata dalle figlie da un filetto. */
.tendina li:first-child a{color:var(--testo)}
.tendina li:first-child{border-bottom:1px solid var(--filo2);margin-bottom:5px;padding-bottom:5px}

.tendina-apri[aria-expanded="true"]+.tendina{display:block}
/* Il mouse sopra apre solo dove un mouse c'è: su un telefono
   :hover si incolla al primo tocco e la tendina non si chiude più. */
@media (hover:hover) and (min-width:901px){
  .voce-con-tendina:hover .tendina,
  .voce-con-tendina:focus-within .tendina{display:block}
}
.barra-strumenti{display:flex;align-items:center;gap:14px;color:var(--spento)}
.cerca-scorciatoia{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  color:var(--spento);cursor:pointer;padding:6px 0}
.cerca-scorciatoia:hover{color:var(--testo)}
.cerca-scorciatoia kbd{border:1px solid var(--filo);padding:3px 6px;font:inherit;font-size:10px;color:#5d7a64}
.apri-menu{display:none}
/* Le voci che compaiono solo da una parte. */
.solo-telefono{display:none}

/* ── Apertura ───────────────────────────────────────────────────────────
   Campo nero (scelta del 7 settembre 2026). Il titolo grande, il filetto
   verde che chiude, i numeri in fila sotto. La variante a campo verde pieno
   resta disponibile come .apertura--piena, se un giorno servisse per una
   pagina sola. */
.apertura{border-bottom:1px solid var(--filo)}
/* padding-block e non padding: la scorciatoia azzererebbe il padding
   laterale che arriva da .gab, e il titolo finirebbe contro il bordo
   dello schermo. È già successo — su tutte le pagine, e su tutti gli
   elementi che portano .gab insieme a una classe loro. */
.apertura-dentro{padding-block:52px 0}
.apertura h1{font-size:clamp(52px,11vw,152px);margin:12px 0 0;max-width:13ch}
.apertura h1 em{font-style:normal;color:var(--verde)}
.apertura-sotto{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
  border-top:2px solid var(--verde);margin-top:40px;padding:22px 0 26px;
}
.apertura-sotto p{margin:0;max-width:48ch;font-size:18px;line-height:1.55;color:#a9c2ae}
.contatori{display:flex;border-top:1px solid var(--filo)}
.contatori div{flex:1;padding:14px 0;border-right:1px solid var(--filo)}
.contatori div:last-child{border-right:0}
.contatori b{display:block;color:var(--bianco);font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'wdth' 76;font-weight:800;font-size:34px;line-height:1;
  font-variant-numeric:tabular-nums}
.contatori span{color:var(--spento)}
/* La variante rumorosa, tenuta viva ma non usata. */
.apertura--piena{background:var(--verde);color:var(--nero);border-bottom:0}
.apertura--piena h1,.apertura--piena h1 em{color:var(--nero)}
.apertura--piena .eti{color:#04361a}
.apertura--piena .apertura-sotto{border-top-color:var(--nero)}
.apertura--piena .apertura-sotto p{color:#062a13}
.apertura--piena .contatori,.apertura--piena .contatori div{border-color:rgba(4,7,10,.3)}
.apertura--piena .contatori b{color:var(--nero)}
.apertura--piena .contatori span{color:#04361a}

/* ── Titolo di sezione ──────────────────────────────────────────────────── */
.sezione{padding:0 0 8px}
.sezione-cima{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 0 16px}
.sezione-cima h2{margin:0;color:var(--bianco);font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'wdth' 78;font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.025em}
.sezione-cima a{color:var(--spento);transition:color .16s}
.sezione-cima a:hover{color:var(--verde)}

/* ── In primo piano ─────────────────────────────────────────────────────
   Un pannello solo, mezzo immagine e mezzo testo. L'immagine è spenta e si
   accende quando ci passi sopra: è l'unico movimento della pagina. */
.primo{display:grid;grid-template-columns:1fr 1fr;background:var(--pannello);
  border:1px solid var(--filo);transition:border-color .25s}
.primo:hover{border-color:var(--verde)}
.primo-figura{aspect-ratio:16/11;overflow:hidden;background:#0b1310;border-right:1px solid var(--filo)}
/* Le copertine sono già scure di loro — palchi, notti, schermi spenti — e
   abbassare anche la luminosità le faceva sparire nel fondo nero. Si toglie il
   colore, non la luce. */
.primo-figura img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);transition:filter .45s}
.primo:hover .primo-figura img{filter:grayscale(0) contrast(1)}
.primo-testo{padding:34px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.primo-testo h3{margin:0;color:var(--bianco);font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'wdth' 80;font-weight:800;font-size:clamp(26px,3.2vw,42px);
  letter-spacing:-.028em;line-height:.98}
.primo:hover .primo-testo h3{color:var(--verde)}
.primo-testo p{margin:0;color:#9db6a3;font-size:16.5px;line-height:1.62;max-width:46ch}
.riga-etichette{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ── Lavorazioni: righe piene, non riquadri ─────────────────────────────
   Un archivio di duecento pezzi in riquadri diventa un muro. In righe si
   scorre con gli occhi, e la copertina si accende solo dove serve. */
.lavorazioni{border-top:1px solid var(--verde);list-style:none;margin:0;padding:0}
.lavorazione{display:grid;grid-template-columns:1fr 210px 128px;gap:24px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--filo2);transition:background .18s,padding .18s}
.lavorazione:hover{background:var(--pece);padding-left:16px;padding-right:16px}
.lavorazione h3{margin:0;font-size:22px;font-weight:600;line-height:1.24;letter-spacing:-.015em;
  color:var(--testo);transition:color .18s}
.lavorazione:hover h3{color:var(--verde)}
.lavorazione p{margin:6px 0 0;color:var(--spento);font-size:14.5px;line-height:1.55;max-width:72ch}
.lavorazione-lato{display:flex;gap:12px;color:var(--spento);align-items:center;justify-content:flex-end}
.lavorazione-figura{width:128px;height:72px;overflow:hidden;background:var(--filo2);
  opacity:.55;filter:grayscale(1) contrast(1.04);transition:opacity .28s,filter .28s}
.lavorazione-figura img{width:100%;height:100%;object-fit:cover}
.lavorazione:hover .lavorazione-figura{opacity:1;filter:grayscale(0) contrast(1)}

/* ── Progetti ───────────────────────────────────────────────────────────
   I due comandi stanno sempre nello stesso posto, in fondo alla scheda,
   separati dal testo da un filetto: si trovano senza cercarli. */
.banco{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:18px;
  list-style:none;margin:0;padding:0}
.pezzo{background:var(--pannello);border:1px solid var(--filo);display:flex;flex-direction:column;
  transition:border-color .25s}
.pezzo:hover{border-color:var(--verde)}
.pezzo-figura{aspect-ratio:21/9;overflow:hidden;border-bottom:1px solid var(--filo);background:#0b1310}
.pezzo-figura img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);transition:filter .4s}
.pezzo:hover .pezzo-figura img{filter:grayscale(0) contrast(1)}
.pezzo-corpo{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.pezzo-corpo h3{margin:0;color:var(--bianco);font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'wdth' 80;font-weight:800;font-size:25px;letter-spacing:-.025em;line-height:1.04}
.pezzo-corpo p{margin:0;color:#9db6a3;font-size:15px;line-height:1.6;flex:1}
.pezzo-comandi{display:flex;gap:10px;flex-wrap:wrap;border-top:1px solid var(--filo);padding-top:16px}

/* ── Articolo ───────────────────────────────────────────────────────────── */

/* La fascia dell'anteprima: la vede solo l'amministratore, su una bozza o su un
   articolo programmato. È l'unico posto del sito pubblico con il verde pieno
   fuori dall'apertura, ed è voluto: chi guarda deve capire in un colpo d'occhio
   che questa pagina non è quella che vedono gli altri. Un riquadro discreto qui
   sarebbe un difetto, non un pregio. */
.fascia-anteprima{
  background:var(--verde);color:var(--nero);
  margin:18px 0 0;padding:13px 18px;
  font:700 12.5px/1.55 'Courier Prime',ui-monospace,monospace;
  letter-spacing:.04em;
}
.fascia-anteprima b{text-transform:uppercase;letter-spacing:.14em;margin-right:4px}
.fascia-anteprima a{text-decoration:underline;text-underline-offset:3px}
.fascia-anteprima a:hover{color:#04361a}
.fascia-anteprima :focus-visible{outline-color:var(--nero)}

.articolo-testata{border-bottom:1px solid var(--verde);padding:8px 0 26px}
.articolo-testata h1{font-size:clamp(34px,5.6vw,76px);margin:14px 0 0;max-width:17ch}
.articolo-sotto{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;
  border-top:1px solid var(--filo);margin-top:26px;padding-top:20px}
.articolo-sotto>p{margin:0;font-size:19px;line-height:1.55;max-width:52ch;color:#a9c2ae}
.scheda-fatti{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;
  align-items:baseline;margin:0}
.scheda-fatti dt{font:700 10.5px/1.5 'Courier Prime',monospace;letter-spacing:.15em;
  text-transform:uppercase;color:var(--spento)}
.scheda-fatti dd{margin:0;text-align:right;font-weight:600;color:var(--testo);
  font-variant-numeric:tabular-nums}
.articolo-copertina{aspect-ratio:24/9;overflow:hidden;background:#0b1310;
  border-bottom:1px solid var(--filo);margin-top:0}
.articolo-copertina img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04);transition:filter .5s}
.articolo-copertina:hover img{filter:grayscale(0) contrast(1)}

.lettura{display:grid;grid-template-columns:230px minmax(0,var(--lettura));gap:64px;
  padding-block:44px 20px;align-items:start;justify-content:center}

/* Il sommario numerato. La sezione in cui sei prende la barretta verde. */
.sommario{position:sticky;top:24px;border-top:1px solid var(--verde);padding-top:14px}
.sommario h2{margin:0 0 12px;color:var(--spento)}
.sommario ol{list-style:none;margin:0;padding:0;counter-reset:s;max-height:70vh;overflow-y:auto}
.sommario li{counter-increment:s;border-bottom:1px solid var(--filo2)}
.sommario a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:9px 0;color:var(--spento);
  font-size:14px;line-height:1.35;transition:color .16s,padding .16s}
.sommario a::before{content:counter(s,decimal-leading-zero);
  font:700 11px/1.5 'Courier Prime',monospace;letter-spacing:.06em}
.sommario a:hover{color:var(--testo)}
.sommario a[aria-current]{color:var(--verde);font-weight:600;
  box-shadow:inset 3px 0 0 var(--verde);padding-left:8px}
.sommario .liv-3{padding-left:14px;font-size:13.5px}

/* Il corpo dell'articolo. È l'unico posto del sito in cui si sta per venti
   minuti: la colonna è stretta, l'interlinea larga, il verde solo sui link. */
.corpo{font-size:18px;line-height:1.76;color:#cfe0d3;max-width:var(--lettura)}
.corpo>*:first-child{margin-top:0}
.corpo p{margin:0 0 1.25em}
.corpo h2,.corpo h3{font-family:'Bricolage Grotesque',sans-serif;font-variation-settings:'wdth' 80;
  font-weight:800;letter-spacing:-.028em;line-height:1.06;color:var(--bianco);scroll-margin-top:24px}
.corpo h2{font-size:clamp(24px,2.9vw,33px);margin:2em 0 .6em}
.corpo h3{font-size:clamp(20px,2.2vw,25px);margin:1.7em 0 .5em}
.corpo h4{font-size:18px;margin:1.5em 0 .4em;color:var(--bianco)}
.corpo a{color:var(--verde);box-shadow:inset 0 -.4em 0 rgba(34,197,94,.16);font-weight:500}
.corpo a:hover{box-shadow:inset 0 -.5em 0 rgba(34,197,94,.3)}
.corpo ul,.corpo ol{margin:0 0 1.25em;padding-left:1.4em}
.corpo li{margin:.35em 0}
.corpo blockquote{margin:1.9em 0;padding:20px 22px;background:var(--pannello);
  border-left:6px solid var(--verde);font-size:18.5px;line-height:1.55;color:#b7cebc}
.corpo blockquote p:last-child{margin-bottom:0}
.corpo pre{background:var(--pannello);border:1px solid var(--filo);padding:16px 18px;
  overflow-x:auto;font:400 14.5px/1.6 'Courier Prime',ui-monospace,monospace;margin:1.6em 0}
.corpo code{font:400 .92em/1.5 'Courier Prime',ui-monospace,monospace;color:var(--verde2);
  background:var(--pannello);padding:2px 5px;border:1px solid var(--filo2)}
.corpo pre code{background:none;border:0;padding:0;color:#cfe0d3}
.corpo hr{border:0;border-top:1px solid var(--filo);margin:2.2em 0}
.corpo img{margin:1.8em 0;border:1px solid var(--filo)}
.corpo figure{margin:2.1em 0}
.corpo figure img{margin:0}
.corpo figcaption{margin-top:9px;color:var(--spento);font-size:13.5px}
.corpo figure.video{position:relative;aspect-ratio:16/9}
.corpo figure.video iframe{position:absolute;inset:0;width:100%;height:100%;border:1px solid var(--filo)}
.corpo iframe{width:100%;aspect-ratio:16/9;border:1px solid var(--filo);margin:1.8em 0}

/* ── Reazioni e condivisione ────────────────────────────────────────────── */
.reazioni{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--verde);
  margin-top:40px;padding-top:22px;max-width:var(--lettura)}
.reazione{background:transparent;border:1px solid var(--filo);color:var(--spento);padding:10px 15px;
  font:500 13px/1 'DM Sans',sans-serif;cursor:pointer;display:inline-flex;gap:8px;align-items:center;
  transition:border-color .16s,color .16s,background .16s}
.reazione:hover{border-color:var(--verde);color:var(--verde)}
.reazione[aria-pressed="true"]{border-color:var(--verde);background:var(--verde);color:var(--nero)}
.reazione b{font:700 12px/1 'Courier Prime',monospace}
.reazioni-fine{margin-left:auto;display:flex;gap:10px}

/* ── Finestre: ricerca, condividi, scrivi ───────────────────────────────
   Una sola classe per tutte e tre. <dialog> fa da sé la gestione del fuoco
   e della chiusura con Esc: non serve scriverla. */
dialog.finestra{
  border:1px solid var(--verde);background:var(--pece);color:var(--testo);
  padding:0;width:min(680px,92vw);max-height:82vh;
}
dialog.finestra::backdrop{background:rgba(4,7,10,.82)}
.finestra-cima{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--filo)}
.finestra-cima h2{margin:0;color:var(--bianco);font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'wdth' 80;font-weight:800;font-size:20px;letter-spacing:-.02em}
.finestra-chiudi{background:none;border:1px solid var(--filo);color:var(--spento);cursor:pointer;
  padding:6px 10px;font:700 11px/1 'Courier Prime',monospace;letter-spacing:.1em}
.finestra-chiudi:hover{border-color:var(--verde);color:var(--verde)}
.finestra-corpo{padding:20px;overflow-y:auto}
.campo-testo{width:100%;padding:13px 14px;background:var(--pannello);border:1px solid var(--filo);
  color:var(--testo);font:inherit}
.campo-testo:focus{border-color:var(--verde);outline:none}
.esiti{list-style:none;margin:16px 0 0;padding:0}
.esiti li{border-bottom:1px solid var(--filo2)}
.esiti a{display:block;padding:12px 0}
.esiti a:hover strong,.esiti a:focus strong{color:var(--verde)}
.esiti strong{display:block;color:var(--testo);font-weight:600;font-size:16px;line-height:1.3}
.esiti span{color:var(--spento);font-size:13.5px}

/* ── Newsletter ─────────────────────────────────────────────────────────── */
.lettera{background:var(--pannello);border-top:1px solid var(--verde);margin-top:40px}
.lettera-dentro{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding-block:40px}
.lettera h2{margin:0 0 8px;color:var(--bianco);font-family:'Bricolage Grotesque',sans-serif;
  font-variation-settings:'wdth' 78;font-weight:800;font-size:32px;letter-spacing:-.025em}
.lettera p{margin:0;color:var(--spento);max-width:44ch}
.campo-unito{display:flex;border:2px solid var(--verde)}
.campo-unito input{flex:1;background:transparent;border:0;padding:15px 16px;color:var(--testo);
  font:400 16px/1 'DM Sans',sans-serif;outline:none;min-width:0}
.campo-unito input::placeholder{color:#4d6a55}
.campo-unito button{border:0;background:var(--verde);color:var(--nero);cursor:pointer;
  font:700 12px/1 'Courier Prime',monospace;letter-spacing:.13em;text-transform:uppercase;padding:0 22px}
.campo-unito button:hover{background:var(--verde2)}
.esito{margin:12px 0 0;font-size:14.5px}
.esito[data-tipo="ok"]{color:var(--verde)}
.esito[data-tipo="no"]{color:#e8a0a0}

/* ── Intestazione di pagina (archivi) ───────────────────────────────────── */
.testata{padding:6px 0 26px;border-bottom:1px solid var(--verde)}
.testata h1{font-size:clamp(42px,7vw,92px)}
.testata p{margin:14px 0 0;color:#9db6a3;max-width:56ch;font-size:17px;line-height:1.62}
.testata-riga{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}

/* ── Piede ──────────────────────────────────────────────────────────────── */
.piede{margin-top:0;border-top:1px solid var(--filo);background:var(--pece)}
.piede-dentro{display:flex;flex-wrap:wrap;gap:18px 34px;justify-content:space-between;
  padding-block:26px;color:var(--spento)}
.piede a:hover{color:var(--verde)}
.piede nav{display:flex;flex-wrap:wrap;gap:18px}

.contenuto{min-height:40vh}
.vuoto{border:1px dashed var(--filo);padding:34px;color:var(--spento);text-align:center}

/* ── Telefono ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .menu,.cerca-scorciatoia kbd,.solo-schermo-largo{display:none}
  .apri-menu{display:inline-flex}
  .barra[data-menu="aperto"] .solo-telefono{display:block}
  .barra[data-menu="aperto"] .menu{
    display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;
    background:var(--pece);border-bottom:1px solid var(--filo);padding:8px 18px 16px;z-index:20;
  }
  .barra[data-menu="aperto"] .menu a{padding:11px 0;border-bottom:1px solid var(--filo2)}
  .barra[data-menu="aperto"] .menu>li>a[aria-current]{background:transparent;color:var(--verde)}

  /* Nel menu del telefono le voci stanno in colonna, quindi la tendina non
     galleggia sopra la pagina: rientra nell'elenco, sotto la sua sezione.
     Resta chiusa finché non si tocca la freccia — ventinove voci aperte tutte
     insieme sarebbero un muro da scorrere. */
  .barra[data-menu="aperto"] .menu>li{flex-wrap:wrap;justify-content:space-between}
  .barra[data-menu="aperto"] .voce-con-tendina>a{flex:1;padding-right:0}
  /* Il filetto sotto la freccia dev'essere lo STESSO del filetto sotto il nome:
     misura e interlinea vanno copiate da .menu a, altrimenti le due righe
     cadono a due altezze e il bordo si vede spezzato in fondo alla voce. */
  .barra[data-menu="aperto"] .tendina-apri{font-size:13.5px;line-height:1.65;
    padding:11px 0 11px 14px;border-bottom:1px solid var(--filo2)}
  .barra[data-menu="aperto"] .tendina{
    position:static;width:100%;min-width:0;max-width:none;
    border:0;box-shadow:none;background:transparent;padding:0 0 6px 14px;
  }
  .barra[data-menu="aperto"] .tendina a{padding:9px 0;font-size:13px}

  .apertura-dentro{padding-block:32px 0}
  .apertura-sotto,.primo,.lettera-dentro,.articolo-sotto{grid-template-columns:1fr}
  .apertura-sotto{margin-top:24px;gap:20px}
  .primo-figura{border-right:0;border-bottom:1px solid var(--filo)}
  .primo-testo{padding:24px}
  .lavorazione{grid-template-columns:1fr;gap:8px;padding:18px 0}
  .lavorazione-figura{display:none}
  .lavorazione-lato{justify-content:flex-start}
  .lettura{grid-template-columns:1fr;gap:0;padding-block:26px 10px}
  /* Sul telefono il sommario non può stare a lato: va in cima, richiudibile. */
  .sommario{position:static;max-width:none;margin-bottom:26px}
  .sommario ol{max-height:none}
  .scheda-fatti dd{text-align:left}
  .corpo{font-size:17px}
  .contatori{flex-wrap:wrap}
  .contatori div{flex:1 1 45%;border-right:0}
}