/* CSS per blog.php - Parte 1 */
:root{
  --paper:#FFFFFF; --ink:#141210; --graphite:#6E6862;
  --red:#C8341E; --red-soft:#F4E2DC;
  --grid-fine:#F6E7E1; --edge:#D8D2CB; --tint:#FAF8F6;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Rete di sicurezza: qualunque cosa dentro alla pagina risulti piu'
   larga del previsto (una tabella sfuggita, una parola composta lunga,
   qualcosa che un domani finira' per sbaglio in un articolo) resta
   dentro la pagina invece di trascinarsela in uno scorrimento
   orizzontale, che sposta anche lo sfondo a griglia e la scheda
   dell'articolo e sembra "tutto rotto". La causa nota di oggi (le
   tabelle larghe) ha la sua correzione mirata piu' sotto
   (.table-scroll); questa riga copre i casi che non abbiamo ancora
   visto. */
html{overflow-x:hidden;}
html,body{margin:0;padding:0;max-width:100%;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Public Sans',system-ui,sans-serif; font-size:15.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
  /* 19px, non 5mm. 5mm sembra piu' "vero" — e' la misura reale di un
     quadretto di carta millimetrata — ma il browser deve comunque
     convertirlo in pixel per disegnarlo, e 5mm non cade su un numero
     intero di pixel (fa 18,8976...px). Su una pagina corta non si nota
     mai. Un articolo del blog e' la pagina piu' lunga del sito, anche
     20-30 schermate intere: i motori grafici mobili disegnano gli
     sfondi lunghi a riquadri per non ridisegnare tutto ad ogni
     fotogramma, e un passo di ripetizione non intero fa accumulare un
     piccolo errore di arrotondamento riquadro dopo riquadro. Il
     risultato e' quello segnalato: scendendo nella pagina i quadretti
     non sono piu' tutti della stessa misura. 19px e' l'equivalente in
     pixel interi di 5mm (differenza reale: un decimo di pixel,
     invisibile), e non lascia margine di arrotondamento da accumulare.
     Stessa correzione, per lo stesso motivo, in tutti i CSS del sito
     che usano questa griglia: vedi guide.php, l'altra pagina di testo
     lungo, e le altre dove finora la pagina non era mai stata cosi'
     lunga da farlo notare. */
  background-image:
    repeating-linear-gradient(to right, var(--grid-fine) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(to bottom, var(--grid-fine) 0 1px, transparent 1px 19px);
}
h1,h2,h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;margin:0;letter-spacing:-.015em;line-height:1.1;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.wrap{max-width:800px;margin:0 auto;padding:0 24px;}

.masthead{border-bottom:1px solid var(--edge);background:rgba(255,255,255,.92);backdrop-filter:blur(6px);position:sticky;top:0;z-index:40;}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;max-width:1180px;margin:0 auto;flex-wrap:wrap;}
.wordmark{display:flex;align-items:center;gap:11px;text-decoration:none;}
.wordmark img{height:40px;width:auto;display:block;flex:none;}
.wm-txt{display:flex;flex-direction:column;line-height:1.18;}
.wordmark b{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;font-weight:800;font-size:16px;letter-spacing:-.02em;text-transform:uppercase;}
.wm-sub{font-family:'Azeret Mono',monospace;font-size:9px;color:var(--graphite);letter-spacing:.11em;text-transform:uppercase;margin-top:3px;}
.mast-act{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.backbtn{display:inline-flex;align-items:center;gap:7px;font-size:13px;text-decoration:none;color:var(--ink);border:1px solid var(--edge);background:#fff;padding:6px 12px;white-space:nowrap;}
.backbtn:hover{border-color:var(--ink);background:var(--tint);}
.backbtn span{font-family:'Azeret Mono',monospace;font-size:11px;color:var(--red);}
@media(max-width:620px){.backbtn b{display:none;}.backbtn{padding:6px 9px;}}

/* Il selettore della lingua (.langpick/.langlist/.lgcode) sta in
   assets/common.css: e' identico su tutte le pagine che lo usano. */

/* CSS per blog.php - Parte 2a */
.head{padding:44px 0 6px;}
.art-nav-top{margin-bottom:20px;}
.art-back-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Azeret Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--graphite);padding:6px 12px;border:1px solid var(--edge);background:#fff;transition:all .15s;}
.art-back-btn:hover{border-color:var(--ink);color:var(--ink);background:var(--tint);}
.art-back-btn span{font-size:12px;color:var(--red);font-weight:600;}
.stamp{font-family:'Azeret Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:14px;}
h1{font-size:clamp(28px,4.4vw,44px);font-weight:800;font-variation-settings:'wdth' 108;}
.lede{margin:16px 0 0;color:var(--graphite);font-size:16.5px;max-width:60ch;}
.testata{border:1.5px solid var(--ink);background:#fff;box-shadow:0 1px 0 var(--edge),0 14px 34px -24px rgba(20,18,16,.45);margin:38px 0 0;}
.testata-in{border:.5px solid var(--edge);margin:7px;padding:30px 30px 26px;}
.testata h1{font-size:clamp(38px,7vw,68px);letter-spacing:-.03em;font-variation-settings:'wdth' 118;line-height:.95;text-transform:uppercase;}
.testata .lede{margin-top:16px;}
.testata .riga{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.testata .riga span{flex:1;height:1px;background:var(--edge);}
.lista{margin:30px 0 0;display:grid;gap:16px;}
.voce{display:block;text-decoration:none;border:1.5px solid var(--ink);background:#fff;box-shadow:0 1px 0 var(--edge);transition:box-shadow .12s,transform .12s;}
.voce:hover{box-shadow:0 1px 0 var(--edge),0 12px 26px -20px rgba(20,18,16,.55);transform:translateY(-1px);}
.voce .meta{font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:9px 18px;border-bottom:1px solid var(--edge);background:var(--tint);}
.voce .meta em{font-style:normal;color:var(--red);}
.voce .corpo{padding:20px 18px 22px;}
.voce h2{font-size:clamp(19px,2.6vw,25px);margin-bottom:9px;}
.voce p{margin:0;color:var(--graphite);font-size:14.8px;max-width:68ch;}
.voce .apri{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:'Azeret Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);}
.voce .apri b{width:16px;height:1px;background:var(--red);display:block;transition:width .12s;}
.voce:hover .apri b{width:30px;}
.vuoto{border:1px dashed var(--edge);background:var(--tint);padding:34px 24px;text-align:center;color:var(--graphite);margin-top:30px;}
/* CSS per blog.php - Parte 2b */
.artmeta{font-family:'Azeret Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--edge);}
.artmeta em{font-style:normal;color:var(--red);}
.art-lang-bar{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px 14px;background:var(--tint);border:1px solid var(--edge);flex-wrap:wrap;}
.art-lang-lbl{font-family:'Azeret Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);}
.art-lang-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.art-lang-opt{display:inline-flex;align-items:center;font-size:13px;font-weight:600;text-decoration:none;padding:5px 12px;border:1px solid var(--edge);background:#fff;color:var(--ink);transition:all .12s;}
.art-lang-opt:hover{border-color:var(--ink);background:var(--paper);}
.art-lang-opt.attivo{background:var(--ink);color:#fff;border-color:var(--ink);}
.avvisoLingua{border-left:3px solid var(--red);background:var(--red-soft);padding:12px 15px;margin:22px 0 0;font-size:14px;}
article{padding:8px 0 10px;}
article h2{font-size:clamp(21px,3vw,27px);margin:40px 0 14px;padding-top:20px;border-top:1px solid var(--edge);}
article h3{font-size:17.5px;margin:28px 0 10px;}
article p{margin:0 0 15px;max-width:70ch;}
article ul,article ol{margin:0 0 16px;padding-left:22px;max-width:70ch;}
article li{margin-bottom:7px;}
article strong{font-weight:600;}
article code{font-family:'Azeret Mono',monospace;font-size:.9em;background:var(--tint);border:1px solid var(--edge);padding:1px 5px;overflow-wrap:break-word;}
/* Parole lunghe senza spazi (una parola composta tedesca, un codice,
   un indirizzo) non devono poter allargare la colonna: su un testo
   giustificato a 70ch va bene rompere una parola piuttosto che
   spingere il contenitore oltre lo schermo. */
article p,article li{overflow-wrap:break-word;}

/* ---------------------------------------------------------------------
   TABELLE: IL CONTENITORE, NON LA TABELLA

   Le tabelle degli articoli (le tolleranze ISO 286 arrivano a 9 colonne
   di numeri) non stanno in larghezza su un telefono. La correzione non
   e' sulla <table>: e' sul <div class="table-scroll"> che blog.php
   (blog_wrap_tables) mette intorno a OGNI tabella dell'articolo prima
   di stamparla, articolo per articolo, senza che chi scrive il testo
   se ne debba occupare. E' il div che scorre in orizzontale quando
   serve; la tabella dentro resta una tabella vera, con il suo layout
   normale, e non trascina piu' il resto della pagina.
   (In precedenza si era provato a far scorrere la tabella stessa con
   display:block sulla tabella: funziona sulla carta, ma su alcuni
   browser mobili il bordo e il collasso dei bordi di una <table> resa
   display:block si comportano in modo incoerente. Un <div> vero e
   proprio come contenitore non ha questo problema.) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;margin:0 0 20px;}
.table-scroll table{margin:0;}
article table.fcf{width:auto;border:1.5px solid var(--ink);}
article table.fcf td{font-family:'Azeret Mono',monospace;font-size:14px;text-align:center;padding:9px 16px;border:1px solid var(--ink);white-space:nowrap;}
article pre{font-family:'Azeret Mono',monospace;font-size:12.5px;line-height:1.5;background:var(--tint);border:1px solid var(--edge);border-left:3px solid var(--red);padding:14px 16px;margin:0 0 20px;overflow-x:auto;white-space:pre;max-width:100%;}
@media(max-width:620px){article pre{font-size:11px;}}
article table{border-collapse:collapse;width:100%;font-size:14px;}
article th,article td{border:1px solid var(--edge);padding:8px 11px;text-align:left;}
article th{background:var(--tint);font-family:'Azeret Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--graphite);}
article td.mono{font-family:'Azeret Mono',monospace;font-size:13px;}
.nota{border:1px solid var(--ink);background:var(--tint);padding:16px 18px;margin:0 0 20px;font-size:14.5px;}
.nota b{display:block;font-family:'Azeret Mono',monospace;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:6px;font-weight:400;}
.fine{border-top:1px solid var(--ink);margin-top:38px;padding-top:22px;display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:11px 18px;border:1px solid var(--ink);}
.btn:hover{background:#000;}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-ghost:hover{background:var(--tint);}
footer{border-top:1px solid var(--edge);margin-top:46px;padding:22px 0 40px;font-size:13px;color:var(--graphite);}
footer .foot{display:flex;flex-wrap:wrap;gap:8px 22px;}