/* ==========================================================================
   Chiarenda · landing statica
   --------------------------------------------------------------------------
   1. Font locali
   2. Fondamenta di design (token)
   3. Base
   4. Struttura: contenitore, margine e asse
   5. Testata e navigazione
   6. Apertura e sfondo predisposto
   7. Sezioni
   8. Come funziona: titolo composto e tappe
   9. Progetto
   10. Destinatari
   11. Domande frequenti e Stay updated
   12. Piede
   13. Movimento legato allo scroll, movimento ridotto, stampa

   Soglie di layout (le media query non leggono le variabili CSS, quindi i
   valori sono ripetuti nelle regole):
     40rem (640 px)   due colonne dentro le sezioni, numeri delle tappe grandi
     62rem (992 px)   margine dei titoli a sinistra, contenuti sull'asse
   ========================================================================== */


/* 1. Font locali ----------------------------------------------------------
   Bricolage Grotesque: istanza statica opsz 72, wght 625, wdth 100 del font
   variabile originale, cioè quella incorporata nei PDF della guida alla marca.
   Instrument Sans: wdth 100, wght 400–600. Entrambi ridotti al latino che
   copre l'italiano e convertiti in WOFF2 con fontTools.
   Licenza SIL Open Font License 1.1, senza Reserved Font Names: i testi sono
   in assets/fonts/OFL-BricolageGrotesque.txt e OFL-InstrumentSans.txt.       */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-72pt-wght625.woff2") format("woff2");
  font-weight: 625;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-wght400-600.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Riserve dimensionate: Arial riportato alla larghezza media dei due font,
   così il testo non cambia ingombro in modo vistoso quando arrivano i WOFF2. */
@font-face {
  font-family: "Chiarenda Titoli Riserva";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 625;
  size-adjust: 91%;
}

@font-face {
  font-family: "Chiarenda Testo Riserva";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 600;
  size-adjust: 102%;
}


/* 2. Fondamenta di design -------------------------------------------------
   Riferimento del capitolato per i valori condivisi con la futura UI.
   Primitivi: valori della marca. Semantici: il ruolo che ogni valore ha
   nella pagina. Le regole usano solo i semantici.                           */

:root {
  /* Colore · primitivi (guida alla marca, p. 6) */
  --ch-inchiostro: #211C31;
  --ch-viola: #5138B6;
  --ch-lavanda: #E9E2FF;
  --ch-carta: #F8F6F0;
  --ch-bianco: #FFFFFF;
  /* Colore · primitivi derivati, misurati sui PDF della guida */
  --ch-inchiostro-attenuato: #584F6C; /* testo secondario: 7,07:1 su Carta */
  --ch-filetto: #DCD6E6;              /* filetti di separazione: decorativi */

  /* Colore · semantici */
  --ch-bg: var(--ch-carta);
  --ch-surface: var(--ch-bianco);
  --ch-surface-accent: var(--ch-lavanda);
  --ch-text: var(--ch-inchiostro);
  --ch-text-muted: var(--ch-inchiostro-attenuato);
  --ch-accent: var(--ch-viola);
  --ch-accent-hover: var(--ch-inchiostro);
  --ch-on-accent: var(--ch-bianco);
  --ch-line: var(--ch-filetto);
  --ch-line-strong: var(--ch-inchiostro);
  --ch-focus: var(--ch-viola);
  /* Superficie inversa: su Inchiostro il Viola non regge (2,3:1), l'accento diventa Lavanda */
  --ch-surface-inverse: var(--ch-inchiostro);
  --ch-on-inverse: var(--ch-carta);
  --ch-accent-on-inverse: var(--ch-lavanda);

  /* Tipografia · famiglie e pesi */
  --ch-font-display: "Bricolage Grotesque", "Chiarenda Titoli Riserva", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ch-font-text: "Instrument Sans", "Chiarenda Testo Riserva", system-ui, "Helvetica Neue", Arial, sans-serif;
  --ch-weight-display: 625;
  --ch-weight-text: 400;
  --ch-weight-medium: 500;
  --ch-weight-strong: 600;

  /* Tipografia · scala (fluida fra 320 e 1440 px di larghezza) */
  --ch-title-1: clamp(2.5rem, 1.357rem + 5.714vw, 6.5rem);     /* 40 → 104 px */
  --ch-title-2: clamp(1.75rem, 1.536rem + 1.071vw, 2.5rem);    /* 28 → 40 px */
  --ch-title-3: clamp(1.5rem, 1.429rem + 0.357vw, 1.75rem);    /* 24 → 28 px */
  --ch-text-lg: clamp(1.1875rem, 1.098rem + 0.446vw, 1.5rem);  /* 19 → 24 px */
  --ch-text-md: clamp(1.0625rem, 1.045rem + 0.089vw, 1.125rem); /* 17 → 18 px */
  --ch-text-sm: 0.9375rem;                                     /* 15 px */
  --ch-text-xs: 0.8125rem;                                     /* 13 px */

  /* Tipografia · interlinea e spaziatura fra le lettere */
  --ch-leading-display: 1;
  --ch-leading-title: 1.1;
  --ch-leading-lead: 1.45;
  --ch-leading-text: 1.55;
  --ch-tracking-display: -0.019em; /* titolo della Tavola di lancio */
  --ch-tracking-label: 0.08em;     /* occhielli in maiuscolo */
  --ch-display-accent-scale: 1.123; /* riga viola: 36,5/32,5 come nella Tavola */

  /* Spaziatura */
  --ch-space-1: 0.25rem;
  --ch-space-2: 0.5rem;
  --ch-space-3: 0.75rem;
  --ch-space-4: 1rem;
  --ch-space-5: 1.5rem;
  --ch-space-6: 2rem;
  --ch-space-7: 3rem;
  --ch-space-section: clamp(3.5rem, 2.5rem + 5vw, 7rem);       /* 56 → 112 px */

  /* Griglia */
  --ch-page-max: 76rem;                                        /* 1216 px */
  --ch-page-margin: clamp(1.25rem, 0.25rem + 5vw, 5rem);       /* 20 → 76 px */
  --ch-rail: clamp(15.5rem, 9rem + 10.5vw, 19rem);             /* 248 → 295 px */
  --ch-gutter: clamp(2rem, 1rem + 2vw, 3rem);                  /* 32 → 45 px */
  --ch-measure: 38rem;                                         /* 60–70 caratteri */

  /* Bordi, raggi, aree al tocco */
  --ch-line-width: 1px;
  --ch-radius-sm: 0.5rem;
  --ch-radius-md: 0.625rem;
  --ch-target: 2.75rem;                                        /* 44 px */

  /* Focus */
  --ch-focus-width: 3px;
  --ch-focus-offset: 3px;

  /* ---- Solo landing: questi valori non fanno parte del riferimento per la UI ---- */

  /* Titolo composto di «Come funziona»: fra il titolo di apertura e i titoli di sezione */
  --ch-title-statement: clamp(1.875rem, 1.196rem + 3.393vw, 4.25rem); /* 30 → 68 px */
  --ch-accent-line-width: 2px;                                 /* filetto viola del flusso */
  --ch-marker: 2rem;                                           /* numero della tappa: 32 px, 44 px da 40rem */

  /* Sfondo dell'apertura: vedi README-PLESK.md, «Immagine di sfondo dell'apertura».
     Con «none» la pagina non richiede nessun file e l'apertura resta su Carta. */
  --ch-hero-image: none;                        /* es. url("../img/apertura.avif") */
  --ch-hero-image-size: cover;
  --ch-hero-image-position: 100% 50%;           /* taglio da 62rem in su */
  --ch-hero-image-position-mobile: 70% 100%;    /* taglio sotto 62rem */
  /* Velo di Carta fra immagine e testo: protegge il contrasto di occhiello, titolo e sommario.
     Da 62rem resta pieno fino al bordo destro della colonna di testo, poi lascia vedere l'immagine;
     sotto, dove il testo occupa tutta la larghezza, copre l'intera apertura e si alleggerisce in basso.
     Con un'opacità di almeno 0,72 il contrasto AA regge su qualunque immagine. */
  --ch-hero-veil-strength: 0.86;
  --ch-hero-veil-edge: calc(max(var(--ch-page-margin), (100% - var(--ch-page-max)) / 2) + var(--ch-rail) + var(--ch-gutter) + var(--ch-measure));
  --ch-hero-veil: linear-gradient(90deg, rgb(248 246 240 / var(--ch-hero-veil-strength)) 0, rgb(248 246 240 / var(--ch-hero-veil-strength)) var(--ch-hero-veil-edge), rgb(248 246 240 / 0.12) calc(var(--ch-hero-veil-edge) + 16rem));
  --ch-hero-veil-mobile: linear-gradient(180deg, rgb(248 246 240 / var(--ch-hero-veil-strength)) 0, rgb(248 246 240 / var(--ch-hero-veil-strength)) 78%, rgb(248 246 240 / 0.5) 100%);

  /* Movimento: frazioni dell'altezza della finestra, lette anche da assets/js/movimento.js */
  --ch-moto-entrata: 0.98;  /* la composizione del titolo comincia quando il blocco entra da qui */
  --ch-moto-arrivo: 0.5;    /* e finisce quando la sua base arriva qui */
  --ch-moto-filetto: 0.88;  /* il filetto orizzontale è intero a questa frazione dell'intervallo */
  --ch-moto-linea: 0.6;     /* linea di lettura: la tappa che la raggiunge si accende */
  --ch-moto-corsa: 14rem;   /* destinatari: scroll lungo cui si traccia il filetto di ogni blocco */
  --ch-duration-fast: 160ms; /* riscontro su hover, focus e pressione */
}

@media (min-width: 40rem) {
  :root {
    --ch-marker: 2.75rem;
  }
}

@media (min-width: 62rem) {
  :root {
    --ch-moto-arrivo: 0.42;
    --ch-moto-corsa: 22rem;
  }
}


/* 3. Base ----------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--ch-bg);
  color: var(--ch-text);
  font-family: var(--ch-font-text);
  font-size: var(--ch-text-md);
  font-weight: var(--ch-weight-text);
  line-height: var(--ch-leading-text);
  font-synthesis: none;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--ch-font-display);
  font-weight: var(--ch-weight-display);
  line-height: var(--ch-leading-title);
}

h2,
h3 {
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--ch-accent);
  text-decoration-thickness: var(--ch-line-width);
  text-underline-offset: 0.2em;
  transition: color var(--ch-duration-fast) ease-out, background-color var(--ch-duration-fast) ease-out;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: var(--ch-focus-width) solid var(--ch-focus);
  outline-offset: var(--ch-focus-offset);
  border-radius: var(--ch-space-1);
}

::selection {
  background: var(--ch-surface-accent);
  color: var(--ch-text);
}

img,
svg {
  display: block;
}

.salto {
  position: absolute;
  top: var(--ch-space-3);
  left: var(--ch-page-margin);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: var(--ch-target);
  padding-inline: var(--ch-space-4);
  border: var(--ch-line-width) solid var(--ch-line-strong);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-surface);
  font-weight: var(--ch-weight-strong);
  transform: translateY(-200%);
}

.salto:focus {
  transform: none;
}

main:focus {
  outline: none;
}

.occhiello {
  color: var(--ch-accent);
  font-size: var(--ch-text-xs);
  font-weight: var(--ch-weight-strong);
  letter-spacing: var(--ch-tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}


/* 4. Struttura ------------------------------------------------------------
   Il contenitore fissa i margini della pagina. Da 62rem ogni blocco ha due
   tracce: il margine dei titoli a sinistra (--ch-rail) e l'asse su cui
   partono testo, azione e contenuti.                                        */

.contenitore {
  width: 100%;
  max-width: calc(var(--ch-page-max) + 2 * var(--ch-page-margin));
  margin-inline: auto;
  padding-inline: var(--ch-page-margin);
}

@media (min-width: 62rem) {
  .asse {
    display: grid;
    grid-template-columns: var(--ch-rail) minmax(0, 1fr);
    column-gap: var(--ch-gutter);
  }

  .asse > .asse__margine {
    grid-column: 1;
  }

  .asse > .asse__corpo {
    grid-column: 2;
  }
}


/* 5. Testata e navigazione ------------------------------------------------
   Sugli schermi stretti la navigazione va su una riga sua, sotto il marchio:
   tre voci sempre visibili, senza menu a scomparsa.                         */

.testata__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--ch-space-6);
  padding-block: var(--ch-space-3);
  border-bottom: var(--ch-line-width) solid var(--ch-line);
}

/* Lettering: larghezza da 134 px in su; lo spazio libero pari all'altezza
   della «a» (12,7% della larghezza) è garantito dai margini della riga.     */
.marchio {
  display: inline-flex;
  align-items: center;
  min-height: var(--ch-target);
}

.marchio img {
  width: clamp(8.375rem, 7.81rem + 2.83vw, 9.875rem);          /* 134 → 158 px */
  height: auto;
}

.navigazione ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ch-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.navigazione a {
  display: inline-flex;
  align-items: center;
  min-width: var(--ch-target);
  min-height: var(--ch-target);
  color: var(--ch-text);
  font-size: var(--ch-text-sm);
  font-weight: var(--ch-weight-medium);
  text-decoration: none;
}

.navigazione a:hover {
  color: var(--ch-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.navigazione a:active {
  color: var(--ch-accent);
}

/* Sotto 22.5rem (360 px) le tre voci stanno su una riga solo avvicinandole. */
@media (max-width: 22.49rem) {
  .navigazione {
    flex: 1 0 100%;
  }

  .navigazione ul {
    flex-wrap: nowrap;
    justify-content: space-between;
    column-gap: var(--ch-space-2);
  }

  .navigazione a {
    font-size: 0.875rem;
    white-space: nowrap;
  }
}

@media (min-width: 40rem) {
  .navigazione ul {
    column-gap: var(--ch-space-5);
  }
}

@media (min-width: 62rem) {
  .testata__riga {
    padding-block: var(--ch-space-4);
  }

  .navigazione ul {
    column-gap: var(--ch-space-6);
  }

  .navigazione a {
    font-size: var(--ch-text-md);
  }
}


/* 6. Apertura e sfondo predisposto ----------------------------------------
   Lo sfondo vive in due livelli dietro al contenuto: l'immagine (::before) e
   il velo che protegge il contrasto (::after). Nessuno dei due partecipa al
   layout: aggiungere l'immagine non sposta titolo, testo o azione.          */

.apertura {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 1.357rem + 5.714vw, 6.5rem) var(--ch-space-section);
}

.apertura::before,
.apertura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.apertura::before {
  background-image: var(--ch-hero-image);
  background-repeat: no-repeat;
  background-position: var(--ch-hero-image-position-mobile);
  background-size: var(--ch-hero-image-size);
}

.apertura::after {
  background-image: var(--ch-hero-veil-mobile);
}

@media (min-width: 62rem) {
  .apertura::before {
    background-position: var(--ch-hero-image-position);
  }

  .apertura::after {
    background-image: var(--ch-hero-veil);
  }
}

/* Il titolo è composto come nella Tavola: la riga viola sta da sola, un poco
   più grande. Il rientro negativo (il margine sinistro del glifo «I»: 54/1000
   di em) porta le aste di «I» e «i» sul filo del margine della pagina.      */
.apertura__titolo {
  margin-block-start: var(--ch-space-5);
  margin-inline-start: -0.054em;
  font-size: var(--ch-title-1);
  line-height: var(--ch-leading-display);
  letter-spacing: var(--ch-tracking-display);
}

.apertura__titolo span {
  display: block;
  color: var(--ch-accent);
  font-size: calc(1em * var(--ch-display-accent-scale));
  line-height: 0.95;
}

.apertura__corpo {
  margin-block-start: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem);
}

.apertura__sommario {
  max-width: var(--ch-measure);
  font-size: var(--ch-text-lg);
  line-height: var(--ch-leading-lead);
}

.azione {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  margin-block-start: var(--ch-space-6);
  padding: var(--ch-space-3) var(--ch-space-5);
  border-radius: var(--ch-radius-sm);
  background: var(--ch-accent);
  color: var(--ch-on-accent);
  font-weight: var(--ch-weight-strong);
  text-decoration: none;
  transition: background-color var(--ch-duration-fast) ease-out, transform var(--ch-duration-fast) ease-out;
}

.azione:hover {
  background: var(--ch-accent-hover);
}

.azione:active {
  background: var(--ch-accent-hover);
  transform: translateY(1px);
}

.azione:focus-visible {
  border-radius: var(--ch-radius-sm);
}


/* 7. Sezioni --------------------------------------------------------------
   Ogni sezione ha occhiello e titolo nel margine e contenuti sull'asse.
   Su Carta si apre con un filetto forte. Le sezioni su un'altra superficie
   (bianca, oppure inversa su Inchiostro) sono fasce a tutta larghezza: il
   cambio di superficie sostituisce il filetto, anche per la sezione che
   le segue.                                                                 */

.sezione__interno {
  padding-block: var(--ch-space-6) var(--ch-space-section);
  border-top: var(--ch-line-width) solid var(--ch-line-strong);
}

.sezione--superficie {
  background: var(--ch-surface);
}

.sezione--inversa {
  background: var(--ch-surface-inverse);
  color: var(--ch-on-inverse);
}

.sezione--inversa .occhiello,
.sezione--inversa .richiamo span {
  color: var(--ch-accent-on-inverse);
}

.sezione--inversa .richiamo::before {
  border-top-color: var(--ch-accent-on-inverse);
}

.sezione--inversa :focus-visible {
  outline-color: var(--ch-accent-on-inverse);
}

.sezione--superficie .sezione__interno,
.sezione--superficie + .sezione .sezione__interno,
.sezione--inversa .sezione__interno,
.sezione--inversa + .sezione .sezione__interno {
  padding-block-start: var(--ch-space-section);
  border-top: 0;
}

.sezione__titolo {
  margin-block-start: var(--ch-space-3);
  font-size: var(--ch-title-2);
}

.sezione__corpo {
  margin-block-start: var(--ch-space-6);
}

@media (min-width: 62rem) {
  .sezione__interno {
    padding-block-start: var(--ch-space-7);
  }

  .sezione--superficie .sezione__interno,
  .sezione--superficie + .sezione .sezione__interno,
  .sezione--inversa .sezione__interno,
  .sezione--inversa + .sezione .sezione__interno {
    padding-block-start: var(--ch-space-section);
  }

  .sezione__corpo {
    margin-block-start: 0;
  }
}


/* 8. Come funziona --------------------------------------------------------
   Riprende la composizione dell'apertura: titolo sul margine della pagina,
   contenuti sull'asse. Il motivo grafico è uno solo, il filetto viola: in
   orizzontale apre la sezione, in verticale lega le quattro tappe.

   Le variabili --ch-c, --ch-q, --ch-p e --ch-a valgono 1 a riposo (pagina
   composta) e scendono verso 0 solo quando il movimento è attivo: vedi la
   sezione 13.                                                               */

.flusso {
  overflow-x: clip; /* i segmenti in arrivo non allargano mai la pagina */
}

.flusso__apertura::before {
  content: "";
  display: block;
  height: var(--ch-accent-line-width);
  margin-block-end: var(--ch-space-5);
  background: var(--ch-accent);
  transform: scaleX(var(--ch-c, 1));
  transform-origin: 0 50%;
}

.composizione {
  margin-block-start: var(--ch-space-3);
  font-size: var(--ch-title-statement);
  line-height: var(--ch-leading-display);
  letter-spacing: var(--ch-tracking-display);
  text-wrap: wrap;
}

/* Ogni segmento è un'unità di senso su una riga. Lo scarto iniziale cresce
   da una riga all'altra e si annulla rallentando: (1 − q)² · scarto.        */
.composizione__segmento {
  display: block;
  width: fit-content;
  transform: translateX(calc((1 - var(--ch-q, 1)) * (1 - var(--ch-q, 1)) * var(--ch-scarto, 0em)));
}

.composizione__segmento:nth-child(1) {
  --ch-scarto: 0.45em;
  --ch-da: 0.04;
  --ch-fino: 0.56;
}

.composizione__segmento:nth-child(2) {
  --ch-scarto: 0.9em;
  --ch-da: 0.2;
  --ch-fino: 0.72;
}

.composizione__segmento:nth-child(3) {
  --ch-scarto: 1.35em;
  --ch-da: 0.36;
  --ch-fino: 0.88;
}

.composizione__segmento--accento {
  color: var(--ch-accent);
}

/* Tappe: un elenco ordinato. Il filetto verticale passa dietro ai numeri;
   la parte viola (::after) cresce con --ch-p.                               */
.tappe {
  position: relative;
  display: grid;
  margin-block: clamp(2.5rem, 1.93rem + 2.86vw, 4.5rem) 0;
  padding: 0;
  list-style: none;
}

.tappe::before,
.tappe::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc((var(--ch-marker) - var(--ch-accent-line-width)) / 2);
  width: var(--ch-accent-line-width);
}

.tappe::before {
  background: var(--ch-line);
}

.tappe::after {
  background: var(--ch-accent);
  transform: scaleY(var(--ch-p, 1));
  transform-origin: 50% 0;
}

.tappa {
  position: relative;
  display: grid;
  grid-template-columns: var(--ch-marker) minmax(0, 1fr);
  column-gap: var(--ch-space-3);
  padding-block-end: var(--ch-space-7);
}

.tappa:last-child {
  padding-block-end: 0;
}

/* Numero: a riposo viola pieno (tappa raggiunta). Sotto c'è la versione in
   attesa, Lavanda con la cifra viola. Il livello pieno si scopre dall'alto
   per la frazione --ch-a, cioè per la parte del numero che ha già superato
   la linea di lettura: il fronte viola è lo stesso del filetto verticale e
   la cifra resta leggibile in ogni posizione intermedia, mai sbiadita.      */
.tappa__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--ch-marker);
  height: var(--ch-marker);
  overflow: hidden;
  border-radius: var(--ch-radius-sm);
  background: var(--ch-surface-accent);
  box-shadow: 0 0 0 var(--ch-space-1) var(--ch-surface);
  color: var(--ch-accent);
  font-family: var(--ch-font-display);
  font-size: 1rem;
  font-weight: var(--ch-weight-display);
  line-height: 1;
}

.tappa__numero::after {
  content: attr(data-numero);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ch-accent);
  color: var(--ch-on-accent);
  clip-path: inset(0 0 calc((1 - var(--ch-a, 1)) * 100%) 0);
}

.tappa__titolo,
.tappa__testo,
.tappa__nota {
  grid-column: 2;
}

/* Il titolo passa dall'inchiostro attenuato all'inchiostro pieno con --ch-a.
   La prima riga è centrata sull'altezza del numero.                         */
.tappa__titolo {
  margin-block-start: calc((var(--ch-marker) - 1em * var(--ch-leading-title)) / 2);
  color: var(--ch-text);
  color: color-mix(in srgb, var(--ch-text) calc(var(--ch-a, 1) * 100%), var(--ch-text-muted));
  font-size: var(--ch-title-3);
}

.tappa__testo {
  max-width: var(--ch-measure);
  margin-block-start: var(--ch-space-3);
}

/* Seconda strada dentro la stessa tappa (caricamento a mano): etichetta e testo. */
.tappa__nota {
  max-width: var(--ch-measure);
  margin-block-start: var(--ch-space-5);
  padding-block-start: var(--ch-space-3);
  border-top: var(--ch-line-width) solid var(--ch-line);
  color: var(--ch-text-muted);
  font-size: var(--ch-text-sm);
}

.tappa__etichetta {
  display: block;
  margin-block-end: var(--ch-space-1);
  color: var(--ch-accent);
  font-size: var(--ch-text-xs);
  font-weight: var(--ch-weight-strong);
  letter-spacing: var(--ch-tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

@media (min-width: 40rem) {
  .tappa {
    column-gap: var(--ch-space-5);
  }

  .tappa__numero {
    border-radius: var(--ch-radius-md);
    font-size: 1.25rem;
  }
}


/* 9. Progetto -------------------------------------------------------------
   La missione sta sulla fascia inversa: è il passaggio di superficie più
   netto della pagina.                                                       */

.progetto__testo {
  max-width: var(--ch-measure);
  font-size: var(--ch-text-lg);
  line-height: var(--ch-leading-lead);
}

/* Richiamo tipografico: un paragrafo, non un titolo. Riprende il rapporto
   fra riga in inchiostro e riga viola del titolo di apertura.               */
.richiamo {
  margin-block: var(--ch-space-6);
  font-family: var(--ch-font-display);
  font-size: var(--ch-title-2);
  font-weight: var(--ch-weight-display);
  line-height: var(--ch-leading-title);
}

.richiamo::before {
  content: "";
  display: block;
  width: var(--ch-target);
  margin-block-end: var(--ch-space-4);
  border-top: var(--ch-accent-line-width) solid var(--ch-accent);
}

.richiamo span {
  display: block;
  color: var(--ch-accent);
}


/* 10. Destinatari ---------------------------------------------------------
   Due blocchi di pari rilievo, ciascuno aperto dal filetto viola. Affiancati
   da 40rem, con le righe allineate (titolo, apertura, testo) dove il browser
   supporta subgrid.

   Il titolo della sezione è composto in tre segmenti come quello di «Come
   funziona». Il filetto di ogni blocco si traccia con --ch-b e il titolo del
   blocco arriva in posizione con lo stesso gesto dei segmenti: vedi la
   sezione 13. A riposo --ch-b vale 1.                                       */

.destinatari {
  overflow-x: clip;
}

.pubblici {
  display: grid;
  row-gap: var(--ch-space-7);
}

.pubblico {
  --ch-ritardo: 0rem; /* quanto scroll dopo l'ingresso prima che il filetto cominci */
  position: relative;
  padding-block-start: var(--ch-space-5);
}

.pubblico::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--ch-accent-line-width);
  background: var(--ch-accent);
  transform: scaleX(var(--ch-b, 1));
  transform-origin: 0 50%;
}

.pubblico__titolo {
  color: var(--ch-accent);
  font-size: var(--ch-title-3);
  transform: translateX(calc((1 - var(--ch-b, 1)) * (1 - var(--ch-b, 1)) * 0.45em));
}

.pubblico__apertura {
  margin-block: var(--ch-space-3) var(--ch-space-4);
  font-size: var(--ch-text-lg);
  line-height: 1.3;
}

@media (min-width: 40rem) {
  .pubblici {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ch-gutter);
  }

  /* Affiancati entrano insieme: il secondo filetto parte un poco dopo. */
  .pubblico + .pubblico {
    --ch-ritardo: 4rem;
  }

  @supports (grid-template-rows: subgrid) {
    .pubblico {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* Da 62rem il titolo della sezione sta nel margine, alla stessa altezza dei
   blocchi: i ritardi accordano il primo filetto con «in studio» e il secondo
   con «e in azienda».                                                       */
@media (min-width: 62rem) {
  .pubblico {
    --ch-ritardo: 9rem;
  }

  .pubblico + .pubblico {
    --ch-ritardo: 16rem;
  }
}


/* 11. Domande frequenti e Stay updated ------------------------------------
   Domande: testo sempre visibile, una colonna alla giustezza di lettura.
   I titoli delle domande sono H3 nel carattere di testo, più leggeri dei
   titoli delle tappe.                                                       */

.domande {
  display: grid;
  max-width: var(--ch-measure);
}

.domanda {
  padding-block: var(--ch-space-5);
  border-top: var(--ch-line-width) solid var(--ch-line);
}

.domanda:first-child {
  padding-block-start: 0;
  border-top: 0;
}

.domanda:last-child {
  padding-block-end: 0;
}

.domanda__titolo {
  font-family: var(--ch-font-text);
  font-size: var(--ch-text-lg);
  font-weight: var(--ch-weight-strong);
  line-height: 1.3;
}

.domanda__testo {
  margin-block-start: var(--ch-space-3);
}

/* Stay updated: punto di innesto del modulo di contatto. Il markup è fisso (sezione, titolo
   e un solo contenitore vuoto), perciò le regole usano gli id e la sezione
   riproduce da sola i margini del contenitore. Finché #chiarenda-contact-form
   è vuoto non occupa spazio e la fascia mostra solo il titolo.              */

#stay-updated {
  display: grid;
  row-gap: var(--ch-space-5);
  padding-block: var(--ch-space-7);
  padding-inline: max(var(--ch-page-margin), calc((100% - var(--ch-page-max)) / 2));
  background: var(--ch-surface-accent);
}

#stay-updated-title {
  font-size: var(--ch-title-2);
}

#stay-updated-title::before {
  content: "";
  display: block;
  width: var(--ch-target);
  margin-block-end: var(--ch-space-4);
  border-top: var(--ch-accent-line-width) solid var(--ch-accent);
}

#chiarenda-contact-form:empty {
  display: none;
}

@media (min-width: 62rem) {
  #stay-updated {
    grid-template-columns: var(--ch-rail) minmax(0, 1fr);
    column-gap: var(--ch-gutter);
    align-items: start;
  }
}


/* 12. Piede --------------------------------------------------------------- */

.piede__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ch-space-2) var(--ch-space-6);
  padding-block: var(--ch-space-5) var(--ch-space-7);
}

.piede__marchio {
  width: 7rem;
  height: auto;
}

.piede__categoria {
  margin-inline-end: auto;
  color: var(--ch-text-muted);
  font-size: var(--ch-text-sm);
}

.piede__ritorno {
  display: inline-flex;
  align-items: center;
  min-height: var(--ch-target);
  font-size: var(--ch-text-sm);
  font-weight: var(--ch-weight-medium);
}


/* 13. Movimento legato allo scroll ----------------------------------------
   Tre scene, tutte funzioni della sola posizione di scroll: la stessa
   posizione dà sempre lo stesso stato, in discesa, in risalita, dopo un
   salto a un'ancora o un ripristino della pagina.

   Scena 1 · titoli composti («Come funziona», «A chi si rivolge»)
     riferimento  il blocco .composto che contiene il titolo (resta nel
                  flusso, non viene trasformato)
     intervallo   dalla sua cima a --ch-moto-entrata dell'altezza della
                  finestra fino alla sua base a --ch-moto-arrivo
     stato        --ch-c per il filetto, --ch-q per ogni segmento, ciascuno
                  nella sua parte dell'intervallo (--ch-da … --ch-fino)

   Scena 2 · progressione delle quattro tappe
     riferimento  .tappe e ogni .tappa
     intervallo   la linea di lettura (--ch-moto-linea) attraversa l'elenco
     stato        --ch-p per il filetto verticale; --ch-a per ogni tappa,
                  da 0 a 1 mentre la linea percorre l'altezza del numero

   Scena 3 · i due blocchi di «A chi si rivolge»
     riferimento  ogni .pubblico
     intervallo   dalla sua cima a --ch-moto-entrata, più --ch-ritardo, per
                  una corsa di --ch-moto-corsa
     stato        --ch-b: filetto del blocco e arrivo del suo titolo

   Le variabili sono numeri registrati che valgono 1 a riposo. Dove il
   browser ha le timeline legate alla vista le anima il CSS qui sotto;
   altrove le scrive assets/js/movimento.js con le stesse formule. In tutti
   e due i casi la resa (sezioni 8 e 10) è una sola.                         */

@property --ch-c {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --ch-q {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --ch-p {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --ch-a {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --ch-b {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@keyframes ch-c {
  from { --ch-c: 0; }
  to { --ch-c: 1; }
}

@keyframes ch-q {
  from { --ch-q: 0; }
  to { --ch-q: 1; }
}

@keyframes ch-p {
  from { --ch-p: 0; }
  to { --ch-p: 1; }
}

@keyframes ch-a {
  from { --ch-a: 0; }
  to { --ch-a: 1; }
}

@keyframes ch-b {
  from { --ch-b: 0; }
  to { --ch-b: 1; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* La durata di 1 ms non si vede: serve ai motori che applicano un'animazione solo se la durata non è
     zero. animation-timeline e animation-range stanno dopo la proprietà abbreviata, che li azzera. */
  @supports ((animation-timeline: view()) and (animation-range: cover 0% cover 100%)) {
    .composto {
      view-timeline: --ch-composizione block;
      view-timeline-inset: calc(var(--ch-moto-arrivo) * 100%) calc((1 - var(--ch-moto-entrata)) * 100%);
      animation: ch-c 1ms linear both;
      animation-timeline: --ch-composizione;
      animation-range: cover 0% cover calc(var(--ch-moto-filetto) * 100%);
    }

    .composizione__segmento {
      animation: ch-q 1ms linear both;
      animation-timeline: --ch-composizione;
      animation-range: cover calc(var(--ch-da) * 100%) cover calc(var(--ch-fino) * 100%);
    }

    .tappe {
      view-timeline: --ch-flusso block;
      view-timeline-inset: calc(var(--ch-moto-linea) * 100%) calc((1 - var(--ch-moto-linea)) * 100%);
      animation: ch-p 1ms linear both;
      animation-timeline: --ch-flusso;
      animation-range: cover 0% cover 100%;
    }

    .tappa {
      view-timeline: --ch-tappa block;
      view-timeline-inset: calc(var(--ch-moto-linea) * 100%) calc((1 - var(--ch-moto-linea)) * 100%);
      animation: ch-a 1ms linear both;
      animation-timeline: --ch-tappa;
      animation-range: cover 0% cover var(--ch-marker);
    }

    .pubblico {
      view-timeline: --ch-pubblico block;
      view-timeline-inset: auto calc((1 - var(--ch-moto-entrata)) * 100%);
      animation: ch-b 1ms linear both;
      animation-timeline: --ch-pubblico;
      animation-range: cover var(--ch-ritardo) cover calc(var(--ch-ritardo) + var(--ch-moto-corsa));
    }
  }
}

/* Movimento ridotto e stampa: pagina composta, nessuna transizione. Le
   dichiarazioni con !important fermano anche i valori scritti dallo script. */
@media (prefers-reduced-motion: reduce), print {
  .composto,
  .composizione__segmento,
  .tappe,
  .tappa,
  .pubblico {
    --ch-c: 1 !important;
    --ch-q: 1 !important;
    --ch-p: 1 !important;
    --ch-a: 1 !important;
    --ch-b: 1 !important;
  }

  a,
  .azione {
    transition: none;
  }

  .azione:active {
    transform: none;
  }
}

@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .tappa,
  .pubblico,
  .domanda,
  .richiamo,
  .flusso__apertura {
    break-inside: avoid;
  }
}