/* ---------- Colori e misure: cambia solo questi per ritoccare l'aspetto ---------- */
:root {
  --carta: #fbf7e6;        /* giallo pergamena molto tenue */
  --carta-scura: #f3edd3;
  --inchiostro: #1d1b16;   /* nero caldo */
  --seppia: #7a6a48;       /* testi secondari, linee */
  --filo: #ddd3b0;
  --font: "EB Garamond", "Garamond", "Georgia", "Times New Roman", serif;
  --largo: 76rem;          /* larghezza massima del sito su schermi grandi */
  --lettura: 38rem;        /* larghezza della colonna del testo di un'opera */
  --nome-maiuscolo: uppercase; /* "none" per mostrare il nome com'è scritto */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: 112.5%; }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: 1.15rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration-color: var(--seppia); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--inchiostro); }

.testata, main, .piede {
  max-width: var(--largo);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* ---------- Testata ---------- */
.testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 2rem;
  padding-block: 1.3rem 0.8rem;
  position: relative;
}
.testata::after {
  content: "";
  position: absolute;
  left: clamp(1rem, 4vw, 2.5rem);
  right: clamp(1rem, 4vw, 2.5rem);
  bottom: 0;
  border-bottom: 3px double var(--filo);
}
.nome {
  font-size: 1rem;
  text-decoration: none;
  text-transform: var(--nome-maiuscolo);
  letter-spacing: 0.2em;
  font-weight: 500;
  margin-right: auto;
}
.testata nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; }
.testata nav a {
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--seppia);
}
.testata nav a:hover, .testata nav a[aria-current] { color: var(--inchiostro); }

/* Lingua dell'interfaccia: si mostra solo il testo della lingua scelta. */
html:not([data-ui="en"]) [data-en],
html[data-ui="en"] [data-it] { display: none !important; }

/* Strumenti a destra: ricerca (icona) e bandiere. Separati dal menu per non confonderli. */
.utili {
  display: flex; align-items: center; gap: 1rem;
  padding-left: 1.4rem; border-left: 1px solid var(--filo);
}
.icona-cerca { color: var(--seppia); display: inline-flex; line-height: 0; }
.icona-cerca:hover, .icona-cerca[aria-current] { color: var(--inchiostro); }
.bandiere { display: flex; gap: 0.5rem; align-items: center; }
.bandiere button {
  background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0;
  opacity: 0.45; outline-offset: 2px; transition: opacity 0.15s;
}
.bandiere button svg { display: block; border: 1px solid var(--filo); }
.bandiere button:hover { opacity: 0.8; }
.bandiere button[aria-pressed="true"] { opacity: 1; }

main { padding-block: 2rem 3rem; }

/* ---------- Titoli e testi minori ---------- */
h1 { font-weight: 500; font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.35em; }
.titoletto {
  font-weight: 400;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--filo);
}
.titoletto a { text-decoration: none; color: var(--seppia); }
.titoletto a:hover { color: var(--inchiostro); }

.meta { color: var(--seppia); font-size: 0.9rem; }
.sopra { margin: 0 0 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--seppia); }
.sopra a { text-decoration: none; }
.sopra a:hover { color: var(--inchiostro); }
.ornamento { text-align: center; color: var(--seppia); margin: 2.5rem 0 0; font-size: 0; }
.ornamento::before { content: "*  *  *"; font-size: 1.15rem; letter-spacing: 0.35em; }

/* ---------- Elenchi ---------- */
.intestazione { margin-bottom: 1.8rem; }
.intestazione .meta { margin: 0; }
.elenco { list-style: none; margin: 0; padding: 0; }
.elenco li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px dotted var(--filo);
  break-inside: avoid;
}
.elenco a { text-decoration: none; }
.elenco a:hover { text-decoration: underline; }
.elenco .meta { white-space: nowrap; }
.tutte { margin: 0.7rem 0 0; font-size: 0.9rem; text-align: right; }
.tutte a { color: var(--seppia); text-decoration: none; }
.tutte a:hover { color: var(--inchiostro); }

/* Elenchi lunghi: più colonne sugli schermi larghi, una sola su telefono. */
.a-colonne { column-width: 21rem; column-gap: 3rem; }
.numerato { counter-reset: n; }
.numerato li { counter-increment: n; }
.numerato li a::before { content: counter(n) ".  "; color: var(--seppia); }

/* Home: elenco delle ultime opere a tutta larghezza, a colonne. */
.tabella { list-style: none; margin: 0; padding: 0; }
.tabella li {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 7rem minmax(0, 2fr) 3.2rem;
  gap: 1.5rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--filo);
}
.tabella .c-titolo { text-decoration: none; font-size: 1.2rem; }
.tabella .c-titolo:hover { text-decoration: underline; }
.tabella .c-raccolte a { text-decoration: none; }
.tabella .c-raccolte a:hover { text-decoration: underline; }
.tabella .c-anno { text-align: right; }

/* Sezioni con sottocategorie (Poesie | Quartine): due elenchi indipendenti affiancati.
   Su schermi stretti si dispongono uno sotto l'altro. */
.due-colonne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 2rem 4rem;
  align-items: start;
}
.titoletto .conta { color: var(--seppia); letter-spacing: 0; margin-left: 0.4rem; opacity: 0.8; }

.colonne-raccolte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 2rem 3rem;
}
.spazio-sopra { margin-top: 3rem; }

@media (max-width: 48rem) {
  .tabella li { grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; }
  .tabella .c-titolo { grid-column: 1; }
  .tabella .c-anno { grid-column: 2; grid-row: 1; }
  .tabella .c-sezione { grid-column: 1; }
  .tabella .c-raccolte { grid-column: 1 / -1; }
  .utili { border-left: 0; padding-left: 0; }
}

/* ---------- Opera: testo a sinistra, scheda a lato su schermi larghi ---------- */
.opera {
  display: grid;
  grid-template-columns: minmax(0, var(--lettura)) 15rem;
  gap: 2rem 5rem;
  justify-content: center;
}
.opera h1 { font-size: 2rem; margin-bottom: 1.6rem; }
.testo p { margin: 0 0 1.2em; }
.testo blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 2px solid var(--filo); color: var(--seppia); }
.testo hr { border: 0; text-align: center; margin: 2rem 0; }
.testo hr::after { content: "* * *"; color: var(--seppia); letter-spacing: 0.4em; }
.testo img { max-width: 100%; height: auto; }

.scheda { padding-top: 1.9rem; font-size: 0.95rem; }
.scheda dl { margin: 1.4rem 0 0; }
.scheda dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--seppia); margin-top: 0.9rem; }
.scheda dd { margin: 0; }
/* Riquadri della scheda: stesso aspetto per libro, album, periodo e traduzioni. */
.riquadro {
  display: block;
  text-decoration: none;
  padding: 0.7rem 1rem;
  margin-bottom: 0.7rem;
  border: 1px solid var(--seppia);
  background: var(--carta-scura);
}
a.riquadro:hover { background: var(--filo); }
.riquadro .etichetta { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--seppia); }
.riquadro-titolo { display: block; font-size: 1.15rem; line-height: 1.3; }
.riquadro-anni { display: block; font-size: 0.9rem; color: var(--seppia); }

.lingue-lista { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.25rem; }
.lingue-lista .attiva { border-bottom: 1px solid var(--inchiostro); }
.lingue-lista .spenta { color: var(--seppia); opacity: 0.5; text-decoration: line-through; text-decoration-thickness: 1px; cursor: default; }
.riquadro .nota { display: block; font-size: 0.8rem; color: var(--seppia); margin-top: 0.4rem; line-height: 1.35; }
.etichette span { display: inline-block; margin-right: 0.7rem; }
.etichette span::before { content: "#"; color: var(--seppia); }
.indietro { margin-top: 1.5rem; }
.indietro a { color: var(--seppia); text-decoration: none; }
.indietro a:hover { color: var(--inchiostro); }

@media (max-width: 56rem) {
  .opera { grid-template-columns: minmax(0, var(--lettura)); gap: 0; }
  .scheda { padding-top: 1rem; border-top: 1px solid var(--filo); margin-top: 1rem; }
}

/* ---------- Pagine di testo (Chi sono) ---------- */
.pagina-testo { max-width: var(--lettura); }

/* ---------- Modulo ---------- */
.modulo { display: grid; gap: 1rem; max-width: var(--lettura); }
.modulo label { display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--seppia); }
.modulo input, .modulo textarea {
  font: inherit; color: var(--inchiostro);
  background: var(--carta); border: 1px solid var(--filo);
  padding: 0.55rem 0.7rem; border-radius: 0;
}
.modulo input:focus, .modulo textarea:focus { outline: none; border-color: var(--seppia); }
.modulo button {
  justify-self: start;
  font: inherit; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.85rem;
  padding: 0.6rem 1.4rem; cursor: pointer;
  background: var(--inchiostro); color: var(--carta); border: 0;
}

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nota-modulo { margin: 0; }

/* ---------- Ricerca (Pagefind) ---------- */
#ricerca {
  max-width: 46rem;
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--inchiostro);
  --pagefind-ui-text: var(--inchiostro);
  --pagefind-ui-background: var(--carta);
  --pagefind-ui-border: var(--filo);
  --pagefind-ui-tag: var(--carta-scura);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-font: var(--font);
}

/* ---------- Piede ---------- */
.piede { text-align: center; color: var(--seppia); font-size: 0.85rem; padding-bottom: 2rem; }
.piede p { margin: 0; }

@media (max-width: 30rem) {
  html { font-size: 105%; }
  h1, .opera h1 { font-size: 1.7rem; }
}