:root {
  --bg: #f9f4e7;       /* Beige caldo */
  --fg: #333333;       /* Testo scuro, facile da leggere */
  --muted: #7a7a7a;
  --link: #8b5e3c;     /* Marrone caldo */
  --border: #ccc6b0;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
}

.wrapper { max-width: 800px; margin: 0 auto; padding: 24px; }

header.site h1 { font-size: 2rem; margin: 0 0 12px; }

nav a {
  color: var(--link);
  text-decoration: none;
  margin-right: 12px;
  padding: 2px 4px;
  border-radius: 6px;
}
nav a:hover { background: rgba(0,0,0,.06); }

.prose h1 { font-size: 1.8rem; margin: 1.2rem 0 .5rem; }
.prose h2 { font-size: 1.4rem; margin: 1rem 0 .25rem; }
.prose p  { margin: .8rem 0; }

.prose blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 4px solid var(--border);
  color: var(--muted);
  font-style: italic;
}

/* Divider e testi piccoli */
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
.small { font-size: .9rem; color: var(--muted); }

/* Immagini responsive di base */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 6px;
}

/* Figura + didascalia */
.prose figure { margin: 1.25rem 0; text-align: center; }
.prose figure img { margin: 0 auto .5rem; }
.prose figcaption { font-size: .95rem; color: var(--muted); }

/* Varianti dimensioni */
.prose .medium img { max-width: 720px; }
.prose .thumb  img { max-width: 360px; }

/* Variante: bordo leggero */
.prose .framed img { border: 1px solid var(--border); }

/* Allineamenti opzionali */
.prose .left  { text-align: left; }
.prose .right { text-align: right; }

/* Dark mode automatica (opzionale) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f0e0c; --fg:#eee; --muted:#aaa; --link:#d2a57a; --border:#3b362d;
  }
  nav a:hover { background: rgba(255,255,255,.08); }
}