/* La mossa del tapiro — sito
   Stessa identità delle copertine: il blu del fondo, Cabin per i titoli,
   EB Garamond per il testo da leggere. Il blocco in cima usa esattamente il
   blu della copertina, così l'immagine non ha bordo: il titolo allagato
   sembra stampato sulla pagina.
   Il testo lungo non sta mai sul blu (bianco su quel blu fa 3,4:1, sotto la
   soglia per il corpo del testo): sta sulla «carta», sotto. */

@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400;
             font-display: swap; src: url("/font/ebgaramond-regular.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400;
             font-display: swap; src: url("/font/ebgaramond-italic.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 600;
             font-display: swap; src: url("/font/cabin-semibold.woff2") format("woff2"); }
@font-face { font-family: "Cabin"; font-style: normal; font-weight: 700;
             font-display: swap; src: url("/font/cabin-bold.woff2") format("woff2"); }

:root {
  --blu: #5f8fbf;            /* il fondo della copertina, 95/143/191 */
  --blu-scuro: #3d6d9d;      /* bottoni: bianco sopra fa 5,4:1 */
  --carta: #fbf8f1;
  --carta-2: #f2ede1;
  --inchiostro: #1c232b;
  --grigio: #5b6470;
  --filo: rgba(28, 35, 43, .14);
  --bottone-chiaro: #ffffff;
  --bottone-chiaro-testo: #1c232b;
  --misura: 34rem;
  --lettura: "EB Garamond", Garamond, "Times New Roman", serif;
  --titoli: "Cabin", "Gill Sans", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
/* Niente tema scuro, per scelta di Miki (22/09/2026): il sito resta
   sempre sulla carta, come il libro. `color-scheme: light` dice anche al
   browser di non scurire da se' moduli e barre di scorrimento. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--lettura);
  font-size: 1.1875rem;
  line-height: 1.55;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid #f2c14e; outline-offset: 3px; border-radius: 4px; }

/* Il link « salta ai download » resta invisibile finche' non riceve il
   fuoco. NON spingerlo fuori schermo con left: -999px: nelle pagine da
   destra a sinistra (arabo) il lato sinistro e' quello verso cui si scorre,
   e il browser allarga la pagina per contenerlo. Cosi' vale in tutte e due
   le direzioni. */
.salta:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden;
                     clip-path: inset(50%); white-space: nowrap; }
.salta:focus { position: absolute; inset-inline-start: 1rem; top: 1rem; z-index: 10;
               background: var(--carta); color: var(--inchiostro); padding: .5rem 1rem; }

/* ---------- barra in cima ----------
   Il bianco sull'azzurro della copertina arriva a 3,4:1: basta solo per il
   testo "grande" (WCAG: almeno 18,66 px in grassetto). Tutto cio' che sta sul
   blu e' quindi in grassetto e non scende sotto --testo-su-blu. */
:root { --testo-su-blu: 1.1875rem; }
.barra {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .6rem 1rem; padding: 1rem clamp(1rem, 4vw, 2.5rem);
  font-family: var(--titoli); font-weight: 700; font-size: var(--testo-su-blu); color: #fff;
}
.barra a { text-decoration: none; }
.barra__lingue { display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); }
.barra__lingue:hover { background: rgba(255,255,255,.14); }
.barra__lingue svg { width: 1rem; height: 1rem; }

/* ---------- il blocco blu ---------- */
.eroe { background: var(--blu); color: #fff; overflow: hidden; overflow: clip; }
.eroe__corpo {
  /* lo stacco fra le colonne ospita la coda del tucano, che esce dalla sua */
  display: grid; gap: clamp(1.5rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1fr);
  max-width: 68rem; margin: 0 auto;
  padding: .5rem clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
.copertina { width: min(100%, 26rem); margin: 0 auto; }
/* L'immagine e' piu' larga del libro di un ottavo per lato (ALLARGA in
   prepara.py): li' dentro il tucano vola intero. La si allarga dello stesso
   tanto e la si ricentra, cosi' il titolo resta della misura della colonna e
   becco e coda escono sul blu. Il blocco blu taglia cio' che esce dallo
   schermo: sul telefono il tucano entra e esce dal bordo, ed e' giusto. */
.copertina img { width: 125%; max-width: none; margin-inline: -12.5%; }
.titolo__autori {
  font-family: var(--titoli); font-weight: 700; font-size: var(--testo-su-blu);
  line-height: 1.3; margin: 0 0 .9rem;
}
.titolo h1 {
  font-family: var(--titoli); font-weight: 700;
  font-size: clamp(2.25rem, 5.2vw, 3.75rem); line-height: 1.02;
  letter-spacing: -.01em; margin: 0 0 .6rem;
}
.titolo__sotto {
  font-family: var(--titoli); font-weight: 700; font-size: var(--testo-su-blu);
  line-height: 1.35; margin: 0 0 1.75rem;
}

.scarica { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.scarica a {
  display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: .1rem;
  align-items: center; text-decoration: none;
  background: var(--bottone-chiaro); color: var(--bottone-chiaro-testo);
  border-radius: 14px; padding: .85rem 1.1rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 18px rgba(20, 45, 75, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.scarica a:hover { transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 10px 24px rgba(20, 45, 75, .24); }
.scarica .icona { grid-row: span 2; width: 2rem; height: 2rem; color: var(--blu-scuro); }
.scarica .formato { font-family: var(--titoli); font-weight: 700; font-size: 1.125rem; line-height: 1.1; }
/* I bottoni sono bianchi anche nel tema scuro: il colore della nota e'
   fisso, non segue --grigio (che al buio diventa chiaro e sparirebbe). */
.scarica .nota { font-family: var(--titoli); font-weight: 600; font-size: .8125rem;
                 color: #5b6470; line-height: 1.3; }
.scarica__gratis {
  font-family: var(--titoli); font-weight: 700; font-size: var(--testo-su-blu);
  margin: .9rem 0 0;
}

.scarica--offri { margin-top: 1.25rem; }
.scarica--offri .icona { color: #c8452f; }

@media (min-width: 52rem) {
  .eroe__corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .copertina { width: 100%; }
}

/* ---------- la carta ---------- */
.carta { padding: clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem); }
.quarta { max-width: var(--misura); margin: 0 auto; }
.quarta p { margin: 0 0 1rem; hyphens: auto; -webkit-hyphens: auto; }
.quarta p:last-child {
  font-style: italic; margin-top: 1.5rem; color: var(--grigio);
}

.pannelli {
  max-width: 52rem; margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.pannello {
  background: var(--carta-2); border: 1px solid var(--filo);
  border-radius: 16px; padding: 1.4rem 1.5rem 1.5rem;
}
.pannello h2 {
  font-family: var(--titoli); font-weight: 700; font-size: 1.125rem;
  margin: 0 0 .5rem; letter-spacing: .01em;
}
.pannello p { margin: 0 0 1.1rem; font-size: 1.0625rem; }
.pannello p:last-child { margin-bottom: 0; }
.pannello .presto { color: var(--grigio); font-style: italic; }
.bottone {
  display: inline-block; text-decoration: none;
  font-family: var(--titoli); font-weight: 700; font-size: 1rem;
  background: var(--blu-scuro); color: #fff;
  padding: .75rem 1.25rem; border-radius: 999px;
}
.bottone:hover { background: #335f8a; }

/* ---------- piede ---------- */
.piede {
  border-top: 1px solid var(--filo);
  padding: 2rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  font-family: var(--titoli); font-weight: 600; font-size: .8125rem;
  color: var(--grigio); line-height: 1.6;
}
.piede__corpo { max-width: 52rem; margin: 0 auto; display: grid; gap: .6rem; }
.piede p { margin: 0; }
.piede a { color: var(--inchiostro); }

/* ---------- il mosaico ----------
   Le copertine sono le tessere: ognuna porta gia' il titolo nella sua
   scrittura, sotto c'e' solo il nome della lingua. Stanno sulla carta, non
   sul blu: su fondo blu le tessere blu si fonderebbero in un'unica macchia. */
.mosaico {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 42%), 1fr));
}
.mosaico a {
  display: grid; gap: .6rem; text-decoration: none; color: var(--inchiostro);
  justify-items: center; text-align: center;
}
.mosaico img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(20, 45, 75, .18), 0 8px 22px rgba(20, 45, 75, .16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.mosaico a:hover img, .mosaico a:focus-visible img {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(20, 45, 75, .2), 0 14px 30px rgba(20, 45, 75, .22);
}
.mosaico span {
  font-family: var(--titoli); font-weight: 600; font-size: .9375rem; line-height: 1.2;
}
.mosaico .tua span { font-weight: 700; }
.mosaico .tua img { outline: 3px solid var(--blu-scuro); outline-offset: 4px; }

/* in fondo alla pagina di una lingua: le altre, un po' piu' piccole */
.altre { max-width: 60rem; margin: clamp(3.5rem, 8vw, 5.5rem) auto 0; }
.altre h2 {
  font-family: var(--titoli); font-weight: 700; font-size: 1.125rem;
  text-align: center; margin: 0 0 1.75rem;
}
.altre .mosaico { grid-template-columns: repeat(auto-fill, minmax(min(8rem, 30%), 1fr)); }

/* la pagina del mosaico: / , /lingue/ e il 404 */
.eroe--mosaico { text-align: center; }
.mosaico__testa { max-width: 60rem; margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) 1rem clamp(1.75rem, 5vw, 2.75rem); }
.mosaico__tucano { width: min(80%, 26rem); margin: 0 auto 1.4rem; }
.eroe--mosaico .titolo__autori { margin: 0; }
.errore { font-family: var(--titoli); font-weight: 700; font-size: 3rem; line-height: 1; margin: 0 0 .75rem; }
.pagina-mosaico .carta > .mosaico { max-width: 64rem; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* L'arabo e il cinese non hanno il corsivo: il browser lo finge inclinando
   le lettere. Come nel libro stampato, li si tiene dritti. */
:lang(ar), :lang(zh) { font-style: normal !important; }