:root {
  --fondo:#0d0c0b; --carta:#151311; --testo:#fdfbf7; --tenue:#a49c90;
  --oro:#e8c07a; --bordo:#2a2622;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--fondo); color:var(--testo);
  font:17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
.guscio { max-width:44rem; margin:0 auto; padding:0 1.4rem; }

/* Intestazione: il segno del marchio è lo stesso di Instagram e YouTube. Chi
   arriva qui da uno Short deve riconoscere dove è finito, senza leggere. */
header { border-bottom:1px solid var(--bordo); }
header .guscio { display:flex; align-items:center; gap:.85rem; padding-top:1.5rem;
                 padding-bottom:1.5rem; }
header svg { width:34px; height:34px; color:var(--oro); flex:none; }
header .nome { font-family:'Instrument Serif',Georgia,serif; font-size:1.5rem;
               letter-spacing:-.02em; text-decoration:none; }
header nav { margin-left:auto; display:flex; gap:1.1rem; font-size:.86rem; }
header nav a { color:var(--tenue); text-decoration:none; }
header nav a:hover { color:var(--oro); }

h1 { font-family:'Instrument Serif',Georgia,serif; font-weight:400;
     font-size:clamp(2rem,5.2vw,3rem); line-height:1.08; letter-spacing:-.025em;
     margin-bottom:1.1rem; }
.occhiello { color:var(--oro); font-size:.79rem; letter-spacing:.15em;
             text-transform:uppercase; margin-bottom:.9rem; }

main { padding:3.2rem 0 4.5rem; }
.corpo p { margin-bottom:1.2rem; }
.corpo p.guida { font-size:1.16rem; color:#e4ded4; }

/* La scheda della verifica. È il pezzo per cui il sito esiste: mostra che
   dietro alla frase c'è uno studio con un nome e un anno, e cosa il controllo
   ha obiettato. Sta in evidenza, non in fondo in grigio chiaro. */
.verifica { background:var(--carta); border:1px solid var(--bordo);
            border-radius:12px; padding:1.4rem 1.5rem; margin:2.2rem 0; }
.verifica h2 { font-size:.79rem; letter-spacing:.15em; text-transform:uppercase;
               color:var(--oro); margin-bottom:1rem; font-weight:600; }
.verifica dt { font-size:.78rem; color:var(--tenue); text-transform:uppercase;
               letter-spacing:.08em; margin-top:1rem; }
.verifica dt:first-of-type { margin-top:0; }
.verifica dd { margin-top:.28rem; font-size:.96rem; }
.fonte { font-family:'Instrument Serif',Georgia,serif; font-size:1.12rem; color:var(--oro); }

.etichette { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.etichette span { font-size:.8rem; color:var(--tenue); border:1px solid var(--bordo);
                  padding:.28rem .75rem; border-radius:999px; }

/* La morale, in chiusura. Sta dopo la spiegazione perché è una conclusione:
   messa in cima faceva concorrenza al titolo e si leggeva due volte. */
.morale { font-family:'Instrument Serif',Georgia,serif; font-size:1.5rem;
          line-height:1.3; color:var(--oro); border-left:2px solid var(--oro);
          padding-left:1.2rem; margin:2.4rem 0 0; letter-spacing:-.01em; }

/* Indice */
.elenco { list-style:none; }
.elenco li { border-bottom:1px solid var(--bordo); }
.elenco a { display:block; padding:1.45rem 0; text-decoration:none; }
.elenco a:hover .titolo { color:var(--oro); }
.elenco .titolo { font-family:'Instrument Serif',Georgia,serif; font-size:1.42rem;
                  line-height:1.22; letter-spacing:-.015em; }
.elenco .sotto { color:var(--tenue); font-size:.93rem; margin-top:.4rem; }

footer { border-top:1px solid var(--bordo); padding:2.2rem 0 3rem;
         color:var(--tenue); font-size:.87rem; }
footer a { color:var(--oro); }
footer p { margin-bottom:.6rem; }

/* La riga sopra i riquadri. Quattro bottoni senza una frase che li introduca
   sono un piè di pagina: si saltano. Una riga che dice cosa si ottiene
   seguendo li trasforma in una scelta. */
.invito { margin:2.6rem 0 -1rem; color:var(--tenue); font-size:.95rem;
          line-height:1.5; }

.altrove { display:flex; gap:.7rem; flex-wrap:wrap; margin:2.6rem 0 0; }
.altrove a { flex:1; min-width:11rem; text-align:center; padding:.85rem 1rem;
             border:1px solid var(--bordo); border-radius:10px; text-decoration:none;
             font-size:.92rem; }
.altrove a:hover { border-color:var(--oro); color:var(--oro); }

.indietro { display:inline-block; margin-bottom:2rem; color:var(--tenue);
            text-decoration:none; font-size:.9rem; }
.indietro:hover { color:var(--oro); }

/* Il video incorporato: rapporto fisso 16:9 perché senza, l'iframe collassa a
   150 px di altezza sui telefoni. */
.video { position:relative; padding-bottom:56.25%; height:0; margin:2rem 0;
         border-radius:12px; overflow:hidden; background:var(--carta); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.capitoli { list-style:none; }
.capitoli li { border-bottom:1px solid var(--bordo); }
.capitoli a { display:flex; gap:1rem; padding:.9rem 0; text-decoration:none;
              align-items:baseline; }
.capitoli a:hover { color:var(--oro); }
.capitoli .tempo { color:var(--oro); font-variant-numeric:tabular-nums;
                   font-size:.9rem; flex:none; min-width:2.6rem; }

.fonti .citazione { font-family:'Instrument Serif',Georgia,serif; font-size:1.18rem;
                    color:var(--oro); line-height:1.35; }
.fonti .sotto { margin-top:.3rem; }

/* Telefono. Il sito non aveva NESSUNA regola per schermi stretti: reggeva per
   caso finché la barra in alto aveva due voci, e si è rotto il giorno in cui
   sono diventate quattro. Misurato su 375 px: viewport 375, contenuto 461,
   ottantasei pixel di scorrimento laterale su ogni pagina.

   La barra passa sotto al nome invece di stringersi: comprimere quattro voci
   in centottanta pixel le renderebbe illeggibili, e una riga in più costa
   molto meno di quattro etichette da cinque punti. */
@media (max-width: 34rem) {
  header .guscio { flex-wrap:wrap; row-gap:.9rem; }
  header nav { margin-left:0; width:100%; flex-wrap:wrap; gap:.9rem; font-size:.84rem; }

  /* Gli indirizzi lunghi — quelli degli studi, quello del sito nelle pagine
     legali — non hanno spazi dove andare a capo e sfondano la colonna. */
  .corpo, .elenco, .verifica { overflow-wrap:anywhere; }

  /* Due riquadri affiancati non ci stanno: 11rem l'uno più il divario
     superano la colonna utile. Uno per riga, a piena larghezza. */
  .altrove a { min-width:100%; }
}

/* La curiosità del giorno: uguale per tutti, cambia a mezzanotte. È il motivo
   per tornare che al sito mancava del tutto — chi l'aveva già visto non aveva
   nessuna ragione di riaprirlo. */
.oggi { background:var(--carta); border:1px solid var(--bordo); border-radius:14px;
        padding:1.8rem 1.7rem; margin:2.6rem 0 0; }
.oggi .occhiello { margin-bottom:.7rem; }
.oggi h2 { font-family:'Instrument Serif',Georgia,serif; font-weight:400;
           font-size:1.75rem; line-height:1.18; letter-spacing:-.02em; }
.oggi p { color:var(--tenue); margin-top:.7rem; font-size:.97rem; }
.oggi a { text-decoration:none; display:block; }
.oggi a:hover h2 { color:var(--oro); }

.correlate { margin-top:3rem; padding-top:2rem; border-top:1px solid var(--bordo); }
.correlate h2 { font-size:.79rem; letter-spacing:.15em; text-transform:uppercase;
                color:var(--tenue); margin-bottom:.5rem; }
.correlate .titolo { font-size:1.2rem; }
.correlate .elenco a { padding:1.05rem 0; }

/* Ricerca e caso: le due funzioni per chi arriva senza sapere cosa cerca. */
.strumenti { display:flex; gap:.7rem; margin:2.2rem 0 1rem; }
#cerca { flex:1; background:var(--carta); border:1px solid var(--bordo);
         border-radius:10px; padding:.8rem 1rem; color:var(--testo); font:inherit;
         font-size:.98rem; }
#cerca:focus { outline:none; border-color:var(--oro); }
#cerca::placeholder { color:var(--tenue); }
#caso { background:var(--carta); border:1px solid var(--bordo); border-radius:10px;
        padding:.8rem 1.15rem; color:var(--testo); font:inherit; font-size:.94rem;
        cursor:pointer; white-space:nowrap; }
#caso:hover { border-color:var(--oro); color:var(--oro); }
.vuoto { color:var(--tenue); padding:2rem 0; display:none; }