/* costellazione.css: la home di taori.design. Nero come materiale, migliaia
   di particelle, testo grande e leggero che scorre sopra. Nessuna carta,
   nessun bordo, nessuna ombra: gli elementi galleggiano.
   Il mondo (particelle, formazioni in 3D) sta in costellazione.js; il motore
   di scroll e' scrollcraft.js, copia identica a quella della skill.
   Dal 19/09/2026 la pagina e' quella di Tiziana (nove sezioni, al tu): il
   racconto precedente sta in _backup\home-racconto-20260919.

   Scala tipografica e spazi: dai token di Dala (riferimenti\dala-tokens.css),
   adattati ai nostri font e colori. Ogni livello ha misura, interlinea e
   tracking suoi; gli spazi stanno su base 6. Sotto i 16px non c'e' niente. */

@font-face { font-family: "Instrument Sans"; src: url("font/instrumentsans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("font/plexmono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --nero: #000000;
  --ink: #F5F5F7;
  --ink-soft: #A8A8B1;
  --ocra: #D4A63C;
  --inchiostro: #111113;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* i gettoni del motore, ridefiniti sul nostro sistema */
  --sc-canvas: var(--nero);
  --sc-surface: #0A0A0C;
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--ocra);
  --sc-accent-ink: var(--nero);
  --sc-font-display: var(--sans);
  --sc-font-text: var(--sans);
  --sc-font-mono: var(--mono);

  /* la scala (Dala): misura / interlinea / tracking
     body 18/1.5 · label 16/1.5 · 2xs 24/1.25/-0.48 · sub 36/1.2
     heading 48/1.1/-1.68 · heading-sm 42/1.2/-1.68 · heading-lg 78/1.1/-3.12
     display 113/1.1/-4.52. I due grandi sono fluidi fra 900 e 1440px e
     arrivano al token a 1440; sul telefono tutto sta ai valori fissi.      */
  --t-body: 18px;   --lh-body: 1.5;
  --t-label: 16px;  --lh-label: 1.5;
  --t-2xs: 24px;    --lh-2xs: 1.25; --tr-2xs: -0.48px;
  --t-sub: 36px;    --lh-sub: 1.2;
  --t-h: 48px;      --lh-h: 1.1;    --tr-h: -1.68px;
  --t-hsm: 42px;    --lh-hsm: 1.2;  --tr-hsm: -1.68px;
  --t-hlg: clamp(42px, 1.5rem + 3.8vw, 78px);   --lh-hlg: 1.1;  --tr-hlg: -0.04em;
  /* l'hero nuovo (13/09) e' lungo: «Il vostro prodotto lo conoscete a
     memoria. Le ore che se ne vanno, nessuno le conta.» A 90 fa sei righe;
     a 78 (heading-lg, un gradino sotto) ne fa quattro nella colonna a nove.
     Interlinea e tracking del display. */
  --t-display: clamp(42px, 1.5rem + 3.8vw, 78px); --lh-display: 1.1; --tr-display: -0.04em;

  /* gli spazi, base 6 */
  --sp-6: 6px; --sp-12: 12px; --sp-18: 18px; --sp-24: 24px; --sp-30: 30px; --sp-36: 36px; --sp-60: 60px; --sp-96: 96px; --sp-120: 120px;
  --sp-occhiello: var(--sp-18);   /* occhiello -> titolo */
  --sp-titolo: var(--sp-24);      /* titolo -> paragrafo */
  --sp-voce: var(--sp-36);        /* fra le voci di un elenco (fasi, tempi) */

  --raggio-tasto: 24px;
  --gutter: clamp(20px, 4vw, 64px);
  --colonna: 1280px;
}

html { background: var(--nero); }
body {
  background: var(--nero);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  overflow-x: clip;
}

/* la tela: fissa, dietro tutto. Non e' lo sfondo, e' il mondo. */
#tela { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; }
.senza-webgl #tela { display: none; }

.salta { position: absolute; left: -999px; top: 0; z-index: 90; padding: var(--sp-12) var(--sp-18); background: var(--ink); color: var(--nero); }
.salta:focus { position: fixed; left: 16px; top: 16px; }

/* ------------------------------------------------------------- chrome --
   In alto a sinistra il marchio, in basso a sinistra la mappa delle
   stazioni. Niente barra, niente bottone, niente alone: testo che galleggia
   sul mondo. Il marchio e' quello ufficiale, marchio-orizzontale-scuro.svg
   («scuro» = va sul fondo scuro: lettere #E9EBEE, punto glitchato a due
   colori), come <img> perche' i colori stanno nel file.                    */
.marchio {
  position: fixed; left: var(--gutter); top: 22px; z-index: 40;
  display: inline-block; line-height: 0; text-decoration: none;
  transition: opacity 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.marchio img { display: block; height: 38px; width: auto; }
.marchio:hover { opacity: 0.8; }
.marchio:focus-visible { outline: 2px solid var(--ocra); outline-offset: 8px; }

.rotta {
  position: fixed; left: var(--gutter); bottom: 26px; z-index: 40;
  /* nove nomi non stanno su una riga senza invadere la colonna di destra:
     la mappa va a capo e resta nella meta' sinistra (19/09) */
  max-width: min(600px, 44vw);
  display: flex; gap: 6px clamp(14px, 1.6vw, 26px); flex-wrap: wrap;
  font-family: var(--mono); font-weight: 600; font-size: var(--t-label); line-height: var(--lh-label); letter-spacing: 0.02em;
  transition: opacity 260ms cubic-bezier(0.23, 1, 0.32, 1), visibility 260ms;
}
.rotta a { color: var(--ink-soft); text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.rotta a:hover { color: var(--ink); }
.rotta a[aria-current="true"] { color: var(--ocra); }
.rotta a::before { content: "○ "; opacity: 0.55; }
.rotta a[aria-current="true"]::before { content: "● "; opacity: 1; }
/* quando il piede entra in vista la mappa si spegne: il racconto e' finito
   e in basso a sinistra c'e' il piede */
.rotta--via { opacity: 0; visibility: hidden; }

/* ----------------------------------------------------------- stazioni -- */
main { position: relative; z-index: 2; }

.st {
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center;
  width: 100%; max-width: var(--colonna); margin-inline: auto;
  padding-inline: var(--gutter);
  min-height: calc(var(--k, 1) * 100svh);
}
.st--lead .blocco { grid-column: 1 / span 6; }
.st--trail .blocco { grid-column: 7 / span 6; }
.st--centro .blocco { grid-column: 3 / span 8; justify-self: center; text-align: center; }
.st--centro .corpo { margin-inline: auto; }

/* la prima sezione: la promessa, il tasto e la riga sotto, al centro della
   prima schermata, sopra il caos */
.st--inizio { align-items: center; }
.st--lead .blocco--hero { grid-column: 1 / span 8; }
.st--inizio .blocco--hero { max-width: 900px; }   /* .blocco (620) viene dopo e vincerebbe */
.blocco--hero h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.corpo--hero { color: var(--ink); max-width: 30em; }
.blocco--hero .nota { max-width: 30em; }

/* gli atti appiccicati: il palco e' la griglia, la sezione e' la corsa */
.st--perno { position: relative; }
.st.palco { position: sticky; top: 0; min-height: 0; height: 100svh; }

.blocco { position: relative; max-width: 620px; }

/* il testo galleggia sulle particelle: sotto c'e' la radura del mondo, non
   una lastra. L'unica ombra ammessa e' questa, minima e locale. */
main, .piede { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }

/* --- la scala, livello per livello --------------------------------------- */
/* i titoli delle sezioni sono frasi intere (19/09): heading 48, non 78, che
   con quattro righe mangiava la schermata. L'hero resta al display. */
h1, h2 {
  margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance;
  font-size: var(--t-h); line-height: var(--lh-h); letter-spacing: var(--tr-h);
}

.quando {
  margin: 0 0 var(--sp-occhiello);
  font-family: var(--mono); font-weight: 600; font-size: var(--t-label); line-height: var(--lh-label);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ocra);
  /* le etichette sono piccole e ocra: sotto la radura ridotta un pallino
     sotto un glifo le porta sotto 4,5:1. Ombra locale, 2px, niente di piu'. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}
.corpo { margin: 0; max-width: 34em; color: var(--ink-soft); text-wrap: pretty; }
.corpo--breve { max-width: 28em; }
.accento { font-style: normal; color: var(--ocra); }
/* la riga sotto un tasto: piccola, tenue, con il link in chiaro */
.nota { margin: var(--sp-18) 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-soft); max-width: 34em; text-wrap: pretty; }
.nota a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ocra); text-underline-offset: 0.18em; }
.nota a:hover { color: var(--ocra); }

/* --- il ritmo verticale --------------------------------------------------
   Titolo -> paragrafo 24; occhiello -> titolo 18; paragrafo -> titolo che
   segue 36 (piu' spazio sopra un titolo che sotto); invito 36; firma 60.   */
h1 + .corpo, h2 + .corpo, h2 + .punti, h2 + .elenco, h2 + .domande { margin-top: var(--sp-titolo); }
.corpo + h2 { margin-top: var(--sp-36); }
.corpo + .corpo { margin-top: var(--sp-18); }
.corpo + .punti, .corpo + .elenco, .punti + .corpo { margin-top: var(--sp-36); }

/* --- i tasti: pieni, ocra, riconoscibili come tasti (cliente, 13/09) ----- */
.tasto, .invio button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--sp-30); margin: 0; border: 0; border-radius: var(--raggio-tasto); cursor: pointer;
  background: var(--ocra); color: var(--inchiostro); text-decoration: none; text-shadow: none;
  font: inherit; font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1), color 160ms cubic-bezier(0.23, 1, 0.32, 1), transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
.tasto:hover, .invio button:hover { background: var(--ink); color: var(--inchiostro); }
.tasto:active, .invio button:active { transform: scale(0.98); }
.tasto:focus-visible, .invio button:focus-visible { outline: 2px solid var(--ocra); outline-offset: 4px; }
.invio button[disabled] { opacity: 0.55; cursor: default; background: var(--ocra); transform: none; }

/* l'invito: il tasto sotto un paragrafo */
.invito { margin: var(--sp-36) 0 0; }

/* --- gli elenchi a punti (risultato, aree, perche' noi): nome a 24/1.25 e
   testo a 18, senza pallino: e' il salto di misura a fare da segno ------- */
.punti { list-style: none; margin: 0; padding: 0; }
.punto { display: block; }
.punto + .punto { margin-top: var(--sp-30); }
.punto__titolo { display: block; font-size: var(--t-2xs); line-height: var(--lh-2xs); letter-spacing: var(--tr-2xs); color: var(--ink); text-wrap: balance; }
.punto__testo { display: block; margin-top: var(--sp-6); color: var(--ink-soft); max-width: 32em; text-wrap: pretty; }
.corpo--coda { color: var(--ink); }

/* --- l'elenco delle cose costruite: un trattino ocra per voce ----------- */
.elenco { list-style: none; margin: 0; padding: 0; max-width: 34em; color: var(--ink-soft); }
.elenco li { position: relative; padding-left: 1.4em; text-wrap: pretty; }
.elenco li + li { margin-top: var(--sp-12); }
.elenco li::before { content: "\2014"; position: absolute; left: 0; color: var(--ocra); }

/* --- le domande frequenti: chiuse, si aprono al tocco; il segno e' un piu'
   in mono ocra che diventa meno ------------------------------------------- */
.blocco--largo { max-width: 760px; }
.st--lead .blocco--largo { grid-column: 1 / span 8; }
.domande { display: block; }
.domanda { display: block; border-top: 1px solid rgba(245, 245, 247, 0.16); padding: var(--sp-18) 0; }
.domanda:last-child { border-bottom: 1px solid rgba(245, 245, 247, 0.16); }
.domanda summary {
  display: flex; align-items: baseline; gap: var(--sp-18); cursor: pointer; list-style: none;
  font-size: var(--t-2xs); line-height: var(--lh-2xs); letter-spacing: var(--tr-2xs); color: var(--ink); text-wrap: balance;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::before { content: "+"; flex: none; width: 1em; font-family: var(--mono); font-weight: 600; font-size: var(--t-2xs); color: var(--ocra); }
.domanda[open] summary::before { content: "\2212"; }
.domanda summary:hover { color: var(--ocra); }
.domanda summary:focus-visible { outline: 2px solid var(--ocra); outline-offset: 6px; }
.domanda .corpo { margin: var(--sp-12) 0 0 calc(1em + var(--sp-18) + 6px); max-width: 32em; }

/* --- le stazioni appiccicate a momenti (risultato, come lavoriamo, perche'
   noi, gia' in funzione): un'intro e poi una voce per schermata, tutte nello
   stesso posto del palco; ognuna con la sua figura. Il nome della voce sta
   da solo, quindi e' al taglio sub (36/1.2). ------------------------------ */
.blocco--momenti { display: grid; }
.momento { grid-area: 1 / 1; align-self: center; }
.nome { margin: 0; font-weight: 400; color: var(--ink); text-wrap: balance; font-size: var(--t-sub); line-height: var(--lh-sub); letter-spacing: -0.01em; }
.nome + .corpo { margin-top: var(--sp-18); }
.momento .invito { margin-top: var(--sp-30); }

/* -------------------------------------------------------------- il modulo
   Sta sotto la chiusura, nella stessa colonna: «Scriveteci» lo apre (o ci
   si arriva con #contatto). Senza JavaScript e' sempre visibile. Campi che
   galleggiano: nessuna scatola, solo una riga sotto il testo, che diventa
   ocra quando il campo e' attivo.                                           */
.blocco--contatto { text-align: left; width: 100%; }

/* ------------------------------------------------------- la pagina contatti
   (contatti/index.html): stesso foglio della home. Intro a sinistra, modulo
   a destra; sul telefono impilati. Sotto, solo il mondo (mondo.js).       */
/* centrata in verticale nell'area sopra il piede: sul desktop il blocco e' piu'
   basso dello schermo e appoggiato in alto lasciava mezza finestra vuota */
.st--contatti { min-height: calc(100svh - 120px); align-items: center; padding-top: 132px; padding-bottom: 132px; row-gap: var(--sp-60); }
.st--contatti .blocco--intro { grid-column: 1 / span 5; max-width: none; }
.st--contatti .blocco--contatto { grid-column: 7 / span 6; max-width: none; }
.blocco--intro .corpo { max-width: 30em; }
/* il titolo della pagina contatti resta al taglio grande (e' corto) */
.blocco--intro h1 { font-size: var(--t-hlg); line-height: var(--lh-hlg); letter-spacing: var(--tr-hlg); }
.corpo--chi { color: var(--ink); }

.modulo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-30) var(--sp-36); margin: 0; }
.campo--largo, .consenso, .invio, .esito { grid-column: 1 / -1; }

.campo { margin: 0; display: flex; flex-direction: column; gap: 0; }
.campo label { font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-soft); transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1); }
.campo:focus-within label { color: var(--ocra); }
.campo .facolt { opacity: 0.7; }
.campo .facolt::before { content: "· "; }
.modulo input[type="text"], .modulo input[type="email"], .modulo input[type="tel"], .modulo textarea {
  width: 100%; margin: 0; padding: var(--sp-6) 0 var(--sp-12); box-sizing: border-box;
  background: transparent; border: 0; border-bottom: 1px solid rgba(245, 245, 247, 0.32); border-radius: 0;
  color: var(--ink); font: inherit; font-size: var(--t-body); line-height: var(--lh-body); text-shadow: none;
  transition: border-color 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-appearance: none; appearance: none;
}
.modulo textarea { resize: vertical; min-height: 5.2em; }
.modulo input:hover, .modulo textarea:hover { border-bottom-color: rgba(245, 245, 247, 0.6); }
.modulo input:focus, .modulo textarea:focus { outline: none; border-bottom-color: var(--ocra); box-shadow: 0 1px 0 0 var(--ocra); }
.modulo input:-webkit-autofill, .modulo textarea:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--nero) inset; caret-color: var(--ink); }

/* gli errori: sotto il campo, in ocra, l'unico accento */
.errore { display: block; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ocra); margin-top: var(--sp-6); }
.modulo .campo--errato { border-bottom-color: var(--ocra); }

.consenso { margin: 0; }
.consenso label { display: flex; gap: var(--sp-12); align-items: flex-start; cursor: pointer; }
.consenso input { margin: 3px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--ocra); }
.consenso input:focus-visible { outline: 2px solid var(--ocra); outline-offset: 3px; }
.consenso span { font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-soft); }
.consenso a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ocra); text-underline-offset: 0.18em; }
.consenso a:hover { color: var(--ocra); }
.consenso .errore { margin-top: var(--sp-12); margin-left: 32px; }

.invio { margin: 0; }
.modulo input[disabled], .modulo textarea[disabled] { opacity: 0.6; }

.esito { margin: 0; font-size: var(--t-body); }
.esito--bene { color: var(--ink); }
.esito--male { color: var(--ocra); }

.sottoazione { margin: var(--sp-30) 0 0; font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-soft); }
.sottoazione a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ocra); text-underline-offset: 0.18em; }
.sottoazione a:hover { color: var(--ocra); }

/* il campo esca: fuori dallo schermo, mai display:none, che alcuni robot
   riconoscono. Chi naviga da tastiera non ci finisce dentro. */
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* ---------------------------------------------------------------- il piede
   Dopo la chiusura, nella stessa colonna del racconto: i link alle pagine
   legali e i dati dell'editore. Basso di proposito: sta sotto la chiusura,
   e ogni pixel in piu' fa salire il blocco sopra l'anello.                  */
.piede {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--colonna); margin-inline: auto;
  padding: var(--sp-18) var(--gutter) var(--sp-24);
  font-size: var(--t-label); line-height: var(--lh-label); color: var(--ink-soft);
}
.piede nav { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-24); margin-bottom: var(--sp-6); }
.piede a, .riapri-consenso {
  color: var(--ink-soft); text-decoration: none;
  transition: color 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.piede a:hover, .riapri-consenso:hover { color: var(--ink); }
.piede a:focus-visible, .riapri-consenso:focus-visible { outline: 2px solid var(--ocra); outline-offset: 3px; }
/* il comando che riapre le preferenze sui cookie sta fra i link, quindi
   deve sembrare un link, non un pulsante di sistema */
.riapri-consenso { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; text-shadow: inherit; }
.piede p { margin: 0; max-width: 60em; text-wrap: pretty; }

/* -------------------------------------------------------------- telefono
   Una colonna. La figura sta in alto, il testo riposa in basso. Titoli a
   heading-sm 42/1.2, nomi a 24/1.25, spazi piu' stretti (12/18/24).      */
@media (max-width: 899px) {
  :root {
    --t-hlg: 42px; --lh-hlg: 1.2; --tr-hlg: -1.68px;
    --t-display: 42px; --lh-display: 1.2; --tr-display: -1.68px;
    --t-h: 42px; --lh-h: 1.2; --tr-h: -1.68px;
    --t-sub: 24px; --lh-sub: 1.25;
    --sp-occhiello: var(--sp-12);
    --sp-titolo: var(--sp-18);
    --sp-voce: var(--sp-24);
  }
  .st { column-gap: 0; align-items: end; padding-bottom: 9svh; }
  .st--lead .blocco, .st--trail .blocco, .st--centro .blocco { grid-column: 1 / -1; }
  .st--centro .blocco { text-align: left; }
  /* l'hero sta nella prima schermata: tasto e riga sotto compresi */
  .st--inizio { align-items: end; min-height: 100svh; }
  .punto__testo, .domanda .corpo { max-width: none; }
  .blocco--largo { grid-column: 1 / -1; }
  .palco { display: grid; align-items: end; padding-bottom: 9svh; }
  .blocco { max-width: none; }
  .corpo + h2 { margin-top: var(--sp-24); }
  .punto + .punto { margin-top: var(--sp-24); }
  .corpo + .punti, .corpo + .elenco, .punti + .corpo { margin-top: var(--sp-24); }
  .invito { margin-top: var(--sp-24); }
  .domanda .corpo { margin-left: 0; }
  .tasto, .invio button { width: 100%; min-height: 56px; }
  .marchio { top: 16px; }
  .marchio img { height: 32px; }
  .rotta { left: auto; right: var(--gutter); top: 22px; bottom: auto; }
  .rotta a { display: none; }
  .rotta a[aria-current="true"] { display: inline; }
  .rotta--via { opacity: 1; visibility: visible; }
  .momento { align-self: end; }
  .st--contatti { min-height: 0; padding-top: 96px; padding-bottom: var(--sp-60); row-gap: var(--sp-36); align-items: start; }
  .st--contatti .blocco--intro, .st--contatti .blocco--contatto { grid-column: 1 / -1; }
  .modulo { grid-template-columns: 1fr; gap: var(--sp-24); }
  /* il piede sta sotto un blocco che riposa al 91% dello schermo: piu' e'
     basso, meno la chiusura sale sull'anello nell'ultima schermata */
  .piede { padding-top: 0; padding-bottom: var(--sp-18); }
}

/* ----------------------------------------------------------- moto ridotto */
@media (prefers-reduced-motion: reduce) {
  .rotta { transition: none; }
}