/* Foglio di stile condiviso da tutte le pagine generate (citazioni, temi, generi,
   autori). index.html tiene il proprio CSS inline: è l'unica pagina che ci
   guadagna qualcosa a farlo. Generato/mantenuto a mano, non da uno script. */

:root {
  color-scheme: light;
  --paper: #f2f0eb;
  --paper-raised: #f8f7f3;
  --ink: #211f1b;
  --ink-soft: #5b564d;
  --ink-faint: #736d60;
  --accent: #33523f;
  --accent-soft: #6b8574;
  --gold: #84662d;
  --rule: #ddd9cf;
  --shadow: rgba(33, 31, 27, 0.08);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16191a;
  --paper-raised: #1f2224;
  --ink: #ece7dd;
  --ink-soft: #a9a296;
  --ink-faint: #918a7a;
  --accent: #8fb59b;
  --accent-soft: #5c7c68;
  --gold: #c9a45c;
  --rule: #33362f;
  --shadow: rgba(0, 0, 0, 0.4);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.sans { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
.page { max-width: 38rem; margin: 0 auto; padding: 4.5rem 1.75rem 6rem; }

.site-nav {
  max-width: 38rem;
  margin: 0 auto;
  padding: 1.1rem 1.75rem 0;
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.site-nav a {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* Bersaglio da toccare: 44px raccomandati, erano 14. Il padding verticale
     su un elemento inline allarga solo il suo riquadro cliccabile, non la
     riga di testo intorno - misurato l'8 settembre 2026, non serve nessuna
     compensazione qui. */
  padding: 15px 0;
}
.site-nav a:hover { color: var(--accent); border-color: var(--accent); }

.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  margin-bottom: 2.5rem;
}
.back-link:hover { color: var(--gold); border-color: var(--gold); }

.theme-toggle {
  all: unset;
  position: fixed;
  top: 1.1rem;
  left: 1.1rem;
  z-index: 20;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 1px 3px var(--shadow);
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Icone vettoriali locali: niente glifi/emoji diversi fra i telefoni. */
.site-header .theme-toggle.theme-toggle,
.masthead .theme-toggle.theme-toggle { font-size: 0; width: 44px; height: 44px; box-sizing: border-box; }
.theme-toggle::before {
  content: ""; display: block; width: 20px; height: 20px; flex: 0 0 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.9 13A9 9 0 0 1 11 3.1 9 9 0 1 0 20.9 13Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-theme="dark"] .theme-toggle::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  .site-header .site-header-inner { position: relative; }
  .site-header .brand { padding-right: 3.5rem; }
  .site-header .site-nav.site-nav { margin-top: 0; }
  .site-header .theme-toggle.theme-toggle {
    position: absolute; top: 0.15rem; right: 1.1rem; left: auto; margin: 0;
  }
}
@media (forced-colors: active) {
  .theme-toggle::before { background: ButtonText; }
}

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
h1 { font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 0.75rem; line-height: 1.2; }
.count { font-size: 0.95rem; color: var(--ink-faint); margin: 0 0 2.5rem; }

.card {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  position: relative;
  margin: 0 0 2rem;
  padding: 0.1rem 0 0.1rem 1.35rem;
  border-left: 2px solid var(--rule);
}
.card-mark {
  position: absolute;
  left: -0.15rem;
  top: -1.1rem;
  font-size: 3rem;
  font-family: Georgia, serif;
  color: var(--gold);
  opacity: 0.35;
  line-height: 1;
}
.card-quote {
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  font-weight: 400;
  margin: 0 0 0.9rem;
}
.card-quote a { color: inherit; text-decoration: none; }
.card-quote a:hover { color: var(--accent); }
.card-quote-block { margin: 0; border: 0; padding: 0; }
.card-quote-full {
  font-size: 1rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  margin: -0.4rem 0 0.9rem;
}
.card-citation { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 0.7rem; }
.card-citation .card-title { font-style: italic; }
.card-citation a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.card-citation a:hover { color: var(--gold); border-color: var(--gold); }
.card-context { font-size: 0.85rem; line-height: 1.55; color: var(--ink-faint); margin: 0; }
.card-source { font-size: 0.78rem; line-height: 1.5; color: var(--ink-faint); margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.card-source a { color: inherit; border-bottom: 1px solid var(--accent-soft); text-decoration: none; }
.card-source a:hover { color: var(--gold); border-color: var(--gold); }
.card-cover { width: 54px; height: 81px; object-fit: cover; border-radius: 2px; flex-shrink: 0; box-shadow: 0 1px 3px var(--shadow); }

/* Segnalare un errore e' il controllo di qualita' piu' prezioso che questo
   sito abbia: chi scrive ha in mano il libro. Il link sta dopo i tag, dove
   arriva chi ha finito di leggere, e non prima, dove interromperebbe. */
.segnala { margin: 2rem 0 0; font-size: 0.82rem; }
.segnala a {
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.segnala a:hover { color: var(--gold); border-color: var(--gold); }

.breadcrumb {
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-bottom: 2.5rem;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--accent-soft); padding: 15px 0; }
.breadcrumb a:hover { color: var(--gold); border-color: var(--gold); }
.breadcrumb [aria-current] { color: var(--ink-faint); }

.hub-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 42rem;
  margin: 0 0 2.5rem;
}
.hub-intro p { margin: 0 0 1.1rem; }
.hub-intro p:last-child { margin-bottom: 0; }

.opera-scheda {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 2.5rem;
}
.opera-link { margin: 0 0 2rem; }
.opera-link a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.opera-link a:hover { color: var(--gold); border-color: var(--gold); }

/* Pagine di trasparenza e note legali. */
.legal-page h1 { margin-bottom: 1.75rem; }
.legal-page h2 { margin: 2.6rem 0 0.85rem; font-size: 1.25rem; font-weight: 400; font-style: italic; }
.legal-page p, .legal-page li { font-size: 1.02rem; line-height: 1.68; color: var(--ink-soft); }
.legal-page p { margin: 0 0 1.1rem; }
.legal-page ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.legal-page li { margin: 0 0 0.6rem; }
.legal-page a { color: var(--accent); text-underline-offset: 0.18em; }
.legal-page strong { color: var(--ink); }
.legal-status { padding: 1rem 1.2rem; background: var(--paper-raised); border-left: 2px solid var(--gold); }

/* Collegamento affiliato: pulsante locale, senza asset, widget o script Amazon. */
.affiliate-card { margin: 1.75rem 0 0; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 4px; background: var(--paper-raised); }
.affiliate-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 48px; padding: 0.65rem 1.25rem; border: 1px solid #8a6d1f;
  border-radius: 7px; color: #17130a; background: linear-gradient(#ffe8a0, #f3c94f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 1px 2px rgba(33, 31, 27, 0.16);
  font-size: 1rem; font-weight: 500; line-height: 1.2; text-decoration: none;
}
.affiliate-link:hover { color: #17130a; background: linear-gradient(#ffe38a, #edbd32); }
.affiliate-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.affiliate-cart { flex: 0 0 auto; }
.affiliate-top { margin-top: 1rem; }
.affiliate-edition-title { margin: 0 0 0.4rem; color: var(--ink); font-size: 1.1rem; font-weight: 600; line-height: 1.4; }
.affiliate-edition-byline, .affiliate-edition-format { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; }
.affiliate-edition-format { margin-bottom: 1rem; }
.affiliate-disclosure { margin: 1rem 0 0; line-height: 1.6; }
.related li.affiliate-book-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.affiliate-book-info { flex: 1 1 16rem; min-width: 0; }
.related a.affiliate-link { display: inline-flex; color: #17130a; border: 1px solid #8a6d1f; font-size: 1rem; font-style: normal; flex: 0 0 auto; }
.related a.affiliate-link:hover { color: #17130a; border-color: #8a6d1f; }
@media (max-width: 480px) {
  .affiliate-card { padding: 0.9rem; }
  .affiliate-link { width: 100%; }
}

.actions { margin-top: 2rem; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.actions a, .actions button {
  all: unset;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 2px;
}
.actions a:hover, .actions button:hover { color: var(--gold); border-color: var(--gold); }
/* Contesto e fonte, ora fuori dalla griglia della scheda: senza un limite di
   misura si allargherebbero a tutta la pagina, e una riga lunga il doppio si
   legge peggio. */
.page-quote .quote-detail { max-width: 40rem; margin: 2rem 0 0; }

/* Da telefono i pulsanti diventano bersagli per un pollice: erano alti 32px,
   Apple ne consiglia 44. Non cambia la grafica — restano testo sottolineato —
   cambia l'area che risponde al tocco. */
@media (max-width: 860px) {
  .actions { gap: 0.4rem 1.4rem; align-items: center; }
  .actions a, .actions button {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-bottom: 0;
  }
}

.tags { margin-top: 1.5rem; display: flex; gap: 0.6rem 1rem; flex-wrap: wrap; }
.tags a {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.tags a:hover { color: var(--accent); border-color: var(--accent); }

.related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
/* L'intestazione degli elenchi (le righe di un autore, di un'opera, di una
   raccolta, di una pagina d'indice). Stessa resa dell'intestazione delle
   correlate: una piccola etichetta, non un secondo titolo che compete con
   l'H1. Serviva perche' 350 pagine non avevano nessun H2, cioe' nessuna
   struttura sotto il titolo (crawl Screaming Frog dell'11 settembre 2026). */
/* Il ritratto dell'autore, con il suo credito. Sta a destra e il testo gli gira
   intorno: e' un'illustrazione della pagina, non il suo soggetto - il soggetto
   restano le righe. Il credito e' minuto ma leggibile e cliccabile, perche' CC
   BY e CC BY-SA obbligano a nominare chi ha scattato e a rimandare alla
   licenza: e' parte della foto, non una nota di servizio da nascondere. */
.ritratto {
  float: right;
  width: 9.5rem;
  margin: 0 0 1.2rem 1.6rem;
}
.ritratto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--paper-raised);
  box-shadow: 0 1px 4px var(--shadow);
}
.ritratto-credito {
  font-size: 0.62rem;
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 0.45rem 0 0;
}
.ritratto-credito a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.ritratto-credito a:hover { color: var(--gold); border-color: var(--gold); }
/* l'elenco dei libri e quello delle righe cominciano sempre sotto il ritratto,
   anche quando l'introduzione e' corta */
.related, .lista-h2 { clear: both; }
@media (max-width: 480px) {
  .ritratto { width: 7.5rem; margin-left: 1.1rem; }
}
@media print {
  .ritratto { float: none; width: 6rem; margin: 0 0 1rem; }
}

/* «Tutte le citazioni di Italo Calvino →»: la riga che compare sotto la barra
   quando quello che si e' scritto ha una pagina sua. Non sostituisce i
   risultati, li precede - chi voleva le schede filtrate le ha comunque sotto. */
.vai-pagina { margin: 0 0 1.2rem; font-size: 0.92rem; }
.vai-pagina a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
}
.vai-pagina a:hover { color: var(--gold); border-color: var(--gold); }

.lista-h2 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-faint);
  margin: 2.5rem 0 1rem;
}
/* L'anno e il numero di righe accanto al titolo di un libro: informazione di
   servizio, non deve pesare quanto il titolo. */
.voce-meta { color: var(--ink-faint); font-size: 0.85em; }
.torna-autore { margin: 1.5rem 0 0; font-size: 0.85rem; }
.torna-autore a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.torna-autore a:hover { color: var(--gold); border-color: var(--gold); }

.related h2 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  font-family: inherit;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}
.related ul { list-style: none; margin: 0; padding: 0; }
.related li { margin: 0 0 0.6rem; }
.related a {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.related a:hover { color: var(--gold); border-color: var(--gold); }

.hub-nav { margin-bottom: 3rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; }
.hub-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hub-nav a:hover, .hub-nav a.is-current { color: var(--accent); border-color: var(--accent); }

footer.sans {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-faint);
}
footer.sans a { color: var(--ink-faint); }

/* =========================================================================
   Pagina citazione (body.page-quote) — restyling 2026-08-29.
   Tutto scoped su .page-quote e su classi nuove: le altre pagine non cambiano.
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.site-header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem clamp(1.25rem, 4vw, 3rem) 0.7rem clamp(1.25rem, 6vw, 5rem);
}
.brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ink); }
.brand img { display: block; border-radius: 4px; }
.brand-name { font-size: 1.02rem; letter-spacing: 0.01em; }
.site-header .site-nav {
  /* -5px assorbe il padding di 15px aggiunto sopra a .site-nav a, cosi'
     l'area cliccabile arriva a 44px senza far crescere la testata piu' di
     2px su una riga sola. Sotto i 640px il valore cambia: vedi la media
     query, dove il menu va su una riga tutta sua e puo' spezzarsi su due. */
  max-width: none; margin: -5px 0; padding: 0;
  display: flex; align-items: center; gap: 1.15rem; flex-wrap: nowrap;
}
.site-header .site-nav a { font-size: 0.78rem; letter-spacing: 0.1em; border-bottom: 0; }
.site-header .theme-toggle {
  position: static; width: 2.75rem; height: 2.75rem; font-size: 0.95rem; margin-left: 0.35rem;
}

.page-quote .page {
  margin: 0; max-width: 56rem;
  padding: 2.5rem 1.75rem 5rem clamp(1.25rem, 6vw, 5rem);
}
.page-quote .breadcrumb { margin-bottom: 2.5rem; }

/* La citazione e' figlia diretta della griglia: puo' occupare due colonne
   su mobile mentre il resto ne occupa una sola, con la copertina accanto. */
.page-quote .card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "quote cover" "body cover";
  gap: 1.6rem 2.5rem; align-items: start;
  border-left: 0; padding: 0; margin: 0 0 2rem; position: relative;
}
.page-quote .card-quote-block { grid-area: quote; margin: 0; }
.page-quote .card-body { grid-area: body; min-width: 0; position: relative; z-index: 1; }
.page-quote .card-cover {
  grid-area: cover; align-self: start;
  width: 150px; height: 225px; border-radius: 3px;
  box-shadow: 0 10px 30px -8px var(--shadow), 0 2px 6px var(--shadow);
}
.page-quote .card-mark {
  left: -1.6rem; top: -2.2rem; font-size: 7rem; opacity: 0.13; z-index: 0;
}
/* L'H1 della pagina citazione dice di che frase si tratta e da dove viene; la
   frase in se' resta l'elemento dominante, ma dentro il <blockquote>, dove sta
   di diritto. L'intestazione fa quindi il lavoro di una didascalia e va vestita
   come tale: se avesse il corpo di un titolo ruberebbe la scena alla
   citazione, che e' l'unica ragione per cui qualcuno apre questa pagina. */
.page-quote .quote-h1 {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 2rem;
  max-width: 40rem;
}

.page-quote .card-quote {
  font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.3;
  margin: 0; letter-spacing: -0.005em; position: relative; z-index: 1;
}
.page-quote .card-citation {
  font-size: 0.95rem; margin: 0 0 1.6rem;
  padding-top: 1.1rem; border-top: 1px solid var(--rule);
}
.page-quote .card-citation .card-author { font-weight: 600; color: var(--ink); }
.page-quote .card-context { font-size: 0.98rem; line-height: 1.72; color: var(--ink-soft); }

.page-quote .card-source {
  display: inline-block; margin: 1.6rem 0 0; padding: 0.9rem 1.1rem;
  border: 0; border-left: 2px solid var(--gold); border-radius: 0 3px 3px 0;
  background: var(--paper-raised); font-size: 0.86rem; line-height: 1.6; color: var(--ink-soft);
}
.source-label {
  display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.3rem;
}

.page-quote .actions { margin: 2rem 0 3rem; gap: 0.6rem; align-items: center; }
.page-quote .actions a, .page-quote .actions button {
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 1.05rem;
  font-size: 0.85rem; color: var(--ink-soft); background: none; line-height: 1;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.page-quote .actions a:hover, .page-quote .actions button:hover {
  border-color: var(--accent); color: var(--accent); background: var(--paper-raised);
}
.page-quote .actions .is-primary { border-color: var(--accent); color: var(--accent); }
.page-quote .actions .is-primary:hover { background: var(--accent); color: var(--paper); }

/* «Come si cita questa frase»: il riferimento bibliografico gia' scritto.
   Sta dentro un <details> chiuso perche' serve a pochi - chi copia una frase
   per un compito, una tesi, un articolo - ma a quei pochi serve intero. Il
   testo e' nell'HTML, non costruito dal JavaScript: senza script il
   triangolino del browser lo apre lo stesso e si seleziona a mano. */
.page-quote .cita-frase {
  max-width: 40rem; margin: 0 0 2.5rem; font-size: 0.86rem; color: var(--ink-soft);
}
.page-quote .cita-frase > summary {
  cursor: pointer; padding: 0.4rem 0; font-size: 0.82rem; color: var(--ink-faint);
}
.page-quote .cita-frase > summary:hover { color: var(--gold); }
.page-quote .cita-frase[open] > summary { color: var(--ink-soft); }
.page-quote .cita-testo {
  margin: 0.5rem 0 0.8rem; padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--rule); background: var(--paper-raised);
  line-height: 1.65; overflow-wrap: anywhere;
}
.page-quote .cita-copia {
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 1.05rem;
  font: inherit; font-size: 0.8rem; line-height: 1; color: var(--ink-soft);
  background: none; cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.page-quote .cita-copia:hover {
  border-color: var(--accent); color: var(--accent); background: var(--paper-raised);
}
@media (max-width: 860px) {
  .page-quote .cita-copia { display: inline-flex; align-items: center; min-height: 44px; }
}

.page-quote .tags { gap: 0.5rem; margin: 0 0 3rem; }
.page-quote .tags a {
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.32rem 0.8rem;
  font-size: 0.7rem; color: var(--ink-faint);
}
.page-quote .tags a:hover { border-color: var(--gold); color: var(--gold); }

.page-quote .related-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 2rem;
}
.page-quote .related { margin: 0; padding: 0; border: 0; }
.page-quote .related h2 { font-size: 0.68rem; letter-spacing: 0.14em; margin: 0 0 1rem; }
.page-quote .related li { margin: 0 0 0.9rem; line-height: 1.5; }
.page-quote .related a { font-size: 0.92rem; }
.page-quote footer.sans { margin-top: 4rem; }

@media (max-width: 640px) {
  .site-header-inner { padding: 0.6rem 1.1rem; }
  .brand-name { font-size: 0.95rem; }
  .site-header .site-nav { gap: 0.85rem; }
  .site-header .site-nav a { font-size: 0.7rem; letter-spacing: 0.08em; }
  /* cinque voci piu' il marchio non stanno in 360px su una riga sola: il menu
     prende una riga tutta sua sotto il marchio, cosi' "Citazioni" non finisce
     tagliata fuori dallo schermo */
  .site-header-inner { gap: 0.6rem; row-gap: 0.45rem; }
  .site-header .site-nav {
    flex: 1 0 100%; order: 2; min-width: 0;
    justify-content: flex-start; flex-wrap: wrap; gap: 0.45rem 1rem;
    /* qui il menu va spesso su due righe (misurato a 375px: cinque voci piu'
       "Metodo" a capo): -5px non basta a riassorbire il padding di due righe
       insieme, -19px si', verificato misurando la testata prima e dopo
       (164px -> 168px, dentro il budget di 8px) */
    margin: -19px 0;
  }
  .site-nav a { white-space: nowrap; }
  .site-header .theme-toggle { flex: 0 0 auto; }

  .page-quote .page { padding: 1.75rem 1.25rem 4rem; }
  .page-quote .card { grid-template-areas: "quote quote" "body cover"; gap: 1.1rem; }
  .page-quote .card-cover { width: 92px; height: 138px; }
  .page-quote .card-mark { display: none; }
  .page-quote .related-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Pagine con l'intestazione fissa (hub, indici, opere, raccolte): il padding
   alto serviva a scansare la vecchia nav in posizione fissa, ora non piu'. */
.has-header .page {
  margin: 0; max-width: 46rem;
  padding: 2.5rem 1.75rem 5rem clamp(1.25rem, 6vw, 5rem);
}
.has-header .back-link { margin-bottom: 2rem; }
@media (max-width: 640px) {
  .has-header .page { padding: 1.75rem 1.25rem 4rem; }
}

/* --- citazione: caporali, clic per copiare, scelta sfondo condivisione --- */
.page-quote .quote-open, .page-quote .quote-close { color: var(--gold); }
.page-quote .quote-text { cursor: pointer; border-radius: 3px; transition: background 0.18s; }
.page-quote .quote-text:hover { background: var(--paper-raised); }
.page-quote .quote-text:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cover-wrap { grid-area: cover; margin: 0; align-self: start; }
.cover-caption {
  margin-top: 0.6rem; font-size: 0.72rem; line-height: 1.4;
  color: var(--ink-faint); text-align: center; max-width: 150px;
}
.share-choice {
  display: flex; align-items: flex-start; gap: 0.9rem; flex-wrap: wrap; margin: -0.8rem 0 1.6rem;
}
/* L'anteprima non e' un ornamento: prima si sceglieva formato e sfondo alla
   cieca e si scopriva l'immagine solo dopo averla scaricata. E' disegnata
   dalla stessa funzione che produce il file, quindi quello che si vede e'
   esattamente quello che si prende. */
.share-preview {
  flex: 0 0 auto; line-height: 0;
  border: 1px solid var(--rule); border-radius: 4px; padding: 4px; background: var(--paper-raised);
}
.share-preview img { display: block; border-radius: 2px; }
/* `flex: 1 1 240px` e non un semplice `min-width: 0`: la colonna dei
   controlli non cresceva e restava larga 261px anche quando accanto ce
   n'erano 320, cosi' "Reels" finiva esattamente sul bordo e col carattere di
   sistema di un telefono vero andava a capo. Con la base a 240 sta accanto
   all'anteprima quando c'e' posto, e quando non ce n'e' va sotto prendendosi
   tutta la larghezza. */
.share-rows { display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 240px; min-width: 0; }
.share-row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.share-row .share-choice-label { flex: 0 0 3.6rem; }
/* Un pulsante solo fa partire lo scaricamento, e lo dice. Prima a scaricare
   era il pulsante dello sfondo, che non lo diceva: si sceglieva "Chiaro" e
   partiva un file. */
/* `.share-choice button` ha specificita' 0-1-1 e batteva `.share-go` (0-1-0):
   il pulsante prendeva i colori degli altri e restava grigio, salvo diventare
   oro al passaggio del mouse, perche' li' la specificita' saliva. E' la terza
   volta che questo foglio inganna cosi' (prima .site-nav, poi .filter-block):
   si sale di specificita', non si sposta la regola. */
.share-choice .share-go {
  align-self: flex-start; margin-top: 0.15rem;
  border: 1px solid var(--gold); border-radius: 999px; padding: 0.45rem 1.2rem;
  font-size: 0.8rem; font-family: inherit; color: var(--gold); background: none; cursor: pointer;
}
.share-choice .share-go:hover { background: var(--gold); color: var(--paper); }
/* senza questa riga il display:flex qui sopra batte l'attributo hidden e la
   scelta dello sfondo resta sempre in pagina: premere "Condividi" sembrava
   non fare nulla, perche' apriva un pannello gia' aperto */
.share-choice[hidden] { display: none; }

/* --- elenchi degli indici (/autori/, /temi/, /generi/, /opere/, /raccolte/):
       i link erano <a> nudi, quindi il browser li dipingeva del suo blu
       sottolineato, in mezzo a una pagina che di blu non ha niente --- */
.index-intro {
  max-width: 34rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 2rem;
}
.index-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
}
.index-list a:hover { color: var(--accent); border-color: var(--accent); }
.index-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- "Sottolinea" e la nota sulla pagina citazione: e' la pagina su cui si
       arriva dalle ricerche, e finche' non c'era il pulsante era l'unica dove
       il visitatore non poteva salvare la frase --- */
.page-quote .actions #underlineBtn[aria-pressed="true"] {
  color: var(--gold); border-color: var(--gold);
}
.quote-note { max-width: 34rem; margin: -0.6rem 0 1.8rem; }
.quote-note[hidden] { display: none; }
.quote-note-field {
  display: block; width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 0.85rem; line-height: 1.55;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.55rem 0.7rem; margin: 0 0 0.4rem; resize: vertical;
}
.quote-note-field::placeholder { color: var(--ink-faint); }
.quote-note-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.quote-note-print {
  display: none; font-size: 0.85rem; line-height: 1.55;
  color: var(--ink-soft); margin: 0 0 0.4rem; white-space: pre-wrap;
}
.quote-note-hint { font-size: 0.72rem; color: var(--ink-faint); margin: 0; }
.quote-note-hint a { color: var(--ink-faint); }
.share-choice-label { font-size: 0.78rem; color: var(--ink-faint); }
.share-choice button {
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.9rem;
  font-size: 0.78rem; color: var(--ink-soft); background: none; cursor: pointer;
}
.share-choice button:hover { border-color: var(--gold); color: var(--gold); }
/* Formato e sfondo si scelgono e restano segnati: cambiano l'anteprima, non
   fanno partire niente. A scaricare e' il pulsante che lo dice. */
.share-choice button[aria-pressed="true"] {
  border-color: var(--gold); color: var(--gold); background: var(--paper-raised);
}

@media (max-width: 640px) { .cover-caption { max-width: 92px; } }

/* --- fascia "Esplora l'archivio" in home: apre le sezioni che dalla home
       non erano raggiungibili da nessun link --- */
.explore { margin: 4rem 0 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.explore-title {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1.5rem; font-weight: 400;
}
.explore-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.5rem 1.5rem;
}
.explore-list a {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2rem 0.75rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); transition: border-color 0.18s;
}
.explore-list a:hover { border-color: var(--accent); }
.explore-name { font-size: 1rem; }
.explore-list a:hover .explore-name { color: var(--accent); }
.explore-count {
  font-size: 0.8rem; color: var(--gold); font-variant-numeric: tabular-nums;
}
.explore-desc {
  grid-column: 1 / -1; font-size: 0.8rem; line-height: 1.45; color: var(--ink-faint);
}

/* --- ricerca nell'intestazione: fino a ieri si poteva cercare solo dalla
       home, quindi da una pagina citazione bisognava tornare indietro.
       E' un form GET verso /?q=, che la home gia' sa leggere: nessun
       indice da mantenere e funziona anche senza JavaScript. --- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.header-search { flex: 0 1 20rem; min-width: 0; margin: 0 0.5rem; }
.header-search input {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 0.85rem; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.42rem 0.9rem;
  transition: border-color 0.18s;
}
.header-search input::placeholder { color: var(--ink-faint); }
.header-search input:focus {
  outline: none; border-color: var(--accent); background: var(--paper);
}
/* iOS Safari ingrandisce la pagina di sua iniziativa quando si tocca un campo
   con font-size sotto i 16px, e non la rimpicciolisce piu' da sola: succedeva
   sulla barra delle note che si apre sottolineando, e nella ricerca
   dell'intestazione. A 16px non zooma. Vale solo da telefono in giu': sul
   desktop la misura tipografica resta quella scelta. */
@media (max-width: 860px) {
  .quote-note-field,
  .header-search input { font-size: 16px; }
}

@media (max-width: 860px) {
  /* con tre righe (marchio, menu, ricerca) l'intestazione agganciata si
     mangerebbe un sesto dello schermo del telefono per tutta la lettura:
     su mobile scorre via con la pagina */
  .site-header { position: static; }
  .site-header-inner { flex-wrap: wrap; }
  /* su schermo stretto la ricerca va a capo su una riga sua, a tutta
     larghezza: nell'intestazione non ci sta insieme a marchio e menu */
  .header-search { order: 3; flex: 1 0 100%; margin: 0.5rem 0 0.15rem; }
  .header-search input { border-radius: 8px; }
}

/* --- correlate come schede: erano due elenchi di testo identici, la parte
       piu' spoglia della pagina citazione --- */
.page-quote .related ul { display: grid; gap: 0.2rem; }
.related-card a {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0.6rem; margin: 0 -0.6rem; border-radius: 4px;
  text-decoration: none; border: 0; transition: background 0.18s;
}
.related-card a:hover { background: var(--paper-raised); }
.related-cover {
  width: 40px; height: 60px; object-fit: cover; border-radius: 2px; flex-shrink: 0;
  box-shadow: 0 1px 4px var(--shadow);
}
.related-text { display: block; min-width: 0; }
.related-quote {
  display: block; font-style: italic; font-size: 0.92rem; line-height: 1.45; color: var(--ink);
}
.related-meta { display: block; margin-top: 0.25rem; font-size: 0.78rem; color: var(--ink-faint); }
.related-card a:hover .related-quote { color: var(--accent); }
.nav-count {
  display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.36rem;
  font-size: 0.62rem; line-height: 1.5; border-radius: 999px;
  background: var(--gold); color: var(--paper); vertical-align: 0.1em;
}

/* =========================================================================
   Stampa. Il pubblico dichiarato del sito sono studenti e insegnanti, e gli
   insegnanti stampano: finora usciva anche l'intestazione, la navigazione,
   i pulsanti e le citazioni correlate. Qui resta la citazione con la sua
   fonte, in nero su bianco, con l'indirizzo della pagina come riferimento.
   ========================================================================= */
@media print {
  :root {
    --paper: #fff; --paper-raised: #fff; --ink: #000; --ink-soft: #333;
    --ink-faint: #555; --rule: #bbb; --gold: #555; --accent: #000; --shadow: transparent;
  }
  body { background: #fff !important; color: #000 !important; }
  .site-header, .header-search, .site-nav, .theme-toggle,
  .actions, .share-choice, .mine-actions, .mine-removed, .tags, .breadcrumb,
  .related-grid, .related, .explore, .filters, .search-bar,
  .underline-toggle, .card-hint, .note-field, .print-selection-btn,
  .quote-note-field, .quote-note-hint,
  /* su carta non si preme niente: il pulsante "Stampa" stampato e' la prova
     che nessuno aveva mai guardato il foglio. E "Segnala un errore" e'
     un mailto: su un foglio e' una riga sottolineata che non porta da
     nessuna parte. */
  .mine-tools, .mine-print-hint, .segnala, .footer-servizi, .affiliate-card, .affiliate-top, .affiliate-disclosure,
  .cita-copia { display: none !important; }
  /* la data non e' decorazione: chi consegna una selezione di citazioni deve
     poter dire quando l'ha presa, perche' l'archivio cambia */
  .print-only { display: block !important; }
  .quote-note[hidden] { display: none !important; }
  .quote-note-print { display: block; }
  .quote-note-print[hidden] { display: none; }
  .page, .page-quote .page { max-width: none; margin: 0; padding: 0; }
  .page-quote .card { display: block; }
  .page-quote .card-quote { font-size: 20pt; line-height: 1.35; margin-bottom: 1em; }
  .page-quote .card-citation { border-top: 1px solid #bbb; padding-top: 0.6em; font-size: 11pt; }
  .page-quote .card-context { font-size: 10.5pt; line-height: 1.5; }
  .page-quote .card-source {
    background: none; border-left: 2px solid #999; font-size: 10pt; margin-top: 1em;
  }
  .card-cover, .cover-wrap { display: none !important; }
  /* l'indirizzo della pagina stampato in fondo: una citazione su carta senza
     la sua provenienza e' esattamente cio' che questo sito combatte */
  footer.sans { border-top: 1px solid #bbb; padding-top: 0.5em; font-size: 9pt; color: #555; }
  footer.sans a { color: #555 !important; }
  footer.sans::after { content: " — " attr(data-url); }
  a { color: #000 !important; text-decoration: none; }
  @page { margin: 2cm; }
}

/* --- controlli che senza JavaScript non fanno niente ---------------------
   Un pulsante che non risponde e' peggio di un pulsante che non c'e': chi lo
   preme pensa che il sito sia rotto, e non ha modo di sapere che il problema
   e' dalla sua parte. Misurato il 2026-09-04 con JavaScript spento: Copia,
   Condividi, Sottolinea e il selettore del tema restavano visibili e inerti su
   ogni pagina citazione. Qui spariscono. Tutto il resto — l'archivio intero, i
   link ai temi e ai generi, la navigazione — funziona senza JavaScript, ed e'
   il motivo per cui non serve un avviso: la pagina resta quello che e', un
   testo con dei link. */
.print-only { display: none; }

html:not(.js) .js-only { display: none !important; }