/* ===== LE GUIDE: RITMO, NON DECORAZIONE =====

   COS'E'
   Il vestito in piu' delle otto pagine guida. Non cambia una parola e non
   sposta un contenuto: cambia il RITMO con cui la pagina si legge.

   IL PROBLEMA
   Una guida e' fatta di dieci sezioni che si assomigliano tutte: filo
   sopra, occhiello ruggine, titolone, testo. Presa una, prese tutte. Chi
   scorre non capisce piu' se sta avanzando o girando in tondo, e alla
   quarta sezione se ne va.

   COSA CAMBIA
   1. i capitoli si numerano da soli, in grande e in trasparenza
   2. i fondi si alternano, cosi' si vede dove finisce un capitolo
   3. il filo ruggine sotto l'occhiello si disegna quando la sezione entra
   4. le sezioni non entrano tutte allo stesso modo: una da sinistra, una
      da destra, una che si avvicina
   5. il confronto a due colonne ha una linea in mezzo che scende
   6. le schede entrano in fila, una dopo l'altra

   DOVE NON ARRIVA, DI PROPOSITO
   Tutto sta sotto .guida, e nessun selettore qui dentro nomina .bruno,
   .playersblock, .says, .dealers, .cfo, .bft- o .hubnav: quelle sezioni
   arrivano dalla home ed e' li' che devono restare uguali a se stesse.
   Se un giorno una regola di questo file si vede sulla home, e' un errore
   di questo file.

   CHI NON VUOLE ANIMAZIONI
   In fondo c'e' il blocco prefers-reduced-motion: tutto quello che si
   muove qui sopra li' si ferma, e la pagina resta identica da leggere.
   ========================================================== */

/* ---------- 1. I CAPITOLI SI NUMERANO DA SOLI ----------
   Il numero non e' scritto nelle pagine: lo conta il foglio. Cosi' se
   domani si aggiunge o si toglie una sezione la numerazione si aggiusta,
   e non resta un "04" appeso a un capitolo che e' diventato il terzo. */
body.guida{ counter-reset: capitolo }

body.guida .sec{
  counter-increment: capitolo;
  position: relative;
}

/* Il numerone dietro. Sta nell'angolo in alto a destra, quasi invisibile,
   e serve a dare profondita' e a dire "sei al quarto". Non si seleziona,
   non si legge a voce: e' un fondale. */
body.guida .sec::before{
  content: counter(capitolo, decimal-leading-zero);
  position: absolute;
  top: clamp(18px, 3vh, 40px);
  right: 0;
  z-index: 0;
  pointer-events: none;
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: clamp(90px, 16vw, 230px);
  line-height: .8;
  letter-spacing: -.06em;
  color: #fff;
  opacity: .028;
}
/* il contenuto vero passa sopra al numerone */
body.guida .sec > *{ position: relative; z-index: 1 }

@media (max-width: 720px){
  body.guida .sec::before{ font-size: 27vw; opacity: .035 }
}

/* ---------- 2. I FONDI SI ALTERNANO ----------
   Nero pieno e nero appena sollevato, a capitoli alterni. E' una
   differenza minima, si nota solo scorrendo: ed e' esattamente quello che
   deve fare, dire "qui ne comincia un altro" senza gridarlo.
   Il fondo esce dalla colonna e va da bordo a bordo, se no sembrerebbero
   riquadri appoggiati sopra invece che fasce di pagina. */
body.guida .sec:nth-of-type(even)::after{
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: #0e0c0b;
  pointer-events: none;
}

/* ---------- 3. IL FILO SOTTO L'OCCHIELLO SI DISEGNA ----------
   L'occhiello ruggine c'era gia'. Adesso ha sotto una riga che parte da
   zero e si allunga quando la sezione entra nello schermo: e' il segnale
   che il capitolo e' cominciato. */
body.guida .sec .k{ position: relative; padding-bottom: 14px }
body.guida .sec .k::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 0;
  background: var(--rust, #d6532b);
  transition: width 1.1s cubic-bezier(.2,.7,.2,1) .15s;
}
body.guida .sec .k.s::after{ width: min(120px, 30%) }

/* ---------- 4. NON ENTRANO TUTTE ALLO STESSO MODO ----------
   Il copione della pagina aggiunge la classe .s quando l'elemento entra
   nello schermo, e il resto lo fa il CSS. Prima ogni cosa saliva di
   trenta pixel: dieci sezioni, dieci volte lo stesso gesto.
   Qui il gesto cambia a giro: la prima arriva da sinistra, la seconda da
   destra, la terza si avvicina. Non e' una giostra, sono tre movimenti
   piccoli che bastano a non far sembrare la pagina una fotocopia. */
body.guida .sec:nth-of-type(3n+1) > .rv:not(.s){ transform: translate3d(-26px, 14px, 0) }
body.guida .sec:nth-of-type(3n+2) > .rv:not(.s){ transform: translate3d( 26px, 14px, 0) }
body.guida .sec:nth-of-type(3n)   > .rv:not(.s){ transform: scale(.965) translate3d(0, 18px, 0) }

/* il titolo di sezione entra sempre dopo il suo occhiello: prima si sa
   di che capitolo si tratta, poi lo si legge */
body.guida .sec > .rv + .rv{ transition-delay: .12s }
body.guida .sec > .rv + .rv + .rv{ transition-delay: .2s }

/* ---------- 5. IL CONFRONTO A DUE COLONNE ----------
   Le due colonne del confronto stavano una accanto all'altra e basta.
   Adesso in mezzo scende una linea ruggine quando il blocco entra: e' la
   linea che separa 28" da 30", e disegnandosi dice che si sta mettendo a
   confronto due cose, non elencandone due. */
body.guida .cmp{ position: relative }
body.guida .cmp::before{
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 0;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--rust, #d6532b) 18%, var(--rust, #d6532b) 82%, transparent);
  transition: height 1.2s cubic-bezier(.2,.7,.2,1) .2s;
  z-index: 2;
  pointer-events: none;
}
body.guida .cmp.s::before{ height: 100% }
@media (max-width: 760px){ body.guida .cmp::before{ display: none } }

/* le due colonne arrivano da fuori, una per lato: si chiudono al centro */
body.guida .cmp:not(.s) > .col:first-child{ transform: translateX(-14px); opacity: .001 }
body.guida .cmp:not(.s) > .col:last-child { transform: translateX( 14px); opacity: .001 }
body.guida .cmp > .col{ transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s, border-color .3s }
body.guida .cmp.s > .col{ transform: none; opacity: 1 }
body.guida .cmp > .col:last-child{ transition-delay: .1s }

/* la colonna d'accento si accende appena, cosi' si capisce qual e' la
   risposta consigliata senza doverlo scrivere */
body.guida .col.acc{
  background:
    radial-gradient(120% 90% at 100% 0, rgba(214,83,43,.10), transparent 62%),
    #100e0c;
}

/* ---------- 6. LE SCHEDE ENTRANO IN FILA ----------
   Tre schede che compaiono insieme sono un blocco. Tre schede che
   compaiono a un decimo di secondo l'una dall'altra sono una sequenza, e
   l'occhio le legge una per una invece di saltarle. */
body.guida .mods > .mod{
  transition: transform .55s cubic-bezier(.2,.7,.2,1), opacity .55s, border-color .3s, background .3s;
}
body.guida .mods > .mod:nth-child(2){ transition-delay: .09s }
body.guida .mods > .mod:nth-child(3){ transition-delay: .18s }
body.guida .mods > .mod:nth-child(4){ transition-delay: .27s }

/* e sotto il dito si sollevano, con l'angolo che si accende di ruggine */
body.guida .mod{ position: relative; overflow: hidden }
body.guida .mod::after{
  content: "";
  position: absolute;
  right: -1px; top: -1px;
  width: 0; height: 0;
  border-top: 0 solid var(--rust, #d6532b);
  border-left: 0 solid transparent;
  transition: border-width .35s cubic-bezier(.2,.7,.2,1);
}
body.guida .mod:hover{ transform: translateY(-3px); border-color: rgba(214,83,43,.55) }
body.guida .mod:hover::after{ border-top-width: 26px; border-left-width: 26px }

/* ---------- 7. L'APERTURA ----------
   L'occhiello dell'apertura non c'e' piu': diceva "Italian lutherie"
   sopra a un titolo che diceva "Italian lutherie". Due volte la stessa
   cosa a mezzo secondo di distanza non e' gerarchia, e' inciampo.
   Resta negli occhielli delle sezioni, dove serve davvero perche' li'
   dice a che capitolo si e'. */
body.guida .hero .eyebrow{ display: none }

/* la parola in ruggine del titolo si scopre da sinistra, come se venisse
   scritta: e' l'unica animazione un po' vistosa di tutta la pagina, e sta
   nel posto dove ha senso esserlo */
body.guida .hero h1 em{
  font-style: normal;
  color: var(--rust, #d6532b);
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: guidaScopri 1.1s cubic-bezier(.2,.7,.2,1) .55s forwards;
}
@keyframes guidaScopri{ to{ clip-path: inset(0 0 0 0) } }

/* ---------- 8. IL TESTO ARRIVA IN FONDO ----------
   Avevo stretto il sommario dell'apertura a 46 caratteri per farlo
   leggere come un occhiello lungo. Sbagliato: cosi' si spezza a meta'
   riga e lascia mezza pagina bianca alla sua destra, che non e' respiro,
   e' un testo troncato. Va in fondo alla larghezza che ha.
   Stessa cosa per le domande in fondo, che stavano in una colonna da
   860px dentro a una pagina larga 1200. */
body.guida .hero .dek{ max-width: none }
body.guida .faqw{ max-width: none }

/* Le virgolette dentro al testo delle guide diventano un segno grafico,
   non un carattere in mezzo alle parole. */
body.guida .sec blockquote{
  position: relative;
  margin: 34px 0;
  padding-left: clamp(18px, 3vw, 34px);
  border-left: 2px solid var(--rust, #d6532b);
  font-size: clamp(19px, 2.2vw, 27px);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #f1ede6;
}

/* ---------- 9. LE SEZIONI DI SOLO TESTO ----------
   Sono le piu' noiose della guida: occhiello, titolone, tre paragrafi in
   colonna a sinistra, e meta' pagina vuota a destra. Non e' respiro,
   e' un buco: l'occhio non ha nessun motivo per attraversare la pagina.

   Qui il titolo si sposta in una corsia sua a sinistra e ci resta
   appiccicato mentre il testo scorre a destra. Cosi' la pagina si legge
   su due tempi, il vuoto sparisce, e mentre uno legge il terzo paragrafo
   ha ancora davanti agli occhi di cosa si sta parlando.

   Il segno .prosa lo mette il montaggio: sono le sezioni che dentro
   hanno solo paragrafi, niente schede e niente confronti. */
@media (min-width: 1000px){
  body.guida .sec.prosa > .wrap{
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
  /* la corsia di sinistra: occhiello sopra, titolo sotto.
     Il titolo attraversa TUTTE le righe dei paragrafi (span 50): se
     occupasse una riga sola la farebbe alta quanto lui, e fra il secondo
     e il terzo paragrafo si aprirebbe un buco. Cosi' invece le righe le
     decidono i paragrafi, e il titolo ci scorre accanto. */
  body.guida .sec.prosa > .wrap > .k{ grid-column: 1; grid-row: 1 }
  body.guida .sec.prosa > .wrap > h2{
    grid-column: 1;
    grid-row: 2 / span 50;
    align-self: start;
    font-size: clamp(30px, 3.3vw, 52px);
    line-height: 1.02;
  }
  /* tutto quello che non e' l'occhiello o il titolo va nella colonna di
     destra. Si va a nth-child e non a nth-of-type perche' li' dentro non
     ci sono solo <p>: un giorno ci finisce un elenco, e con nth-of-type
     l'elenco non sarebbe contato, si piazzerebbe a sinistra e spingerebbe
     il titolo in fondo alla pagina. E' successo. */
  body.guida .sec.prosa > .wrap > *:nth-child(n+3){
    grid-column: 2;
    max-width: 60ch;
  }
  /* le righe dei paragrafi vanno dette una per una: il titolo occupa la
     colonna 1 dalla riga 2 in giu', e senza riga esplicita il secondo
     paragrafo andrebbe a infilarsi nella riga 1 rimasta libera, cioe'
     SOPRA il primo. */
  body.guida .sec.prosa > .wrap > *:nth-child(3){ grid-row: 2 }
  body.guida .sec.prosa > .wrap > *:nth-child(4){ grid-row: 3 }
  body.guida .sec.prosa > .wrap > *:nth-child(5){ grid-row: 4 }
  body.guida .sec.prosa > .wrap > *:nth-child(6){ grid-row: 5 }
  body.guida .sec.prosa > .wrap > *:nth-child(7){ grid-row: 6 }
  body.guida .sec.prosa > .wrap > *:nth-child(8){ grid-row: 7 }
  body.guida .sec.prosa > .wrap > *:nth-child(9){ grid-row: 8 }
  body.guida .sec.prosa > .wrap > *:nth-child(10){ grid-row: 9 }
  /* il primo paragrafo e' l'attacco: piu' grande, e con un filo ruggine
     a sinistra che lo tiene agganciato al titolo */
  body.guida .sec.prosa > .wrap > *:nth-child(3){
    font-size: clamp(18px, 1.35vw, 21px);
    line-height: 1.5;
    color: #e8e2d8;
    padding-left: clamp(16px, 1.6vw, 24px);
    border-left: 2px solid rgba(214,83,43,.55);
  }
}

/* Le parole in grassetto dentro al testo erano solo piu' pesanti. Adesso
   hanno un filo ruggine sotto: si vedono scorrendo, e chi legge di fretta
   porta a casa almeno quelle. Vale a ogni larghezza. */
body.guida .sec.prosa p b,
body.guida .sec.prosa p strong{
  color: #fff;
  box-shadow: inset 0 -6px 0 rgba(214,83,43,.28);
}

/* ==========================================================
   10. I BLOCCHI DIVERSI

   Il problema vero delle guide non era il vestito: era che una pagina
   intera era fatta dello stesso blocco ripetuto otto volte. Occhiello,
   titolone, tre paragrafi. Poi di nuovo. Poi di nuovo. Un lettore capisce
   al terzo che non succedera' niente di nuovo, e se ne va.

   Qui ci sono i tipi di blocco che spezzano: i numeri, la frase grossa,
   l'affermazione, i passaggi numerati, la distinta.

   Le fasce (.band) sono <div>, non <section>, DI PROPOSITO: cosi' non
   entrano nel conto dei capitoli e non sfasano le fasce di fondo
   alternate, che vanno a nth-of-type(section).
   ========================================================== */

body.guida .band{
  position: relative;
  padding: clamp(64px, 9vh, 120px) 0;
}
/* le fasce vanno da bordo a bordo, il fondo esce dalla colonna */
body.guida .band::after{
  content: "";
  position: absolute; inset: 0; left: 50%;
  width: 100vw; transform: translateX(-50%);
  z-index: -1; pointer-events: none;
}

/* ---------- I NUMERI ----------
   Quattro cifre grosse in fila. Non e' decorazione: e' la parte della
   pagina che si legge in tre secondi, e chi non leggera' mai un
   paragrafo intero almeno esce con questi. */
body.guida .gnum::after{
  background: linear-gradient(180deg, #100e0c, #0b0a09);
  border-top: 1px solid var(--line, rgba(255,255,255,.13));
  border-bottom: 1px solid var(--line, rgba(255,255,255,.13));
}
/* auto-fit e non "quattro": non tutte le guide hanno quattro numeri veri
   da mettere, e tre cifre larghe un quarto di pagina con un quarto vuoto
   accanto sarebbero il buco di prima, un'altra volta */
body.guida .gnum > .wrap{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
body.guida .gn{ border-top: 2px solid var(--rust, #d6532b); padding-top: 18px }
body.guida .gn-v{
  display: block;
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: clamp(52px, 6.4vw, 104px);
  line-height: .85;
  letter-spacing: -.045em;
  color: var(--ink, #f1ede6);
}
body.guida .gn-u{
  display: block;
  margin: 10px 0 12px;
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust, #d6532b);
}
body.guida .gn p{ font-size: 15px; line-height: 1.55; color: var(--muted, #8f887b); margin: 0 }
/* entrano una dopo l'altra, come un contatore */
body.guida .gn:nth-child(2){ transition-delay: .08s }
body.guida .gn:nth-child(3){ transition-delay: .16s }
body.guida .gn:nth-child(4){ transition-delay: .24s }
@media (max-width: 900px){
  body.guida .gnum > .wrap{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 520px){
  body.guida .gnum > .wrap{ grid-template-columns: 1fr; gap: 30px }
}

/* ---------- LA FRASE ----------
   Una citazione che occupa quasi uno schermo. Serve a fermare la
   lettura: dopo una cosa cosi' grossa, il paragrafo che viene dopo si
   legge con un'altra attenzione. */
body.guida .gquote{ padding: clamp(90px, 16vh, 190px) 0 }
body.guida .gquote::after{
  background:
    radial-gradient(80% 120% at 12% 0, rgba(214,83,43,.16), transparent 60%),
    #0b0a09;
}
body.guida .gquote blockquote{
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 17ch;
  text-wrap: balance;
}
body.guida .gquote blockquote em{ font-style: normal; color: var(--rust, #d6532b) }
/* le virgolette aperte, grosse, fuori dalla colonna: sono un segno, non
   un carattere da leggere */
body.guida .gquote blockquote::before{
  content: "\201C";
  position: absolute;
  margin-left: -.55em;
  color: var(--rust, #d6532b);
  opacity: .45;
}
body.guida .gq-who{
  margin-top: clamp(24px, 3vh, 40px);
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted, #8f887b);
}
@media (max-width: 700px){
  body.guida .gquote blockquote{ max-width: none }
  body.guida .gquote blockquote::before{ position: static; margin: 0 }
}

/* ---------- L'AFFERMAZIONE ----------
   Una riga sola, centrata, con un filo sopra e uno sotto. Piu' piccola
   della citazione, perche' e' un respiro fra due sezioni, non un pugno. */
body.guida .gstate{ padding: clamp(56px, 8vh, 96px) 0 }
body.guida .gstate > .wrap{
  border-top: 1px solid var(--line, rgba(255,255,255,.13));
  border-bottom: 1px solid var(--line, rgba(255,255,255,.13));
  padding: clamp(36px, 5vh, 64px) 0;
}
body.guida .gstate p{
  margin: 0 auto;
  max-width: 22ch;
  text-align: center;
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}
body.guida .gstate em{ font-style: normal; color: var(--rust, #d6532b) }

/* ---------- I PASSAGGI NUMERATI ----------
   Quando un paragrafo contiene un'operazione, il suo perche' e il suo
   risultato, sono tre cose e vanno separate. Numerate si tengono a
   mente; dentro un paragrafo no. */
body.guida .gsteps{
  list-style: none;
  counter-reset: passo;
  margin: clamp(34px, 5vh, 56px) 0 0;
  display: grid;
  gap: 0;
}
body.guida .gsteps > li{
  counter-increment: passo;
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 130px) minmax(0, 1fr);
  /* solo colonna: se fosse "gap" varrebbe anche fra le righe, e fra il
     titolo del passo e il suo testo si aprirebbero 44px di niente */
  column-gap: clamp(18px, 3vw, 44px);
  row-gap: 8px;
  align-items: start;
  padding: clamp(22px, 3.4vh, 38px) 0;
  border-top: 1px solid var(--line, rgba(255,255,255,.13));
}
body.guida .gsteps > li:last-child{ border-bottom: 1px solid var(--line, rgba(255,255,255,.13)) }
/* il numero tiene la colonna di sinistra per tutte e due le righe, il
   titolo e il testo stanno a destra uno sotto l'altro: senza dirlo, il
   paragrafo finirebbe sotto al numero, in una colonna larga 70px */
body.guida .gsteps > li::before{ grid-column: 1; grid-row: 1 / span 2 }
body.guida .gsteps h3{ grid-column: 2; grid-row: 1 }
body.guida .gsteps > li > p{ grid-column: 2; grid-row: 2 }
body.guida .gsteps > li::before{
  content: counter(passo, decimal-leading-zero);
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--rust, #d6532b);
}
body.guida .gsteps h3{
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
body.guida .gsteps p{ margin: 0; max-width: 62ch; color: #ddd6cb }
body.guida .gsteps > li:nth-child(2){ transition-delay: .1s }
body.guida .gsteps > li:nth-child(3){ transition-delay: .2s }
@media (max-width: 620px){
  body.guida .gsteps > li{ grid-template-columns: 1fr; gap: 10px }
}

/* ---------- LA DISTINTA ----------
   I nomi dei legni erano annegati dentro i paragrafi. Un chitarrista li
   cerca per primi: qui li trova incolonnati, e li legge in due secondi. */
body.guida .gspec{ margin: clamp(30px, 4.5vh, 50px) 0 0 }
body.guida .gspec > div{
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 220px) minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 40px);
  row-gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--line, rgba(255,255,255,.13));
  align-items: baseline;
}
body.guida .gspec > div:last-child{ border-bottom: 1px solid var(--line, rgba(255,255,255,.13)) }
body.guida .gspec dt{
  font-family: var(--g), sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust, #d6532b);
}
body.guida .gspec dd{ margin: 0; max-width: 62ch }
body.guida .gspec a{ border-bottom: 1px solid rgba(214,83,43,.6) }
/* la riga si accende al passaggio: la distinta diventa una cosa da
   percorrere, non un muro */
body.guida .gspec > div{ transition: background .25s, border-color .25s }
body.guida .gspec > div:hover{ background: rgba(255,255,255,.025) }
body.guida .gspec > div:nth-child(2){ transition-delay: .06s }
body.guida .gspec > div:nth-child(3){ transition-delay: .12s }
body.guida .gspec > div:nth-child(4){ transition-delay: .18s }
body.guida .gspec > div:nth-child(5){ transition-delay: .24s }
@media (max-width: 620px){
  body.guida .gspec > div{ grid-template-columns: 1fr; gap: 6px }
}

/* la riga di chiusura dopo un elenco: staccata, piu' piccola, e' il
   commento del costruttore non un altro paragrafo del testo */
body.guida .gs-end{
  margin-top: clamp(26px, 3.6vh, 44px);
  max-width: 62ch;
  color: var(--muted, #8f887b);
}
/* il sommario sotto al titolo di sezione, quando la sezione ha un elenco */
body.guida .sec > .wrap > .dek{
  max-width: 58ch;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.5;
  color: #e8e2d8;
  margin-top: 18px;
}

/* ==========================================================
   11. LE PAGINE CHE HANNO UN VOCABOLARIO LORO

   La Dual Output non e' costruita come le guide: le sue sezioni non si
   chiamano .sec, si chiamano .feature, .answer, .vision, .dual, .videos,
   .collshow, .faq. Ha gia' il suo Bruno (.vision), i suoi musicisti (le
   tre sezioni a colore e la costellazione) e i suoi rivenditori
   (.dealx), tutti in versione sua e piu' ricca di quella condivisa:
   metterci sopra le sezioni standard sarebbe stampare due volte la
   stessa cosa.

   Le mancavano solo il conto dei capitoli e i fondi alternati, che sono
   le due cose che dicono a chi scorre a che punto e'. Il segno .cap lo
   porta a mano ognuna delle dieci sezioni che sono capitoli veri: i due
   nastri, la barra delle finiture, le sezioni a colore degli artisti, la
   costellazione, i rivenditori e la chiusura restano fuori, perche'
   quelli sono intermezzi e numerarli sarebbe una bugia.
   ========================================================== */
/* SU QUESTA PAGINA NON SI METTE NE' NUMERI NE' FONDI. Ci ho provato,
   erano tutti e due sbagliati.
   I numeri: la pagina i capitoli se li numera gia' da sola nei
   sopratitoli ("01 What it does", "02 How it found its voice"), e una
   seconda serie in trasparenza faceva due numerazioni sulla stessa
   sezione, che in un punto si contraddicevano.
   I fondi alternati: non si vedevano nemmeno, perche' ogni sezione ha
   gia' il suo fondo dichiarato con selettori piu' precisi. E non
   servono: questa pagina alterna gia' da sola, con la barra chiara, le
   tre sezioni a colore degli artisti e la foto di #story.
   Quello che le mancava per davvero era il ritmo verticale, e quello sta
   nella pagina, non qui, perche' riguarda le sue sezioni e nessun'altra.
   Il segno .cap resta: serve a dire quali sono i capitoli veri. */

/* ---------- CHI NON VUOLE ANIMAZIONI ----------
   Non e' una cortesia, e' una richiesta del sistema operativo: c'e' chi
   con le animazioni sta fisicamente male. Qui si ferma tutto, e la pagina
   resta esattamente la stessa da leggere. */
@media (prefers-reduced-motion: reduce){
  body.guida .sec .k::after{ transition: none; width: min(120px, 30%) }
  body.guida .sec > .rv:not(.s){ transform: none }
  body.guida .cmp::before{ transition: none; height: 100% }
  body.guida .cmp:not(.s) > .col:first-child,
  body.guida .cmp:not(.s) > .col:last-child{ transform: none; opacity: 1 }
  body.guida .mods > .mod{ transition: none }
  body.guida .hero h1 em{ animation: none; clip-path: none }
  body.guida .mod:hover{ transform: none }
  body.guida .gn,
  body.guida .gsteps > li,
  body.guida .gspec > div{ transition-delay: 0s }
}