/* ==========================================================================
   Le sei pipe del Commendatore - landing
   Mobile first. Nessuna dipendenza esterna a parte EB Garamond.
   ========================================================================== */

:root {
  --nero:   #08090A;
  --carta:  #F3ECDE;
  --oro:    #CEA656;
  --grigio: #B8B2A6;

  --colonna: 62ch;        /* misura della pagina di libro */
  --largo:   1080px;      /* larghezza massima del contenuto */
  --serif:   "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--nero);
  color: var(--carta);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--oro); }

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oro);
  color: var(--nero);
  padding: .6em 1em;
  z-index: 100;
}
.salta:focus { left: 0; }

/* ------------------------------------------------------ tipi ricorrenti --- */

.occhiello {
  margin: 0 0 .6em;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
}

.titolone {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--carta);
}

.sottotitolo {
  margin: .5em 0 0;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--oro);
  letter-spacing: .02em;
}

.titolo-sezione {
  margin: 0 0 1.4em;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}

.dettagli {
  margin: .9em 0 0;
  font-size: .85rem;
  color: var(--grigio);
}

/* ------------------------------------------------------------ bottoni --- */

.bottone {
  display: inline-block;
  background: var(--oro);
  color: var(--nero);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .85em 1.6em;
  border: 1px solid var(--oro);
  border-radius: 2px;
  font-family: var(--serif);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.bottone:hover,
.bottone:focus-visible { background: #DCBA74; border-color: #DCBA74; }

.bottone--piccolo {
  font-size: .8rem;
  padding: .55em 1em;
  letter-spacing: .1em;
}

.bottone--vuoto {
  background: transparent;
  color: var(--oro);
}
.bottone--vuoto:hover,
.bottone--vuoto:focus-visible { background: var(--oro); color: var(--nero); }

/* Le due edizioni, stesso peso: impilate su telefono, appaiate da 600px in su.
   Nessuna delle due e' "secondaria", quindi stesso riempimento e stessa misura. */
.azioni {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.azioni .bottone {
  display: block;
  text-align: center;
  flex: 1 1 0;
}

/* Nelle barre fisse stanno sempre affiancate, anche su telefono. */
.azioni--barra { flex-direction: row; justify-content: center; gap: .5rem; }
.azioni--barra .bottone { padding-left: .6em; padding-right: .6em; }

/* ------------------------------------------------------- barra in alto --- */

.barra-alta {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: none;                 /* diventa flex da 900px in su */
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .7rem 1.5rem;
  background: rgba(8, 9, 10, .94);
  border-bottom: 1px solid rgba(206, 166, 86, .25);
  transform: translateY(-100%);
  visibility: hidden;                /* niente Tab su una barra fuori schermo */
  transition: transform .25s ease, visibility 0s linear .25s;
}
.barra-alta.visibile {
  transform: translateY(0);
  visibility: visible;
  transition: transform .25s ease, visibility 0s;
}

.barra-alta__titolo {
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grigio);
}

.barra-alta__marchio {
  font-weight: 400;
  color: var(--oro, #cea656);
}

/* ------------------------------------------------------ barra in basso --- */

.barra-bassa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 10, .96);
  border-top: 1px solid rgba(206, 166, 86, .3);
  text-align: center;
  transform: translateY(115%);
  transition: transform .25s ease;
}
.barra-bassa.visibile { transform: translateY(0); }
.barra-bassa .bottone { font-size: .92rem; }

/* ------------------------------------------------- 1. sopra la piega ----- */

.apertura {
  padding: 1.6rem 1.25rem 2.5rem;
}

.apertura__interno {
  max-width: var(--largo);
  margin: 0 auto;
}

/* Copertina a tutta larghezza: esce dal padding della sezione e tocca i bordi
   dello schermo. I margini negativi valgono quanto il padding di .apertura.
   E' ritagliata a fascia perche' il titolo stampato in copertina e' lo stesso
   che sta scritto qui sotto in HTML: mostrarlo due volte e' rumore. Resta la
   fotografia, che e' la parte che vende. La copertina intera si vede in fondo,
   nella sezione di chiusura. */
.apertura__copertina {
  margin: 0 -1.25rem 1.8rem;
  max-width: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
.apertura__copertina img {
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 42%;   /* tiene dentro il viso e la fiamma */
}

.promessa {
  margin: 1.1em 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--carta);
}

.firma {
  margin: .9em 0 0;
  font-size: .92rem;
  font-style: italic;
  color: var(--grigio);
}

.apertura__azione { margin: 1.5em 0 0; }

/* ------------------------------------------------- freccia "scorri giu" -- */

.freccia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  width: 9rem;                     /* area di tocco larga, ben oltre i 44px */
  margin: 2.6rem auto 0;
  padding: .4rem 0;
  color: var(--oro);
  text-decoration: none;
  transition: opacity .45s ease, transform .45s ease;
}

/* Sparisce appena il lettore comincia a scorrere: ha gia' capito. */
.freccia--via {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.freccia__filo {
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(to bottom, rgba(206, 166, 86, 0), var(--oro));
  transform-origin: top center;
  animation: filo 2.6s ease-in-out infinite;
}

.freccia__punta { animation: punta 2.6s ease-in-out infinite; }

.freccia__voce {
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grigio);
  transition: color .25s ease;
}
.freccia:hover .freccia__voce,
.freccia:focus-visible .freccia__voce { color: var(--oro); }

@keyframes filo {
  0%, 100% { transform: scaleY(.5); opacity: .45; }
  50%      { transform: scaleY(1);  opacity: 1; }
}
@keyframes punta {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/* --------------------------------------------- 2. l'attacco del romanzo -- */

.estratto {
  padding: 2.5rem 1.25rem 0;
  text-align: center;
  scroll-margin-top: 4.5rem;   /* la barra fissa non copre il titolo */
}

.estratto__pagina {
  position: relative;
  max-width: var(--colonna);
  margin: 0 auto;
  padding-bottom: 5rem;
  text-align: left;
}

.estratto__p {
  margin: 0 0 1.2em;
  text-align: justify;
  hyphens: auto;
  line-height: 1.85;
  font-size: 1.06rem;
}

.estratto__p--primo::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: .82;
  padding: .06em .1em 0 0;
  color: var(--oro);
}

.estratto__p--ultimo { margin-bottom: 0; }

.estratto__sfumatura {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  /* Alta esattamente quanto il padding di .estratto__pagina: cosi' il velo
     resta decorazione e non arriva mai su una riga di testo. Con 8rem contro
     5rem di padding, tre rem cadevano su testo leggibile e lo portavano sotto
     il contrasto AA. */
  height: 5rem;
  background: linear-gradient(to bottom, rgba(8, 9, 10, 0), var(--nero) 70%);
  pointer-events: none;
}

/* ------------------------------------------ 5. il primo capitolo, gratis - */

.capitolo {
  padding: 0 1.25rem 3.5rem;
}

.capitolo__interno {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 2.2rem;
  border: 1px solid rgba(206, 166, 86, .35);
}

.capitolo__testo {
  margin: 0 0 1.6em;
  color: var(--grigio);
  font-size: 1rem;
}

.modulo { margin: 0; }

.modulo__campo { margin: 0 0 1.2em; }

.modulo__campo label {
  display: block;
  margin-bottom: .4em;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
}

.modulo input[type="email"] {
  width: 100%;
  padding: .7em .8em;
  background: transparent;
  border: 1px solid rgba(184, 178, 166, .55);
  border-radius: 2px;
  color: var(--carta);
  font-family: var(--serif);
  font-size: 1.05rem;
}
.modulo input[type="email"]::placeholder { color: rgba(184, 178, 166, .6); }
.modulo input[type="email"]:focus-visible { border-color: var(--oro); }

/* Trappola antispam. NON si sposta a left:-9999px: alcuni gestori di password
   su Android compilano i campi fuori schermo, e l'iscrizione veniva scartata in
   silenzio. Qui il campo resta al suo posto, alto zero e trasparente. */
.modulo__esca {
  height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.modulo__consenso {
  display: flex;
  gap: .6em;
  align-items: flex-start;
  margin: 0 0 1.4em;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--grigio);
}
.modulo__consenso input { margin-top: .35em; flex: 0 0 auto; accent-color: var(--oro); }

.modulo__azione { margin: 0; }
.modulo__azione .bottone { display: block; width: 100%; }

.modulo__esito {
  margin: 1em 0 0;
  font-size: .95rem;
  min-height: 1.4em;
}
.modulo__esito--ok { color: var(--oro); }
.modulo__esito--no { color: #E29B8C; }

/* ------------------------------------------- 3. di cosa parla davvero ---- */

.dentro {
  padding: 1rem 1.25rem 3.5rem;
  max-width: var(--largo);
  margin: 0 auto;
  text-align: center;
}

.dentro__griglia {
  display: grid;
  gap: 2.2rem;
  text-align: left;
}

.scheda { border-top: 1px solid var(--oro); padding-top: 1.1rem; }

.scheda__titolo {
  margin: 0 0 .6em;
  font-size: 1.15rem;
  font-weight: 400;
  font-style: italic;
  color: var(--carta);
}

.scheda p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.65;
  color: var(--grigio);
}

/* ------------------------------------------------- 4. chi lo scrive ------ */

.autrice {
  padding: 1rem 1.25rem 3.5rem;
  max-width: var(--largo);
  margin: 0 auto;
  text-align: center;
}

.autrice__blocco {
  max-width: var(--colonna);
  margin: 0 auto;
  padding-left: 1.4rem;
  border-left: 1px solid var(--oro);
  text-align: left;
}
.autrice__blocco p { margin: 0; line-height: 1.75; }

/* il vecchio marchio @FLP: un ricordo, non un'insegna.
   Il fondo dell'immagine e' gia' nero: "screen" lo fonde con la pagina. */
.ricordo {
  margin: 0 auto 2.2rem;
  max-width: 210px;
}
.ricordo img {
  opacity: .78;
  mix-blend-mode: screen;
  transition: opacity .5s ease;
}
.ricordo:hover img { opacity: 1; }

.ricordo__voce {
  margin-top: .7em;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grigio);
  opacity: .55;
}

@media (min-width: 900px) {
  .ricordo { max-width: 250px; }
}

/* ----------------------------------------------------- 6. chiusura ------- */

.chiusura {
  padding: 2.5rem 1.25rem 3rem;
  text-align: center;
  border-top: 1px solid rgba(184, 178, 166, .18);
}

.chiusura__copertina {
  margin: 0 auto 1.6rem;
  max-width: 190px;
}
.chiusura__copertina img { box-shadow: 0 14px 32px rgba(0, 0, 0, .6); }

.chiusura__titolo {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chiusura__azione { margin: 1.6em 0 0; justify-content: center; }

.chiusura__seguito {
  margin: 2.5em auto 0;
  max-width: 30rem;
  font-style: italic;
  color: var(--grigio);
  font-size: .95rem;
}

/* --------------------------------------------------- piè di pagina ------- */

.pie {
  padding: 2rem 1.25rem 5.5rem;   /* spazio per la barra fissa */
  text-align: center;
  border-top: 1px solid rgba(184, 178, 166, .18);
  font-size: .85rem;
  color: var(--grigio);
}
.pie p { margin: 0 0 .5em; }
.pie a { color: var(--grigio); text-decoration: underline; }
.pie a:hover { color: var(--oro); }

/* ------------------------------------------------------ animazioni ------- */

.js .rivela {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .rivela--vista { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rivela { opacity: 1; transform: none; transition: none; }
  .barra-alta, .barra-bassa, .bottone { transition: none; }
  .freccia__filo, .freccia__punta { animation: none; }
  .freccia__filo { transform: scaleY(1); opacity: 1; }
  .freccia__punta { transform: none; opacity: 1; }
}

/* --------------------------------------------- schermi bassi (telefono) -- */

@media (max-height: 700px) and (max-width: 899px) {
  .apertura { padding-top: 1rem; }
  .apertura__copertina img { aspect-ratio: 16 / 9; }
  .apertura__copertina img { max-height: 52vh; }
  .promessa { font-size: .95rem; }
}

/* ------------------------------------------------------------ tablet ----- */

@media (min-width: 600px) {
  body { font-size: 19px; }
  .titolone { font-size: 2.4rem; }
  .azioni { flex-direction: row; flex-wrap: wrap; }
  .azioni .bottone { flex: 0 1 auto; }
  .capitolo__interno { padding: 2.5rem 2.5rem 2.6rem; }
  .modulo__azione .bottone { width: auto; }
}

/* ----------------------------------------------------------- desktop ----- */

@media (min-width: 900px) {
  .apertura { padding: 4.5rem 2rem 5rem; }

  .apertura__interno {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 3.5rem;
    align-items: center;
  }

  .apertura__copertina {
    margin: 0;
    max-width: 420px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .apertura__copertina img {
    aspect-ratio: auto;
    object-fit: fill;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  }
  .freccia { margin-top: 3.2rem; }

  .titolone { font-size: 3rem; }
  .sottotitolo { font-size: 1.5rem; }
  .promessa { font-size: 1.12rem; max-width: 30rem; }

  .estratto,
  .capitolo,
  .dentro,
  .autrice { padding-left: 2rem; padding-right: 2rem; }

  .estratto { padding-top: 4.5rem; }
  .capitolo { padding-bottom: 5rem; }
  .dentro { padding-bottom: 5rem; }
  .autrice { padding-bottom: 5rem; }

  .dentro__griglia { grid-template-columns: repeat(3, 1fr); gap: 3rem; }

  .chiusura { padding: 4.5rem 2rem 4rem; }
  .chiusura__copertina { max-width: 220px; }
  .chiusura__titolo { font-size: 1.9rem; }

  .pie { padding-bottom: 3rem; }

  .barra-alta { display: flex; }
  .barra-bassa { display: none; }
}

/* ==========================================================================
   Pagina del ritorno (ritorno.php) e pagine di servizio della lista.
   Riusa tutto quello che c'e' sopra: qui stanno solo i pezzi nuovi.
   ========================================================================== */

.ritorno {
  padding: 3rem 1.25rem 2.5rem;
}

.ritorno__interno {
  max-width: var(--colonna);
  margin: 0 auto;
}

.ritorno .titolone { margin-top: .2em; }

/* La lettera: colonna stretta, righe larghe. Si legge come una pagina, non
   come una schermata. */
.lettera { margin-top: 2.2rem; }

.lettera p {
  margin: 0 0 1.3em;
  line-height: 1.8;
  font-size: 1.02rem;
}

.lettera__firma {
  margin-top: 2rem;
  font-style: italic;
  color: var(--oro);
}

/* Pagine di esito: un solo riquadro al centro, senza il resto della pagina. */
.capitolo--solo { padding-top: 4rem; }

.dettagli--centro { text-align: center; margin-top: 2rem; }

/* -------------------------------------------------- documenti (privacy) --- */

.autrice--documento { padding-top: 3.5rem; text-align: center; }

.documento { text-align: left; }

.documento__apertura {
  color: var(--grigio);
  font-style: italic;
}

.documento__titolo {
  margin: 2.2em 0 .7em;
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
}

.documento p { margin: 0 0 1.1em; line-height: 1.75; }

.documento__data {
  margin-top: 2.5em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(184, 178, 166, .18);
  font-size: .85rem;
  color: var(--grigio);
}

@media (min-width: 600px) {
  .lettera p { font-size: 1.06rem; }
}

@media (min-width: 900px) {
  .ritorno { padding: 5rem 2rem 3rem; }
  .ritorno .titolone { font-size: 2.6rem; }
  .autrice--documento { padding-left: 2rem; padding-right: 2rem; }
}

/* Il blocco dell'autrice era nato per un paragrafo solo (margin: 0). Nella
   pagina del ritorno ce ne sono due: senza questa riga si toccano. */
.autrice__blocco p + p { margin-top: 1.1em; }

/* ==========================================================================
   Telefono: il pulsante d'acquisto deve stare nel primo schermo.
   Prima di questo blocco il primo bottone cominciava intorno ai 690px, cioe'
   sotto la piega su qualunque telefono. Va in fondo al foglio apposta: deve
   vincere sulle regole scritte sopra.
   ========================================================================== */

@media (max-width: 599px) {

  .apertura { padding-top: .9rem; }

  /* Qui l'immagine e' gia' la fascia ritagliata (img/fascia-1170.jpg, 5:3):
     nessun altro ritaglio, altrimenti si taglia la fiamma. */
  .apertura__copertina { margin-bottom: 1.1rem; }
  .apertura__copertina img {
    aspect-ratio: 5 / 3;
    object-fit: cover;
    object-position: center;
  }

  .titolone    { font-size: 1.6rem; }
  .sottotitolo { font-size: 1.1rem; margin-top: .35em; }
  .promessa    { font-size: .98rem; margin-top: .8em; }
  .firma       { margin-top: .6em; }

  .apertura__azione { margin-top: 1.1em; }
  .apertura__azione .bottone { padding: .72em 1.1em; }

  .freccia { margin-top: 1.4rem; }
}

/* Bersaglio della spunta: 13px era troppo poco per un pollice. */
.modulo__consenso input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .2em;
}
.modulo__consenso label { cursor: pointer; }

/* Pannello di conferma dopo l'iscrizione. */
.capitolo__dopo {
  margin: 1.8em 0 .9em;
  font-style: italic;
  font-size: .95rem;
  color: var(--grigio);
}
.capitolo__interno:focus { outline: none; }

/* ==========================================================================
   Il manuale della pipa (/guide/).
   Pagine di testo lungo: qui comanda la leggibilita', non la scena.
   Riusa i colori, i bottoni e il modulo della landing.
   ========================================================================== */

.pagina-guida { padding-bottom: 0; }

/* --------------------------------------------------------- intestazione -- */

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(206, 166, 86, .25);
}

.testata__marchio {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  text-decoration: none;
}

.testata__voci a {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio);
  text-decoration: none;
  margin-left: 1.2rem;
}
.testata__voci a:hover,
.testata__voci a[aria-current="page"] { color: var(--oro); }

/* -------------------------------------------------------------- guida --- */

.guida {
  padding: 0 1.25rem;
}

.briciole {
  max-width: var(--colonna);
  margin: 1.6rem auto .4rem;
  font-size: .78rem;
  color: var(--grigio);
}
.briciole a { color: var(--grigio); text-decoration: none; }
.briciole a:hover { color: var(--oro); text-decoration: underline; }
.briciole span[aria-hidden] { opacity: .5; margin: 0 .2em; }

.guida__corpo {
  max-width: var(--colonna);
  margin: 0 auto;
  padding: 1.4rem 0 2rem;
}

.guida__titolo {
  margin: 0 0 .5em;
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--carta);
}

.guida__sommario {
  margin: 0 0 1.2em;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--oro);
}

.guida__firma {
  margin: 0 0 2.4em;
  padding-bottom: 1.6em;
  border-bottom: 1px solid rgba(184, 178, 166, .18);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--grigio);
}

.guida__corpo p { margin: 0 0 1.35em; }

.guida__corpo h2 {
  margin: 2.4em 0 .8em;
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--oro);
}

.guida__corpo h3 {
  margin: 1.9em 0 .6em;
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--carta);
}

.guida__corpo strong { color: var(--carta); font-weight: 600; }
.guida__corpo em { color: inherit; }

.guida__corpo a { text-decoration: underline; text-underline-offset: .18em; }

.lista {
  margin: 0 0 1.5em;
  padding-left: 1.3em;
}
.lista li { margin-bottom: .7em; }
.lista b { color: var(--carta); font-weight: 600; }

/* Le tabelle sono strette di natura: su telefono scorrono da sole invece di
   allargare tutta la pagina. */
.tabella {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 1.8em;
  border-collapse: collapse;
  font-size: .92rem;
  white-space: normal;
}
.tabella th,
.tabella td {
  padding: .6em .8em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(184, 178, 166, .18);
  min-width: 8.5rem;
}
.tabella th {
  color: var(--oro);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom-color: rgba(206, 166, 86, .4);
}
.tabella td { color: var(--grigio); }

.guida__nota {
  margin: 2.6em 0 0;
  padding-top: 1.4em;
  border-top: 1px solid rgba(184, 178, 166, .18);
  font-size: .82rem;
  font-style: italic;
  color: var(--grigio);
}

/* -------------------------------------------------------- le altre guide - */

.altre {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 2.6rem 0 1rem;
}
.altre .titolo-sezione { text-align: center; }

.altre__elenco {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: rgba(184, 178, 166, .18);
  border: 1px solid rgba(184, 178, 166, .18);
}

.altre__elenco a {
  display: block;
  padding: 1.1rem 1.2rem;
  background: var(--nero);
  height: 100%;
  text-decoration: none;
  color: var(--grigio);
  transition: background-color .18s ease;
}
.altre__elenco a:hover,
.altre__elenco a:focus-visible { background: #111214; }

.altre__elenco b {
  display: block;
  margin-bottom: .35em;
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--oro);
}
.altre__elenco span { display: block; font-size: .92rem; line-height: 1.55; }

.altre__numero {
  float: right;
  margin-left: .8rem;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(206, 166, 86, .35);
}

.altre--indice { padding-top: 1rem; }

/* --------------------------------------------------- richiamo al libro --- */

.richiamo {
  max-width: var(--largo);
  margin: 2.6rem auto 0;
  padding: 2rem 1.4rem;
  border: 1px solid rgba(206, 166, 86, .35);
}

.richiamo__interno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}

.richiamo__copertina { display: block; flex: 0 0 auto; }
.richiamo__copertina img { width: 160px; }

.richiamo__titolo {
  margin: 0 0 .5em;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--carta);
}

.richiamo__promessa {
  margin: 0 0 1.4em;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--grigio);
}

.pie--guida { padding-bottom: 2.5rem; }

/* ------------------------------------------------------- da 700px in su -- */

@media (min-width: 700px) {
  .guida { padding: 0 2rem; }
  .guida__titolo { font-size: 2.4rem; }
  .altre__elenco { grid-template-columns: 1fr 1fr; }

  .richiamo__interno {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 2.4rem;
  }
  .richiamo__copertina img { width: 200px; }
  .richiamo .azioni { flex-direction: row; }
  .richiamo .azioni .bottone { flex: 0 1 auto; }
}

@media (min-width: 1000px) {
  .altre__elenco { grid-template-columns: repeat(3, 1fr); }
}

/* ----------------------------------- richiamo al manuale dalla landing --- */

.manuale {
  padding: 0 1.25rem 3.5rem;
}

.manuale__interno {
  max-width: 34rem;
  margin: 0 auto;
  text-align: center;
}

.manuale__testo {
  margin: 0 0 1.6em;
  font-size: 1rem;
  color: var(--grigio);
}

.manuale__elenco {
  margin: 0 0 1.8em;
  padding: 0;
  list-style: none;
  text-align: left;
}
.manuale__elenco li {
  border-top: 1px solid rgba(184, 178, 166, .18);
}
.manuale__elenco li:last-child {
  border-bottom: 1px solid rgba(184, 178, 166, .18);
}
.manuale__elenco a {
  display: block;
  padding: .75em .2em;
  font-size: 1rem;
  color: var(--carta);
  text-decoration: none;
}
.manuale__elenco a:hover,
.manuale__elenco a:focus-visible { color: var(--oro); }

.manuale__vai { margin: 0; }

.barra-alta__manuale {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grigio);
  text-decoration: none;
  white-space: nowrap;
}
.barra-alta__manuale:hover { color: var(--oro); }