/* ============================================================
   albertoarcangeli.com — foglio di stile unico
   Estetica: essenziale, tipografica, "carta e inchiostro"
   con un solo accento blu notte (le farfalle notturne).
   ============================================================ */

:root {
  --carta: #fbfaf7;        /* sfondo, quasi bianco */
  --inchiostro: #20211f;   /* testo */
  --grigio: #6e6e68;       /* note, piè di pagina */
  --notte: #28365c;        /* accento: link e dettagli */
  --filo: #dddbd3;         /* linee sottili */
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  /* Serif di sistema: leggibile, letterario, zero font da scaricare */
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
  /* Colonna stretta e centrata, com'è nello spirito del sito */
  max-width: 36rem;
  padding: 2.5rem 1.25rem 4rem;
  margin-inline: auto;
}

/* ---------- Testata ---------- */

.testata .nome {
  margin: 0 0 1.75rem;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
}

.testata .nome a {
  color: var(--inchiostro);
  text-decoration: none;
}

/* ---------- Menu ----------
   La lista verticale del sito storico, resa con cura:
   voci separate da fili sottili, leggibili anche col pollice. */

.menu ul {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  border-top: 1px solid var(--filo);
}

.menu li {
  border-bottom: 1px solid var(--filo);
}

.menu a {
  display: block;
  padding: 0.55rem 0.25rem;
  color: var(--notte);
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.04em;
}

.menu a:hover,
.menu a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* La pagina in cui ti trovi è in inchiostro, non in blu */
.menu a[aria-current="page"] {
  color: var(--inchiostro);
  font-style: italic;
}

/* Su schermi larghi il menu si distende in orizzontale */
@media (min-width: 38rem) {
  .menu ul {
    display: flex;
    justify-content: center;
    gap: 1.75rem;
    border-top: none;
    border-block: 1px solid var(--filo);
    padding: 0.15rem 0;
  }
  .menu li { border-bottom: none; }
  .menu a { padding: 0.35rem 0; }
}

/* ---------- Contenuto ---------- */

.contenuto h1 {
  font-size: 1.5rem;
  font-weight: normal;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
}

.contenuto h2 {
  font-size: 1.15rem;
  font-weight: normal;
  font-style: italic;
  margin: 2rem 0 0.75rem;
}

.contenuto a {
  color: var(--notte);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.copertina {
  margin: 0;
}

.copertina img {
  display: block;
  width: 100%;       /* responsive: l'immagine non sborda mai */
  height: auto;
  margin-inline: auto;
}

img { max-width: 100%; height: auto; }

/* ---------- Piè di pagina ---------- */

.piede {
  margin-top: 4rem;
  text-align: center;
  color: var(--grigio);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* Rispetto per chi preferisce meno movimento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Pagina Music: i dischi ---------- */

.disco {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0 0 3.5rem;
}

/* Su schermi larghi: copertina a sinistra, info a destra */
@media (min-width: 38rem) {
  .disco {
    grid-template-columns: 14rem 1fr;
    align-items: start;
  }
}

.disco-copertina img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--filo);
}

.disco-info h2 {
  margin: 0 0 0.5rem;
  font-style: normal;
  font-size: 1.2rem;
}

.disco-info .anno {
  color: var(--grigio);
  font-size: 1rem;
}

.disco-nota {
  margin: 0 0 0.75rem;
  color: var(--grigio);
}

.tracce {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.tracce li {
  margin: 0.15rem 0;
}

.tracce a {
  text-decoration: none;
}

.tracce a:hover,
.tracce a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.scarica {
  margin: 0.5rem 0;
}

.disco-video {
  margin: 0.25rem 0;
  font-size: 0.95rem;
}

.en {
  color: var(--grigio);
  font-size: 0.9em;
}

.donazione {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filo);
  text-align: center;
  font-size: 0.95rem;
}

/* ---------- Pagina Press: le recensioni ---------- */

.contenuto blockquote {
  margin: 0 0 1.75rem;
  padding-left: 1rem;
  border-left: 2px solid var(--filo);
}

.contenuto blockquote p {
  margin: 0 0 0.35rem;
}

.contenuto blockquote strong {
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  color: var(--notte);
}

/* ============================================================
   BLOG
   ============================================================ */

.blog-titolo {
  margin-bottom: 1.5rem;
}

/* ---------- Filtro lingua ---------- */

.filtro-lingua {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--filo);
}

.filtro-btn {
  font-family: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--grigio);
  background: none;
  border: 1px solid var(--filo);
  border-radius: 2px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}

.filtro-btn:hover {
  color: var(--inchiostro);
}

.filtro-btn.attivo {
  color: var(--carta);
  background: var(--notte);
  border-color: var(--notte);
}

/* ---------- Elenco dei post ---------- */

.elenco-post {
  list-style: none;
  margin: 0;
  padding: 0;
}

.voce-post {
  border-bottom: 1px solid var(--filo);
}

.voce-post a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--inchiostro);
}

.voce-post a:hover .voce-titolo {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.voce-data {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--grigio);
  font-variant-numeric: tabular-nums;
  width: 5.5rem;
}

.voce-titolo {
  flex-grow: 1;
}

/* ---------- Etichetta lingua ---------- */

.lingua-tag {
  flex-shrink: 0;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--filo);
  border-radius: 2px;
  color: var(--grigio);
  font-family: Georgia, serif;
}

/* ---------- Il singolo post ---------- */

.post-singolo {
  /* eredita la colonna stretta dal body */
}

.post-testa {
  margin-bottom: 2rem;
}

.post-data {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--grigio);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.post-testa h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: normal;
  line-height: 1.25;
}

/* Corpo del post: respiro tra i paragrafi, immagini contenute */

.post-corpo {
  font-size: 1.05rem;
}

.post-corpo p {
  margin: 0 0 1.3rem;
}

.post-corpo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem auto;
}

.post-corpo h2 {
  font-size: 1.25rem;
  font-style: normal;
  margin-top: 2.5rem;
}

.post-corpo blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 2px solid var(--filo);
  color: var(--grigio);
}

.post-piede {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filo);
  font-size: 0.9rem;
}

.post-piede a {
  color: var(--notte);
  text-decoration: none;
}

.post-piede a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- Blog opzione A: recenti interi + archivio ---------- */

.blog-recenti {
  margin-bottom: 1rem;
}

/* Ogni post intero nell'indice, separato dal successivo da un filo */
.post-intero {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--filo);
}

.post-intero-titolo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: normal;
  font-style: normal;
  line-height: 1.25;
}

.post-intero-titolo a {
  color: var(--inchiostro);
  text-decoration: none;
}

.post-intero-titolo a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* L'archivio sotto i post recenti */
.blog-archivio {
  margin-top: 3rem;
}

.archivio-testa h2 {
  font-size: 1.1rem;
  font-style: normal;
  letter-spacing: 0.03em;
  margin: 0 0 1rem;
}

/* Su schermo largo: titolo "Tutti gli scritti" e filtro sulla stessa riga */
@media (min-width: 38rem) {
  .archivio-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .archivio-testa h2 { margin-bottom: 0; }
}

/* Nell'archivio il filtro non ha più il bordo inferiore proprio */
.blog-archivio .filtro-lingua {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1.25rem;
}