/* ============================================================
   INYUVATE — HOMEPAGE
   Loaded ONLY by index.html. The inner pages keep style.css + inner.css.

   Struttura letta da dobre.agency/approach: apertura → tre passi numerati
   tenuti da una linea che si disegna con lo scroll → una sola affermazione
   grande → l'uscita. Più corta e più navigabile di cinque schermate intere
   (revisione ago 2026).

   TRE misure, e non di più:
     --f-lead   la voce di lettura — l'apertura e i titoli dei tre passi
     --f-sup    il testo di appoggio, più piccolo e in grigio
     --f-big    l'affermazione che chiude, l'unico momento grande

   FAIL-OPEN: l'accensione del testo la fa il JavaScript. Senza script la
   pagina è una pila di testo pienamente leggibile.
   ============================================================ */

body.freq {
  /* Il fondo è quello del resto del sito — il "nero non nero" — e porta lo
     stesso alone caldo: prevalenza scura, il chiaro solo in trasparenza.
     Il nero pieno senza gradiente è stato tolto (revisione ago 2026).
     QUATTRO misure, e i salti sono piccoli di proposito: la gerarchia si
     legge dalla posizione, non dal corpo. */
  --name: var(--clay);                          /* il nome, dentro la frase */
  /* La scala è salita di un gradino su tutta la home, e l'apertura si è
     staccata dai tre passi: prima erano la stessa misura. Ordine:
     apertura 31 → frasi dei passi 26 → appoggio 18, con l'affermazione a 34
     come unico momento più grande (revisione ago 2026). */
  /* IL NOME E LA FRASE NON SONO PIÙ LA STESSA MISURA (rev. 12 ago 2026).
     --f-name è il corpo di INYUVATE e vale quanto valeva prima l'apertura
     intera: la parola non si muove e non cambia di un pixel. --f-hero è la
     sola frase che le sta intorno, un gradino sotto (-9%), così il nome
     stacca davvero invece di essere una parola colorata dentro un testo
     della stessa taglia. */
  --f-name: clamp(1.35rem, 2.15vw, 1.95rem);    /* il nome — INVARIATO */
  --f-hero: clamp(1.22rem, 1.95vw, 1.78rem);    /* la frase d'apertura */
  --f-lead: clamp(1.15rem, 1.8vw, 1.62rem);     /* le frasi dei passi */
  --f-sup:  clamp(.95rem, 1.25vw, 1.14rem);     /* testo di appoggio */
  --f-big:  clamp(1.5rem, 2.4vw, 2.12rem);      /* l'affermazione */
  --f-go:   clamp(1.1rem, 1.65vw, 1.42rem);     /* il modo di uscire */
  background: var(--bone); color: var(--ink);
}
/* il footer sta sullo stesso fondo della pagina, senza il gradino tonale
   che porta sulle interne */
body.freq .footer { background: var(--bone); }

/* ---------- le sezioni di testo ---------- */
.f-sec {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  padding: clamp(4rem, 9vh, 6rem) var(--gutter);
}
/* L'APERTURA È CENTRATA SULLA PAROLA, NON SUL BLOCCO.
   Quello che deve stare in mezzo allo schermo è INYUVATE, perché è l'unica
   cosa visibile mentre il preloader tiene — e non deve spostarsi di un pixel
   quando arriva il resto della frase, che scorre sotto di lei.
   Quindi: il blocco parte dall'alto e viene spinto giù di mezza schermata
   MENO mezza riga, così è la prima riga a cadere sul centro. Mezza riga è
   `--f-hero * 1.44 / 2`, cioè l'interlinea dell'apertura (revisione ago
   2026). Il resto del testo non muove nulla: è già impaginato, cambia solo
   l'opacità. */
/* La mezza riga da sottrarre è quella del NOME (--f-name * 1.44 / 2), non
   quella della frase: il primo rigo lo misura la parola, che è la più alta.
   Le due righe con vh sono la rete per i browser che non conoscono svh
   (Safari < 15.4, Chrome < 108): senza, la dichiarazione cade e l'apertura
   si incolla in cima allo schermo. */
.f-sec--open {
  min-height: 100vh;
  min-height: 100svh; align-content: start;
  padding-top: calc(50vh - var(--f-name) * 0.72);
  padding-top: calc(50svh - var(--f-name) * 0.72);
}
/* Un solo bordo sinistro per tutta la pagina — quello del margine, lo stesso
   su cui stanno i numeri dei tre passi. L'unico rientro della home è quello
   del testo dei passi, e serve a fare spazio al numero e alla linea: è così
   che la reference tiene insieme una pagina di soli blocchi di testo. */
.f-inner {
  position: relative;
  grid-column: 1 / 9;
  display: grid; justify-items: start; gap: clamp(1.6rem, 4vh, 2.6rem);
  text-align: left;
}

/* ---------- il nome, DENTRO la frase d'apertura ----------
   È il soggetto della frase, in tortora, alla misura in cui la frase si
   legge — ed è l'unica cosa sullo schermo mentre il preloader tiene. È uno
   span in linea proprio perché nulla si muova quando arriva il resto. */
.f-nm {
  color: var(--name); font-size: var(--f-name);
  font-weight: 620; text-transform: uppercase; letter-spacing: .015em;
  /* un po' d'aria dopo il nome (15 ago 2026): il nome è in maiuscolo e più
     pesante della frase, e con il solo spazio della battitura la "i" di "is"
     gli restava appiccicata. Il margine sta QUI e non sullo spazio del testo
     perché non deve spostare il nome — che durante il preloader è l'unica
     cosa sullo schermo e non può muoversi di un pixel: cresce solo ciò che
     gli sta dopo. */
  margin-right: .16em;
}

/* ---------- le tre misure ---------- */
.f-lead, .step-h {
  font-family: var(--serif); font-weight: var(--fw-read);
  font-size: var(--f-lead); line-height: 1.5; letter-spacing: -.008em;
  color: var(--ink); max-width: 30em;
}
/* l'apertura è l'unica voce più grande della pagina insieme all'affermazione.
   L'interlinea è ASSOLUTA e misurata sul nome, non sulla frase: è il solo modo
   perché il testo si stringa di un gradino senza che INYUVATE — che vive nella
   prima riga — salga o scenda di un pixel. */
.f-open {
  font-size: var(--f-hero); line-height: calc(var(--f-name) * 1.44);
  letter-spacing: -.012em; max-width: 26em;
}
.step-p {
  font-family: var(--serif); font-weight: var(--fw-read);
  font-size: var(--f-sup); line-height: 1.62; letter-spacing: 0;
  color: var(--ink-3); max-width: 34em;
}
.f-big {
  font-family: var(--serif); font-weight: var(--fw-read);
  font-size: var(--f-big); line-height: 1.14; letter-spacing: -.022em;
  color: var(--title); max-width: 15em; text-wrap: balance;
}
.f-big em { font-style: italic; font-weight: var(--fw-emph); color: var(--clay); }
.br-m { display: none; }   /* un a capo che prende solo il telefono */

/* un blocco che si spezza in paragrafi: lo stacco è molto più piccolo di
   quello fra un blocco e l'altro, così la gerarchia tiene */
.f-block { display: grid; justify-items: start; gap: .62em; }
.f-block > span { display: block; }

/* ============================================================
   I TRE PASSI — nome del movimento · testo
   ============================================================ */
.f-steps { padding: clamp(2rem, 5vh, 4rem) var(--gutter) clamp(4rem, 9vh, 7rem); }
.steps { position: relative; }

/* La linea verticale che correva accanto ai tre passi è stata rimossa: era
   un elemento della reference e non di questo sito, che le sue linee le ha
   già — la hairline fra un passo e l'altro, e il filo curvo (ago 2026). */

.step {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  /* più distanti di prima: fra un passo e l'altro deve passare abbastanza
     scroll perché l'accensione del testo abbia il tempo di leggersi */
  padding: clamp(4rem, 10vh, 7rem) 0;
}
.step + .step { border-top: 1px solid var(--line-soft); }
/* Il nome del movimento al posto del numero: dice davvero dove sei, e non
   costringe a tenere a mente una numerazione. È un'etichetta, non un titolo —
   voce d'interfaccia, piccola, in tortora: non compete con la frase accanto,
   che è la stessa misura della lettura (revisione ago 2026). */
.step-n {
  grid-column: 1 / 3; padding-top: .28em;
  font-family: var(--mono); font-size: .78rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--clay); line-height: 1.4;
}
.step-c { grid-column: 3 / 11; display: grid; justify-items: start; gap: .9rem; }
.step-c .step-p + .step-p { margin-top: -.2rem; }

/* ---------- l'uscita ---------- */
/* .f-sec--claim non esiste più: l'affermazione è entrata nella sezione
   dell'uscita. Le due righe restano un blocco solo, e il salto da lì a
   Explore è volutamente più corto del respiro interno alla lastra. */
.f-claim { display: grid; justify-items: start; gap: clamp(.9rem, 2.2vh, 1.4rem); }
/* 34px fino a Explore contro i 20 interni all'affermazione: abbastanza per
   dire che il link è un'altra cosa, non abbastanza per staccarlo dalla frase
   che glielo chiede (prima erano 144, due sezioni diverse) */
.f-sec--exit .f-inner { gap: clamp(1.6rem, 3.8vh, 2.3rem); }
/* L'USCITA STA SU UNA LASTRA DI VETRO, da bordo a bordo: è l'unico gradino
   cromatico della home e serve a staccare la destinazione dal racconto. Stesso
   materiale dei riquadri delle pagine interne — superficie appena più chiara
   del fondo, hairline, e la stessa schiaritura di una tacca al passaggio. Il
   blur ha qualcosa da sfocare perché sotto passano l'alone e il filo. */
.f-sec--exit {
  padding-top: clamp(4rem, 9vh, 6.5rem); padding-bottom: clamp(4rem, 9vh, 6.5rem);
  background: rgba(23, 22, 19, .76);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
@media (pointer: fine) {
  .f-sec--exit:hover {
    background: rgba(31, 29, 26, .80);
    border-color: var(--line);
  }
}
.f-cta { display: grid; justify-items: start; gap: 2rem; }
/* il modo di uscire dalla pagina è un testo, non un bottone: alla misura
   dell'affermazione che lo precede, con la sua sottolineatura che si
   completa al passaggio */
.f-go {
  font-family: var(--serif); font-weight: var(--fw-read);
  font-size: var(--f-go); line-height: 1.3; letter-spacing: -.01em;
  color: var(--title); padding-bottom: .18em;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .5s var(--ease-soft), background-size .6s var(--ease-soft);
}
.f-go .arr { display: inline-block; transition: translate .5s var(--ease); }
@media (pointer: fine) {
  .f-go:hover { color: var(--clay); }
  .f-go:hover .arr { translate: 6px 0; }
}
.f-paths { display: flex; flex-wrap: wrap; gap: .7rem 2.2rem; }
.f-paths a {
  font-family: var(--mono); font-size: var(--micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: .3rem;
  transition: color .5s var(--ease-soft), background-size .6s var(--ease-soft);
}
.f-paths a:hover { color: var(--clay); background-size: 100% 1px; }

/* il blur progressivo del sito non ha senso qui */
.pblur { display: none; }

/* ============================================================
   IL TESTO CHE SI ACCENDE  (meccanica letta da bymonolog.com)
   Ogni riga è divisa in parole e ogni parola in lettere; le lettere partono
   a opacità .2 e arrivano a 1 scrubbate dallo scroll, con una testa larga
   una decina di caratteri — è quella sovrapposizione a dare la sfumatura
   dentro le parole invece di un interruttore acceso/spento.
   FAIL-OPEN: la divisione la fa il JS e l'opacità la scrive il JS. Senza
   script il testo è testo normale, pienamente leggibile.
   ============================================================ */
.w { display: inline-block; white-space: nowrap; }
/* NIENTE `will-change` qui (rev. 12 ago 2026): questa regola vale per OGNI
   carattere della pagina — un paio di migliaia di elementi — e will-change
   chiede al browser un livello di composizione per ciascuno. Su una macchina
   con poca memoria video è il modo più rapido per far peggiorare esattamente
   ciò che si voleva rendere fluido; su tutte le altre non serve, perché quello
   che cambia è la sola opacità di una manciata di lettere per volta. */
.c { display: inline-block; }
/* il pre-stato del blocco appena diviso, prima che il primo frame lo scriva:
   evita il lampo a piena opacità */
.lit-split .c { opacity: .2; }

/* ============================================================
   L'APERTURA — il nome c'è dal primo pixel, il resto arriva
   ============================================================ */
body.freq .nav,
body.freq .f-rest { opacity: 0; transition: opacity 1.1s var(--ease-soft); }
body.freq.loaded .nav { opacity: 1; }
/* il testo un soffio dietro la navigazione — lento e continuo, mai a scatti */
body.freq.loaded .f-rest { opacity: 1; transition-delay: .35s; }

/* ============================================================
   PRELOADER — un velo nero su una pagina nera.
   Nasconde solo lo scambio del font, che sposterebbe la parola.
   ============================================================ */
.ldr {
  position: fixed; inset: 0; z-index: 150; background: var(--bone);
  transition: opacity .6s var(--ease-soft);
}
.ldr.is-out { opacity: 0; pointer-events: none; }
/* ultima rete: se nessuno script gira, il velo se ne va lo stesso */
.ldr { animation: ldr-failsafe .6s linear 6s forwards; }
@keyframes ldr-failsafe { to { opacity: 0; visibility: hidden; } }

/* ============================================================
   TELEFONO
   ============================================================ */
@media (max-width: 880px) {
  .f-sec { grid-template-columns: 1fr; padding: clamp(3.5rem, 9vh, 5rem) var(--gutter); }
  /* stessa regola del desktop: la parola sta sul centro verticale anche qui */
  .f-sec--open {
    min-height: 100vh;
    min-height: 100svh; align-content: start;
    padding-top: calc(50vh - var(--f-name) * 0.72);
    padding-top: calc(50svh - var(--f-name) * 0.72);
  }
  .f-inner { grid-column: 1; gap: clamp(1.4rem, 3.5vh, 2rem); }
  body.freq {
    /* stessa progressione del desktop, un gradino sopra la misura di prima */
    --f-name: clamp(1.1rem, 4.8vw, 1.4rem);     /* il nome — INVARIATO */
    --f-hero: clamp(1rem, 4.35vw, 1.27rem);     /* la frase, un gradino sotto */
    --f-lead: clamp(1rem, 4.3vw, 1.25rem);
    --f-sup: clamp(.9rem, 3.75vw, 1.05rem);
    --f-big: clamp(1.3rem, 5.8vw, 1.75rem);
    --f-go: clamp(1.05rem, 4.5vw, 1.28rem);
  }
  .f-open { max-width: 22em; }
  /* la lastra dell'uscita si stringe un po' su telefono, ma resta a tutta
     larghezza: è la separazione cromatica, non un riquadro */
  .f-sec--exit { padding-top: clamp(3.2rem, 8vh, 4.5rem); padding-bottom: clamp(3.2rem, 8vh, 4.5rem); }
  .f-lead, .step-h, .step-p { max-width: 34em; }

  /* il passo diventa una riga sola: il nome del movimento sopra, il testo
     sotto, tutto sul margine di pagina */
  .f-steps { padding-inline: var(--gutter); }
  .step { grid-template-columns: 1fr; padding: clamp(3.2rem, 8vh, 4.4rem) 0; }
  .step-n, .step-c { grid-column: 1; }
  .step-n { margin-bottom: .9rem; }
  .f-big { max-width: 18em; }
  .br-m { display: inline; }
}

/* ============================================================
   MENO MOVIMENTO — niente attesa, niente comparse, linea intera
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ldr { display: none; animation: none; }
  .c { opacity: 1 !important; }
  body.freq .nav, body.freq .f-rest { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   MODALITÀ LEGGERA — la sfocatura della home
   (il resto sta in fondo a style.css)
   ============================================================ */
/* La lastra dell'uscita perde il vetro e tiene il gradino di colore, che è
   la cosa che deve fare: staccare la destinazione dal racconto. */
.lite .f-sec--exit {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: #151412;   /* rgba(23,22,19,.76) già composta sul fondo */
}