/* Soft palette: warm off-white, slate text, muted blue links. */
:root {
  --testo: #2e323a;
  --tenue: #6f7680;
  --sfondo: #f1eee8;
  --link: #4f7396;
  --linea: #d9d4ca;
}
@media (prefers-color-scheme: dark) {
  :root { --testo: #dcdad5; --tenue: #9aa0a8; --sfondo: #383c42; --link: #9ab6d0; --linea: #50555c; }
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0 auto;
  max-width: 42rem;
  padding: 2.5rem 1rem 3rem;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.55;
  color: var(--testo);
  background: var(--sfondo);
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 2.5rem; }
header .nome { color: var(--testo); font-size: 1.15rem; }
nav a { margin-left: 1rem; color: var(--tenue); }
nav a:first-child { margin-left: 0; }
nav a[aria-current="page"] { color: var(--testo); }
h1 { font-size: 1.4rem; font-weight: normal; margin: 0 0 1.5rem; }
h2 { font-size: 1.1rem; font-weight: normal; margin: 2rem 0 .75rem; padding-bottom: .25rem; border-bottom: 1px solid var(--linea); }
ul.voci { list-style: none; padding: 0; }
ul.voci li { margin-bottom: .9rem; }
.tenue { color: var(--tenue); }
.nota { display: block; font-size: .85rem; color: var(--tenue); line-height: 1.4; margin-top: .1rem; padding-left: 0; text-indent: 0; }
.anno { color: var(--tenue); display: inline-block; min-width: 6rem; text-indent: 0; }
.date-list li { padding-left: 6rem; text-indent: -6rem; }
@media (max-width: 30rem) { .date-list li { padding-left: 0; text-indent: 0; } .anno { display: block; min-width: 0; } }
footer { margin-top: 4rem; font-size: .85rem; color: var(--tenue); }

/* Home: bio on the left, contact card on the right. */
.home { display: grid; grid-template-columns: 1fr 15rem; gap: 2.5rem; align-items: start; }
.home-main p:first-child { margin-top: 0; }
.contatti { font-size: .9rem; line-height: 1.45; padding: 1rem 1.1rem; border: 1px solid var(--linea); border-radius: 6px; background: color-mix(in srgb, var(--sfondo) 94%, var(--testo)); }
.contatti dl { margin: 0; }
.contatti dt { color: var(--tenue); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .8rem; }
.contatti dt:first-child { margin-top: 0; }
.contatti dd { margin: .1rem 0 0; }
.contatti .foto { display: block; width: 100%; border-radius: 4px; margin-bottom: 1rem; }
@media (max-width: 40rem) { .home { grid-template-columns: 1fr; gap: 1.5rem; } }