/* vincenzosmimmo.it — stile editoriale
   Palette: crema #F1E9DC · sabbia #E4D5BE · salvia #9AA98F / #5C6B4F
            terracotta #B08968 · noce #4A3222 · inchiostro #2B2620 */

:root {
  --crema: #F1E9DC;
  --sabbia: #E4D5BE;
  --salvia: #9AA98F;
  --salvia-scura: #55654A;
  --terracotta: #B08968;
  --noce: #4A3222;
  --inchiostro: #2B2620;
  --misura: 68ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--crema);
  color: var(--inchiostro);
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Testata ---------- */
header.testata {
  border-bottom: 3px double var(--salvia);
  background: var(--crema);
}
.testata-interno {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.4rem 1.25rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 2rem;
}
.marchio {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--noce);
  text-decoration: none;
}
nav.principale { margin-left: auto; }
nav.principale a {
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--inchiostro);
  text-decoration: none;
  margin-left: 1.4rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
nav.principale a:hover,
nav.principale a[aria-current="page"] {
  color: var(--salvia-scura);
  border-bottom-color: var(--salvia);
}

/* ---------- Impianto ---------- */
main { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.colonna { max-width: var(--misura); margin: 0 auto; }

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  color: var(--noce);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 560; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 560; margin: 2.6rem 0 0.9rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.5rem; }

p { margin: 0 0 1.15rem; }
p + h2 { margin-top: 2.8rem; }

a { color: var(--salvia-scura); text-decoration-color: var(--salvia); text-underline-offset: 3px; }
a:hover { color: var(--noce); }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; }

/* ---------- Apertura (home) ---------- */
.apertura { padding: 4.5rem 0 3rem; }
.apertura .qualifica {
  font-style: italic;
  font-size: 1.25rem;
  color: var(--salvia-scura);
  margin: 0.9rem 0 1.8rem;
}
.apertura .attacco { font-size: 1.3rem; line-height: 1.6; max-width: 58ch; }

/* citazione fondativa: l'elemento memorabile della pagina */
.incipit {
  margin: 3.5rem auto;
  max-width: 46ch;
  padding-left: 1.6rem;
  border-left: 5px solid var(--salvia);
}
.incipit blockquote {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 480;
  font-style: italic;
  color: var(--noce);
  line-height: 1.35;
}
.incipit .rimando { display: inline-block; margin-top: 1rem; font-style: italic; }

/* ---------- Sezioni su fondo sabbia ---------- */
.fascia {
  background: var(--sabbia);
  border-top: 1px solid var(--salvia);
  border-bottom: 1px solid var(--salvia);
  margin: 3rem -100vw 3rem;
  padding: 2.8rem 100vw;
}

/* ---------- Indice del blog ---------- */
.voce-articolo {
  padding: 2rem 0 1.8rem;
  border-bottom: 1px solid var(--salvia);
}
.voce-articolo:first-of-type { border-top: 1px solid var(--salvia); margin-top: 2.5rem; }
.voce-articolo h2 { margin: 0.3rem 0 0.6rem; }
.voce-articolo h2 a { color: var(--noce); text-decoration: none; }
.voce-articolo h2 a:hover { color: var(--salvia-scura); text-decoration: underline; text-decoration-color: var(--salvia); }
.dati-articolo {
  font-style: italic;
  font-size: 0.98rem;
  color: var(--terracotta);
}
.voce-articolo p.sommario { margin: 0.4rem 0 0; }

/* ---------- Pagina articolo ---------- */
article.pezzo { padding: 3.5rem 0 2rem; }
article.pezzo .dati-articolo { display: block; margin: 1.1rem 0 2.4rem; }
article.pezzo p:first-of-type::first-letter {
  font-family: "Fraunces", Georgia, serif;
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--salvia-scura);
}
.nota-legale {
  margin-top: 2.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--salvia);
  font-size: 0.98rem;
  font-style: italic;
  color: #5b5347;
}
.leggi-anche { margin-top: 2.2rem; font-style: italic; }

/* ---------- Piè di pagina ---------- */
footer.fondo {
  margin-top: 4.5rem;
  background: var(--noce);
  color: var(--sabbia);
  padding: 2.6rem 1.25rem 2.2rem;
}
.fondo-interno { max-width: 72rem; margin: 0 auto; }
.fondo-interno p { max-width: 62ch; font-size: 1rem; margin-bottom: 0.6rem; }
footer.fondo a { color: var(--sabbia); text-decoration-color: var(--salvia); }
footer.fondo a:hover { color: #fff; }
.firma { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; margin-bottom: 0.9rem; }

/* ---------- Varie ---------- */
ul.elenco { margin: 0 0 1.15rem 1.2rem; }
ul.elenco li { margin-bottom: 0.5rem; }
.spazio { height: 2rem; }

@media (max-width: 40rem) {
  nav.principale { margin-left: 0; width: 100%; }
  nav.principale a { margin-left: 0; margin-right: 1.2rem; }
  .apertura { padding: 3rem 0 2rem; }
}

/* ---------- Ritratto ---------- */
.colonna-larga { max-width: 62rem; margin: 0 auto; display: flex; gap: 3rem; align-items: center; }
.apertura-testo { flex: 1 1 30rem; }
.ritratto { flex: 0 1 19rem; margin: 0; }
.ritratto img, .ritratto-pagina img {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
  border-bottom: 5px solid var(--salvia);
}
.ritratto-pagina { margin: 0 0 2.2rem; max-width: 17rem; }
@media (max-width: 46rem) {
  .colonna-larga { flex-direction: column-reverse; gap: 1.6rem; align-items: flex-start; }
  .ritratto { max-width: 15rem; }
}