/* ---------- 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 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  text-decoration: none;
  text-transform: var(--nome-maiuscolo);
  letter-spacing: 0.2em;
  font-weight: 500;
  margin-right: auto;
}
.nome .logo { flex: none; position: relative; top: -1px; }
.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; }
/* Dati a destra di ogni opera in un elenco: periodo (link) e anno. */
.voce-dati { display: flex; gap: 0.9rem; justify-content: flex-end; flex-wrap: wrap; }
.voce-dati .c-periodo { text-decoration: none; }
.voce-dati .c-periodo:hover { text-decoration: underline; }
.voce-dati .c-resto { min-width: 2.2rem; text-align: right; }
.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); }

/* Titoli delle opere negli elenchi: sempre tra virgolette (nella pagina dell'opera no). */
.t-opera::before { content: "\201C"; }
.t-opera::after { content: "\201D"; }

/* Segnaposto per ciò che non è ancora assegnato (es. libro non ancora pubblicato). */
.segnaposto { opacity: 0.55; letter-spacing: 0.08em; }

.numerato { counter-reset: n; }
.numerato li { counter-increment: n; }
/* Nelle liste numerate il numero precede la virgoletta iniziale del titolo. */
.numerato li .t-opera::before { content: counter(n) ".\00a0\00a0\201C"; }
/* Brano del tracklist non ancora online: stesso aspetto, ma spento e senza link. */
.t-opera.spenta { color: var(--seppia); opacity: 0.75; }

/* 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) 6.5rem minmax(0, 1.3fr) minmax(0, 1.7fr) 3.2rem;
  gap: 1.2rem;
  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-periodo a, .tabella .c-libro a { text-decoration: none; }
.tabella .c-periodo a:hover, .tabella .c-libro a:hover { text-decoration: underline; }
.tabella .c-anno { text-align: right; }

/* Opera del giorno, sopra l'elenco della home. */
/* Marchio (la «v» con il puntino) in filigrana a destra del riquadro. */
.vetrina { position: relative; overflow: hidden; }
.vetrina::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 7rem;
  height: 7rem;
  transform: translateY(-50%);
  opacity: 0.1;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b16' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='4.2' r='1.35' fill='%231d1b16' stroke='none'/><path d='M5 9.5 L12 20.5 L19 9.5'/></svg>") no-repeat center / contain;
}
@media (max-width: 56rem) { .vetrina::after { display: none; } }

/* Compatta: a sinistra titolo e dati, a destra un breve estratto. */
.vetrina {
  display: grid;
  grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr);
  gap: 0.6rem 2rem;
  align-items: center;
  margin: 0 0 1.8rem;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--filo);
  background: var(--carta-scura);
}
.vetrina .etichetta { margin: 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--seppia); }
.vetrina-titolo { margin: 0.1rem 0 0; font-weight: 500; font-size: 1.2rem; line-height: 1.25; }
.vetrina-titolo a { text-decoration: none; }
.vetrina-titolo a:hover { text-decoration: underline; }
.vetrina-meta { margin: 0; font-size: 0.8rem; }
.vetrina-meta a { text-decoration: none; }
.vetrina-testo {
  margin: 0;
  padding-left: 1rem;
  border-left: 2px solid var(--filo);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--inchiostro);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 40rem) {
  .vetrina { grid-template-columns: minmax(0, 1fr); }
  .vetrina-testo { -webkit-line-clamp: 3; }
}
.vetrina-leggi { margin: 0.25rem 0 0; font-size: 0.9rem; }
.vetrina-leggi a { color: var(--seppia); text-decoration: none; }
.vetrina-leggi a:hover { color: var(--inchiostro); }

.raccolte-per-genere section { margin-bottom: 2.2rem; }
.raccolte-per-genere .pubblicazioni { margin-top: 3.2rem; padding-top: 1.6rem; border-top: 3px double var(--filo); }
.sottotitoletto {
  font-weight: 400; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--seppia); margin: 1.4rem 0 0.4rem;
}

/* 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, .sottotitoletto .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-periodo { grid-column: 1; }
  .tabella .c-libro { 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);
}
.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; text-decoration: none; }
a.riquadro-titolo:hover { text-decoration: underline; }
.riquadro-azione { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--seppia); text-decoration: none; border-bottom: 1px solid var(--filo); }
.riquadro-azione:hover { color: var(--inchiostro); border-bottom-color: var(--seppia); }

/* Pagina di una raccolta: elenco a sinistra, copertina in cornice a destra. */
.raccolta-testata { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 2rem 4rem; align-items: start; }
.cornice { margin: 0; padding: 0.7rem; border: 1px solid var(--seppia); background: var(--carta-scura); box-shadow: 3px 3px 0 var(--filo); }
.cornice img { display: block; width: 100%; height: auto; border: 1px solid var(--filo); }
.cornice figcaption { margin-top: 0.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--seppia); text-align: center; }
@media (max-width: 56rem) {
  .raccolta-testata { grid-template-columns: minmax(0, 1fr); }
  .copertina { order: -1; max-width: 14rem; }
}

/* Fine dell'opera: nota sulla versione e box dell'autore. */
.nota-ai {
  margin: 1.6rem 0 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--seppia);
  border: 1px dashed var(--seppia);
  display: block;
  width: fit-content;
}
.autori {
  margin: 1.6rem 0 0;
  padding: 0.55rem 1rem;
  display: block;
  width: fit-content;
  border: 1px solid var(--filo);
  background: var(--carta-scura);
}
.autori .etichetta { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--seppia); }
.autori-nomi { display: block; font-size: 1rem; }
.riquadro-anni { display: block; font-size: 0.9rem; color: var(--seppia); }

/* Lettore audio nella scheda: pulsante, barra sottile e tempo, nei colori del sito */
.riquadro.audio .traccia { margin-top: 0.7rem; }
.riquadro.audio .traccia + .traccia { padding-top: 0.7rem; border-top: 1px dotted var(--seppia); }
.riquadro.audio audio { display: block; width: 100%; height: 2.4rem; accent-color: var(--seppia); }
.lettore { display: flex; align-items: center; gap: 0.75rem; }
.lt-play {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; padding: 0;
  color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--seppia); border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.lt-play:hover, .lt-play:focus-visible { background: var(--inchiostro); color: var(--carta); outline: none; }
.lt-play .ic-play { margin-left: 2px; }
.lt-play .ic-pausa { display: none; }
.lettore.in-riproduzione .ic-play { display: none; }
.lettore.in-riproduzione .ic-pausa { display: block; }
.lt-barra {
  position: relative; flex: 1; height: 0.9rem; cursor: pointer;
  background: linear-gradient(var(--seppia), var(--seppia)) center / 100% 1px no-repeat;
}
.lt-barra:focus-visible { outline: 1px dotted var(--seppia); outline-offset: 2px; }
.lt-pieno {
  position: absolute; left: 0; top: 50%; height: 3px; width: 0;
  transform: translateY(-50%); background: var(--inchiostro);
}
.lt-pieno::after {
  content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px;
  transform: translateY(-50%); border-radius: 50%; background: var(--inchiostro);
}
.lt-tempo { flex: none; font-size: 0.85rem; color: var(--seppia); font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right; }
.riquadro.audio .traccia-nome {
  display: block; margin-top: 0.3rem;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; 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); }

/* Marchio (la «v» con il puntino) in filigrana a destra della biografia. */
.bio { position: relative; }
.bio::after {
  content: "";
  position: absolute;
  right: 6%;
  top: -0.3rem;
  width: 7rem;
  height: 7rem;
  opacity: 0.08;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1b16' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='4.2' r='1.35' fill='%231d1b16' stroke='none'/><path d='M5 9.5 L12 20.5 L19 9.5'/></svg>") no-repeat center / contain;
}
@media (max-width: 56rem) { .bio::after { display: none; } }
.bio + .titoletto.spazio-sopra { margin-top: 2rem; }

/* ---------- Periodo in corso: una riga stretta sotto il menu, con il cursore che lampeggia ---------- */
.in-corso {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.35rem 0.1rem 0.4rem;
  margin: -0.9rem 0 1.4rem;
  border-bottom: 1px dotted var(--filo);
  text-decoration: none;
  color: var(--inchiostro);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.in-corso:hover .ic-nome { text-decoration: underline; text-underline-offset: 0.2em; }
.ic-anno { color: var(--seppia); font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.ic-freccia { color: var(--seppia); letter-spacing: -0.12em; transform: translateY(-1px); }
/* Il nome si «scrive»: in-corso.js misura la larghezza vera e la anima lettera per lettera.
   Senza JavaScript il nome è semplicemente visibile. */
.ic-nome {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
}
.js .ic-nome { max-width: 0; }
.ic-cursore {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: -0.45rem;
  background: var(--inchiostro);
  align-self: center;
  animation: ic-lampeggia 1.1s steps(1, end) infinite;
}
@keyframes ic-lampeggia { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* Con «riduci animazioni» attivo nel sistema l'effetto resta (non c'è movimento: il testo si compone
   sul posto), ma il cursore lampeggia solo per qualche secondo e poi resta fermo e visibile. */
@media (prefers-reduced-motion: reduce) {
  .ic-cursore { animation: ic-lampeggia 1.1s steps(1, end) 6; }
}

/* ---------- 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;
}

/* Titoli nei risultati di ricerca, anch'essi tra virgolette. */
#ricerca .pagefind-ui__result-link::before { content: "\201C"; }
#ricerca .pagefind-ui__result-link::after { content: "\201D"; }

.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; }
}

/* ---------- Cronologia dei periodi ---------- */
.cronologia { margin-bottom: 2.6rem; }
.tl { --nome: 9.5rem; margin-top: 1rem; }
.tl-riga { display: grid; grid-template-columns: var(--nome) minmax(0, 1fr); align-items: center; min-height: 1.9rem; }
.tl-nome { font-size: 0.95rem; line-height: 1.2; padding-right: 0.8rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.tl-nome:hover { text-decoration: underline; }
.tl-pista {
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: center; height: 100%; min-height: 1.9rem;
  background-image: repeating-linear-gradient(to right, var(--filo) 0, var(--filo) 1px, transparent 1px, transparent calc(100% / var(--n)));
  border-right: 1px solid var(--filo);
}
.tl-asse .tl-pista { background-image: none; border-right: 0; min-height: 1.4rem; }
.tl-anno { font-size: 0.7rem; letter-spacing: 0.05em; color: var(--seppia); text-align: left; padding-left: 0.15rem; overflow: hidden; }
.tl-anno-muto { visibility: hidden; }
.tl-barra {
  display: flex; align-items: center; justify-content: flex-end; height: 1.15rem; padding: 0 0.35rem; margin: 0.28rem 1px;
  background: var(--seppia); color: var(--carta); border-radius: 2px; text-decoration: none; opacity: 0.78;
  transition: opacity 0.15s, background 0.15s;
}
.tl-barra:hover { opacity: 1; background: var(--inchiostro); }
.tl-n { font-size: 0.7rem; line-height: 1; }
.tl-in-corso { opacity: 1; background: var(--inchiostro); background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(251,247,230,0.18) 5px 10px); }
.tl-nota { margin-top: 0.8rem; }
@media (max-width: 40rem) {
  .tl { --nome: 6.6rem; }
  .tl-nome { font-size: 0.82rem; }
  .tl-anno { font-size: 0.6rem; }
}

/* Cronologia: guida punteggiata sottile dal nome alla barra, evidenziazione della riga. */
.tl-riga:not(.tl-asse) {
  background-image: repeating-linear-gradient(to right, var(--filo) 0 1px, transparent 1px 5px);
  background-size: 100% 1px; background-position: 0 50%; background-repeat: no-repeat;
}
.tl-riga:not(.tl-asse):hover { background-color: rgba(120, 100, 60, 0.07); }
.tl-nome { justify-self: start; max-width: 100%; background: var(--carta); position: relative; z-index: 1; padding-right: 0.5rem; }
.tl-riga:hover .tl-nome { text-decoration: underline; }
.tl-riga:hover .tl-barra { opacity: 1; background: var(--inchiostro); }

/* ---------- Libro sfogliabile ---------- */
.riquadro-acquisto:hover { border-color: var(--inchiostro); }
.riquadro-acquisto .riquadro-titolo { margin-top: 0.1rem; }
.sfoglia { margin-top: 3rem; }
.libro-cornice { padding: 1.6rem 1.2rem; border: 1px solid var(--seppia); background: var(--carta-scura); box-shadow: 3px 3px 0 var(--filo); }
.libro { container-type: inline-size; width: 100%; max-width: 56rem; margin: 0 auto; outline: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.libro[data-modo="singolo"] { max-width: 26rem; }
.libro:focus-visible { box-shadow: 0 0 0 2px var(--seppia); }
.libro-scena { --pw: 50cqw; position: relative; width: 100%; height: 0; padding-bottom: 66.667%; perspective: 2400px; overflow: hidden; }
.libro[data-modo="singolo"] .libro-scena { --pw: 100cqw; padding-bottom: 133.333%; }
.libro-corpo { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.5, 0.05, 0.25, 1); }
.libro-corpo.chiuso-inizio { transform: translateX(-25%); }
.libro-corpo.chiuso-fine { transform: translateX(25%); }
.libro-corpo.senza-t, .libro-corpo.senza-t .foglio { transition: none; }
.foglio { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.5, 0.05, 0.25, 1); }
.foglio.girato { transform: rotateY(-180deg); }
.libro[data-modo="singolo"] .foglio { left: 0; width: 100%; }
.faccia { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; cursor: pointer; }
.faccia.retro { transform: rotateY(180deg); }
.faccia.vuota { cursor: default; }
.pagina { position: relative; width: 100%; height: 100%; font-size: calc(var(--pw) * 0.04); background: #fffdf3; color: var(--inchiostro); box-shadow: inset 0 0 0 1px rgba(122, 106, 72, 0.25); }
.faccia.fronte .pagina { background-image: linear-gradient(to right, rgba(70, 50, 15, 0.26), rgba(70, 50, 15, 0) 11%); }
.faccia.retro .pagina { background-image: linear-gradient(to left, rgba(70, 50, 15, 0.26), rgba(70, 50, 15, 0) 11%); }
.pagina-dentro { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; padding: 9% 9% 13% 12%; }
.faccia.retro .pagina-dentro { padding: 9% 12% 13% 9%; }
.pagina-misura { position: absolute; left: 0; top: 0; width: var(--pw); height: calc(var(--pw) * 4 / 3); visibility: hidden; pointer-events: none; }
.pagina-titolo { margin: 0 0 1.1em; font-size: 1.2em; font-weight: normal; line-height: 1.25; letter-spacing: 0.04em; }
.pagina-testo { flex: 1; min-height: 0; overflow: hidden; }
.pagina-testo p { margin: 0 0 0.95em; line-height: 1.42; }
.pagina-n { position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; font-size: 0.8em; color: var(--seppia); letter-spacing: 0.1em; }
.pagina-copertina .pagina-dentro { padding: 0; }
.pagina-copertina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cop-titolo { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 2.4em; letter-spacing: 0.1em; }
.pagina-fronte .pagina-dentro { align-items: center; justify-content: center; text-align: center; gap: 0.9em; }
.fr-titolo { font-size: 2.2em; letter-spacing: 0.12em; }
.fr-autore { font-size: 1.1em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--seppia); }
.fr-editore { font-size: 0.85em; color: var(--seppia); margin-top: 2em; }
.pagina-fine .pagina-dentro { align-items: center; justify-content: center; }
.fine-segno { font-size: 2em; color: var(--seppia); }
.pagina-testo .ind-blocco { margin: 0 0 0.3em; }
.ind-riga { display: flex; gap: 0.6em; align-items: baseline; border-bottom: 1px dotted var(--filo); padding-bottom: 0.1em; }
.ind-t { flex: 1; text-decoration: none; }
a.ind-t:hover { text-decoration: underline; }
.ind-n { color: var(--seppia); font-size: 0.85em; }
.foglio.in-giro .faccia::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(40, 28, 8, 0.38), rgba(40, 28, 8, 0.05)); animation: libro-ombra 0.9s ease-in-out both; }
@keyframes libro-ombra { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
.libro-barra { display: flex; justify-content: center; align-items: center; gap: 1.4rem; margin: 1rem auto 0; }
.libro-freccia { font: inherit; font-size: 1.6rem; line-height: 1; width: 2.6rem; height: 2.6rem; border: 1px solid var(--seppia); background: var(--carta); color: var(--inchiostro); cursor: pointer; }
.libro-freccia:hover:not(:disabled) { background: var(--inchiostro); color: var(--carta); }
.libro-freccia:disabled { opacity: 0.35; cursor: default; }
.libro-pagina { min-width: 6rem; text-align: center; font-size: 0.85rem; letter-spacing: 0.12em; color: var(--seppia); text-transform: uppercase; }
.sfoglia-nota { text-align: center; margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) {
  .libro-corpo, .foglio { transition: none; }
  .foglio.in-giro .faccia::after { animation: none; }
}
.libro[data-modo="singolo"] .pagina { font-size: calc(var(--pw) * 0.047); }

/* Pagina con libro: titolo, libro ed elenco a sinistra, copertina a destra su due righe. */
.raccolta-testata.con-libro {
  grid-template-columns: minmax(0, 1fr) 15rem;
  grid-template-areas: "testo cover" "libro cover" "elenco .";
  gap: 0 4rem;
}
.con-libro .area-testo { grid-area: testo; }
.con-libro .area-libro { grid-area: libro; min-width: 0; }
.con-libro .area-elenco { grid-area: elenco; min-width: 0; margin-top: 2rem; }
.con-libro .copertina { grid-area: cover; align-self: start; }
.con-libro .sfoglia { margin-top: 0; }
@media (max-width: 56rem) {
  .raccolta-testata.con-libro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cover" "testo" "libro" "elenco"; }
  .libro-cornice { padding: 0.9rem 0.5rem; }
}

/* Versione semplice (smartphone / touch): una pagina, nessun 3D. */
.libro-semplice { position: relative; width: 100%; height: 0; padding-bottom: 130%; }
.pagina-semplice { position: absolute; inset: 0; font-size: calc(100cqw * 0.041); box-shadow: inset 0 0 0 1px rgba(122, 106, 72, 0.3); background-image: linear-gradient(to right, rgba(70, 50, 15, 0.2), rgba(70, 50, 15, 0) 9%); }
.pagina-semplice .pagina-dentro { padding: 8% 7% 12% 10%; }
.pagina-scorri { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.pagina-semplice .pagina-testo { overflow-y: auto; }
.pagina-semplice .pagina-n { bottom: 4%; }
.entra-dx { animation: libro-entra-dx 0.28s ease-out; }
.entra-sx { animation: libro-entra-sx 0.28s ease-out; }
@keyframes libro-entra-dx { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes libro-entra-sx { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .entra-dx, .entra-sx { animation: none; } }
/* La copertina ha un'ombra a destra: i riquadri sotto non devono toccarla. */
.copertina .cornice { margin-bottom: 1.1rem; }

/* ---------- Strumenti per gli elenchi: un'icona che apre ordina / filtra / cerca ---------- */
.elenco li[hidden], .tabella li[hidden] { display: none; }
.filtri-elenco { margin: 0 0 1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--filo); font-size: 0.8rem; }
.filtri-testa { display: flex; align-items: center; gap: 0.8rem; }
.filtri-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.8rem; color: var(--seppia); background: none; border: 0; padding: 0.15rem 0; cursor: pointer; }
.filtri-toggle:hover, .filtri-toggle[aria-expanded="true"] { color: var(--inchiostro); }
.filtri-punto { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--inchiostro); }
.filtri-toggle.attivo .filtri-punto { display: inline-block; }
.filtri-conta { margin-left: auto; font-size: 0.75rem; color: var(--seppia); white-space: nowrap; }
.filtri-campi { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; align-items: center; margin-top: 0.5rem; padding: 0.6rem 0 0.2rem; border-top: 1px solid var(--filo); }
.filtri-campi[hidden] { display: none; }
.filtri-campi label { display: block; margin: 0; }
.filtri-campi label span { display: none; }
.filtri-elenco input, .filtri-elenco select { font: inherit; font-size: 0.8rem; color: var(--inchiostro); background: transparent; border: 0; border-bottom: 1px solid var(--filo); padding: 0.1rem 0.2rem; min-width: 0; max-width: 11rem; border-radius: 0; }
.filtri-elenco input { width: 9rem; }
.filtri-elenco select { cursor: pointer; color: var(--seppia); }
.filtri-elenco select:focus, .filtri-elenco input:focus { outline: none; border-bottom-color: var(--seppia); color: var(--inchiostro); }
.filtri-azzera { font: inherit; font-size: 0.8rem; color: var(--seppia); background: none; border: 0; padding: 0 0.2rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--filo); }
.filtri-azzera:hover { color: var(--inchiostro); }
@media (max-width: 40rem) { .filtri-elenco input { width: 100%; } .filtri-campi label { flex: 1 1 40%; } .filtri-elenco select { width: 100%; max-width: none; } }

/* ---------- Home: colonne da giornale e libri con copertina ---------- */
.home-colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 2.2rem; }
.home-colonna { padding: 0 1.6rem; border-left: 1px solid var(--filo); }
.home-colonna:first-child { padding-left: 0; border-left: 0; }
.home-colonna:last-child { padding-right: 0; }
.home-titolo { margin: 0 0 1rem; padding-top: 0.5rem; border-top: 3px double var(--seppia); font-size: 0.8rem; font-weight: normal; text-transform: uppercase; letter-spacing: 0.18em; color: var(--seppia); }
.home-titolo a { text-decoration: none; color: inherit; }
.home-titolo a:hover { color: var(--inchiostro); }
.home-lista { list-style: none; margin: 0; padding: 0; }
.home-lista li { padding: 0 0 0.9rem; margin-bottom: 0.9rem; border-bottom: 1px dotted var(--filo); }
.home-lista li:last-child { border-bottom: 0; margin-bottom: 0; }
.home-opera { display: block; font-size: 1.25rem; line-height: 1.25; text-decoration: none; }
.home-opera:hover { text-decoration: underline; }
.home-meta { display: block; margin-top: 0.1rem; font-size: 0.78rem; }
.home-estratto { display: block; margin-top: 0.35rem; font-style: italic; font-size: 0.95rem; line-height: 1.4; color: var(--seppia); }
.home-tutte { margin: 0.8rem 0 0; font-size: 0.85rem; }
.home-tutte a { color: var(--seppia); text-decoration: none; }
.home-tutte a:hover { color: var(--inchiostro); }
.home-pubblicazioni { margin-top: 2.6rem; }
.home-copertine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.4rem; }
.home-copertina { display: block; text-decoration: none; }
.home-copertina img, .home-senza-cop { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--seppia); box-shadow: 3px 3px 0 var(--filo); background: var(--carta-scura); }
.home-senza-cop { display: flex; align-items: center; justify-content: center; padding: 0.6rem; text-align: center; font-size: 1.05rem; }
.home-cop-titolo { display: block; margin-top: 0.6rem; font-size: 1.05rem; line-height: 1.25; }
.home-copertina:hover .home-cop-titolo { text-decoration: underline; }
.home-cop-meta { display: block; font-size: 0.78rem; }
@media (max-width: 56rem) {
  .home-colonne { grid-template-columns: minmax(0, 1fr); }
  .home-colonna, .home-colonna:first-child, .home-colonna:last-child { padding: 0; border-left: 0; margin-bottom: 2rem; }
}
.home-copertina img { height: auto; aspect-ratio: 3 / 4; }
/* Copertine in proporzione originale (quadrate o verticali), senza ritagli. */
.home-copertina img { aspect-ratio: auto; height: auto; }

.riquadro-spento .riquadro-titolo { font-size: 1rem; color: var(--seppia); }
/* Home: copertine tutte alla stessa altezza (larghezza secondo il formato), titoli allineati. */
.home-copertine { display: flex; flex-wrap: wrap; gap: 1.6rem 1.8rem; align-items: flex-start; grid-template-columns: none; }
.home-copertine li { flex: 0 0 auto; }
.home-copertina { display: flex; flex-direction: column; }
.home-copertina img { width: auto; height: 14rem; max-width: none; aspect-ratio: auto; }
.home-senza-cop { width: auto; height: 14rem; aspect-ratio: 3 / 4; }
.home-cop-titolo, .home-cop-meta { width: 0; min-width: 100%; }
@media (max-width: 40rem) { .home-copertine { gap: 1.2rem 1.2rem; } .home-copertina img, .home-senza-cop { height: 11rem; } }

/* Periodi secondari di una pubblicazione: di riflesso rispetto al principale. */
.riquadro-minore { margin-left: 1.2rem; padding: 0.4rem 0.8rem; border-color: var(--filo); border-left: 2px solid var(--seppia); background: transparent; }
.riquadro-minore .etichetta { font-size: 0.68rem; }
.riquadro-minore .riquadro-titolo { font-size: 0.98rem; color: var(--seppia); }
.riquadro-minore .riquadro-anni { font-size: 0.8rem; }

.riquadro-titolo.servizio { display: flex; align-items: center; gap: 0.55rem; }
.logo-servizio { flex: none; }

/* Riquadro «Esplora tutte»: stessa altezza delle copertine, testo centrato. */
.home-esplora { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 14rem; height: 14rem; padding: 1.2rem; text-align: center; text-decoration: none; font-size: 1.15rem; line-height: 1.35; color: var(--inchiostro); border: 1px solid var(--seppia); background: var(--carta-scura); box-shadow: 3px 3px 0 var(--filo); }
.home-esplora:hover { background: var(--inchiostro); color: var(--carta); }
.galleria-pubblicazioni { margin: 0.5rem 0 2.6rem; }
@media (max-width: 40rem) { .home-esplora { width: 11rem; height: 11rem; font-size: 1rem; } }

/* ---------- Slideshow di battute ---------- */
.battute { margin-top: 1.6rem; }
.battute-cornice { display: flex; align-items: center; justify-content: center; min-height: 12rem; padding: 2rem 1.6rem; border: 1px solid var(--seppia); background: var(--carta-scura); box-shadow: 3px 3px 0 var(--filo); text-align: center; outline: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.battute-cornice:focus-visible { box-shadow: 0 0 0 2px var(--seppia); }
.battuta { margin: 0; max-width: 32rem; font-size: 1.5rem; line-height: 1.4; transition: opacity 0.14s ease; }
.battuta.nascosta { opacity: 0; }
.battute-barra { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin-top: 1rem; }
.battute-caso { font: inherit; font-size: 0.85rem; color: var(--seppia); background: none; border: 0; border-bottom: 1px solid var(--filo); padding: 0.2rem 0; cursor: pointer; }
.battute-caso:hover { color: var(--inchiostro); border-bottom-color: var(--seppia); }
.battute-nota { text-align: center; margin-top: 0.6rem; }
@media (max-width: 40rem) { .battuta { font-size: 1.25rem; } .battute-cornice { min-height: 10rem; padding: 1.4rem 1rem; } }
@media (prefers-reduced-motion: reduce) { .battuta { transition: none; } }
.contiene-voce { display: block; font-size: 1.05rem; margin-top: 0.15rem; }

.pagina-nota .pagina-dentro { align-items: center; justify-content: center; text-align: center; }
.nota-testo { font-style: italic; line-height: 1.5; color: var(--seppia); max-width: 90%; }
.fonte-poesie { margin: 0 0 0.6rem; }
.fonte-poesie summary { cursor: pointer; padding: 0.5rem 0; border-bottom: 1px dotted var(--filo); font-size: 1.1rem; }
.fonte-poesie summary a { text-decoration: none; }
.fonte-poesie summary a:hover { text-decoration: underline; }
.fonte-poesie[open] summary { margin-bottom: 0.4rem; }
/* Gallerie di copertine: righe centrate, didascalie centrate sotto ogni copertina. */
.home-copertine { justify-content: center; }
.home-copertina { align-items: center; text-align: center; }
.home-cop-titolo, .home-cop-meta { text-align: center; }

.sottotitolo-opera { margin: -1rem 0 1.4rem; font-style: italic; font-size: 0.95rem; color: var(--seppia); }
.sottotitolo-opera a { text-decoration: none; border-bottom: 1px solid var(--filo); }
.sottotitolo-opera a:hover { color: var(--inchiostro); border-bottom-color: var(--seppia); }

/* libro sfogliabile: pagine con illustrazione */
.pagina-immagine .pagina-dentro { padding: 0; align-items: center; justify-content: center; }
.pagina-immagine img { width: 100%; height: 100%; object-fit: contain; display: block; }
.poesia-img { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto 1rem; }

/* ---- Progetti: elenco e pagina di presentazione (colori dal tema del progetto) ---- */
.progetti-sezione { margin: 0 0 2.4rem; }
.progetti-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.4rem; }
.progetto-card { display: flex; gap: 1rem; padding: 1rem; background: var(--tema-sfondo, var(--carta-scura)); color: var(--tema-inchiostro, var(--inchiostro)); border: 1px solid var(--tema-linea, var(--filo)); text-decoration: none; box-shadow: 3px 3px 0 var(--tema-linea, var(--filo)); transition: transform 0.15s, box-shadow 0.15s; }
.progetto-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tema-linea, var(--filo)); }
.progetto-card-img { flex: 0 0 5.2rem; }
.progetto-card-img img { display: block; width: 100%; height: auto; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25); }
.progetto-card-testo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.progetto-card-titolo { font-size: 1.3rem; line-height: 1.2; }
.progetto-card-desc { font-size: 0.95rem; line-height: 1.35; opacity: 0.85; }
.progetto-tipo { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; margin: 0 0 0.3rem; }

.progetto { --tema-sfondo: var(--carta-scura); --tema-sfondo2: var(--carta); --tema-inchiostro: var(--inchiostro); --tema-linea: var(--filo); }
.progetto-testata { display: grid; grid-template-columns: 1fr minmax(11rem, 17rem); gap: 2.2rem; align-items: center; margin: 0 0 2.4rem; padding: 2.4rem clamp(1rem, 4vw, 3rem); background: var(--tema-sfondo); color: var(--tema-inchiostro); border: 1px solid var(--tema-linea); box-shadow: 4px 4px 0 var(--tema-linea); }
.progetto-testata .sopra, .progetto-testata .sopra a { color: var(--tema-inchiostro); opacity: 0.75; }
.progetto-testata h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin: 0.1rem 0 0.4rem; color: var(--tema-inchiostro); }
.progetto-motto { font-style: italic; font-size: 1.35rem; margin: 0 0 0.6rem; }
.progetto-sotto { margin: 0 0 1.4rem; opacity: 0.85; }
.progetto-copertina img { display: block; width: 100%; height: auto; box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.3); }
.progetto-azioni { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0; }
.progetto-bottone { display: inline-block; padding: 0.55rem 1.1rem; background: var(--tema-inchiostro, var(--inchiostro)); color: var(--tema-sfondo, var(--carta)); border: 1px solid var(--tema-inchiostro, var(--inchiostro)); text-decoration: none; letter-spacing: 0.05em; transition: opacity 0.15s; }
.progetto-bottone:hover { opacity: 0.85; }
.progetto-bottone.secondario { background: transparent; color: var(--tema-inchiostro, var(--inchiostro)); }
.progetto-sez { margin: 0 0 2.6rem; }
.progetto-sez .titoletto { border-bottom-color: var(--tema-linea); }
.progetto-prosa { max-width: var(--lettura); }
.progetto-prosa p { margin: 0 0 1em; }
.progetto-giorno { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) 1.2fr; gap: 1.4rem; align-items: start; }
.progetto-pagina { margin: 0; }
.progetto-pagina img { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--tema-linea); box-shadow: 3px 3px 0 var(--tema-linea); }
.progetto-giorno-testo h3 { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--seppia); margin: 0 0 0.4rem; font-weight: 500; }
.progetto-giorno-testo ul { margin: 0 0 1.2rem; padding-left: 1.1rem; }
.progetto-giorno-testo li { margin-bottom: 0.3rem; }
.progetto-galleria { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; }
.progetto-galleria figure { margin: 0; }
.progetto-galleria figure.largo { grid-column: 1 / -1; }
.progetto-galleria img { display: block; width: 100%; height: auto; border: 1px solid var(--tema-linea); }
.progetto-galleria figcaption { font-size: 0.9rem; color: var(--seppia); margin-top: 0.35rem; font-style: italic; }
.progetto-scheda { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem 1.6rem; margin: 0; }
.progetto-scheda div { border-top: 1px solid var(--tema-linea); padding-top: 0.45rem; }
.progetto-scheda dt { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--seppia); }
.progetto-scheda dd { margin: 0.1rem 0 0; font-size: 1.15rem; }
.progetto-benvenuto { margin-top: 1.2rem; max-width: var(--lettura); border: 1px solid var(--tema-linea); background: var(--tema-sfondo); padding: 0.8rem 1.1rem; }
.progetto-benvenuto summary { cursor: pointer; font-style: italic; }
.progetto-benvenuto div { margin-top: 0.8rem; }
.progetto-benvenuto p { margin: 0 0 0.9em; }
.progetto-fine { margin: 3rem 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--tema-linea); }
@media (max-width: 52rem) {
  .progetto-testata { grid-template-columns: 1fr; text-align: left; }
  .progetto-copertina { max-width: 12rem; }
  .progetto-giorno { grid-template-columns: 1fr 1fr; }
  .progetto-giorno-testo { grid-column: 1 / -1; }
}

/* Marchio del sito in trasparenza, a destra del testo nelle sezioni di prosa (non cambia lo spazio della sezione) */
.progetto-sez.con-logo { position: relative; }
@media (min-width: 62rem) {
  .progetto-sez.con-logo::after {
    content: ""; position: absolute; right: 4%; top: 50%; width: min(17rem, 24%); aspect-ratio: 1; transform: translateY(-46%);
    background: var(--tema-inchiostro, var(--inchiostro)); opacity: 0.08; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'4.6'%20r%3D'1.4'%20fill%3D'black'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M6%2010%20L12%2020%20L18%2010'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'4.6'%20r%3D'1.4'%20fill%3D'black'%20stroke%3D'none'%2F%3E%3Cpath%20d%3D'M6%2010%20L12%2020%20L18%2010'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / contain no-repeat;
  }
}

/* Progetti: stato, avanzamento, indice dei contenuti, note */
.progetto-stato { display: inline-block; padding: 0.05rem 0.5rem; border: 1px solid currentColor; border-radius: 99px; font-size: 0.72rem; letter-spacing: 0.1em; }
.progetto-barra { position: relative; height: 1.5rem; max-width: 34rem; margin: 0 0 1rem; background: var(--tema-sfondo); border: 1px solid var(--tema-linea); }
.progetto-barra span { position: absolute; inset: 0 auto 0 0; background: var(--tema-linea); }
.progetto-barra b { position: relative; display: block; text-align: center; line-height: 1.5rem; font-weight: 500; font-size: 0.95rem; color: var(--tema-inchiostro); }
.progetto-indice details { border-top: 1px solid var(--tema-linea); padding: 0.5rem 0; }
.progetto-indice details:last-child { border-bottom: 1px solid var(--tema-linea); }
.progetto-indice summary { cursor: pointer; font-size: 1.15rem; }
.progetto-indice .ind-parte { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--seppia); margin-right: 0.4rem; }
.ind-capitoli { margin: 0.6rem 0 0.3rem; padding-left: 2rem; }
.ind-capitoli > li { margin: 0.5rem 0; }
.ind-cap { font-weight: 500; }
.ind-sub { margin: 0.2rem 0 0.4rem; padding-left: 0; list-style: none; font-size: 0.95rem; color: var(--seppia); }
.ind-sub li { padding-left: 1.4rem; text-indent: -1.4rem; margin: 0.1rem 0; }
.ind-sub .ind-n { display: inline-block; min-width: 2.4rem; }
.ind-sub li.ok { color: var(--inchiostro); }
.ind-sub li.ok::before { content: "● "; color: var(--tema-inchiostro, var(--inchiostro)); font-size: 0.7em; vertical-align: 0.1em; margin-left: -0.1rem; }
.progetto-note { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.progetto-nota { border-top: 1px solid var(--tema-linea); padding-top: 0.5rem; }
.progetto-nota h3 { font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--seppia); margin: 0 0 0.3rem; font-weight: 500; }
.progetto-nota p { margin: 0; }

.ind-capitoli > li.senza-numero { list-style: none; margin-left: -1.4rem; }

/* Progetto concluso / romanzo */
.progetto-stato.concluso { background: var(--tema-linea); color: var(--tema-inchiostro); }
.progetto-credito { margin: -.4rem 0 .8rem; font-style: italic; color: var(--tema-inchiostro); opacity: .8; font-size: .95rem; }
.progetto-relazione ul { padding-left: 1.2rem; }
.progetto-relazione li { margin: .5rem 0; }
.cap-testo > summary { cursor: pointer; }
.cap-corpo { padding: .6rem 0 1rem; max-width: 42rem; }
.cap-corpo p { margin: .6rem 0; }
.ind-capitoli li.non-scritto { opacity: .45; }

/* Avviso sotto il titolo di una raccolta (es. bozza avanzata) */
.avviso-raccolta { margin: .7rem 0 0; padding: .55rem .8rem; border-left: 3px solid var(--linea, #c9b98f); background: rgba(0,0,0,.035); font-size: .92rem; font-style: italic; max-width: 40rem; }

/* Diario: entrata precedente / successiva */
.diario-vicini { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; padding-top: .8rem; border-top: 1px solid var(--linea, #d9ccaa); font-size: .95rem; }
.diario-vicini a { text-decoration: none; }
.diario-vicini .succ { margin-left: auto; text-align: right; }

/* Parkerverse: guida, diario, apparato degli studiosi */
.progetto-sottotit { margin: 1.6rem 0 .5rem; font-size: 1.05rem; }
.progetto-estratti { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.progetto-estratti li, .apparato-testi li { padding: .6rem .8rem; border-left: 3px solid var(--tema-linea); background: rgba(255,255,255,.35); }
.progetto-estratti .estratto, .apparato-testi .estratto { display: block; margin-top: .25rem; font-size: .93rem; opacity: .85; font-style: italic; }
.apparato-testi { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .6rem; }
.apparato-testi .estratto { font-style: normal; }
.apparato-schede { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.2rem; }
.apparato-autore { padding: 1rem 1.1rem; border: 1px solid var(--tema-linea); background: var(--tema-sfondo2); }
.apparato-autore h3 { margin: 0 0 .1rem; }
.apparato-ritratto { width: 100%; height: auto; margin: 0 0 .7rem; display: block; }
.apparato-bio summary { cursor: pointer; margin-top: .5rem; }
.apparato-bio p { margin: .5rem 0; font-size: .95rem; }
.apparato-pagina { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; background: var(--tema-sfondo2); color: var(--tema-inchiostro); }
.apparato-testata { padding-bottom: 1rem; border-bottom: 1px solid var(--tema-linea); margin-bottom: 1.5rem; }
.apparato-firma { margin: .4rem 0 0; }
.apparato-intro p, .apparato-sezione p { margin: .75rem 0; }
.apparato-sezione h2 { margin: 2rem 0 .4rem; font-size: 1.25rem; }
.apparato-indice ol { columns: 2; column-gap: 2rem; padding-left: 1.2rem; font-size: .93rem; }
@media (max-width: 640px) { .apparato-indice ol { columns: 1; } }

/* Galleria di schermate di telefono: colonne più strette, immagini che non si allargano troppo */
.progetto-galleria.telefono { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
.progetto-galleria.telefono img { max-width: 15rem; margin: 0 auto; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.progetto-galleria.telefono figcaption { text-align: center; }

/* Video sotto il testo di una scheda: linea di separazione e riquadro */
.opera-video { margin-top: 2.2rem; }
.video-linea { border: 0; border-top: 1px solid var(--seppia); opacity: .55; margin: 0 0 2.2rem; } /* stessa distanza sopra (margine di .opera-video) e sotto la linea */
.video-box { border: 1px solid var(--seppia); background: var(--carta-scura); padding: .7rem 1rem 1rem; margin-bottom: .9rem; }
.video-box .etichetta { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--seppia); margin-bottom: .55rem; }
.video-schermo { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-schermo iframe, .video-schermo video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video nella colonna laterale, sotto i riquadri dell'audio */
.riquadro.video-lato { padding-bottom: .8rem; }
.riquadro.video-lato .etichetta { margin-bottom: .45rem; }

/* Anteprima del video nella colonna laterale e finestra con il video grande */
.video-anteprima { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #1c1a16 center / cover no-repeat; cursor: pointer; }
.video-anteprima .video-play { position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: rgba(250, 245, 230, .92); box-shadow: 0 1px 6px rgba(0,0,0,.35); }
.video-anteprima .video-play::after { content: ""; position: absolute; left: 1.2rem; top: .9rem; border-left: 1rem solid var(--seppia, #7a6a48); border-top: .6rem solid transparent; border-bottom: .6rem solid transparent; }
.video-anteprima:hover .video-play, .video-anteprima:focus-visible .video-play { background: #fff; }
.video-finestra { width: min(92vw, 56rem); max-width: none; padding: .8rem 1rem 1rem; border: 1px solid var(--seppia, #7a6a48); background: var(--carta-scura, #f3ecd6); color: inherit; }
.video-finestra::backdrop { background: rgba(20, 16, 8, .72); }
.video-finestra .video-titolo { margin: 0 2rem .55rem 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--seppia, #7a6a48); }
.video-finestra .video-chiudi { position: absolute; right: .55rem; top: .35rem; border: 0; background: none; font-size: 1.7rem; line-height: 1; cursor: pointer; color: inherit; }

/* Testata su telefono: titolo, menu (3 + 3 voci) e strumenti (ricerca e bandiere), ogni riga centrata */
.testata .rottura { display: none; }
@media (max-width: 40rem) {
  .testata { justify-content: center; text-align: center; row-gap: 0.7rem; }
  .nome { margin-right: 0; flex-basis: 100%; justify-content: center; }
  .testata nav { flex-basis: 100%; justify-content: center; gap: 0.5rem 1.3rem; }
  .testata .rottura { display: block; flex-basis: 100%; height: 0; margin-top: -0.5rem; } /* compensa il doppio spazio tra le righe */
  .utili { flex-basis: 100%; justify-content: center; padding-left: 0; border-left: 0; }
}