:root {
    --scuro: #2b2421;
    --rosso: #c0262d;
    --testo: #262626;
    --grigio: #6b6b6b;
    --sfondo: #f6f4f2;
    --carta: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--testo); background: var(--sfondo);
       line-height: 1.6; }
a { color: var(--rosso); }

.testata { background: var(--scuro); padding: 14px 16px; }
.menu { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 34px; align-items: center;
        justify-content: center; }
.menu a { color: #eee; text-decoration: none; font-weight: 600; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: #fff; }
.menu a.attiva { color: #fff; border-bottom-color: var(--rosso); }
.menu a.riservata { border: 1px solid var(--rosso); border-radius: 6px; padding: 6px 14px; }

.contenuto { max-width: 900px; margin: 0 auto; padding: 28px 16px 48px; }
h1 { font-size: 2rem; margin: 0 0 20px; }
.vuoto { color: var(--grigio); }
time { display: block; color: var(--grigio); font-size: .9rem; }

.scheda { display: flex; gap: 18px; background: var(--carta); border-radius: 8px; padding: 18px; margin-bottom: 16px;
          box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.scheda img { width: 220px; height: 150px; object-fit: cover; border-radius: 6px; display: block; }
.scheda h2 { margin: 2px 0 6px; font-size: 1.3rem; }
.scheda h2 a { color: var(--testo); text-decoration: none; }
.scheda h2 a:hover { color: var(--rosso); }
.scheda p { margin: 0 0 8px; }
.leggi { font-weight: 600; text-decoration: none; }

.articolo { background: var(--carta); border-radius: 8px; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.articolo h1 { margin-top: 4px; }
.indietro { display: inline-block; margin-bottom: 14px; text-decoration: none; }
.immagine { max-width: 100%; border-radius: 6px; margin: 4px 0 18px; }
.testo p { margin: 0 0 1em; }

.pagine { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
.pagine a { padding: 4px 11px; border-radius: 4px; text-decoration: none; background: var(--carta); }
.pagine a.attiva { background: var(--rosso); color: #fff; }

.avviso { background: #fff3cd; border: 1px solid #e6c65c; padding: 10px 14px; border-radius: 6px; }
.piede { text-align: center; color: var(--grigio); font-size: .85rem; padding: 20px 16px 30px; }

@media (max-width: 640px) {
    .scheda { flex-direction: column; }
    .scheda img { width: 100%; height: 190px; }
    h1 { font-size: 1.6rem; }
    .menu { gap: 4px 18px; }
}