/* ================================================================== *
 * Slogan Website — la seconda versione, "Story"
 *
 * Questo foglio si aggiunge a site.css, non lo sostituisce. Tutto quello che
 * c'e' qui sotto vive dentro '.slgn-v2', che sta sul body solo quando la
 * pagina disegnata e' la seconda: la prima versione non vede una riga di
 * questo file, e questo file non ha bisogno di disfare niente della prima.
 *
 * E' anche il motivo per cui e' un file a parte e non un blocco in fondo a
 * site.css: si stacca togliendo una condizione, e finche' la Story e' in
 * lavorazione nessuno lo scarica.
 *
 * COS'E' CHE CAMBIA DAVVERO
 *
 * Non i colori: sono gli stessi due, nero e avorio. Cambia la SCALA e cambia
 * il RITMO.
 *
 *   La scala. I titoli passano da grandi a enormi - fino a 238 pixel
 *   sull'apertura - in maiuscolo, di peso 900, con le lettere che quasi si
 *   toccano. A quella misura un titolo smette di essere testo e diventa una
 *   forma: e' il motivo per cui sotto ce ne sta uno solo per schermata.
 *
 *   Il ritmo. La prima versione impagina sezioni che si susseguono; questa
 *   impagina schermate intere - ogni sezione e' alta 100svh e se ne guarda
 *   una per volta. E' piu' lento a leggersi ed e' voluto: chi scorre non
 *   sta cercando informazioni, sta decidendo se fidarsi.
 *
 * Le misure - 4.65vw di margine, 100svh di altezza, i clamp dei titoli -
 * arrivano dal prototipo e sono state ricopiate, non reinventate. Dove ho
 * cambiato qualcosa c'e' scritto perche'.
 * ================================================================== */

.slgn-v2 {
  --v2-nero: #050505;
  --v2-carta: #eeedea;
  --v2-carta-chiara: #ebeae7;
  --v2-grafite: #2e2d2b;
  --v2-inchiostro: #090909;
  --v2-riga: rgba(255, 255, 255, .32);
  --v2-riga-carta: rgba(127, 127, 127, .18);
  --v2-margine: 4.65vw;
  --v2-ease: cubic-bezier(.2, .72, .16, 1);

  /* L'INTERLINEA MINIMA DEI TITOLI IN MAIUSCOLO.
   *
   * Misurata sul carattere che il sito usa davvero, non scelta a occhio.
   * In Inter Tight nera, a corpo 100, la maiuscola alta 73 pixel diventa 96
   * quando porta l'accento: la E maiuscola accentata - "E QUESTO IL PUNTO",
   * "NON E TEORIA", "PIU ALTA E LA POSTA" - sale di 23 pixel sopra a tutte
   * le altre. La coda della Q scende di 6.
   *
   * Vuol dire che fra due righe di maiuscolo servono 0,96 em perche'
   * l'accento della riga di sotto non entri dentro alla riga di sopra, e
   * 1,02 se la riga di sopra finisce con una Q. I titoli stavano fra .76 e
   * .82: da li' venivano gli accenti appoggiati sulle lettere della riga
   * precedente - il difetto piu' visibile del sito, e su ogni pagina.
   *
   * .98 e' quel minimo con un pixel di margine. Resta un'interlinea molto
   * stretta - il maiuscolo occupa .73 em, quindi fra una riga e l'altra
   * restano .25 em di aria - ed e' la piu' stretta che il carattere regge
   * senza che le righe si tocchino. Sotto non e' una scelta di gusto: e'
   * testo sovrapposto. */
  --v2-interlinea-alta: .98;

  background: var(--v2-nero);
}

/* Il fondo del body si propaga da solo alla tela della finestra quando 'html'
   non ne ha uno: il nero del body copre anche la zona che il browser scopre
   quando la barra di sistema si ritira. Questa regola non e' quella che salva
   la situazione, e' una cintura in piu': serve nel caso in cui un domani il
   fondo venga tolto dal body o spostato su un contenitore interno. A quel
   punto la propagazione non ci sarebbe piu', e la zona fuori dal corpo -
   quella che 'html' comanda - resterebbe bianca. Il colore e' scritto a mano
   e non preso da --v2-nero perche' quella variabile e' dichiarata sul body, e
   'html' e' suo padre: le variabili CSS scendono, non salgono. Prima infatti
   c'e' stato 'var(--v2-nero)' e la regola non faceva assolutamente niente -
   misurato sul telefono, il fondo di 'html' risultava trasparente. Se quel
   colore cambia, va cambiato in due posti. */
html:has(body.slgn-v2) { background: #050505; }

/* Il margine laterale su telefono torna a essere fisso: 4.65vw di 390 pixel
   fanno 18, che non e' un margine, e' un errore di stampa. */
@media (max-width: 900px) {
  .slgn-v2 { --v2-margine: 20px; }
}

/* C'e' stata una fascetta oro fissa in cima allo schermo che avvisava chi
 * guardava una versione non pubblicata. Tolta perche' la seconda versione adesso
 * si fa vedere ai clienti: un cartello "non pubblicata" sopra la pagina che
 * stai mostrando lavora contro di te.
 *
 * La classe 'slgn-anteprima' sul body resta viva - la mette class-site.php -
 * e resta buona come aggancio se un domani serve distinguere chi sta in
 * anteprima; semplicemente adesso nessuna regola la usa. */


/* ------------------------------------------------------------------ *
 * L'apertura
 *
 * Una schermata, un titolo, tre righe di testo. Tutto il resto - lo
 * scroller, i motivi, le fasi - non c'e': quella roba spiega, e qui non si
 * spiega ancora niente.
 * ------------------------------------------------------------------ */

.slgn-v2 .slgn-hero--story {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 720px;
  height: 100vh;
  height: 100svh;
  padding: 0;
  background: #030303;
  overflow: hidden;
}

/* L'APERTURA DELLE PAGINE INTERNE E' PIU' BASSA DI QUELLA DEL SITO.
 *
 * Sulla home la prima schermata e' piena: titolo, scroller, reel e la fascia
 * dei motivi. Su Portfolio, Servizi e Contatti c'e' un occhiello, un titolo
 * di due o tre righe e una riga di testo - e sotto restavano fra i 420 e i
 * 495 pixel di nero, misurati pagina per pagina. Mezza schermata vuota non e'
 * un'apertura solenne, e' una pagina che sembra non aver finito di caricare.
 *
 * 84svh e' scelto per far spuntare la sezione seguente di un dito sotto al
 * bordo: chi arriva vede che sotto c'e' qualcosa, che e' l'unica cosa che
 * un'apertura deve fare oltre a dire dove si e'. La riga in fondo
 * ('.slgn-hero__riga') e' appoggiata al fondo della sezione e scende con lei.
 *
 * La condizione e' 'non la home' e non 'non a due colonne': --doppia oggi
 * capita solo sulla home, ma dipende dal fatto che qualcuno abbia scritto
 * delle storie nel builder, e domani potrebbe capitare anche su una pagina
 * interna. --sito viene da is_front_page(), che e' esattamente la domanda
 * che si sta facendo qui. */
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) {
  height: 78vh;
  height: 78svh;
  min-height: 580px;
}

.slgn-v2 .slgn-hero--story .slgn-hero__inner {
  position: absolute;
  z-index: 2;
  top: 21%;
  left: var(--v2-margine);
  width: min(1080px, 72vw);
  max-width: none;
  margin: 0;
  padding: 0;
}

/* La colonna del testo, e il metro con cui si misura il titolo.
 *
 * Il max-width di 34rem arriva da site.css, dove serve alle aperture della
 * prima versione. Qui era di troppo in due modi: stringeva la colonna a 544
 * pixel dentro una griglia che gliene dava 672, e non fermava comunque il
 * titolo, che sfora un max-width invece di rispettarlo (una parola non si
 * spezza). Il risultato era "SPINGIAMO" a 165 px, cioe' 857 px di larghezza,
 * sdraiato sopra la colonna dello scroller.
 *
 * container-type serve alla riga sotto: e' quello che permette al corpo del
 * titolo di misurarsi sulla colonna in cui sta davvero (100cqw) e non sulla
 * finestra, che nel taglio a due colonne e' piu' del doppio. */
.slgn-v2 .slgn-hero--story .slgn-hero__copy {
  max-width: none;
  container-type: inline-size;
}

/* Il corpo e' il piu' piccolo fra quello che vorremmo e quello che ci sta.
 *
 * --lettere lo scrive il PHP: sono le lettere della riga piu' lunga quando i
 * capi li decide chi scrive il titolo con le barre, e quelle della parola
 * piu' lunga quando i capi li decide lo spazio disponibile (vedi testa() in
 * block-apertura.php). In entrambi i casi e' la misura che non deve sforare.
 *
 * 0.62 e' misurato su questo carattere a peso 900 con -.06em di spaziatura:
 * una parola sola costa 0.575 px per lettera per px di corpo, una riga con
 * gli spazi dentro 0.515 (gli spazi sono stretti). 0.62 sta sopra a entrambi,
 * quindi la riga ci sta sempre; il prezzo e' che una riga con molti spazi
 * viene un po' piu' piccola del suo massimo teorico, ed e' il verso giusto in
 * cui sbagliare - un titolo un filo piu' piccolo si nota molto meno di un
 * titolo tagliato. */
.slgn-v2 .slgn-hero--story .slgn-hero__title {
  margin: 0;
  color: #f7f7f4;
  /* Tre limiti, e vince il piu' piccolo: la misura di gusto, quella che
   * tiene la riga piu' lunga dentro alla colonna, e - questa e' nuova -
   * quella che tiene TUTTO IL TITOLO dentro alla schermata.
   *
   * I primi due guardano solo la larghezza, e su uno schermo largo e basso
   * non bastano: a 1920x945 "Tutto quello che serve." prendeva il corpo
   * massimo, 238 pixel, e quattro righe di 238 fanno 933 pixel in una
   * finestra che ne ha 945 - il titolo cominciava a 246 e finiva 234 pixel
   * sotto al bordo, con l'ultima riga stampata sopra alla riga di piede.
   * Non e' un difetto nato con l'interlinea nuova: c'era gia', l'interlinea
   * lo ha solo reso evidente.
   *
   * 17vh viene dal caso peggiore: quattro righe sono il massimo che i titoli
   * di questo sito raggiungono, e quattro righe di 17vh a interlinea .98
   * fanno 67vh - che sommate al rientro in cima stanno dentro alla
   * schermata con il piede libero. Sui titoli corti non morde: la home a
   * 1920 resta al suo corpo pieno perche' la larghezza la ferma prima. */
  font-size: min(
    clamp(92px, 12.4vw, 238px),
    calc(100cqw / (var(--lettere, 8) * 0.62)),
    17vh
  );
  font-weight: 900;

  /* .96, E IL NUMERO NON E' DI GUSTO: E' DOVE LE LETTERE SI TOCCANO.
   *
   * Il resto della Story sta a '--v2-interlinea-alta' (.98), misurato sul
   * caso peggiore del maiuscolo: la E accentata, che in Inter Tight nera sale
   * a .96 em contro i .73 di una maiuscola normale.
   *
   * Qui era sceso prima a .9 e poi a .8, e con le maiuscole ci stava: una
   * maiuscola non ha code - l'unica che scende e' la Q, di .06 - quindi fra
   * due righe tutte maiuscole bastano .79. A .8 il titolo era strettissimo e
   * intero.
   *
   * Poi il maiuscolo e' diventato una scelta di chi scrive (vedi
   * 'text-transform' qui sotto), e con il minuscolo il caso peggiore cambia
   * faccia: l'asta di 'b', 'd', 'l' sale a .73, la coda di 'g', 'p', 'q'
   * scende a .22. Perche' una coda non entri nell'asta della riga di sotto
   * servono .95 fra una base e l'altra, e .96 e' quel minimo con un
   * centesimo di aria.
   *
   * Non e' un conto sulla carta: a .8, sul titolo che c'e' scritto adesso, i
   * contatti erano due - la 'p' di "Spingiamo" sopra la 't' di "tuo" per 31
   * pixel di sovrapposizione orizzontale, e la 'g' sopra la 'b' di "brand"
   * per 27. Sono quindici pixel di inchiostro dentro l'inchiostro a corpo
   * 100, trentasei a corpo 238: non si legge come un titolo stretto, si legge
   * come un carattere rotto.
   *
   * Il minuscolo si mangia quasi tutto il guadagno dell'interlinea corta, e
   * le due cose non si possono avere insieme: e' la stessa misura chiesta a
   * due alfabeti che hanno ingombri diversi. Un'apertura scritta tutta in
   * maiuscolo puo' tornare a .8 - li' le code non ci sono. */
  line-height: .96;

  /* -.05, un centesimo piu' larga del -.06 del prototipo: e' il valore
   * trovato guardando, dopo che l'interlinea si era stretta. Le due misure si
   * tengono per mano - righe piu' vicine fanno sembrare le lettere piu'
   * strette di quanto sono - e chiuderle tutte e due insieme toglieva al
   * titolo l'aria che ha dentro.
   *
   * Sul conto del corpo non pesa: il fattore 0.62 della riga sopra e' tarato
   * su -.06, e un centesimo di em in piu' per lettera porta il costo vero da
   * 0.575 a 0.585 per una parola sola, e da 0.515 a 0.525 per una riga con
   * gli spazi dentro. Restano tutti e due sotto 0.62, che percio' continua a
   * sbagliare dalla parte giusta: un titolo un filo piu' piccolo del suo
   * massimo, mai un titolo tagliato. */
  letter-spacing: -.05em;

  /* IL MAIUSCOLO LO DECIDE CHI SCRIVE, NON IL FOGLIO DI STILE.
   *
   * '.slgn-display' in site.css mette 'text-transform: uppercase' su tutti i
   * titoli grandi: qualunque cosa si scrivesse nel pannello - "Spingiamo il
   * tuo brand" - in pagina diventava "SPINGIAMO IL TUO BRAND", e non c'era
   * modo di ottenere altro. Un maiuscolo imposto e' una decisione presa una
   * volta sola e applicata per sempre a testi che ancora non esistevano.
   *
   * Qui torna a chi scrive: il titolo esce come sta nel campo. Chi lo vuole
   * urlato lo scrive urlato - il tasto delle maiuscole e' li' - e chi lo
   * vuole in tondo lo scrive in tondo.
   *
   * Vale per l'apertura della Story e non per il resto del sito: cambiare
   * tutti i titoli e' un'altra decisione, e non la prende una riga scritta
   * qui dentro. */
  text-transform: none;
}

/* L'ACCENTO DELL'APERTURA: CORSIVO SERIF, NON PIU' CONTORNO.
 *
 * La seconda meta' della frase - quella fra asterischi, che slgn_ws_words()
 * marca 'slgn-word--em' - nella prima versione e' la stessa parola svuotata,
 * disegnata a filo (site.css, "IL CONTORNO, DOVE REGGE"). Nella Story no: qui
 * l'accento cambia carattere invece di cambiare consistenza. Il contrasto fra
 * un grottesco nero e un corsivo con le grazie si legge da lontano, e si legge
 * anche dove il filo si perdeva - sul telefono, dove il contorno era escluso
 * sotto i 760 pixel e la parola restava soltanto un po' piu' leggera.
 *
 * Le tre righe che spengono il contorno non sono ridondanti: 'color' e
 * '-webkit-text-stroke' disfano la regola dentro al '@supports' di site.css,
 * il 'text-shadow' toglie l'alone che serviva a staccare un filo dal fondo
 * nero e che sotto una parola piena diventa sporco.
 *
 * Il peso torna a 400: Georgia ha un corsivo solo, e chiedergli il 900 del
 * titolo vuol dire farlo ingrassare al browser - un finto neretto storto, che
 * e' esattamente la cosa che un corsivo vero e' li' per evitare. */
.slgn-v2 .slgn-hero--story .slgn-hero__title .slgn-word--em {
  color: #f7f7f4;
  -webkit-text-stroke: 0;
  text-shadow: none;
  font-family: var(--ws-serif, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;

  /* IL 12% CHE PAREGGIA LE DUE FACCE.
   *
   * Due caratteri allo stesso corpo non hanno la stessa taglia apparente, e
   * la misura che decide non e' la maiuscola: e' l'altezza della 'x', quella
   * che l'occhio legge come "quanto e' grande questo testo". In Inter Tight
   * la x sta a .55 em, in Georgia a .49.
   *
   * Finche' il titolo era tutto maiuscolo il paragone giusto era fra le
   * maiuscole - .73 contro .69, cioe' 1.05, il numero che stava qui prima.
   * Ora che il titolo esce come lo si scrive, la parola con l'accento e'
   * quasi sempre minuscola - "gregge.", "lavoriamo.", "ossessione." - e a
   * 1.05 restava piu' piccola delle righe di sopra: si vedeva nella pagina
   * pubblicata.
   *
   * .55 / .49 = 1.12. Con questo le due facce hanno la stessa taglia
   * apparente. Le maiuscole del corsivo, dove ce ne sono, vengono un 6% piu'
   * alte di quelle del grottesco, ed e' il verso giusto in cui sbagliare: un
   * corsivo con le grazie in mezzo a un nero pesantissimo ha bisogno di
   * qualcosa in piu' per non sparire.
   *
   * E l'interlinea si riporta indietro dello stesso 12%: 'line-height' senza
   * unita' si eredita come numero e si moltiplica per il corpo di CHI lo usa,
   * quindi il .96 di sopra su un corpo maggiorato darebbe una riga piu' alta
   * delle altre. .857 e' .96 / 1.12 - per una coincidenza e' lo stesso numero
   * di prima, che era .9 / 1.05. Misurato in pagina: le tre righe del titolo
   * di Contatti sono alte 54 pixel esatte, quella con l'accento compresa. */
  font-size: 1.12em;
  line-height: .857;
}

/* slgn_ws_words() spezza il titolo in parole per animarle una per una.
 *
 * Qui c'era display:block, cioe' una riga per parola, sempre. Andava bene
 * finche' il titolo era di due parole, ma il capo lo decideva il foglio di
 * stile per tutti i titoli futuri. Adesso le parole scorrono di fila e vanno
 * a capo da sole quando lo spazio finisce; il capo a mano si scrive nel
 * titolo dal pannello con una barra verticale (vedi slgn_ws_words()).
 *
 * inline-block e non inline: l'animazione muove ogni parola con una
 * transform, e una transform su un elemento inline non ha nessun effetto. */
.slgn-v2 .slgn-hero--story .slgn-hero__title .slgn-word {
  display: inline-block;
}

/* Only Inter words: keep the title's inherited tracking for Georgia italic. */
.slgn-v2 .slgn-hero--story .slgn-hero__title .slgn-word:not(.slgn-word--em) {
  letter-spacing: 0em;
}

.slgn-v2 .slgn-hero--story .slgn-hero__lead,
.slgn-v2 .slgn-hero--story .slgn-lead {
  width: min(47ch, 48vw);
  max-width: none;
  margin: clamp(34px, 5vh, 58px) 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(15px, 1.06vw, 20px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.06em;
}

/* -- Con lo scroller a destra: due colonne -- *
 *
 * Il prototipo, a destra dell'apertura, ha solo il pelo. Qui ci vanno anche
 * lo scroller di storie e il reel della prima versione, ed e' una scelta che
 * si tiene: il pelo resta il fondo di tutto, il titolo resta la prima cosa
 * che si legge, e quella meta' di schermata che nel prototipo era vuota dice
 * anche cosa produciamo.
 *
 * Il prezzo e' il titolo, che scende da 238 a 176 pixel al massimo. E' il
 * conto da pagare per non farlo finire sotto la colonna di destra, ed e'
 * scritto qui perche' e' l'unico punto in cui la Story si allontana dalle
 * misure del prototipo per una ragione di contenuto e non di difetto.
 *
 * La classe la mette il PHP solo quando lo scroller ha davvero qualcosa
 * dentro: uno scroller vuoto largo mezza schermata sarebbe peggio di niente. */
.slgn-v2 .slgn-hero--doppia .slgn-hero__inner {
  top: 11%;
  right: var(--v2-margine);
  width: auto;
  display: grid;
  /* LA COLONNA DEL TESTO SI PRENDE QUELLO CHE ALL'ALTRA AVANZA.
   *
   * Le colonne erano 1,08fr e 0,92fr: una divisione quasi a meta' di tutto
   * lo spazio. Solo che quella di destra non lo usava - lo scroller si ferma
   * a 'min(100%, 24rem, 47vh)', e da 1300 pixel di finestra in su quel tetto
   * vale 384. A 1920 la sua colonna ne riceveva 759 e ne lasciava 375 di
   * vuoto appoggiato al corridoio centrale; intanto il titolo, che si misura
   * sulla colonna in cui sta (100cqw), restava a 120 pixel contro i 214 che
   * il suo clamp gli permetterebbe.
   *
   * Adesso la colonna di destra chiede la misura dello scroller e basta, e
   * tutto il resto va al testo: a 1920 la colonna del titolo passa da 891 a
   * 1267 pixel e il titolo da 120 a 160 - dove a fermarlo non e' piu' la
   * larghezza ma il tetto dei 17vh, cioe' l'altezza della schermata.
   *
   * Il 30vw sotto al tetto e il minimo di 300 sono la stessa cosa di prima
   * guardata dall'altra parte: sopra i 1280 pixel lo scroller non si accorge
   * del cambio (30vw batte 24rem e vince il tetto), sotto si stringe insieme
   * alla pagina invece di tenersi una colonna che non riempie. */
  grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 24rem);
  gap: clamp(30px, 4vw, 76px);

  /* 'stretch' e non 'start': e' quello che chiude il buco.
   *
   * Con 'start' le due colonne partivano insieme in alto e finivano dove
   * volevano: quella di destra arrivava in fondo alla schermata, quella di
   * sinistra si fermava dopo tre righe di testo e lasciava sotto un terzo di
   * pagina di niente. Non era spazio bianco, era un buco - la differenza sta
   * nel fatto che nessuno l'aveva deciso.
   *
   * Adesso le due colonne sono alte uguali e il testo si appoggia ai due
   * estremi: il titolo in cima, l'introduzione in fondo. L'aria che prima
   * stava tutta in basso adesso sta in mezzo, ed e' quello che in tipografia
   * si e' sempre fatto - la si distribuisce, non la si accumula. */
  align-items: stretch;
}

/* Il testo sta al centro della sua colonna, non appoggiato ai due estremi.
 *
 * Con 'space-between' titolo e introduzione finivano uno in cima e l'altra in
 * fondo: il buco in basso spariva, ma se ne apriva uno in mezzo fra le due, e
 * il testo smetteva di essere un blocco unico. Centrando il gruppo l'aria si
 * divide in due meta' uguali sopra e sotto, e le due parti restano attaccate
 * come devono stare. */
.slgn-v2 .slgn-hero--doppia .slgn-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4vh, 54px);
}

/* Con lo scroller a fianco il massimo scende, ma il tetto della colonna resta
   quello di sopra: qui si cambia solo la meta' "quanto vorremmo". */
.slgn-v2 .slgn-hero--doppia .slgn-hero__title {
  font-size: min(
    clamp(78px, 11.4vw, 214px),
    calc(100cqw / (var(--lettere, 8) * 0.62)),
    17vh
  );
}

/* Il margine sopra all'introduzione lo faceva lo spazio fisso; adesso lo fa
   la distribuzione, e sommarli darebbe il doppio. */
.slgn-v2 .slgn-hero--doppia .slgn-hero__lead,
.slgn-v2 .slgn-hero--doppia .slgn-lead {
  margin-top: 0;
}

.slgn-v2 .slgn-hero--doppia .slgn-hero__lead,
.slgn-v2 .slgn-hero--doppia .slgn-lead {
  width: auto;
  max-width: 44ch;
}

.slgn-v2 .slgn-hero--doppia .slgn-hero__showcase {
  /* 'relative' non e' decorazione: il reel e' posizionato in assoluto e senza
     un antenato posizionato qui si aggancia al contenitore dell'apertura, che
     nella Story e' largo tutta la pagina - e finisce fuori schermo a sinistra.
     E' l'ancora, non la posizione, quello che gli mancava. */
  position: relative;
  justify-self: end;

  /* Il tetto di larghezza serve all'altezza. Lo scroller ha proporzione 9:14:
     lasciato libero in una colonna da 567 pixel diventa alto 882, cioe' piu'
     dell'apertura che lo contiene, e sparisce sotto il bordo. A 23rem viene
     alto 572 e ci sta con il reel e le fasi.

     Il terzo termine e' lo stesso ragionamento fatto sull'altezza invece che
     sulla larghezza. 24rem sono 384 pixel, e 384 per 14 noni fanno 597: piu'
     le fasi e il loro stacco, 656. Su un tablet coricato - 1024x768 - dentro
     all'apertura ce ne stanno 626, e la fila delle fasi finiva stampata sulla
     riga di piede ("03 / PIANO" sopra a "SCROLL"). A 47vh la colonna si
     stringe solo dove serve: da 850 pixel di finestra in su vince ancora il
     tetto di 24rem e non cambia niente. */
  width: min(100%, 24rem, 47vh);

  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 26px);
  min-width: 0;
}

/* La riga in fondo. */
.slgn-v2 .slgn-hero__riga {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: var(--v2-margine);
  right: var(--v2-margine);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.slgn-v2 .slgn-hero__riga i {
  flex: 1;
  height: 1px;
  background: currentColor;
  transform: scaleX(.08);
  transform-origin: 0;
  animation: slgn-v2-riga 1.2s var(--v2-ease) 1.2s forwards;
}

@keyframes slgn-v2-riga { to { transform: scaleX(1); } }

@media (max-width: 900px) {
  .slgn-v2 .slgn-hero--story { min-height: 760px; }

  /* Su telefono le due colonne si mettono in fila e l'apertura smette di
     essere alta esattamente una schermata: cresce quanto le serve. Comprimere
     titolo e scroller dentro 100svh vorrebbe dire rimpicciolire tutti e due
     fino a non farne leggere nessuno. */
  .slgn-v2 .slgn-hero--doppia {
    height: auto;
    min-height: 100svh;
    padding-bottom: 96px;
  }

  .slgn-v2 .slgn-hero--doppia .slgn-hero__inner {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    grid-template-columns: 1fr;
    gap: 30px;
    width: auto;
    padding: clamp(112px, 14svh, 144px) var(--v2-margine) 0;
  }

  .slgn-v2 .slgn-hero--doppia .slgn-hero__title {
    font-size: clamp(64px, 17vw, 120px);
  }

  .slgn-v2 .slgn-hero--story .slgn-hero__inner {
    top: 22%;
    width: calc(100vw - 40px);
  }

  /* Le storie occupano tutta la sezione, dentro i margini della hero. */
  .slgn-v2 .slgn-hero--doppia .slgn-hero__inner {
    width: 100%;
  }

  .slgn-v2 .slgn-hero--doppia .slgn-hero__showcase {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .slgn-v2 .slgn-hero--doppia .slgn-hero-story {
    width: 100%;
    max-width: none;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  /* Il pavimento scende da 78 a 44: a 78 pixel uno schermo da 360 non ha
   * margine, e una parola lunga come "Parliamone" (462 px) viene tagliata.
   *
   * 0.65 non e' un numero scelto a caso: a corpo 78, "Parliamone" misura 462
   * pixel, cioe' 0.59 px per lettera per px di corpo; 0.65 e' quel valore con
   * un margine di sicurezza.
   *
   * Pagine interne: il max() con 10 e' un pavimento di lettere, non una misura.
   * "Conta almeno dieci lettere anche se ce ne sono sei" -- e' il modo di
   * ottenere una misura uguale su pagine con titoli di lunghezza diversa senza
   * scrivere un numero fisso in pixel, che si romperebbe al primo schermo di
   * larghezza diversa. Cosi' tutte e tre le interne danno 49 px, e un titolo
   * futuro con dodici lettere scenderebbe ancora -- il taglio resta impossibile.
   *
   * Il min() lascia vincere il clamp quando il titolo e' corto: "SLOGAN" su
   * 360 px fa 21.5vw = 77, e 77 e' minore di (320 / (6 * 0.65)) = 82,
   * quindi la home non si accorge di niente. */
  .slgn-v2 .slgn-hero--story .slgn-hero__title {
    font-size: min(
      clamp(44px, 21.5vw, 142px),
      calc((100vw - 40px) / (max(var(--lettere, 8), 10) * 0.65))
    );
  }

  /* L'apertura del sito usa le lettere vere del titolo: e' la prima schermata
   * e le sue parole sono corte, quindi il corpo puo' essere piu' grande. La
   * classe slgn-hero--sito viene da is_front_page() nel blocco. */
  .slgn-v2 .slgn-hero--sito .slgn-hero__title {
    font-size: min(
      clamp(44px, 21.5vw, 142px),
      calc((100vw - 40px) / (var(--lettere, 8) * 0.65))
    );
  }

  .slgn-v2 .slgn-hero--story .slgn-hero__lead,
  .slgn-v2 .slgn-hero--story .slgn-lead {
    width: min(37ch, 88vw);
    font-size: 15px;
  }
}


/* ------------------------------------------------------------------ *
 * I dati dello studio
 *
 * Nella seconda versione la sezione e' una GRIGLIA DUE PER DUE: quattro
 * celle con il dato enorme e l'etichetta piccola sotto, e il marchio cromato
 * fermo al centro. E' l'unica schermata bianca della Story.
 *
 * IL BIANCO, E LE QUATTRO CASELLE.
 *
 * Prima era nera come tutto il resto, e per tenere insieme le quattro celle
 * aveva una croce: due velature chiare ('--v2-riga' e' bianco al 32%) con il
 * metallo appoggiato sopra all'incrocio a coprirlo. Sul bianco quelle due
 * righe sparivano, e per un po' la sezione e' stata quattro numeri agli
 * angoli e basta.
 *
 * Adesso le quattro celle sono quattro CASELLE: fondo appena piu' caldo del
 * foglio, un filetto sottile intorno, e un vuoto stretto a dividerle. E' il
 * disegno del riferimento che ha portato il cliente, ed e' anche quello che
 * regge meglio la misura dei numeri: un numero altissimo appoggiato al
 * niente galleggia, dentro a una casella ha un pavimento.
 *
 * Il metallo sta in mezzo e passa SOPRA agli angoli delle quattro caselle.
 * Non e' una sbavatura, e' la cosa che tiene insieme il disegno: le caselle
 * dicono che sono quattro fatti separati, l'oggetto che le scavalca dice che
 * sono di uno studio solo. Passa sopra ai filetti, mai sopra al testo - i
 * numeri e le etichette stanno agli angoli esterni proprio per questo.
 *
 * Sparisce anche il fondo animato che site.css mette sotto a ogni sezione -
 * il reticolo a quadretti da 88 pixel e l'alone al centro - insieme al filo
 * di separazione in cima. Sono tutti disegnati con velature bianche, cioe'
 * fatti per il nero: qui non si tratta di ribaltarli, si tratta che una
 * schermata bianca con quattro numeri e un pezzo di cromo non ha bisogno di
 * niente altro.
 * ------------------------------------------------------------------ */

.slgn-v2 .slgn-dati {
  display: grid;
  position: relative;

  /* NON PIU' UNA SCHERMATA INTERA.
   *
   * Tutta la Story impagina schermate da 100svh, e questa lo faceva con le
   * altre. Ma qui dentro ci sono un titolo di una riga, quattro numeri e un
   * marchio: a schermata piena il contenuto si spalmava sui bordi e in mezzo
   * restava un vuoto che non teneva niente insieme - il marchio ci
   * galleggiava dentro invece di stare in mezzo a qualcosa.
   *
   * Piu' bassa, le quattro celle si avvicinano fra loro e il marchio le
   * tocca: si legge come una composizione sola. Il tetto in pixel serve agli
   * schermi molto alti, dove l'82 per cento di una finestra da 1400 sarebbe
   * di nuovo la schermata piena di prima.
   *
   * Secondo giro nella stessa direzione: da 84 a 68. A 84 restavano 217
   * pixel fra la prima fila e il marchio e 230 fra il marchio e la seconda -
   * misurati - e il marchio tornava a galleggiare, che e' proprio il difetto
   * che questa nota diceva di aver chiuso. */
  min-height: min(68svh, 720px);
  padding: 0;
  background: #fff;
  color: var(--v2-inchiostro);
  /* '.slgn-sec' in site.css da' a ogni sezione un filo in cima per staccarla
     dalla precedente. Fra il nero dell'apertura e questo bianco lo stacco lo
     fa gia' il salto di fondo: un filo in mezzo sarebbe una riga disegnata
     sopra a un confine che si vede da solo. */
  border-top: 0;
  overflow: hidden;
  isolation: isolate;
}

/* IL FONDO DI SEZIONE DI site.css, SPENTO QUI.
 *
 * site.css disegna sotto a ogni sezione due strati animati - il reticolo a
 * quadretti ('::before') e l'alone al centro ('::after') - con velature
 * bianche al 6 e al 7 per cento. Su questo bianco il reticolo non si
 * vedrebbe e l'alone schiarirebbe il fondo di un bianco gia' pieno: due
 * strati che girano un'animazione da 42 secondi per non produrre niente.
 *
 * 'content: none' e non 'display: none': cosi' i due pseudo-elementi non
 * vengono proprio generati, e con loro non parte l'animazione.
 *
 * La specificita' e' quella che serve, non una in piu': la regola di site.css
 * e' '.slgn-ws .slgn-sec:not(.slgn-sec--contrast)::before', e un ':not' pesa
 * quanto la classe che nega - tre classi. Qui ce ne sono quattro. */
.slgn-v2 .slgn-ws .slgn-sec.slgn-dati::before,
.slgn-v2 .slgn-ws .slgn-sec.slgn-dati::after {
  content: none;
}

/* Il titolo sopra i numeri.
 *
 * Sta dentro alla sezione, non dentro alla griglia: la griglia e' due per due
 * e un quinto figlio la sbilancerebbe. Il corpo e' quello della testa della
 * vetrina, perche' e' lo stesso gradino di titolo nella stessa pagina.
 *
 * z-index 1 come la griglia: il marchio cromato viene dopo nel documento e
 * senza questo gli passerebbe sopra. */
.slgn-v2 .slgn-dati__testa {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 6vh, 84px) var(--v2-margine) 0;

  /* In mezzo, e non a sinistra come tutti gli altri titoli della Story.
   *
   * Qui sotto la composizione e' simmetrica per costruzione: due numeri a
   * sinistra, due a destra, il metallo esattamente al centro. Un titolo
   * appoggiato al margine sinistro era l'unica cosa fuori asse di tutta la
   * schermata, e su bianco - dove non c'e' piu' il reticolo a dare un
   * riferimento - si vedeva come uno sbilanciamento e non come una scelta.
   *
   * Centrato, cade sulla stessa verticale del marchio: il titolo, il cerchio
   * e il vuoto in mezzo diventano un asse solo, e i quattro numeri gli
   * stanno intorno. */
  text-align: center;
}

.slgn-v2 .slgn-dati__testa h2 {
  margin: 0;
  /* Il suo colore se lo prende dalla sezione, come i numeri e le etichette:
     era scritto a mano perche' li' il chiaro era una scelta, qui sarebbe una
     seconda copia dello stesso inchiostro da tenere allineata. */
  color: inherit;

  /* PIU' PICCOLO DI PRIMA, MA PIU' GROSSO DEI NUMERI.
   *
   * Erano 104 pixel di peso 900 - il corpo della testa della vetrina, cioe'
   * il trattamento da titolo-forma - sopra a quattro numeri di 158, sempre
   * di peso 900. Due blocchi nerissimi che si contendevano la stessa
   * schermata, e nessuno dei due che comandasse.
   *
   * Adesso il gradino c'e' ed e' scritto: il titolo sta sopra ai numeri per
   * corpo (88 contro 64) e per peso (700 contro 500), e tutti e due stanno
   * sotto a dove stavano prima. La schermata si legge nell'ordine in cui e'
   * scritta - prima la frase, poi i fatti che la reggono - e l'altezza che i
   * due blocchi hanno lasciato e' quella in cui il metallo galleggia senza
   * toccare niente.
   *
   * La spaziatura si apre da -.055 a -.02: le lettere strettissime sono un
   * effetto del peso nero, e sotto al 900 diventano solo lettere che si
   * toccano. Stesso motivo per lo spazio fra le parole, che serviva a
   * riaprire quello che la spaziatura chiudeva. */
  font-size: clamp(48px, 6.4vw, 124px);
  font-weight: 700;
  line-height: var(--v2-interlinea-alta);
  letter-spacing: -.02em;
  text-transform: uppercase;
  word-spacing: .08em;
}

/* Con il titolo in cima la griglia non deve piu' fare tutto lo stacco da
   sola, altrimenti fra i due si apre il doppio dello spazio. */
.slgn-v2 .slgn-dati__testa + .slgn-dati__griglia {
  padding-top: clamp(26px, 3.2vh, 46px);
}

/* La griglia due per due.
 *
 * Qui c'erano anche le due righe di separazione - una orizzontale e una
 * verticale, disegnate con '::before' e '::after' sui bordi della griglia,
 * che formavano la croce al centro sotto al marchio. Sono andate via con il
 * passaggio al bianco: vedi il capitolo qui sopra. */
.slgn-v2 .slgn-dati__griglia {
  --griglia-gap: clamp(20px, 2.4vw, 40px);

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--griglia-gap) var(--griglia-gap);

  /* Il rientro verticale e' anche quello che decide quanto e' largo il vuoto
     in mezzo: le due file sono appoggiate ai bordi della griglia - la prima
     in alto, la seconda in basso - quindi ogni pixel di rientro in meno e'
     un pixel di vuoto centrale in piu', dove sta il marchio. Con i numeri
     cresciuti a 150 quel vuoto e' diventato la misura scarsa della sezione,
     ed e' da qui che si allarga. */
  padding: clamp(30px, 3.6vh, 52px) var(--v2-margine);
}


/* Ogni cella e' una colonna sola: il dato grande sopra, l'etichetta piccola
   sotto. Il lato di appoggio lo decide la parita' dell'indice, che il PHP
   scrive nella classe '--sx' o '--dx' - e il testo va sempre verso l'ANGOLO
   ESTERNO della sua cella, perche' il centro appartiene al marchio.

   Qui per un giro ci sono state quattro caselle disegnate - fondo piu' caldo
   e un filetto intorno, come nel riferimento che era arrivato. Tolte: su
   questa pagina facevano una tabella, e i quattro numeri su bianco si tengono
   da soli. Se un domani tornano, il posto e' questo. */
.slgn-v2 .slgn-dati .slgn-dato {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(10px, 1vw, 18px);
  min-height: 0;
  padding: 0;
  border: 0;
}

.slgn-v2 .slgn-dati .slgn-dato--dx {
  justify-items: end;
  text-align: right;
}

/* La fila di sotto si appoggia in basso, non in alto.
 *
 * Le quattro celle erano tutte allineate in cima alla loro riga, e siccome la
 * sezione e' alta una schermata intera il risultato era che tutto stava nei
 * primi due terzi: sotto all'ultimo dato restavano trecento pixel di nero
 * vuoto, e poi cominciava l'elenco. Non si leggeva come una composizione ma
 * come una sezione finita male.
 *
 * Appoggiando la fila di sotto al bordo inferiore, i quattro dati vanno ai
 * quattro angoli e il vuoto si sposta al centro - che e' esattamente dove sta
 * il marchio cromato. Il vuoto smette di essere un avanzo e diventa lo spazio
 * in cui il metallo galleggia. */
.slgn-v2 .slgn-dati .slgn-dato:nth-child(n+3) { align-content: end; }

/* I NUMERI, SOTTO AL TITOLO - E NON SOLO PER GERARCHIA.
 *
 * A 158 pixel di peso 900 "OVUNQUE" misurava 742 pixel su uno schermo da
 * 1920: allineato a destra cominciava a x 1074, cioe' 122 pixel dall'asse
 * verticale della pagina. In quei 122 pixel il metallo non ci sta - il suo
 * cerchio ha un raggio di 246 - e infatti gli finiva sopra: e' la
 * sovrapposizione che si vedeva in basso a destra.
 *
 * A 64 pixel di peso 500 la stessa parola ne misura 305 e comincia a 1511:
 * il corridoio centrale e' largo il doppio del cerchio, e il metallo ci
 * galleggia dentro senza avvicinarsi a nessuna delle quattro celle. La
 * spaziatura si apre di un centesimo e mezzo per lo stesso motivo del titolo
 * qui sopra: -.06 era tarato sul nero pieno.
 *
 * Il corpo resta comunque il doppio dell'etichetta che gli sta sotto: il
 * dato si legge da lontano, quello che vuol dire si legge da vicino. Chi
 * rialza questi numeri deve rifare il conto sul metallo, o torna la
 * sovrapposizione. */
.slgn-v2 .slgn-dato .slgn-dato__val {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 9.4vw, 150px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.slgn-v2 .slgn-dato .slgn-dato__numero {
  display: inline-flex;
  align-items: flex-end;
  gap: .1em;
}

.slgn-v2 .slgn-dato .slgn-dato__extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .08em;
  padding-bottom: .08em;
  font-size: clamp(52px, 9.4vw, 150px);
}

.slgn-v2 .slgn-dato--dx .slgn-dato__extra { align-items: flex-end; }

.slgn-v2 .slgn-dato .slgn-dato__simbolo,
.slgn-v2 .slgn-dato .slgn-dato__suffisso {
  display: block;
  font: inherit;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: none;
}

.slgn-v2 .slgn-dato .slgn-dato__simbolo {
  font-size: .58em;
  font-style: normal;
}

.slgn-v2 .slgn-dato .slgn-dato__suffisso { font-size: .21em; }

/* Il numero conta per primo; cio' che lo completa (K, +, ore) arriva subito
   dopo con lo stesso moto morbido, invece di comparire come un'aggiunta fissa. */
.slgn-js .slgn-v2 .slgn-dato .slgn-dato__coda,
.slgn-js .slgn-v2 .slgn-dato .slgn-dato__extra {
  opacity: 0;
  transform: translateY(.18em);
  transition: opacity .42s var(--v2-ease), transform .42s var(--v2-ease);
  transition-delay: .32s;
}

.slgn-js .slgn-v2 .slgn-dato.slgn-reveal.is-in .slgn-dato__coda,
.slgn-js .slgn-v2 .slgn-dato.slgn-reveal.is-in .slgn-dato__extra {
  opacity: 1;
  transform: none;
}

.slgn-v2 .slgn-dato .slgn-dato__lab {
  margin-top: 6px;
  font-size: clamp(12px, .88vw, 16px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* '.slgn-ws .slgn-sec > *' (0,2,0) sovrascrive position e z-index
   del marchio: e' figlio diretto della sezione, e la classe singola
   '.slgn-dati__marchio' pesa solo (0,1,0). Misurato sul sito: la
   posizione calcolata torna 'relative' e il marchio scende sotto alla
   griglia. Si alza a (0,3,0) perche' batta, e si fa valere solo in
   Story (classe .slgn-v2 sul body). */
.slgn-v2 .slgn-sec .slgn-dati__marchio {
  position: absolute;
  z-index: 3;
}

/* Il marchio e' in assoluto e sopra la griglia: e' lui che taglia le due
   righe, con il suo fondo, all'incrocio. 'z-index' piu' alto della
   griglia, e 'isolation: isolate' sulla sezione perche' l'ascesa non
   giochi con il parallasse di nessun antenato. */
.slgn-dati__marchio {
  --par-x: 0px;
  --par-y: 0px;
  --par-rx: 0deg;
  --par-ry: 0deg;

  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;

  /* IL VUOTO IN CUI STA IL METALLO NON E' AL CENTRO DELLA SEZIONE.
   *
   * Il marchio e' 'inset: 0' con 'place-items: center', quindi si centrava
   * sulla sezione intera - titolo compreso. Ma il titolo occupa la fascia in
   * cima, e il vuoto vero comincia sotto di lui: centrarsi su tutto vuol
   * dire salire dentro alla fascia del titolo di meta' di quello che il
   * titolo misura.
   *
   * Il padding lo rimette in asse col vuoto. Con 'box-sizing: border-box' e
   * gli inset a zero il riquadro resta grande quanto la sezione e il padding
   * si mangia il contenuto: l'oggetto centrato scende della META' del
   * padding, quindi questi 96-170 pixel valgono 48-85 di discesa.
   *
   * QUANTO SCENDE: la fascia del titolo, tutta intera. Il vuoto comincia
   * dove finisce il titolo, quindi il suo centro sta piu' in basso del centro
   * della sezione di meta' fascia - e siccome il padding vale meta', qui va
   * scritta la fascia intera. Non e' una stima: e' il rientro in cima piu'
   * l'altezza di una riga di titolo, gli stessi due valori che li' sopra
   * fanno il titolo. Se il titolo cambia corpo, questa scende con lui senza
   * che nessuno debba ricordarsene.
   *
   * L'1,22 e' l'ingombro vero di una riga di maiuscolo a questa interlinea,
   * misurato in pagina - non il line-height, che non comprende la parte di
   * lettera che sborda sopra e sotto. */
  padding-top: 0;

  /* LA FASCIA LIBERA NON E' CENTRATA SULLA SEZIONE, E QUESTI PIXEL LO DICONO.
   *
   * La fila di sopra e' appoggiata in alto e quella di sotto in basso, ma
   * sotto ai numeri di sotto c'e' anche la loro etichetta: il vuoto fra le
   * due file, misurato in pagina, va da 200 a 660 e ha il centro a 430,
   * mentre il centro della sezione sta a 450. Venti pixel di differenza, che
   * sono esattamente quelli che il marchio si mangiava in basso quando il
   * parallasse lo tirava giu'.
   *
   * Il padding in fondo vale meta' - come quello in cima, e' un riquadro con
   * gli inset a zero - quindi alza il marchio della meta' di quello che c'e'
   * scritto. */
  padding-bottom: clamp(24px, 3vh, 44px);
  min-height: 0;
  perspective: 900px;
  transform: translate3d(var(--par-x), var(--par-y), 0) rotateX(var(--par-rx)) rotateY(var(--par-ry));
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
}

/* QUANTO E' GRANDE IL MARCHIO, E PERCHE' ADESSO SI VEDE TUTTO.
 *
 * Qui c'e' stato un ritaglio: l'immagine veniva ingrandita di 3,05 dentro un
 * contenitore che tagliava, e in pagina arrivava solo il cuore del metallo -
 * la parte con i riflessi. Aveva una ragione: il file di allora era un
 * marchio piccolo in mezzo a due terzi di trasparenza, e mostrarlo intero
 * voleva dire un logo minuscolo appiccicato in mezzo a una pagina.
 *
 * Il file adesso e' un altro - inquadrato stretto, 1096x1100 - e quel
 * ritaglio, applicato a un'immagine gia' ritagliata, ne mostrava un terzo:
 * un pezzo di cromo che non si capisce piu' cosa sia.
 *
 * Percio' niente ingrandimento e 'object-fit: contain': il marchio si vede
 * INTERO, sempre, qualunque file ci mettano dentro dal pannello. La misura
 * del riquadro adesso e' la misura del marchio - non c'e' piu' un fattore
 * nascosto in mezzo - e chi cambia l'immagine non deve rifare nessun conto.
 *
 * 21vw col tetto a 330 e' quanto ci sta nel vuoto in mezzo alle quattro
 * celle, movimento compreso: il parallasse lo sposta di venti pixel e
 * l'oscillazione di altri tredici, e quei trentatre' vanno tolti dal margine
 * prima di dire che ci sta. La misura non la decide il gusto ma la parola piu' lunga della
 * sezione: "OVUNQUE" a 150 pixel e' larga 717, allineata a destra comincia a
 * 38 pixel dall'asse verticale della pagina, e li' in mezzo non ci passa
 * niente. Quindi il marchio non puo' arrivare all'altezza dei numeri di
 * sotto: deve stare TUTTO nella fascia libera fra le due file, che a
 * 1706x1181 va da 209 a 642 - 433 pixel - e 350 ci sta con quaranta pixel di
 * margine sopra e sotto.
 *
 * E' il conto da rifare ogni volta che si cambia il corpo dei numeri: piu'
 * sono grandi, piu' la fascia libera si stringe, e il marchio scende con
 * lei. Il riquadro e' quadrato come il file: con 'contain'
 * un riquadro piu' alto che largo non farebbe un marchio piu' grande,
 * farebbe solo due strisce vuote sopra e sotto. */
/* E LA DISCESA VALE SOLO DOVE IL TITOLO C'E'.
 *
 * Il blocco dei dati sta anche su Servizi, e li' il titolo non c'e': la
 * fascia da scavalcare non esiste, e il marchio sceso di meta' titolo
 * risulterebbe semplicemente fuori asse in una sezione che ha quattro numeri
 * e basta. ':has' e' la domanda giusta - "questa sezione ha una testa?" - e
 * la risposta la da' il documento, non chi scrive la pagina. */
.slgn-v2 .slgn-dati:has(.slgn-dati__testa) .slgn-dati__marchio {
  padding-top: calc(clamp(48px, 6vh, 84px) + clamp(48px, 6.4vw, 124px) * 1.22);
}

.slgn-dati__float {
  display: grid;
  place-items: center;
  width: min(21vw, 330px);
  height: min(21vw, 330px);
  animation: slgn-v2-galleggia 7.5s ease-in-out infinite;
}

.slgn-dati__float img {
  display: block;
  width: 100%;
  height: 100%;

  /* 'contain' e non 'cover': il marchio non si taglia mai. Un file con
     proporzioni diverse lascia due margini trasparenti invece di perdere un
     pezzo, che e' il verso giusto in cui sbagliare su un logo. */
  object-fit: contain;
  max-width: none;
}

/* L'OMBRA, ADESSO CHE NON C'E' PIU' L'INGRANDIMENTO.
 *
 * Prima il filtro andava diviso per 3,05: si applica prima della
 * trasformazione, quindi 6 e 9 diventavano 18 e 27 sullo schermo - e piu' in
 * la' di cosi' l'ombra usciva dal contenitore che tagliava e ci si vedeva il
 * taglio netto, tre righe grigie intorno al cerchio.
 *
 * Senza ingrandimento il numero scritto e' il numero che si vede, quindi qui
 * ci sono i 18 e 27 veri. Resta bassa e corta: su fondo bianco un'ombra
 * pesante non stacca il marchio dal foglio, ci mette sotto una macchia. Il
 * resto lo fa il metallo, che nel file ce l'ha gia' - contorni scuri e
 * riflessi chiari si leggono su bianco meglio che sul nero. */
.slgn-v2 .slgn-dati__float img {
  filter: drop-shadow(0 18px 27px rgba(0, 0, 0, .16));
}

@keyframes slgn-v2-galleggia {
  0%, 100% { transform: translateY(-8px) rotate(-.7deg); }
  50%      { transform: translate3d(0, 13px, 16px) rotate(.8deg); }
}

@media (max-width: 900px) {
  /* Su 360 px il vuoto fra le due colonne e' diciotto pixel (celle di
     sinistra da x 20 a x 171, di destra da x 189 a x 340) e il marchio ne
     vuole centosessantasei: che stia sopra ai numeri non e' una scelta di
     gusto, e' una cosa che non ci sta. Sotto i 900 px il marchio smette di
     sovrapporsi e si prende una RIGA SUA, in mezzo alle due righe di dati.
     Per metterlo li' la griglia dei dati si appiattisce con 'display:
     contents' e sono le quattro celle a diventare le caselle della
     SEZIONE, che adesso e' la griglia vera: cinque caselle, e il marchio,
     con 'order' e 'grid-column: 1 / -1', occupa la riga di mezzo. Le linee
     disegnate sull'incrocio non hanno piu' senso - adesso e' il marchio a
     separare le due righe di numeri - e si spengono ('display: contents'
     le tratterebbe come caselle fantasma in mezzo alla griglia). La
     sezione non resta inchiodata a '100svh': cresce quanto le occorre,
     meglio un'altezza oltre la schermata che un contenuto tagliato sul
     fondo. */
  .slgn-v2 .slgn-dati {
    --griglia-gap: clamp(18px, 5vw, 24px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--griglia-gap) var(--griglia-gap);
    padding: 15vh 20px;
    min-height: auto;
  }

  .slgn-v2 .slgn-dati__griglia { display: contents; }

  /* Qui la sezione E' la griglia (la griglia interna passa a 'contents'),
     quindi il titolo diventa una cella e finirebbe stretto in mezza larghezza
     accanto al primo numero: gli si dice di prendere tutta la riga. Il
     padding lo fa la sezione, non lui. */
  .slgn-v2 .slgn-dati__testa {
    grid-column: 1 / -1;
    padding: 0;
  }

  /* Stessa gerarchia del desktop, nella stessa proporzione: il titolo sopra
     ai numeri, e tutti e due piu' bassi di dove stavano. */
  .slgn-v2 .slgn-dati__testa h2 { font-size: clamp(30px, 8.5vw, 54px); }

  /* IL DATO CHE NON STA NELLA SUA COLONNA.
   *
   * Le celle sono caselle di una griglia, e una casella di griglia parte con
   * larghezza minima 'auto', cioe' non si stringe sotto la misura del suo
   * contenuto. "20.000" a 12,5vw viene 193 pixel dentro una colonna che ne
   * ha 165: la casella si allargava, usciva dal margine e la sezione - che
   * taglia quello che esce - se lo mangiava. Sul telefono si leggeva
   * "20.00", "OVUNQU", "SHOOTING PIANIFICA".
   *
   * Due cose insieme: 'minmax(0, 1fr)' e 'min-width: 0' tolgono quel minimo
   * automatico - dentro e fuori dalla cella - e il corpo scende sotto la
   * misura che fa uscire la parola piu' lunga della sezione ("OVUNQUE", 4,7
   * em in maiuscolo). I valori brevi crescono a 14vw; quelli piu' lunghi
   * possono andare a capo mantenendo le due colonne.
   * 'overflow-wrap' e' l'ultima rete: se un domani qualcuno scrive un dato
   * piu' lungo, quello va a capo invece di uscire dallo schermo. */
  .slgn-v2 .slgn-dati__testa,
  .slgn-v2 .slgn-dati .slgn-dato { min-width: 0; }

  .slgn-v2 .slgn-dati .slgn-dato {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .slgn-v2 .slgn-dato .slgn-dato__val {
    font-size: clamp(40px, 14vw, 96px);
    overflow-wrap: anywhere;
  }

  .slgn-v2 .slgn-dato .slgn-dato__extra { font-size: clamp(40px, 14vw, 96px); }

  .slgn-v2 .slgn-dato .slgn-dato__lab {
    max-width: 42vw;
    font-size: 10px;
    letter-spacing: .1em;
  }

  /* In flusso in mezzo alla griglia: 'order' lo mette dopo le prime due
     celle e prima delle ultime due, 'grid-column' gli fa occupare tutta la
     larghezza della riga di mezzo. */
  .slgn-v2 .slgn-sec .slgn-dati__marchio {
    position: static;
    order: 1;
    grid-column: 1 / -1;

    /* I due padding che sul desktop mettono il marchio in asse col vuoto qui
       non hanno niente da correggere - il marchio non e' piu' sovrapposto a
       niente, sta in fila fra le due righe di numeri - e resterebbero solo
       come uno stacco in piu' che nessuno ha chiesto. */
    padding: 0;
  }

  .slgn-v2 .slgn-dati .slgn-dato:nth-child(n+3) { order: 2; }

  .slgn-dati__float { width: 45vw; height: 45vw; }
}


/* Le hero interne condividono la scala di Servizi, indipendente dal testo. */
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
  font-size: min(clamp(92px, 12.4vw, 238px), calc(100cqw / 3.72), 17vh);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
    font-size: min(clamp(44px, 21.5vw, 142px), calc((100vw - 40px) / 6.5));
  }
}

/* ------------------------------------------------------------------ *
 * I servizi a coppie
 * ------------------------------------------------------------------ */

.slgn-v2 .slgn-coppie {
  position: relative;
  padding: 0;
  background: var(--v2-carta);
  color: var(--v2-inchiostro);
}

.slgn-coppie__occhiello {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 2.4vw, 40px);
  left: var(--v2-margine);
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.slgn-coppie__riga {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* L'ALTEZZA SCENDE DA 680 A 520.
 *
 * Dentro a una casella ci sono: il numerino in alto a destra, il titolo, il
 * filetto e - solo al passaggio del mouse - due righe di elenco. Aperta
 * tutta, la casella misura poco piu' di 290 pixel di contenuto. A 680 ne
 * restavano quasi 400 di niente, e siccome le caselle sono sei erano due
 * schermate e mezzo di pagina che non portavano niente.
 *
 * 520 tiene il respiro (720 per 520 e' ancora un rettangolo largo, non una
 * riga di menu) e restituisce 480 pixel su tre file. Il pavimento scende con
 * il soffitto: a 470 su una finestra stretta la casella tornava piu' alta di
 * quanto il tetto le concedesse, e il pavimento vinceva silenziosamente. */
.slgn-carta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  height: min(44vw, 520px);
  min-height: 400px;
  padding: clamp(26px, 3.3vw, 64px);
  border-right: 1px solid var(--v2-riga-carta);
  border-bottom: 1px solid var(--v2-riga-carta);
  color: var(--v2-inchiostro);
  overflow: hidden;
  text-decoration: none;
}

.slgn-carta--scuro  { background: var(--v2-grafite); }
.slgn-carta--chiaro { background: var(--v2-carta-chiara); }

/* Il grafite e' scuro ma non nero, e il testo sopra ci sta in inchiostro:
   e' quello che fa sembrare i sei riquadri sei ritagli dello stesso
   materiale invece che sei schede colorate. */
.slgn-carta--scuro { color: var(--v2-inchiostro); }

.slgn-carta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), transparent 45%, rgba(0, 0, 0, .06));
  opacity: 0;
  transition: opacity .5s var(--v2-ease);
}

.slgn-carta:hover::before { opacity: 1; }

.slgn-carta__n {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.06em;
}

.slgn-carta__testo {
  position: relative;
  z-index: 1;
  max-width: 620px;
}

/* I titoli prendono il colore dal riquadro che li contiene.
 *
 * Sembra ovvio e non lo e': site.css da' a tutti i titoli dentro '.slgn-ws' il
 * colore carta, che e' giusto su fondo nero e sbagliato dentro un riquadro
 * avorio. E un colore EREDITATO perde sempre contro un colore SCRITTO, per
 * quanto generico sia quest'ultimo: dare il colore alla carta e sperare che
 * scenda nei figli non funziona. Va detto qui, sul titolo.
 *
 * Il sintomo era il peggiore possibile - avorio su avorio, titolo invisibile -
 * ed e' lo stesso inciampo gia' capitato sul titolo del piede. */
.slgn-carta__testo h3,
.slgn-carta__testo p,
.slgn-v2 .slgn-cta__title,
.slgn-v2 .slgn-cta__occhiello { color: inherit; }

.slgn-carta__testo h3 {
  margin: 0 0 10px;
  font-size: clamp(38px, 4.3vw, 82px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

/* L'unico punto in cui mi sono allontanato dal prototipo, e a ragion veduta.
 *
 * Il prototipo mette in quasi-nero (#090909) sia il titolo sia il paragrafo,
 * anche sul riquadro grafite. Sul titolo funziona: e' alto ottanta pixel, il
 * tono-su-tono e' evidentemente voluto e si legge lo stesso - e' quello che
 * da' a questa sezione il suo carattere. Sul paragrafo no: quattordici pixel
 * a 1,46:1 di contrasto non li legge nessuno, e non e' uno stile, e' un testo
 * che c'e' ma non si puo' usare.
 *
 * Questo grigio caldo sta a 5,6:1 sul grafite - sopra la soglia - e resta
 * dentro la stessa tavolozza: non si nota che e' cambiato qualcosa, si nota
 * solo che adesso si legge. */
.slgn-carta--scuro .slgn-carta__testo p { color: #a9a7a2; }

/* 1,08 e' interlinea da titolo, non da testo: su due righe la 'g' di
   "Brand strategy" andava a toccare la maiuscola della riga sotto. A questo
   corpo il carattere occupa 1,23 em fra il punto piu' alto e il piu' basso:
   1,3 e' quello con un filo d'aria, e su una riga sola non cambia niente. */
.slgn-carta__testo p {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(13px, .92vw, 18px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.06em;
}

/* Le due carte di una riga entrano una dopo l'altra, non insieme: sfalsate
   di un decimo di secondo si legge che sono due, insieme sembrano un blocco
   unico che compare. */
.slgn-js .slgn-v2 [data-slgn-coppia] .slgn-carta {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(64px) scale(.985);
  transition:
    opacity .9s var(--v2-ease),
    filter 1.1s var(--v2-ease),
    transform 1.1s var(--v2-ease);
}

.slgn-js .slgn-v2 [data-slgn-coppia].is-in .slgn-carta {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

.slgn-js .slgn-v2 [data-slgn-coppia].is-in .slgn-carta:nth-child(2) {
  transition-delay: .13s;
}

@media (max-width: 900px) {
  .slgn-coppie__riga { grid-template-columns: 1fr; }

  /* Sul telefono le caselle sono in colonna, quindi sono sei schermate in
     fila: a 68svh l'una si scorreva mezzo minuto per leggere sei parole.
     48svh ne mostra sempre una intera con l'inizio della successiva, che e'
     anche il modo di far capire che sotto ce n'e' un'altra. */
  .slgn-carta { height: 48svh; min-height: 340px; padding: 28px 20px; }
  .slgn-carta__testo h3 { font-size: clamp(46px, 12vw, 76px); }
}


/* ------------------------------------------------------------------ *
 * La vetrina a scorrimento
 *
 * L'altezza della sezione la scrive il JavaScript: dipende da quanto e'
 * largo il binario, che dipende da quanti progetti ci sono. Qui c'e' solo il
 * minimo perche' la pagina stia in piedi anche se quel calcolo non arriva.
 * ------------------------------------------------------------------ */

.slgn-v2 .slgn-vetrina {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  background: var(--v2-nero);
  color: #f6f5f2;
}

/* UNA FASCIA SOLA: LA FILA, CHE COMINCIA DAL TITOLO.
 *
 * Qui c'e' stata una griglia a due fasce - il titolo e il pulsante sopra, la
 * fila delle schede sotto - nata per chiudere una sovrapposizione: prima
 * erano tutti in assoluto, con misure prese dall'altezza della finestra, e su
 * 1920x945 il titolo finiva stampato sopra alla prima scheda.
 *
 * Quel difetto la griglia lo ha chiuso, ma ne lasciava uno di disegno: il
 * titolo restava fermo in cima per tutta la corsa e si teneva un terzo
 * dell'altezza della schermata anche quando erano gia' passate tutte le
 * schede. Adesso il titolo e' il PRIMO PANNELLO della fila (vedi
 * block-vetrina.php): si legge per primo, scorre via con gli altri, e la
 * fascia che occupava torna alle schede - che infatti crescono.
 *
 * Percio' qui resta una casella sola, e dentro c'e' il binario. Il pulsante
 * non ha piu' una cella sua: sta sotto al titolo, dentro al primo pannello,
 * perche' "Tutti i lavori" appartiene alla testa della sezione e non alla
 * fila.
 *
 * Lo script della vetrina non si accorge di niente: misura i figli del
 * binario con getBoundingClientRect, e il pannello del titolo e' un figlio
 * come gli altri. */
.slgn-vetrina__fisso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);

  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;

  /* Il minimo scende da 720 a 640: adesso e' la fila a stringersi quando lo
     spazio manca, e un minimo piu' alto della finestra e' proprio il modo di
     far smettere di funzionare 'position: sticky' senza che nessuno dica
     niente. */
  min-height: 640px;

  /* Sopra, il posto per l'intestazione: e' incollata in cima e passa sopra a
     tutto, e a 9vh su una finestra bassa - o a 5svh sul telefono -
     l'occhiello "Selected work" ci finiva sotto. Sotto, il posto per la
     barra di avanzamento, che resta in assoluto a 30 pixel dal fondo. */
  padding: clamp(88px, 8.5vh, 116px) 0 clamp(46px, 5.5vh, 68px);
  overflow: hidden;
}

/* IL PANNELLO DEL TITOLO: PRIMO DELLA FILA, LARGO QUANTO IL TITOLO.
 *
 * 'max-content' e non una frazione della finestra: il pannello e' largo
 * quanto la riga piu' lunga del titolo, ne' un pixel di piu'. Con una misura
 * fissa un titolo corto lascerebbe un buco prima della prima scheda, e un
 * titolo lungo uscirebbe dal suo pannello per finire sopra a quella scheda -
 * che e' esattamente il difetto da cui questa sezione era partita.
 *
 * Il tetto serve al caso limite: un titolo di dieci parole scritte di
 * seguito diventerebbe un pannello largo tre schermate, e a quel punto va a
 * capo invece di allungare la corsa.
 *
 * Il rientro da sinistra non e' qui: lo fa il padding del binario, che e' lo
 * stesso margine di pagina di tutto il resto. */
.slgn-vetrina__testa {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: min(76vw, 1180px);
  margin: 0;
}

.slgn-vetrina__testa p {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Uno spazio in piu' fra le parole.
 *
 * Il prototipo stringe le lettere di -.06em e con il suo carattere gli spazi
 * reggono. Il nostro, a peso 900, e' molto piu' stretto di suo: alla stessa
 * misura le parole si toccavano e "alcuni progetti" si leggeva come una
 * parola sola. La compensazione va sullo spazio, non sulle lettere: allargare
 * la crenatura avrebbe sciolto il blocco di testo, che e' proprio la cosa che
 * a questa scala si vuole. */
.slgn-v2 .slgn-vetrina__testa h2,
.slgn-v2 .slgn-cta__title,
.slgn-carta__testo h3,
.slgn-prog__meta h3 { word-spacing: .16em; }

/* IL CORPO, CHE ADESSO PUO' ESSERE QUELLO GIUSTO.
 *
 * Era 'clamp(50px, min(5.4vw, 8.3vh), 104px)', e quel min con i vh non era
 * un capriccio: il titolo divideva l'altezza della schermata con le schede,
 * e ogni pixel che si prendeva lo toglieva a loro. Su 1920x945 finiva a 78
 * pixel - un titolo di sezione, non l'insegna che questa fila merita.
 *
 * Da quando e' un pannello suo dentro alla fila, l'altezza non la divide con
 * nessuno: cresce in orizzontale, dove lo spazio non manca perche' lo fa lui.
 * Il tetto in vh resta ma largo - 22vh contro 8,3 - e serve soltanto a non
 * far diventare il titolo piu' alto della scheda che gli sta accanto su una
 * finestra bassa. */
.slgn-vetrina__testa h2 {
  margin: 0;
  font-size: clamp(56px, min(9.4vw, 22vh), 190px);
  font-weight: 900;
  line-height: var(--v2-interlinea-alta);
  letter-spacing: -.06em;
  text-transform: uppercase;
}

/* Il pulsante sta sotto al titolo, dentro al primo pannello, appoggiato al
   suo bordo sinistro: e' l'ultima cosa della testa, e scorre via con lei. */
.slgn-vetrina__azione {
  align-self: start;
  position: relative;
  z-index: 3;
  margin: clamp(26px, 3.4vh, 52px) 0 0;
}

.slgn-vetrina__binario {
  display: flex;

  grid-area: 1 / 1 / -1 / -1;

  /* LE COPERTINE STANNO TUTTE SULLA STESSA RIGA.
   *
   * Con 'stretch' ogni scheda era alta quanto la fascia e centrava dentro di
   * se' il proprio contenuto: copertina PIU' didascalia. Ma la didascalia non
   * e' alta uguale su tutte - basta un nome che va a capo per aggiungerle una
   * riga - e centrare un blocco piu' alto abbassa la copertina di mezza riga.
   * Il risultato era una fila di fotografie sfalsate, e la causa non si
   * vedeva perche' stava nel testo sotto.
   *
   * Adesso la scheda e' alta quanto la sua copertina e basta: la didascalia
   * esce dal flusso (vedi '.slgn-vetrina__binario .slgn-prog__meta' piu'
   * sotto). 'center' centra quindi copertine tutte della stessa misura, e la
   * fila e' una riga sola, dritta. */
  align-items: center;

  /* LE SCHEDE SI TOCCANO.
   *
   * Era '3.2vw', cioe' 44 pixel su una finestra da 1350. Il vuoto vero pero'
   * ne misurava 75: gli altri 31 li faceva la messa a fuoco, che rimpiccioliva
   * del 4 per cento le schede fuori dal centro (vedi piu' sotto, "La scheda al
   * centro della vetrina"). Per questo togliere il gap da solo non bastava, e
   * quella scala e' stata tolta insieme a lui: due mezze cause dello stesso
   * spazio.
   *
   * Il rientro in testa e in coda resta - e' quello che fa entrare la prima
   * scheda da dietro al titolo, e non e' spazio FRA le schede. */
  gap: 0;
  position: relative;
  height: 100%;
  width: max-content;

  /* Il rientro a sinistra e' grosso apposta: il primo progetto parte da
     dietro il titolo, cosi' la prima cosa che si muove entra in campo invece
     di essere gia' li' ferma. Vale col dito; sullo schermo grande no, vedi
     la regola qui sotto. */
  padding: 0 8vw 0 39vw;
  will-change: transform;
}

/* Il pannello del titolo non e' una slide, e non si attacca alla prima.
 *
 * Sta nella stessa fila delle schede - e' un figlio del binario come loro -
 * quindi il 'gap: 0' lo avrebbe appiccicato alla prima fotografia. Ma quello
 * era spazio fra un testo e un'immagine, non fra due slide: qui torna, alla
 * misura che il gap aveva prima. */
.slgn-vetrina__testa { margin-right: 3.2vw; }

/* Le slide restano senza cornice anche durante la riproduzione del video. */
.slgn-v2 .slgn-vetrina__binario .slgn-prog__quadro,
.slgn-v2 .slgn-vetrina__binario .slgn-prog__video {
  border: 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  .slgn-vetrina__testa { margin-right: 16px; }
}

/* DUE BORDI ATTACCATI SONO UNA RIGA DOPPIA.
 *
 * Il riquadro di ogni scheda ha un filo di un pixel tutto intorno. Finche' le
 * schede erano staccate non si vedeva; ora che si toccano, sulla cucitura ne
 * arrivano due - due pixel dove ai due capi della fila ce n'e' uno, e si nota
 * proprio perche' e' l'unica riga della fila a essere piu' spessa.
 *
 * Il rientro di un pixel fa passare la scheda sotto al filo di quella prima:
 * la cucitura torna a essere un filo solo. Il conto della corsa non se ne
 * accorge, perche' v2.js misura le schede dove sono - con
 * getBoundingClientRect - e non sommando le misure scritte qui. */
.slgn-v2 .slgn-prog + .slgn-prog { margin-left: -1px; }

/* LE DIDASCALIE, CHE INVECE NON POSSONO TOCCARSI.
 *
 * La riga sotto alla fotografia porta il nome a sinistra e la categoria a
 * destra, tutti e due a filo del riquadro. Con le schede staccate funzionava;
 * attaccate, la categoria di una finiva contro il nome della successiva -
 * "ARCHITETTURA / INTERIOR" e "IL GABBIANO" diventavano una riga sola.
 *
 * Venti pixel per parte danno fra due didascalie vicine gli stessi quaranta
 * che il gap dava prima. Le fotografie restano attaccate: e' solo il testo a
 * prendersi l'aria che il testo chiede.
 *
 * Vale dentro al binario e non su '.slgn-prog__meta' in generale: la stessa
 * scheda la usa anche la griglia dell'archivio, dove le schede sono staccate
 * e la didascalia deve restare allineata al bordo dell'immagine. */
/* La didascalia non entra nel conto dell'altezza della scheda: e' appesa
   sotto al bordo inferiore della copertina, e la scheda misura quanto la
   copertina. E' questo che tiene le fotografie sulla stessa riga anche
   quando un titolo va a capo (vedi 'align-items' del binario). */
.slgn-vetrina__binario .slgn-prog { position: relative; }

.slgn-vetrina__binario .slgn-prog__meta {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* Sullo schermo grande la fila comincia e finisce dove comincia e finisce la
   pagina.
 *
 * Col dito il carosello e' un oggetto che si sfoglia, e la scheda al centro e'
 * quella che si sta guardando: li' il rientro grosso in testa e l'arrivo al
 * centro in coda hanno senso. Con il mouse no - si vede tutta la fila in una
 * volta, e una fila che parte a meta' schermo e finisce a meta' schermo sembra
 * semplicemente storta. Quindi: la prima scheda parte allineata al titolo, e
 * l'ultima si ferma quando il suo bordo destro arriva al margine.
 *
 * La stessa condizione governa il conto della corsa in v2.js (variabile
 * 'fino'): se si cambia qui, si cambia anche li', o il foglio e lo script
 * finiscono a raccontare due storie diverse. */
@media (hover: hover) and (pointer: fine) {
  .slgn-vetrina__binario { padding: 0 var(--v2-margine) 0 var(--v2-margine); }
}

/* LA SCHEDA E' CORICATA, 5:4, E LA LARGHEZZA VIENE DALL'ALTEZZA.
 *
 * Il formato e' una scelta di disegno, non una conseguenza: la vetrina e' una
 * fila che si scorre di lato, e una copertina coricata e' quella che si legge
 * mentre passa. La griglia dell'archivio resta in piedi, 4:5 - la' le schede
 * stanno in colonna, e il verticale e' quello che fa respirare la pagina - e
 * la differenza e' scritta li' sotto in una riga sola
 * ('.slgn-archivio .slgn-prog__quadro'), non nascosta in due comportamenti.
 *
 * Il verso del conto e' quello che conta. In corsia il vincolo e' l'ALTEZZA:
 * la fascia incollata e' quella della finestra, e una scheda piu' alta di
 * quella non si stringe, esce. Quindi si parte dall'altezza disponibile e si
 * ricava la larghezza (per 5/4), invece del contrario: cosi' il 5:4 e' esatto
 * su ogni finestra e non c'e' un secondo numero da tenere allineato.
 *
 * Restano gli altri due tetti - 58vw e 980px - perche' su una finestra bassa
 * e larga il conto sull'altezza darebbe una scheda piu' larga di mezzo
 * schermo. Vince il piu' piccolo dei tre, come sempre qui.
 *
 * La corsa da scorrere non va aggiornata: v2.js la misura sulle schede vere
 * con getBoundingClientRect, non su un numero scritto qui. */
.slgn-prog {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  width: min(58vw, 980px, calc(66vh * 5 / 4));
  color: inherit;
  text-decoration: none;
}

.slgn-prog__quadro {
  /* La misura del riquadro del video sta qui, in un posto solo: la usano il
     video e la grana che ci va sopra, e se i due numeri si scollassero la
     grana comparirebbe fuori dal video.
   *
   * Le due percentuali seguono la forma della scheda. Il riquadro deve
   * restare coricato intorno a 1,67:1 - e' il rapporto misurato sul
   * riferimento, ed e' quello in cui un filmato girato in orizzontale entra
   * senza essere sbucciato - e su una scheda 5:4 quel rapporto lo danno 80 e
   * 60 (0,80 per 5, diviso 0,60 per 4, fa 1,67). Se cambia il formato della
   * scheda vanno ricalcolate insieme a lui: sono percentuali della scheda,
   * non dello schermo. */
  --riquadro-l: 80%;
  --riquadro-h: 60%;

  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: relative;

  /* L'altezza non e' piu' scritta: la detta la larghezza della scheda, che a
     sua volta viene dall'altezza della finestra (vedi '.slgn-prog' sopra).
     'aspect-ratio' e non una seconda formula in vh perche' due formule si
     scollano - e quando si scollano il 5:4 non e' piu' 5:4 e nessuno se ne
     accorge finche' non lo misura. Questo e' anche il modo in cui la griglia
     dell'archivio tiene il suo formato da sempre. */
  height: auto;
  aspect-ratio: 5 / 4;

  /* Il pavimento a 340 pixel andava tolto: e' quello che impediva al
     riquadro di stringersi quando la finestra e' bassa, e una scheda che non
     si stringe e' una scheda che esce dalla sua fascia e finisce addosso a
     quello che ha sotto. La misura sopra resta quella giusta; questa dice
     soltanto che, se proprio non ci sta, il riquadro cede lui. */
  min-height: 0;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .18);
  overflow: hidden;
}

.slgn-prog__quadro img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La luminosita' entra nella transizione insieme alla scala: quando il
     video si accende la copertina si abbassa, e deve abbassarsi con lo
     stesso tempo con cui il video compare, o si vede prima il buio e poi
     il video. */
  transition: transform 1.1s var(--v2-ease), filter .3s var(--v2-ease);
}

.slgn-prog:hover .slgn-prog__quadro img { transform: scale(1.04); }

/* Il video e' un RIQUADRO DENTRO alla scheda, non un telo che la copre.
 *
 * Prima prendeva tutta la scheda - inset: 0, object-fit: cover - e al
 * passaggio del mouse la copertina spariva del tutto: la scheda cambiava
 * identita' invece di aprirsi. Il sito di riferimento (video-folio.framer.
 * website, quello indicato all'inizio) fa il contrario, e misurato sulla loro
 * pagina il rapporto e' questo: scheda 904x824, video 723x600, cioe' l'ottanta
 * per cento della larghezza e il settantatre' dell'altezza, centrato. La
 * copertina resta intorno come una cornice e si scurisce, e il video ci si
 * apre dentro.
 *
 * Il centraggio e' 'inset: 0' piu' 'margin: auto' con larghezza e altezza
 * dichiarate: e' il modo vecchio e solido di centrare un elemento assoluto
 * nei due versi, e non dipende da come e' impaginato il resto della scheda.
 *
 * La sorgente non sta in 'src' ma in un attributo dati: lo script la copia al
 * primo bisogno, perche' con 'src' scritto nel markup il browser scaricherebbe
 * tutti i video della vetrina subito.
 *
 * Lo z-index e' la chiave: a riposo (opacity: 0) il video sta SOTTO al numero
 * e alla didascalia (z-index: 0 contro il loro z-index: 1) cosi' un video
 * caricato ma trasparente non intercetta il passaggio del mouse. Quando il
 * video diventa visibile (classe .is-accesa o :hover) sale a z-index: 2. */
.slgn-prog__video {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--riquadro-l);
  height: var(--riquadro-h);
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 0;

  /* Non compare: MESSA A FUOCO.
   *
   * Il video entra sfocato e si fa nitido, e la scala serve a coprire i bordi
   * che la sfocatura mangia - un blur trascina il vuoto verso dentro, e senza
   * quel due per cento in piu' si vedrebbe una cornice smangiata per il tempo
   * della transizione. La messa a fuoco dura piu' della comparsa apposta: si
   * vede prima che c'e' qualcosa, e poi cosa e'. */
  filter: blur(13px) saturate(.86);
  transform: scale(1.02);
  transition:
    opacity .3s var(--v2-ease),
    filter .62s var(--v2-ease),
    transform .62s var(--v2-ease),
    z-index 0s .3s;
}

/* LA GRANA.
 *
 * La stessa dell'apertura del racconto - stesso disegno, stesso 'soft-light' -
 * perche' e' gia' la grana di questo sito e non ha senso inventarne una
 * seconda. Sta sopra al video (z-index 3 contro 2) e occupa esattamente il
 * suo riquadro, non tutta la scheda: la grana e' del filmato, non della
 * pagina.
 *
 * 'soft-light' invece di appoggiarci sopra un velo grigio: la grana cosi'
 * scurisce quello che e' gia' scuro e schiarisce quello che e' gia' chiaro,
 * che e' come si comporta la grana vera della pellicola. Un velo piatto
 * spegnerebbe il video e basta.
 *
 * Si muove a scatti - 'steps(4)' - perche' una grana che scorre liscia
 * diventa una texture che scivola, e si vede che e' finta. La pellicola
 * cambia disegno un fotogramma per volta. */
.slgn-prog__quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--riquadro-l);
  height: var(--riquadro-h);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
  filter: contrast(1.3);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E");
  background-size: 170px 170px;
  transition: opacity .42s var(--v2-ease);
}

@keyframes slgn-grana {
  0%   { background-position:   0px    0px; }
  25%  { background-position: -38px   22px; }
  50%  { background-position:  27px  -31px; }
  75%  { background-position: -19px  -14px; }
  100% { background-position:   0px    0px; }
}

/* La copertina si abbassa mentre il video e' acceso: e' quello che fa
   leggere il riquadro come un riquadro invece che come una toppa.
   Due regole perche' i due modi di accendersi sono diversi - il dito mette
   la classe dallo script, il mouse passa e basta - e ':has()' e' l'unico
   modo di risalire dal video alla copertina, che nel markup viene prima. */
.slgn-prog__quadro:has(.slgn-prog__video.is-accesa) img { filter: brightness(.42); }

@media (hover: hover) and (pointer: fine) {
  .slgn-v2 .slgn-prog:hover .slgn-prog__quadro img { filter: brightness(.42); }
}

/* Quando il video e' visibile (telefono: centro schermo; desktop: hover)
   sale sopra al numero e alla didascalia e li copre. Lo z-index cambia
   senza transizione ma con un ritardo uguale a quella dell'opacita', cosi'
   il salto di piano avviene quando il video e' gia' abbastanza opaco da
   non lasciare un buco visibile. */
.slgn-prog__video.is-accesa {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform: scale(1);
  z-index: 2;
  transition:
    opacity .3s var(--v2-ease),
    filter .62s var(--v2-ease),
    transform .62s var(--v2-ease),
    z-index 0s;
}

.slgn-prog__quadro:has(.slgn-prog__video.is-accesa)::after {
  opacity: .55;
  animation: slgn-grana .9s steps(4) infinite;
}

@media (hover: hover) and (pointer: fine) {
  .slgn-v2 .slgn-prog:hover .slgn-prog__video {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
    z-index: 2;
    transition:
      opacity .3s var(--v2-ease),
      filter .62s var(--v2-ease),
      transform .62s var(--v2-ease),
      z-index 0s;
  }

  .slgn-v2 .slgn-prog:hover .slgn-prog__quadro::after {
    opacity: .55;
    animation: slgn-grana .9s steps(4) infinite;
  }
}

/* Il segnaposto di una scheda senza copertina. Il corpo scende da 12vw a 7vw
   perche' la scheda si e' stretta: 12vw erano 173 pixel dentro un riquadro
   largo 835, e sono gli stessi 173 dentro un riquadro largo 475 - cioe' un
   numero che tocca i due bordi. */
.slgn-prog__quadro > span {
  position: relative;
  z-index: 1;
  font-size: clamp(64px, 7vw, 132px);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.08em;
}

.slgn-prog__quadro small {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.slgn-prog--argento .slgn-prog__quadro { background: #c9c9c6; color: #171717; }
.slgn-prog--grafite .slgn-prog__quadro { background: #282826; color: #efefec; }
.slgn-prog--carta   .slgn-prog__quadro { background: #e8e7e2; color: #111; }
.slgn-prog--cromo   .slgn-prog__quadro {
  background: linear-gradient(135deg, #111 0%, #747474 48%, #1a1a1a 100%);
  color: #f5f5f2;
}

.slgn-prog__meta {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  padding: 18px 0 0;
}

.slgn-prog__meta h3 {
  margin: 0;
  font-size: clamp(26px, 2.5vw, 48px);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.slgn-prog__meta p {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.slgn-vetrina__barra {
  position: absolute;
  bottom: 30px;
  left: var(--v2-margine);
  right: var(--v2-margine);
  height: 1px;
  background: rgba(255, 255, 255, .18);
}

.slgn-vetrina__barra i {
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  transform: scaleX(var(--avanzamento, 0));
  transform-origin: 0;
}

/* Sul telefono cambiano le proporzioni, non l'impaginazione.
 *
 * Qui c'era un carosello da trascinare, ed era una risposta sbagliata a un
 * problema vero. Il problema: su schermo grande la sezione si incolla e i
 * progetti passano di lato mentre si scorre, e sembrava troppo per un
 * telefono. La risposta era sostituire quel movimento con un altro gesto -
 * il trascinamento orizzontale - e il risultato erano due scorrimenti nello
 * stesso posto: si scorreva la pagina, la sezione passava, e i progetti
 * restavano fermi. Chi ci arrivava vedeva una scheda e mezza e tirava
 * dritto, perche' non c'era niente che chiedesse di fare il secondo gesto.
 *
 * Adesso il telefono fa la stessa cosa dello schermo grande, e c'e' un gesto
 * solo: si scorre la pagina. Le misure sono quelle di 360 pixel - la scheda
 * al 74 per cento della larghezza, cosi' la successiva si vede sempre per un
 * quarto - ma il meccanismo e' identico, e identico e' il codice che lo
 * muove. */
@media (max-width: 900px) {
  /* Fascia compatta in ingresso, centrata nella schermata durante lo sticky.
     L'altezza segue le copertine 5:4, con spazio per titolo e didascalie. */
  .slgn-v2 .slgn-vetrina { min-height: 0; }

  .slgn-vetrina__fisso {
    --vetrina-spazio: max(80px, calc(var(--vetrina-meta, 60px) + 40px));
    --vetrina-altezza: min(100svh, calc(min(76.8vw, 480px, 58svh) + var(--vetrina-spazio) * 2));
    top: calc((100svh - var(--vetrina-altezza)) / 2);
    height: var(--vetrina-altezza);
    min-height: 0;
    padding: var(--vetrina-spazio) 0;
  }

  .slgn-vetrina__barra {
    bottom: 12px;
    pointer-events: none;
  }

  .slgn-vetrina__binario {
    top: 0;
  }

  /* Il pannello del titolo si ferma prima del bordo: dopo di lui si deve
     vedere che comincia una fila, se no sembra una schermata sola. */
  .slgn-vetrina__testa { max-width: 76vw; }

  /* Il tetto non e' piu' la larghezza dello schermo ma quella del pannello,
     e il corpo puo' salire: a 13vw "PORTFOLIO" misura 72vw su un telefono da
     390, cioe' sta dentro al 76 con un dito di gioco. Un titolo piu' lungo
     va a capo dentro al pannello, che e' quello che deve fare. */
  .slgn-vetrina__testa h2 { font-size: clamp(38px, 13vw, 92px); }
  .slgn-vetrina__testa p { margin-bottom: 14px; }
  .slgn-vetrina__azione { margin-top: 24px; }

  /* La fila stava appesa al titolo invece che in mezzo, e la si scendeva a
   * mano di un paio di punti di schermata. Adesso sta al centro della sua
   * fascia da sola: il '36svh' non serve piu' e sarebbe anzi un numero che
   * torna a litigare con l'altezza del titolo. */
  .slgn-vetrina__binario {
    gap: 0;

    /* Il rientro di 39vw serve su schermo largo a far entrare in campo la
       prima scheda da dietro il titolo. Su 360 pixel sarebbero 140, cioe'
       mezzo schermo di vuoto prima di cominciare: qui basta il margine. */
    padding: 0 18vw 0 var(--v2-margine);
  }

  /* LE PROPORZIONI, che sono la cosa che si vede.
   *
   * Il formato e' lo stesso dello schermo grande - 5:4 coricato - perche' la
   * vetrina e' la stessa fila: una copertina coricata sul portatile e in
   * piedi sul telefono sarebbe un secondo disegno da mantenere, e la
   * fotografia sotto e' la stessa.
   *
   * Cambia solo il verso del conto. Sullo schermo grande il vincolo e'
   * l'altezza della fascia incollata e la larghezza si ricava da quella; sul
   * telefono e' il contrario - lo schermo e' stretto e la fascia e' alta, la
   * larghezza e' il vincolo - quindi qui si scrive la larghezza e l'altezza
   * la fa 'aspect-ratio' della regola di base.
   *
   * Il terzo tetto in svh serve al telefono coricato, dove la fascia diventa
   * bassa e larga: senza, la scheda uscirebbe dalla fascia. Il 96vw e' quanto
   * si puo' prendere lasciando ancora intravedere il bordo della scheda
   * dopo - e' cosi' che si capisce che e' una fila e non una schermata. */
  .slgn-prog { width: min(96vw, 600px, calc(58svh * 5 / 4)); }

  .slgn-prog__quadro {
    min-height: 0;
    padding: 16px;
  }

  .slgn-prog__quadro > span { font-size: clamp(42px, 13vw, 76px); }

  .slgn-prog__meta { display: block; padding-top: 14px; }
  .slgn-prog__meta p { margin-top: 6px; }

}


/* FINESTRE BASSE.
 *
 * Su uno schermo largo ma corto - un portatile da 1440x700, una finestra non
 * a tutto schermo - la composizione a misura piena non ci sta: titolo a tre
 * righe da 78 pixel, scheda da 46vh, pulsante e barra fanno piu' della
 * finestra. La griglia impedisce le sovrapposizioni ma per farlo stringe la
 * scheda fino a un francobollo, con il numero che le esce fuori.
 *
 * Sotto gli 820 pixel di altezza titolo e numero scendono di un gradino, e i
 * conti tornano: la scheda resta sopra i duecento pixel e il numero dentro
 * al suo riquadro. Sopra gli 820 - dove la composizione ci sta - non cambia
 * niente. */
@media (min-width: 901px) and (max-height: 820px) {
  .slgn-vetrina__fisso { padding-top: clamp(84px, 11vh, 104px); }
  .slgn-vetrina__testa h2 { font-size: clamp(40px, 4vw, 64px); }
  .slgn-prog__quadro > span { font-size: clamp(56px, 8vw, 124px); }
}


/* ------------------------------------------------------------------ *
 * Il campo da gioco
 * ------------------------------------------------------------------ */

/* UNA FRASE NON RIEMPIE UNA SCHERMATA.
 *
 * Qui dentro c'e' una frase di quattro righe e un pulsante: 390 pixel di
 * contenuto in una sezione che ne prendeva 900, con 255 di vuoto sopra e 254
 * sotto misurati in pagina. Il vuoto non e' quello che fa funzionare questa
 * sezione - a farla funzionare e' il tono basso della frase, che resta - ed
 * era anzi quello che la faceva sembrare una pagina non finita.
 *
 * 78svh: la frase respira ancora e non tocca i bordi, ma sotto si intravede
 * la sezione che segue. Il rientro cala con l'altezza, o sarebbe il rientro
 * a decidere la sezione al posto del minimo. */
.slgn-v2 .slgn-gioco {
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
  min-height: 78vh;
  min-height: 78svh;
  padding: clamp(70px, 9vh, 120px) var(--v2-margine);
  background: var(--v2-nero);
  color: #f7f7f4;
  overflow: hidden;
}

.slgn-gioco__dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  width: min(1380px, 91vw);
  text-align: center;
}

.slgn-gioco__dentro h2 {
  margin: 0;
  font-size: clamp(46px, 4.2vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.06em;

  /* In tondo, non in maiuscolo, e a peso normale: e' l'unica voce bassa
     della pagina. Tutto il resto della Story urla in maiuscolo nero, e questa
     sezione funziona proprio perche' non lo fa - e' una frase detta piano in
     mezzo a un discorso a voce alta. Il maiuscolo arriva dalla regola
     generale del sito sui titoli, e qui va tolto. */
  text-transform: none;
}

/* Lo stacco fra la frase e il pulsante era di 90 pixel misurati: tanti da
   far sembrare il pulsante appoggiato alla sezione invece che alla frase che
   lo chiede. Meta' bastano a tenerli distinti. */
.slgn-gioco__cta {
  position: relative;
  z-index: 3;
  margin-top: clamp(38px, 5vh, 64px);
  padding: 21px 30px 19px;
  border: 1px solid rgba(255, 255, 255, .92);
  color: inherit;
  font-size: clamp(15px, 1.2vw, 21px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .28s var(--v2-ease), color .28s var(--v2-ease);
}

.slgn-gioco__cta:hover,
.slgn-gioco__cta:focus-visible {
  background: #f7f7f4;
  color: var(--v2-nero);
}

/* La specificita' e' alzata apposta, e vale la pena spiegare perche'.
 *
 * site.css contiene '.slgn-ws .slgn-sec > * { position: relative }' - una
 * regola sensata, che tiene i figli diretti di una sezione dentro il flusso -
 * e pesa due classi contro la mia una. Vinceva lei: il contenitore della scia
 * tornava 'relative', si trovava largo zero perche' non aveva niente dentro
 * che occupasse spazio, e le immagini - che ereditano 'max-width: 100%' dal
 * tema - venivano schiacciate a zero pixel di larghezza. Erano tutte li',
 * animate e visibili secondo il browser, larghe niente.
 *
 * La lezione: un contenitore vuoto e posizionato non e' mai al sicuro dalle
 * regole generiche sui figli, e un 'max-width: 100%' trasforma un genitore
 * largo zero in figli larghi zero senza dire niente a nessuno. */
.slgn-v2 .slgn-gioco .slgn-gioco__scia {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.slgn-gioco__scia img {
  position: absolute;
  top: 0;
  left: 0;
  /* La misura arriva dal builder come variabile sull'elemento; i valori qui
     sono quelli del prototipo, e valgono se nessuno ha scelto niente. */
  width: var(--scia-largh, 220px);
  height: var(--scia-alt, 300px);

  /* Il tema mette 'max-width: 100%' su ogni immagine. Qui la misura la decide
     il builder, e il contenitore non c'entra: se domani quel contenitore
     tornasse largo zero per un altro motivo, la scia non deve sparire. */
  max-width: none;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(.6);
  transform-origin: 50%;
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  .slgn-v2 .slgn-gioco { min-height: 82svh; padding: 110px 20px; }
  .slgn-gioco__dentro { width: 100%; }
  .slgn-gioco__dentro h2 { font-size: clamp(38px, 11.6vw, 68px); line-height: 1; }
  .slgn-gioco__cta { margin-top: 64px; padding: 18px 24px 16px; font-size: 15px; }
  .slgn-gioco__scia { display: none; }
}


/* ------------------------------------------------------------------ *
 * La chiusura
 * ------------------------------------------------------------------ */

/* Una colonna sola, allineata a sinistra.
 *
 * Nel prototipo la chiusura e' un blocco solo dentro un contenitore che lo
 * centra verticalmente; nel nostro blocco i figli sono tre e fratelli -
 * occhiello, titolo, pulsante. Un 'display: flex' senza direzione li mette in
 * riga, ed e' esattamente quello che era successo: la domanda a sinistra, il
 * titolo in mezzo, il pulsante a destra. Corretto e brutto.
 *
 * Vanno tolti anche i margini automatici e il testo centrato che la chiusura
 * eredita dal sito: nella prima versione questa sezione e' centrata, qui e'
 * un titolo enorme appoggiato al margine sinistro. */
/* La chiusura resta la schermata piu' piena della pagina - un titolo di
   quattro righe a corpo enorme - ma non ha bisogno del minimo a schermata
   intera: il titolo da solo ne occupa gia' 500 e passa, e il minimo serviva
   solo a tenere i 100 pixel di vuoto sopra e i 90 sotto che si vedevano in
   pagina. Con 82svh il titolo comanda l'altezza, che e' il verso giusto. */
.slgn-v2 .slgn-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 82vh;
  min-height: 82svh;
  padding: clamp(64px, 7.5vh, 112px) var(--v2-margine);
  background: var(--v2-carta);
  color: var(--v2-inchiostro);
  text-align: left;
}

.slgn-v2 .slgn-cta__occhiello {
  margin: 0 0 40px;
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.slgn-v2 .slgn-cta__title {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(66px, 8.8vw, 168px);
  font-weight: 900;
  line-height: var(--v2-interlinea-alta);
  letter-spacing: -.06em;
  text-transform: uppercase;
}

/* L'ACCENTO DELLA CHIUSURA: LO STESSO CORSIVO DELL'APERTURA, IN NERO.
 *
 * La parola fra asterischi - "piace." - qui arrivava dal '@supports' di
 * site.css come contorno chiaro: 'color: transparent' e un filo di 1,3 pixel
 * color carta. Su fondo nero e' l'effetto voluto; su questa sezione, che in
 * v2 e' avorio, e' chiaro su chiaro e la parola sparisce - misurato in
 * pagina: filo #ece9e1 su fondo #eeedea, cioe' niente.
 *
 * Invece di rimettere il filo in scuro, l'accento diventa quello della
 * Story: corsivo con le grazie contro il grottesco nero. Cosi' la pagina si
 * chiude come si e' aperta, e qui in inchiostro perche' il fondo e' carta.
 *
 * Le tre righe che spengono il contorno non sono ridondanti: 'color' e
 * '-webkit-text-stroke' disfano la regola dentro al '@supports' di site.css,
 * il 'text-shadow' toglie l'alone che serviva a staccare un filo dal fondo
 * nero e che sotto una parola piena diventa sporco.
 *
 * Il peso torna a 400: Georgia ha un corsivo solo, e chiedergli il 900 del
 * titolo vuol dire farlo ingrassare al browser.
 *
 * IL MAIUSCOLO DEL TITOLO SI FERMA QUI.
 *
 * '.slgn-cta__title' porta 'text-transform: uppercase' su tutta la frase, e
 * l'accento se lo prendeva come tutto il resto: usciva "PIACE.", un corsivo
 * con le grazie tutto in capitali. Il maiuscolo e' quello che da' alla
 * chiusura il suo peso, quindi resta sulle altre quindici parole; sulla
 * sedicesima no, perche' il senso dello stacco e' proprio che quella parola
 * non e' come le altre - e un corsivo minuscolo in mezzo a un grottesco
 * maiuscolo si vede da lontano piu' di quanto si vedesse la stessa parola
 * urlata insieme a loro.
 *
 * IL 12% CHE PAREGGIA LE DUE FACCE.
 *
 * Due caratteri allo stesso corpo non hanno la stessa taglia apparente, e la
 * misura che decide non e' la maiuscola: e' l'altezza della x. In Inter
 * Tight sta a .55 em, in Georgia a .49 - .55 / .49 = 1.12. E' lo stesso
 * numero dell'apertura della Story, e per lo stesso motivo: da quando
 * l'accento e' minuscolo, il paragone giusto e' fra le x. Finche' usciva
 * "PIACE." il numero era 1.05, cioe' il rapporto fra le maiuscole.
 *
 * E l'interlinea si riporta indietro dello stesso 12%: senza unita' si
 * eredita come numero e si moltiplica per il corpo di CHI la usa, e le
 * parole sono inline-block, quindi il .98 di sopra su un corpo maggiorato
 * darebbe una riga piu' alta delle altre. .875 e' .98 / 1.12. Misurato in
 * pagina: le cinque righe del titolo restano alte 165 pixel esatte, quella
 * con l'accento compresa. */
.slgn-v2 .slgn-cta__title .slgn-word--em {
  color: var(--v2-inchiostro);
  -webkit-text-stroke: 0;
  text-shadow: none;
  font-family: var(--ws-serif, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 1.12em;
  line-height: .875;
}

/* Chi legge con il contrasto alzato dal sistema riporta a pieno tutte le
   parole a filo (site.css, in fondo al blocco del contorno), ma lo fa in
   carta: giusto sul nero di tutto il resto del sito, invisibile qui. Il
   contorno in questa sezione non c'e' gia' piu' - resta solo da tenere il
   colore, e serve l'!important perche' quella regola ce l'ha. */
@media (prefers-contrast: more) {
  .slgn-v2 .slgn-cta__title .slgn-word--em { color: var(--v2-inchiostro) !important; }
}

/* Il pulsante diventa una riga fra due filetti: alla scala di questo titolo
   un bottone pieno sembrerebbe un francobollo. */
.slgn-v2 .slgn-cta .slgn-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(230px, 44vw);
  margin-top: clamp(54px, 8vh, 92px);
  padding: 17px 0;
  border: 0;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.slgn-v2 .slgn-cta .slgn-btn i { transition: transform .3s var(--v2-ease); }
.slgn-v2 .slgn-cta .slgn-btn:hover i { transform: translate(4px, -4px); }

@media (max-width: 900px) {
  /* Misurato, non stimato: a 16vw la parola "RACCONTATECI" viene larga 446
     pixel su uno schermo che ne ha 355. Una parola sola piu' larga dello
     schermo non si puo' mandare a capo, e resta tagliata a meta'. A 12vw sta
     dentro con una decina di pixel di margine. */
  .slgn-v2 .slgn-cta__title { font-size: clamp(42px, 12vw, 108px); }
}


/* ------------------------------------------------------------------ *
 * La testata
 *
 * Stessa barra della prima versione, altro vestito: trasparente, appoggiata
 * sull'apertura invece che fissata sopra, senza il filo di avanzamento e
 * senza l'ombra. Qui la testata non deve accompagnare la lettura - deve
 * togliersi di mezzo e lasciare la schermata al titolo.
 * ------------------------------------------------------------------ */

.slgn-hdr--v2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: none;
  border: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, .92);
}

.slgn-hdr--v2::before,
.slgn-hdr--v2::after { display: none; }

/* LA TESTATA SU UN FONDO CHIARO: SI RIBALTA, NON SI VELA.
 *
 * La testata della Story e' bianca e trasparente, e su un'apertura nera si
 * legge benissimo. Sulla pagina S-Logan no: sotto c'e' il video di Logan, che
 * e' un cane bianco su fondo bianco, e "SLOGAN STUDIO" in bianco su quello
 * non si legge - il marchio tondo spariva del tutto.
 *
 * Il primo tentativo era un velo nero sfumato dietro alla testata. Funzionava
 * e faceva schifo: un alone scuro appiccicato in cima a tutte le pagine, per
 * risolvere il problema di una.
 *
 * 'filter: invert(1)' non aggiunge niente alla pagina, ribalta quello che c'e'
 * gia': il bianco diventa nero, e su un fondo chiaro si legge esattamente
 * come il bianco si leggeva sul nero. Vale per il marchio (che e' una
 * fotografia, quindi nessun colore da riscrivere) e per le voci del menu.
 *
 * E vale per la zampa del telefono, che e' l'unica cosa che resta in barra
 * quando le voci spariscono. Il commento qui sotto diceva di non toccarla:
 * era vero finche' il tasto aveva il suo fondo avorio con i trattini scuri,
 * che si leggeva su qualunque cosa. Ora il tasto e' senza cornice - solo la
 * zampa bianca e la scritta - quindi sul cane bianco sparisce esattamente
 * come spariva il marchio, e va ribaltata insieme al resto.
 *
 * Solo a menu chiuso, pero'. Aperto, il pannello sotto e' nero a tutto
 * schermo: li' il bianco e' gia' giusto e ribaltarlo darebbe una zampa nera
 * sul nero, cioe' il difetto di partenza spostato di un tocco.
 *
 * Perche' non 'mix-blend-mode: difference' come nella riga in fondo al
 * racconto: li' funziona perche' la scena e' un contesto isolato e il video
 * sta dentro. La testata invece ha un suo z-index, quindi e' un contesto a
 * parte: la pagina dietro non entra nella mescola e la differenza non
 * vedrebbe niente da ribaltare.
 *
 * La classe la mette lo script del racconto, che e' l'unico a sapere quanto
 * e' chiaro il fondo in questo momento: sale il vetro sfumato, il fondo
 * diventa scuro, e la testata torna bianca.
 *
 * E si ribalta SOLO finche' la testata e' appoggiata sulla pagina. Appena si
 * attacca in alto - 'is-scrolled', che e' anche il momento in cui compaiono
 * il suo velo di fondo e la barra di avanzamento - il fondo non e' piu' il
 * video ma il velo scuro della testata stessa, e li' il bianco e' giusto:
 * ribaltarlo darebbe nero su scuro, cioe' il difetto di partenza al
 * contrario. */
.slgn-fondo-chiaro .slgn-hdr--v2:not(.is-scrolled) .slgn-hdr__mark,
.slgn-fondo-chiaro .slgn-hdr--v2:not(.is-scrolled) .slgn-hdr__nav,
.slgn-fondo-chiaro .slgn-hdr--v2:not(.is-scrolled) .slgn-hdr__tasto--zampa[aria-expanded="false"] { filter: invert(1); }

/* Il marchio sta sul margine della pagina, e prima non ci stava.
 *
 * Due difetti sommati, che e' letteralmente quello che succedeva.
 *
 *   Il rientro era doppio. '.slgn-hdr__bar' porta gia' il suo
 *   'padding-inline: var(--ws-pad)', e qui se ne aggiungeva un altro: su
 *   telefono venti piu' venti, quindi il logo partiva da quaranta mentre il
 *   titolo dell'apertura, sotto, partiva da venti. Si vedeva, ed e' il
 *   genere di disallineamento che non si sa spiegare ma si nota.
 *
 *   E il contenitore non era quello della pagina. 'min(84rem, 100%)'
 *   centrato e' il contenitore della prima versione; la seconda impagina a
 *   tutta larghezza col suo margine, e le due cose non coincidono mai. Su
 *   uno schermo da 1440 il logo finiva centoquindici pixel dentro contro i
 *   sessantasette del titolo.
 *
 * Adesso e' una misura sola, '--v2-margine', la stessa che usa tutto il
 * resto della Story. */
.slgn-hdr--v2 .slgn-hdr__bar { padding-inline: 0; }

.slgn-hdr--v2 .slgn-hdr__in {
  width: 100%;
  max-width: none;
  height: 74px;
  padding: 0 var(--v2-margine, 4.65vw);
}

.slgn-hdr--v2 .slgn-hdr__nav { gap: clamp(38px, 5.35vw, 104px); }

/* SOTTO I 1180 CADONO I NUMERI E SI STRINGONO GLI SPAZI.
 *
 * Le voci in fila spariscono nel pannello a 899 pixel, ma fra 900 e 1180 il
 * conto non torna lo stesso. Misurato a 1024: le cinque voci con i loro
 * numeri fanno 366 pixel e i quattro spazi da 5,35vw ne fanno 219, totale 585
 * in una colonna che ne ha 526. Il di piu' non manda a capo - e' una riga
 * flex - ma esce a destra, e "CONTATTI" finiva stampato sotto al tasto
 * "PARLIAMONE". A 901 pixel, il caso peggiore perche' e' il primo in cui le
 * voci si vedono, servivano 445 pixel dentro a 422.
 *
 * Cade il numero e non la voce: e' l'unico pezzo decorativo dei due, lo
 * stesso segno che numera i servizi, e nel pannello del telefono resta.
 * Senza numeri le cinque voci stanno in 422 a 901 pixel - esattamente la
 * colonna disponibile - e lo spazio piu' stretto le tiene comode fino a
 * 1180, dove tutto torna come prima. */
@media (max-width: 1180px) {
  .slgn-hdr--v2 .slgn-hdr__nav { gap: clamp(12px, 2vw, 30px); }
  .slgn-hdr--v2 .slgn-hdr__nav .slgn-hdr__vn { display: none; }
}

.slgn-hdr--v2 .slgn-hdr__lista a,
.slgn-hdr--v2 .slgn-hdr__nav a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.slgn-hdr--v2 .slgn-hdr__n,
.slgn-hdr--v2 .slgn-hdr__vn { font-size: 7px; letter-spacing: .04em; }

/* Il tasto del menu: un quadrato, non un lastrone.
 *
 * Aveva 'min-width: 136px' e venti pixel di rientro per parte, misure prese
 * dal pulsante MENU del prototipo - che pero' e' un pulsante CON LA PAROLA
 * DENTRO. Qui dentro ci sono due trattini e basta, e il pulsante compare
 * soltanto sotto i 900 pixel: su un telefono da 360 diventava un rettangolo
 * avorio largo un terzo dello schermo che finiva SOPRA al marchio - marchio
 * 40-231, pulsante 184-320, quarantasette pixel di sovrapposizione - e
 * copriva a meta' la riga "Studio creativo, Roma".
 *
 * Quarantaquattro per quarantaquattro: il quadrato che serve ai due
 * trattini, e la misura minima di un bersaglio da dito. L'avorio resta,
 * perche' su una fotografia scura e' l'unica cosa che si trova al primo
 * colpo d'occhio. */
.slgn-hdr--v2 .slgn-hdr__tasto {
  min-width: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(245, 245, 242, .94);
  color: #111;
}

.slgn-hdr--v2 .slgn-hdr__tasto:hover { background: #fff; }

/* Sul telefono la testata appiccicata serve piu' che su schermo grande: le
 * pagine della Story sono lunghe (la home fa quasi ottomila pixel) e senza
 * testata bisogna risalire tutto per cambiare pagina.
 *
 * Su schermo grande resta 'absolute': li' l'apertura e' una schermata sola
 * e la testata appoggiata sopra e' proprio l'effetto voluto dal prototipo.
 *
 * La barra di avanzamento e la classe 'is-scrolled' non sono roba nuova: le
 * scrive gia' chrome.js su tutte e due le versioni, e qui si smette solo di
 * nasconderle. Il velo di fondo e lo scroll-progress restano spenti finche'
 * chrome.js non aggiunge 'is-scrolled' - in cima alla pagina la testata e'
 * trasparente e il contenuto si vede sotto. */
@media (max-width: 900px) {
  .slgn-hdr--v2 {
    position: sticky;
    top: 0;
    /* margin-bottom: -74px toglie dal flusso esattamente l'ingombro della
     * testata (height: 74px dichiarato in .slgn-hdr--v2 .slgn-hdr__in qui
     * sopra): il contenuto che segue ricomincia da zero e il pelo torna a
     * galleggiare sotto la testata, ma lei resta appiccicata allo scroll.
     * Se cambia una delle due, va cambiata anche l'altra.
     * left: auto; right: auto perche' quei due valori servivano a
     * position: absolute: su un elemento sticky non sono posizione ma bordi
     * orizzontali, qui inutili, e vale la pena non lasciarli scritti. */
    margin-bottom: -74px;
    left: auto;
    right: auto;
  }

  /* La barra di avanzamento segue 'is-scrolled' come tutto il resto: si vede
     quando la testata e' appiccicata, e in cima alla pagina non c'e'. Prima
     era accesa sempre - il ragionamento era "in cima e' larga zero, quindi
     non si vede lo stesso" - ma la pista dietro alla parte letta si vede
     eccome, ed era un filo chiaro sotto alla testata anche a pagina ferma. */
}


/* ------------------------------------------------------------------ *
 * Il piede
 * ------------------------------------------------------------------ */

/* IL PIEDE SI SCOPRE DA SOTTO.
 *
 * Non entra scorrendo: sta fermo dietro alla pagina, per tutta l'altezza che
 * gli spetta, e la pagina gli scorre sopra come una tenda che si alza. E'
 * quello che fa il sito di riferimento, ed e' anche il motivo per cui li'
 * sembra che il piede "compaia dal basso" pur senza nessuna animazione: il
 * movimento e' quello del contenuto, non il suo.
 *
 * Il piede resta nel flusso e si ancora al fondo con sticky: la sua altezza
 * riserva gia' lo spazio necessario. Non servono un livello fixed e un
 * margine separato, che sui viewport dinamici di Safari possono divergere.
 *
 * Il fondo nero sul contenuto non e' decorazione: e' quello che impedisce di
 * vedere il piede in trasparenza mentre ci si scorre sopra. Le sezioni hanno
 * gia' il loro fondo, ma una sola trasparente basterebbe a rovinare tutto.
 *
 * Nell'anteprima del builder no: li' il piede si guarda da fermo, e il
 * template ci porta con uno scrollIntoView che su un elemento fisso non
 * farebbe niente - si aprirebbe la pagina in cima invece che sul piede. */
.slgn-v2 { --piede-alto: clamp(420px, 62svh, 680px); }

body.slgn-v2:not(.slgn-preview) .slgn-ws {
  position: relative;
  z-index: 1;
  background: var(--v2-nero);
  margin-bottom: 0;
}

/* Il case study ha il suo fondo su .slgn-cs, ma e' il main a fare da tenda:
 * se lo facesse .slgn-cs, indice, barra e cursore fissi che ci stanno dentro
 * finirebbero sotto l'header. */
body.slgn-v2:not(.slgn-preview) .slgn-cs-main {
  position: relative;
  z-index: 1;
  background-color: inherit;
}

body.slgn-v2:not(.slgn-preview) .slgn-ftr--v2 {
  position: sticky;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  min-height: var(--piede-alto);
}

/* Legal pages have no opaque builder wrapper for the footer reveal. */
body.slgn-v2:not(.slgn-preview) #slgn-contenuto:has(.sp-policy) + .slgn-ftr--v2 {
  position: relative;
  bottom: auto;
}

.slgn-ftr--v2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 54vh;
  min-height: 54svh;
  padding: 4vh 0 28px;
  background: var(--v2-nero);
  color: #fff;
  overflow: hidden;
}

.slgn-insegna { overflow: hidden; }

.slgn-ftr--v2 > * { flex-shrink: 0; }

.slgn-insegna__nastro {
  display: flex;
  width: max-content;
  animation: slgn-v2-insegna var(--durata, 22s) linear infinite;
}

.slgn-insegna__nastro > span {
  padding-right: .24em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .75);
  font-size: clamp(120px, 18vw, 345px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.075em;
  text-transform: uppercase;
  white-space: nowrap;
}

@keyframes slgn-v2-insegna { to { transform: translateX(-50%); } }

/* Il marchio gigante del blocco Chiusura qui non serve piu'.
 *
 * Nella prima versione e' lui a chiudere il sito; nella Story quel lavoro lo
 * fa l'insegna che scorre, sopra. Due volte lo stesso nome alto trecento
 * pixel, uno sotto l'altro, e' una volta di troppo. Il blocco resta perche'
 * dentro ci sono i dati legali e i crediti: perde solo la sua parte piu'
 * rumorosa. */
.slgn-ftr--v2 .slgn-ftr__marchio { display: none; }

/* La sezione NON diventa flex.
 *
 * Qui avevo sbagliato bersaglio: avevo messo 'display: flex' sulla sezione
 * intera, che dentro ha due contenitori - il marchio e la riga dei dati - e
 * me li sono ritrovati affiancati, con la riga schiacciata in tre colonnine
 * da venti caratteri. La riga da mettere in fila e' quella dentro, non la
 * scatola che la contiene. */
.slgn-ftr--v2 .slgn-ftr__coda {
  padding: 0;
  border: 0;
}

.slgn-ftr--v2 .slgn-wrap {
  width: 100%;
  max-width: none;
  padding: 0 var(--v2-margine, 4.65vw);
}

/* L'INDICE DELLE PAGINE.
 *
 * Preso dal piede del sito di riferimento: le voci non sono una fila di
 * link piccoli tutti uguali, sono un indice - numero davanti, nome dopo -
 * distribuito sulla larghezza. Il numero e' minuscolo e spento; serve a dire
 * che il sito ha un ordine, non a essere letto.
 *
 * Qui pero' i numeri sono gli stessi della testata, che gia' numera le sue
 * voci allo stesso modo: la stessa mappa, in cima e in fondo.
 *
 * 'auto-fit' con un minimo: quante voci ci stanno per riga lo decide lo
 * spazio, non un numero scritto a mano che andrebbe corretto il giorno che
 * si aggiunge una pagina. */
.slgn-ftr--v2 .slgn-ftr__indice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(14px, 1.6vw, 26px) clamp(20px, 2.4vw, 44px);
  margin: clamp(26px, 4vh, 54px) 0 clamp(22px, 3vh, 40px);
  padding-bottom: clamp(22px, 3vh, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.slgn-ftr--v2 .slgn-ftr__voce {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(15px, 1.15vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color .3s var(--v2-ease);
}

.slgn-ftr--v2 .slgn-ftr__n {
  color: rgba(255, 255, 255, .38);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

@media (hover: hover) and (pointer: fine) {
  .slgn-ftr--v2 .slgn-ftr__voce:hover { color: #fff; }
}

.slgn-ftr--v2 .slgn-ftr__riga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, .55);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.slgn-ftr--v2 .slgn-ftr__riga p,
.slgn-ftr--v2 .slgn-ftr__riga ul { margin: 0; }

.slgn-ftr--v2 .slgn-ftr__legali {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0;
}

/* Il piede della Story ridichiara lo stacco delle voci legali, e con questo
   copriva il rimedio che sta in chrome.css (dove c'e' anche il perche' per
   esteso): dove si tocca col dito, "Privacy" e "Cookie" hanno un bersaglio
   alto 48 dentro a righe alte 16, e appena vanno a capo i due bersagli si
   accavallano - il dito su "Privacy" apre "Cookie". Qui si rimette solo lo
   stacco fra le righe, non quello fra le voci. */
@media (hover: none) {
  .slgn-ftr--v2 .slgn-ftr__legali { row-gap: 2.1rem; }
}

@media (max-width: 760px) {
  .slgn-ftr--v2 .slgn-ftr__riga {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ------------------------------------------------------------------ *
 * Meno movimento
 *
 * Tutto quello che qui sopra si muove da solo si ferma. Restano le
 * posizioni finali: la riga dell'apertura lunga, l'insegna ferma sulla prima
 * parola, il marchio dritto. Nessuna sezione perde contenuto.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .slgn-v2 .slgn-hero__riga i,
  .slgn-dati__float,
  .slgn-insegna__nastro { animation: none; }

  .slgn-v2 .slgn-hero__riga i { transform: scaleX(1); }

  .slgn-js .slgn-v2 [data-slgn-coppia] .slgn-carta {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  /* Meno animazioni: la vetrina smette di essere incollata e torna a essere
     una fila da trascinare. Non e' un ripiego povero - e' la stessa fila, con
     l'aggancio a fine corsa - ed e' l'unico posto in cui quel carosello
     serviva: senza scorrimento pilotato, senza di lui non ci sarebbe modo di
     arrivare al quarto progetto. */
  .slgn-v2 .slgn-vetrina {
    height: auto !important;
    min-height: 0;
    padding: 88px 0 80px;
  }

  .slgn-vetrina__fisso {
    display: block;
    position: relative;
    height: auto;
    min-height: 0;

    /* Il rientro in cima lo fa gia' la sezione (88 pixel qui sopra): quello
       delle tre fasce servirebbe solo a raddoppiarlo. */
    padding: 0;
    overflow: visible;
  }

  /* Anche qui la testa e' il primo pannello della fila: si sfoglia col dito
     invece di scorrere con la pagina, ma l'ordine di lettura e' lo stesso. */
  .slgn-vetrina__testa {
    position: relative;
    top: auto;
    left: auto;
    width: max-content;
    max-width: 78vw;
    margin: 0;
  }

  .slgn-vetrina__binario {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    gap: 0;
    padding: 0 14vw 18px var(--v2-margine);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }

  .slgn-vetrina__binario::-webkit-scrollbar { display: none; }
  .slgn-vetrina__binario.is-preso { cursor: grabbing; }

  /* Qui il binario non e' piu' una fascia alta quanto la finestra ma un
     riquadro che scorre, alto quanto il suo contenuto: una didascalia appesa
     fuori dal flusso finirebbe tagliata dall'overflow. Torna dentro, e le
     schede si allineano in cima invece che al centro - senza una fascia in
     cui centrarle, 'center' sfalserebbe di nuovo le copertine. */
  .slgn-vetrina__binario { align-items: flex-start; }
  .slgn-vetrina__binario .slgn-prog__meta { position: static; }

  .slgn-prog { scroll-snap-align: start; }

  .slgn-vetrina__azione {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 28px 0 0;
  }

  .slgn-vetrina__barra {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 20px var(--v2-margine) 0;
  }

  .slgn-gioco__scia { display: none; }
}


/* ------------------------------------------------------------------ *
 * Il racconto a scena fissa (pagina S-Logan)
 *
 * Una schermata sola che resta incollata mentre il testo la attraversa dal
 * basso. Tutto quello che si muove qui e' pilotato da cinque variabili che
 * scrive il JavaScript leggendo lo scorrimento - e da nient'altro:
 *
 *   --salita   di quanto e' alzato il blocco di testo
 *   --avanti   0 all'inizio, 1 alla fine: serve alla barra in fondo
 *   --vetro    quanto e' calato il vetro smerigliato
 *   --sfoca    di quanto e' fuori fuoco il video
 *   --luce     quanto e' stato abbassato
 *
 * Separare cosi' - il JavaScript calcola dei numeri, il CSS decide cosa
 * farne - vuol dire che per cambiare l'aspetto della pagina non si tocca una
 * riga di codice, e che con 'prefers-reduced-motion' basta ignorare le
 * variabili in un punto solo.
 * ------------------------------------------------------------------ */

/* Il fondo di questa sezione era avorio (#ececea), ma la scena dentro lo
   copre sempre con 100svh. L'avorio si vedeva solo nei pixel di troppo che
   si aprono quando la barra di sistema di Android si ritira e la finestra
   cresce: svh resta la misura piccola, e quei pixel in piu' mostrano il fondo
   della sezione. Un fondo che si vede solo quando qualcosa va storto tanto vale
   che sia del colore giusto. */
.slgn-v2 .slgn-racconto {
  --salita: 100vh;
  --avanti: 0;
  --vetro: 0;
  --sfoca: 0px;
  --luce: 1;

  position: relative;
  min-height: 100vh;
  min-height: 100lvh;
  padding: 0;
  background: var(--v2-nero);
}

/* svh (small viewport height) e' l'altezza piu' piccola che la finestra puo'
   avere; lvh (large viewport height) e' la piu' grande. Quando la barra dei
   controlli di Android si ritira la finestra cresce da 641,67 a 697,67 px, un
   salto di 56 px. Con svh la scena restava ferma a 641,67 e quei 56 pixel
   scoperti lasciavano vedere il fondo nero della sezione dietro a una scena
   quasi bianca. Con lvh succede il contrario: quando la barra E' visibile la
   scena e' 56 px piu' alta della finestra, e la striscia in basso sta sotto la
   barra. Qui non costa niente, perche' il fondo della scena e' un video
   ritagliato a coprire e il testo sta al centro: si perde un lembo di video,
   non del contenuto. Una striscia vuota invece si vede sempre. */
.slgn-racconto__scena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  min-height: 640px;
  isolation: isolate;
  overflow: hidden;
  background: #f5f5f3;
}

/* -- Il video -- */
.slgn-racconto__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background: #f5f5f3;
}

.slgn-racconto__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.006);
  transform-origin: 50% 48%;
  filter: blur(var(--sfoca)) brightness(var(--luce)) saturate(.88) contrast(.99);
  will-change: filter;
}

/* -- Il vetro --
 *
 * 'backdrop-filter' e non un semplice velo nero: la differenza e' che il
 * vetro SFOCA quello che ha dietro invece di coprirlo. Il video resta
 * riconoscibile - si vede che c'e' un cane, si vede che si muove - ma smette
 * di chiedere attenzione. E' esattamente quello che succede guardando una
 * cosa attraverso un vetro smerigliato, ed e' il motivo per cui questa
 * pagina si puo' leggere pur avendo un video acceso sotto ogni parola. */
.slgn-racconto__vetro {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: var(--vetro);
  pointer-events: none;
  -webkit-backdrop-filter: blur(calc(1px + var(--vetro) * 15px)) brightness(calc(1 - var(--vetro) * .34)) saturate(.9) contrast(.82);
  backdrop-filter: blur(calc(1px + var(--vetro) * 15px)) brightness(calc(1 - var(--vetro) * .34)) saturate(.9) contrast(.82);
  background:
    radial-gradient(at 50% 42%, rgba(80, 82, 82, .18), transparent 49%),
    linear-gradient(165deg, rgba(20, 21, 21, .52), rgba(0, 0, 0, .80)),
    rgba(4, 5, 5, .58);
  will-change: opacity, backdrop-filter;
}

/* Il vetro e' piu' chiaro di quello del prototipo, e per una ragione precisa.
 *
 * Al suo valore - nero al 78 per cento sotto due gradienti - a meta' racconto
 * Logan spariva del tutto: restava un fondo nero con sopra del testo bianco,
 * e a quel punto il video tanto valeva non caricarlo. Ma la pagina parla di
 * lui, e il senso di tenere un video acceso sotto ogni parola e' che quel
 * cane RESTI li' mentre lo si racconta.
 *
 * Adesso e' una presenza: non lo si guarda piu', si vede che c'e'. Il testo
 * si legge lo stesso - bianco su un fondo che resta comunque sotto il trenta
 * per cento di luminosita' - e la sfocatura del 'backdrop-filter' fa il resto
 * del lavoro, perche' toglie il dettaglio senza togliere la figura. */

.slgn-racconto__grana {
  position: absolute;
  inset: 0;
  opacity: calc(var(--vetro) * .16);
  pointer-events: none;
  mix-blend-mode: soft-light;
  filter: contrast(1.28);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* -- Il testo che sale -- */
.slgn-racconto__copia {
  position: absolute;
  z-index: 5;
  top: 6svh;
  left: max(8.4vw, 80px);
  width: min(1140px, 78vw);
  color: #fff;
  transform: translate3d(0, var(--salita), 0);
  will-change: transform;
}

.slgn-racconto__occhiello {
  margin: 0 0 8vh;
  padding-top: 2px;
  color: rgba(255, 255, 255, .68);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* LO STACCO FRA UN PARAGRAFO E L'ALTRO E' IL TEMPO DELLA STORIA.
 *
 * Da 18vh a 13vh. Qui il margine non e' spazio bianco, e' pausa: le parole si
 * accendono a mano a mano che si scorre, e fra un blocco e il successivo si
 * scorre nel nero. A 18vh - 162 pixel su una finestra da 900, per nove
 * paragrafi - la pausa era piu' lunga della frase, e la pagina misurava 7,1
 * schermate per dieci righe di racconto.
 *
 * 13vh accorcia l'attesa senza incollare i blocchi: fra la fine di una frase
 * e l'inizio della successiva resta piu' di mezza schermata di nero, che e'
 * quello che tiene il ritmo. E' l'unico ritocco di questo giro che cambia il
 * TEMPO di una pagina e non solo la sua altezza: se il racconto risultasse
 * frettoloso, e' questo numero da rialzare. */
.slgn-racconto__par {
  max-width: 19ch;
  margin: 0 0 13vh;
  font-size: clamp(40px, 4.55vw, 88px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.06em;
}

/* Uno sì e uno no rientra. La classe la mette il PHP invece di affidarsi a
   'nth-of-type', che conterebbe anche l'occhiello e invertirebbe tutto il
   giorno in cui qualcuno lo lascia vuoto. */
.slgn-racconto__par--in { margin-left: clamp(40px, 8vw, 160px); }

/* Il congedo - "Bark in mind." - si tiene la pausa piu' lunga di tutte,
   perche' e' la battuta finale: ma 30vh sopra e 28 sotto erano 270 e 252
   pixel, cioe' oltre mezza schermata vuota prima e dopo l'ultima riga della
   pagina. Restano 20 e 16: sopra piu' che sotto, perche' e' l'attesa a
   valere, non la coda. */
.slgn-racconto__congedo {
  margin: 20vh 0 16vh;
  color: rgba(255, 255, 255, .98);
  font-size: clamp(52px, 8.5vw, 164px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.075em;
}

/* -- Le parole --
 *
 * Spente finche' non e' il loro turno. La transizione e' cortissima - meno di
 * un decimo - perche' non deve sembrare una dissolvenza: deve sembrare che la
 * parola ci sia sempre stata e che la si sia appena raggiunta leggendo. */
.slgn-parola {
  display: inline-block;
  opacity: 0;
  text-shadow: 0 0 18px rgba(255, 255, 255, .04);
  transition: opacity .09s linear;
  will-change: opacity;
}

.slgn-parola.is-letta { opacity: 1; }

/* Senza JavaScript le parole ci sono tutte. Una pagina di testo invisibile in
   attesa di uno script che non arriva e' il peggiore dei guasti possibili,
   perche' sembra una pagina vuota. */
.slgn-racconto:not(.is-viva) .slgn-parola { opacity: 1; }

/* -- La riga in fondo -- *
 *
 * In 'difference': il fondo qui passa dal bianco del video al quasi nero del
 * vetro, e nessun colore fisso si legge su tutti e due. La differenza li
 * ribalta da sola - nera sul chiaro, bianca sullo scuro - senza una riga di
 * codice che segua l'avanzamento. */
/* Il fondo della scena non e' il fondo di quello che si vede.
 *
 * La scena e' alta 100lvh - la finestra piu' GRANDE che il browser puo' dare -
 * per non aprire un buco quando la barra di Android si ritira (vedi il
 * commento della scena). Ma appena si apre la pagina la barra c'e', e la
 * finestra e' alta 100svh: sull'S24 sono 641,67 contro 697,67, cinquantasei
 * pixel di scena che stanno sotto al bordo dello schermo.
 *
 * La riga sta attaccata al fondo della scena, quindi finiva dentro quei
 * cinquantasei: misurata sul telefono stava a 662 px con la finestra alta 641.
 * Ed era proprio la riga che dice "Scroll" - l'unica cosa in pagina che
 * inviti a scorrere era nascosta finche' non si scorreva.
 *
 * La differenza fra le due unita' e' la misura esatta di quel pezzo nascosto:
 * aggiungendola al distacco, la riga si appoggia al fondo della finestra
 * PICCOLA, cioe' a quello che si vede all'apertura. Dove le due unita'
 * coincidono - ogni schermo da scrivania - la somma fa zero e resta 28px. */
.slgn-racconto__riga {
  position: absolute;
  z-index: 6;
  bottom: calc(28px + (100lvh - 100svh));
  left: max(8.4vw, 80px);
  right: max(8.4vw, 80px);
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  mix-blend-mode: difference;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.slgn-racconto__riga i {
  flex: 1;
  height: 1px;
  background: currentColor;
  transform: scaleX(calc(.08 + var(--avanti) * .92));
  transform-origin: 0;
}

@media (max-width: 900px) {
  .slgn-racconto__scena { min-height: 560px; }

  /* La riga scende il piu' possibile, e non e' pignoleria.
   *
   * Il filmato e' un cane bianco su fondo bianco, e la riga ci passa sopra:
   * misurata sul telefono, la luminanza minima in sei secondi di movimento e'
   * 208 dove stanno le zampe e 218 venti pixel piu' in basso, sul pavimento.
   * Non e' questione di leggibilita' - la riga e' in 'difference' e su tutti e
   * due si legge - e' che il testo tagliava la zampa. Venti pixel piu' giu'
   * appoggia sul pavimento vuoto.
   *
   * Quattordici e non zero: sotto restano comunque quattordici pixel di
   * distacco dal bordo della finestra piccola, che e' quanto serve perche' non
   * sembri appiccicata al vetro. Su schermo grande resta 28: li' il fondo e'
   * il video largo e il problema non esiste. */
  .slgn-racconto__riga { bottom: calc(14px + (100lvh - 100svh)); }

  /* Il video resta a pieno schermo, sempre: e' stato provato a rimpicciolirlo
     per fare posto al testo - il filmato e' quadrato, 1080 per 1080, e con
     'contain' su una finestra alta il doppio restavano due fasce d'avorio
     sopra e sotto - e non va bene: si vedevano come fasce, e la scena
     d'apertura deve essere il filmato e basta. Il posto per il testo si trova
     spostando la riga, non restringendo il video. */

  .slgn-racconto__copia {
    left: 20px;
    width: calc(100vw - 40px);
  }

  .slgn-racconto__occhiello { margin-bottom: 8vh; }

  .slgn-racconto__par {
    max-width: none;
    margin-bottom: 11vh;
    font-size: clamp(31px, 9.2vw, 48px);
    line-height: 1.01;
  }

  .slgn-racconto__par--in { margin-left: 0; }

  .slgn-racconto__congedo { font-size: clamp(40px, 13vw, 72px); }

  .slgn-racconto__riga { left: 20px; right: 20px; }
}

/* Meno movimento: la scena smette di essere una scena. Il testo si legge
   tutto, il video sta fermo sul suo fermo immagine, il vetro non cala. Non si
   perde una parola: si perde soltanto il modo di arrivarci. */
@media (prefers-reduced-motion: reduce) {
  .slgn-v2 .slgn-racconto { height: auto !important; }
  .slgn-racconto__scena { position: relative; height: auto; padding: 14vh 0; }
  .slgn-racconto__copia { position: relative; top: auto; transform: none; }
  .slgn-parola { opacity: 1 !important; transition: none; }
  .slgn-racconto__vetro { opacity: .92; }
  .slgn-racconto__video { display: none; }
}


/* ================================================================== *
 * IL MOVIMENTO
 *
 * Due cose prese dal tema su cui gira il resto del sito - Grative - e
 * rifatte senza la sua roba. Il tema le ottiene con GSAP, SplitText e
 * ScrollTrigger: trecento kilobyte di libreria per due effetti. Qui sono
 * quaranta righe di CSS, e fanno la stessa identica cosa.
 *
 *   1  LE PAROLE. Nel tema si chiama 'PXLfadeInUp3': ogni parola del
 *      titolo parte settanta pixel piu' in basso, trasparente e sfocata a
 *      quindici pixel, e arriva a posto in sequenza. La prima versione del
 *      sito lo fa gia', ma piano - mezzo em di salita, una rotazione di un
 *      grado. Su titoli che qui arrivano a duecento pixel quel movimento
 *      non si vede: e' proporzionalmente piu' piccolo del titolo.
 *
 *   2  I SERVIZI. Nel tema sono un accordo: si apre uno e si chiude
 *      l'altro. Qui la stessa cosa la fa il passaggio del mouse, che un
 *      accordo ce l'ha per costruzione - il mouse sta in un posto solo.
 *      Niente JavaScript: 'grid-template-rows' da 0fr a 1fr fa scorrere
 *      un'altezza che nessuno conosce in anticipo.
 * ================================================================== */

/* ---- 1. Le parole ------------------------------------------------ *
 *
 * Stessa specificita' della regola in site.css (quattro classi), e questo
 * foglio arriva dopo: vince per ordine, come deve. La sfocatura e' la
 * differenza che conta - senza, e' un testo che sale; con, e' un testo che
 * si mette a fuoco, ed e' quello che si riconosce nel tema.
 *
 * Il ritardo fra una parola e l'altra e' 78 millisecondi contro i 200 del
 * tema. Duecento su un titolo di dieci parole fanno due secondi, e per due
 * secondi si guarda un titolo che si sta ancora scrivendo. Il tetto a
 * novecento tiene il conto: dodici parole finiscono comunque in un secondo
 * scarso, le ultime insieme. */
.slgn-js .slgn-v2 .slgn-reveal .slgn-word {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(.62em);
  transition:
    opacity .55s var(--v2-ease),
    filter .85s var(--v2-ease),
    transform .85s var(--v2-ease);
  transition-delay: min(calc(var(--i, 0) * 78ms), 900ms);
}

.slgn-js .slgn-v2 .slgn-reveal.is-in .slgn-word {
  opacity: 1;
  filter: blur(0);
  transform: none;
}


/* ---- 2. I servizi che si aprono --------------------------------- *
 *
 * Tutto dentro '(hover: hover)', e non e' prudenza: e' l'unico modo di
 * scriverlo. Su un dito il passaggio del mouse non esiste - c'e' il tocco,
 * che e' un'altra cosa e vuole un altro gesto - e una descrizione che si
 * apre al passaggio, su un telefono, e' una descrizione che non si legge.
 * Fuori da questa parentesi le sei descrizioni sono lì, tutte aperte, come
 * sono sempre state.
 *
 * 'grid-template-rows: 0fr -> 1fr' e' il modo di far scorrere un'altezza
 * che non si conosce. 'height: auto' non si anima; una misura fissa scritta
 * a mano si rompe al primo testo piu' lungo. La griglia invece misura da
 * se' e interpola la frazione. Dove non e' supportata la dichiarazione
 * cade, la riga resta alta quanto il suo contenuto, e il testo si vede
 * senza animazione: il modo giusto di rompersi. */
@media (hover: hover) and (pointer: fine) {
  .slgn-v2 .slgn-coppie--apre .slgn-carta__apre {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .7s var(--v2-ease);
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta__apre > p {
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .4s var(--v2-ease),
      transform .55s var(--v2-ease);
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta:hover .slgn-carta__apre,
  .slgn-v2 .slgn-coppie--apre .slgn-carta:focus-visible .slgn-carta__apre {
    grid-template-rows: 1fr;
  }

  /* Il testo arriva dopo che la riga si e' aperta, non insieme: sfalsato
     di un decimo si legge che prima si fa spazio e poi si scrive, invece
     di vedere una parola che cresce. */
  .slgn-v2 .slgn-coppie--apre .slgn-carta:hover .slgn-carta__apre > p,
  .slgn-v2 .slgn-coppie--apre .slgn-carta:focus-visible .slgn-carta__apre > p {
    opacity: 1;
    transform: none;
    transition-delay: .11s;
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta__segno {
    display: block;
    width: 30px;
    height: 2px;
    margin: 16px 0 0;
    background: currentColor;
    opacity: .45;
    transform-origin: 0 50%;
    transition:
      transform .6s var(--v2-ease),
      opacity .4s var(--v2-ease);
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta:hover .slgn-carta__segno,
  .slgn-v2 .slgn-coppie--apre .slgn-carta:focus-visible .slgn-carta__segno {
    transform: scaleX(3.2);
    opacity: 1;
  }
}

/* Fuori dal passaggio del mouse il trattino non serve a niente: non c'e'
   niente di nascosto da annunciare. */
.slgn-carta__segno { display: none; }


/* ---- 3. La scheda al centro della vetrina ------------------------ *
 *
 * '--fuoco' lo scrive lo script, uno per scheda, ed e' quanto quella
 * scheda e' vicina al centro dello schermo: 1 in mezzo, 0 al bordo.
 *
 * Niente transizione, ed e' voluto: il valore cambia ad ogni fotogramma
 * insieme allo scorrimento, e una transizione sopra un valore che si
 * muove da solo lo fa arrivare in ritardo - la scheda finirebbe di
 * mettersi a fuoco quando e' gia' passata.
 *
 * IL 4 PER CENTO DI SCALA NON C'E' PIU'.
 *
 * Rimpiccioliva del 4 per cento le schede lontane dal centro: su 792 pixel
 * sono 32, sedici per parte, e fra due schede vicine facevano trentadue pixel
 * di nero che il foglio non dichiarava da nessuna parte. Finche' le schede
 * erano staccate si sommava al gap senza che si notasse; da quando devono
 * toccarsi era l'unica cosa che glielo impediva - misurato in pagina: a gap
 * zero restavano ancora trentadue pixel di vuoto.
 *
 * Il mestiere che faceva - dire all'occhio dove stare - non e' rimasto
 * scoperto: lo fa la didascalia qui sotto, che dal 34 al 100 per cento di
 * opacita' e' un salto molto piu' grande di un 4 per cento di misura, e lo fa
 * il video, che si accende solo sulla scheda a fuoco. Quello che si e' perso
 * e' il segnale sulla fotografia; se dovesse mancare, il posto dove rimetterlo
 * e' una luce - 'filter: brightness()' su questo stesso selettore - e non una
 * misura, perche' qualunque cosa cambi la LARGHEZZA rimette il vuoto. */
.slgn-v2 .slgn-prog { --fuoco: 1; }

.slgn-js .slgn-v2 .slgn-prog__meta {
  opacity: calc(.34 + .66 * var(--fuoco));
  transform: translateY(calc((1 - var(--fuoco)) * 9px));
}


/* ---- Il video nella scheda ---------------------------------------- *
 *
 * Tutto dentro '(hover: hover)': su un dito il passaggio del mouse non
 * esiste, e una regola che dipende da ':hover' su un telefono o non scatta
 * mai o resta incastrata accesa dopo un tocco. Lo stesso ragionamento che
 * il foglio usa per la descrizione dei servizi che si apre al passaggio.
 * Sul telefono il video lo accende lo script, leggendo '--fuoco'. */
.slgn-v2 .slgn-prog__video {
  transition: opacity .3s var(--v2-ease);
}

.slgn-v2 .slgn-prog__video.is-accesa { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .slgn-v2 .slgn-prog:hover .slgn-prog__video {
    opacity: 1;
  }
}


/* ------------------------------------------------------------------ *
 * L'elenco a righe
 *
 * Una riga per riga larga tutta la pagina, con un titolo grande al centro
 * e due etichette piccole ai lati, separate da una linea sottile. Di suo
 * il titolo e' spento - di un grigio che si legge appena - e al passaggio
 * si accende, e un'immagine lo accompagna seguendo il puntatore.
 *
 * Il contratto con il JavaScript: la riga accesa porta 'is-accesa' (messa
 * e tolta da v2.js) e l'immagine dietro al puntatore sta nel contenitore
 * sovrapposto 'slgn-elenco__scena', fuori dal flusso.
 * ------------------------------------------------------------------ */

.slgn-v2 .slgn-elenco {
  position: relative;
  padding: clamp(44px, 7vw, 120px) 0;
  background: var(--v2-nero);
  color: var(--v2-carta);

  /* La larghezza della finestra che accompagna il puntatore; l'altezza la
     ricava da qui il formato 4:5. Sta sulla sezione e non sulla cornice:
     cosi' anche la scena che la ritaglia puo' leggerla, e chi la vuole piu'
     piccola la cambia in un punto solo. */
  --elenco-larghezza: clamp(210px, 20vw, 380px);
}

/* LA CUCITURA FRA I NUMERI E L'ELENCO.
 *
 * La sezione dei dati ha una linea verticale che la taglia a meta' e finisce
 * di netto sul suo bordo inferiore; sotto ricominciava il nero, e piu' giu'
 * l'elenco con le sue righe. Due sistemi di linee vicini che non si toccano:
 * di qui lo stacco.
 *
 * La linea continua per un altro pezzo dentro all'elenco e si spegne
 * sfumando, poco prima che cominci la prima voce: e' la stessa linea che
 * scende dal marchio e accompagna l'occhio da una sezione all'altra invece di
 * lasciarlo cadere nel vuoto.
 *
 * Il selettore col '+' e' la parte che conta: la cucitura esiste SOLO quando
 * l'elenco viene davvero dopo i dati. L'elenco e' un blocco che si puo'
 * mettere ovunque, e una linea che spunta dal nulla in cima a una pagina
 * qualsiasi sarebbe un difetto, non una rifinitura. */
.slgn-v2 .slgn-dati + .slgn-elenco {
  position: relative;
}

.slgn-v2 .slgn-dati + .slgn-elenco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: clamp(40px, 6vw, 96px);
  background: linear-gradient(to bottom, var(--v2-riga), transparent);
  pointer-events: none;
}

.slgn-elenco__occhiello {
  margin: 0 var(--v2-margine) clamp(30px, 4.5vw, 72px);
  color: var(--v2-carta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  opacity: .66;
  text-transform: uppercase;
}

/* Righe piene, separate da una linea; il contenitore chiude una linea
   anche sotto all'ultima. 'min-height' da' l'area di passaggio comoda. */
.slgn-elenco__righe { border-bottom: 1px solid var(--v2-riga); }

.slgn-elenco__riga {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(120px, 16vh, 190px);
  padding: 18px 0;
  border-top: 1px solid var(--v2-riga);
  color: inherit;
  text-decoration: none;
}

/* Il clamp non ha pavimento alto: un pavimento alto non scende mai, ed e'
   la trappola del titolo dell'apertura - le parole lunghe verrebbero
   tagliate. Qui la misura la decide il bordo basso, non quello alto. */
.slgn-elenco__titolo {
  max-width: 74%;
  margin: 0;
  color: var(--v2-carta);
  font-size: clamp(32px, 6.2vw, 116px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: var(--v2-interlinea-alta);
  text-align: center;
  text-transform: uppercase;
}

/* Le due etichette stanno in un contenitore unico. Su schermo largo e' un
   nastro assoluto a tutta larghezza fra i margini, centrato in verticale:
   cosi' il titolo non si sposta di un pixel quando un'etichetta manca. */
.slgn-elenco__etichette {
  position: absolute;
  top: 50%;
  left: var(--v2-margine);
  right: var(--v2-margine);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transform: translateY(-50%);
}

.slgn-elenco__etichetta {
  color: var(--v2-carta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* LE IMMAGINI DI ACCOMPAGNAMENTO: LA TENDA, NON LA DISSOLVENZA.
 *
 * Prima ogni riga aveva la sua immagine, ognuna per conto suo: si spostava
 * dietro al puntatore e si accendeva e spegneva in opacita'. Due immagini
 * che si scambiano sfumando l'una nell'altra pero' passano da un momento in
 * cui non si vede bene ne' la prima ne' la seconda, e il cambio si legge
 * come un'esitazione.
 *
 * Adesso il quadrato e' uno solo - una cornice che insegue il puntatore - e
 * dentro ci stanno impilate tutte le fotografie. Quella che entra arriva da
 * destra dietro a un'anta che scorre; quella che esce se ne va a sinistra
 * dietro alla sua, alla stessa velocita'. Le due ante sono attaccate: il
 * taglio fra le due attraversa il quadrato una volta sola, da destra a
 * sinistra, e quello che si vede e' una tenda che si sposta.
 *
 * Il trucco che tiene in piedi tutto sta nella fotografia dentro all'anta:
 * scorre della stessa misura ma al contrario, quindi mentre l'anta si
 * muove la fotografia resta ferma sullo schermo. Senza, sarebbero due
 * immagini che scivolano - con, e' una finestra che si apre su qualcosa
 * che sta gia' li'. La scala che va da 1,15 a 1 e' l'unica cosa che
 * davvero si muove dentro l'inquadratura.
 *
 * Il riquadro e' un 4:5 a spigoli vivi: l'immagine e' un ritaglio, non una
 * scheda.
 *
 * Il contratto con v2.js: la cornice accesa porta 'is-accesa' e le due
 * variabili '--elenco-x' e '--elenco-y' con la posizione inseguita; il
 * quadro della riga sotto al puntatore porta 'is-accesa', quello che ha
 * appena smesso 'is-spenta'. Senza nessuna delle due classi l'anta resta
 * dov'e' nata, fuori dal quadro a sinistra: all'apertura della pagina non
 * parte nessuna animazione.
 *
 * La sorgente parte da 'src' vuoto e sta in 'data-slgn-fonte': il browser
 * non le scarica all'apertura della pagina, solo al primo passaggio - come
 * il video del racconto. 'max-width: none' e' la stessa difesa della scia
 * del gioco. */
.slgn-v2 .slgn-elenco__scena {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

/* La cornice. 'top' e 'left' a zero e tutto il movimento nella translate:
   il puntatore sta al centro del riquadro, e la meta' del riquadro la
   toglie la percentuale - che si misura sul riquadro stesso, un asse per
   volta - senza che lo script debba conoscere la misura. */
.slgn-elenco__cornice {
  position: absolute;
  top: 0;
  left: 0;
  /* IL FORMATO E' 4:5, NON PIU' IL QUADRATO.
   *
   * Il quadrato veniva dal prototipo e trattava tutte le fotografie allo
   * stesso modo, cioe' tagliandole: 'object-fit: cover' su un quadrato porta
   * via i lati di un'orizzontale e la testa e i piedi di una verticale. Il
   * 4:5 e' il formato in cui il materiale dello studio e' girato ed e'
   * quello in cui va guardato.
   *
   * L'altezza si ricava dalla larghezza e non e' un secondo numero da tenere
   * allineato: 'aspect-ratio' con la larghezza scritta la calcola da sola, e
   * il giorno in cui cambia il formato si cambia qui, non in due punti.
   *
   * La traslazione di -50% qui sotto continua a funzionare senza toccarla:
   * si misura su ciascun asse della cornice, quindi il puntatore resta al
   * centro anche adesso che i due assi sono diversi. */
  width: var(--elenco-larghezza, 320px);
  aspect-ratio: 4 / 5;
  opacity: 0;
  transform: translate(calc(var(--elenco-x, 0px) - 50%), calc(var(--elenco-y, 0px) - 50%));
  transition: opacity .3s var(--v2-ease);
  will-change: transform;
}

.slgn-elenco__cornice.is-accesa { opacity: 1; }

/* I quadri, uno per riga, impilati e ritagliati sulla cornice. Lo scambio
   di piano arriva in ritardo apposta: nei primi centesimi il quadro che
   se ne va deve restare sopra, se no il taglio fra le due ante si vede
   saltare quando si corre da una riga all'altra. */
.slgn-elenco__quadro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: z-index .11s .17s;
}

.slgn-elenco__quadro.is-accesa { z-index: 2; }

/* L'anta nasce fuori dal quadro, a sinistra: e' la posizione di riposo,
   quella di chi non e' mai stato acceso e di chi si e' appena spento. */
.slgn-elenco__anta {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(-100%);
}

.slgn-elenco__anta img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: translateX(100%) scale(1.4);
}

/* Anta e fotografia si muovono insieme e in senso contrario, stessa durata
   e stessa curva: e' quello che le tiene incollate. */
.slgn-elenco__quadro.is-accesa .slgn-elenco__anta { animation: slgn-anta-entra .55s ease-in-out both; }
.slgn-elenco__quadro.is-accesa .slgn-elenco__anta img { animation: slgn-foto-entra .55s ease-in-out both; }
.slgn-elenco__quadro.is-spenta .slgn-elenco__anta { animation: slgn-anta-esce .55s ease-in-out both; }
.slgn-elenco__quadro.is-spenta .slgn-elenco__anta img { animation: slgn-foto-esce .55s ease-in-out both; }

@keyframes slgn-anta-entra {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slgn-anta-esce {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes slgn-foto-entra {
  from { transform: translateX(-100%) scale(1.15); }
  to   { transform: translateX(0) scale(1); }
}

@keyframes slgn-foto-esce {
  from { transform: translateX(0) scale(1); }
  to   { transform: translateX(100%) scale(1.15); }
}


/* ---- Le pagine dell'archivio ------------------------------------- *
 *
 * Sta sotto all'ultima riga dell'elenco dei progetti, allineata al margine
 * di pagina come tutto il resto. I numeri sono gli stessi che numerano le
 * righe - stesso corpo, stessa crenatura, stesso zero davanti - perche' un
 * archivio che numera le sue pagine in un modo e le sue righe in un altro
 * sembra fatto da due persone che non si sono parlate.
 *
 * La pagina in cui si e' non e' un riquadro pieno ma la sola voce accesa,
 * sottolineata: le altre stanno al 42 per cento e si accendono al passaggio.
 * E' lo stesso comportamento delle righe dell'elenco qui sopra, e vuol dire
 * che dove si e' si legge senza dover cercare un fondino colorato.
 * ------------------------------------------------------------------ */

.slgn-pagine {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin: clamp(34px, 5vw, 72px) var(--v2-margine) 0;
  color: var(--v2-carta);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.slgn-pagine__voce {
  color: inherit;
  opacity: .42;
  text-decoration: none;
  transition: opacity .35s var(--v2-ease);
}

.slgn-pagine__voce--qui {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.slgn-pagine__oltre {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* A destra, staccato dai numeri: e' l'unica voce che non e' un numero, e
     tenerla in fila con loro la farebbe leggere come una pagina in piu'. */
  margin-left: auto;
  color: inherit;
  text-decoration: none;
}

.slgn-pagine__oltre i {
  font-style: normal;
  transition: transform .3s var(--v2-ease);
}

@media (hover: hover) and (pointer: fine) {
  .slgn-pagine__voce:hover { opacity: 1; }
  .slgn-pagine__oltre:hover i { transform: translateX(4px); }
}

.slgn-pagine__voce:focus-visible,
.slgn-pagine__oltre:focus-visible { opacity: 1; }

/* Il passaggio del mouse esiste solo dove il mouse c'e'. Qui dentro il
   titolo e' spento di default e si accende con la riga; fuori da questo
   blocco e' sempre pieno, perche' sul telefono - dove non si accende mai -
   una riga spenta sarebbe testo grigio illeggibile e basta. */
@media (hover: hover) and (pointer: fine) {
  /* Il '.slgn-v2' davanti non e' decorazione: in site.css c'e' un
     '.slgn-ws h3' che vale piu' di una classe sola, e senza il prefisso
     vinceva lui - i titoli restavano tutti accesi e la riga sotto al
     puntatore non si distingueva dalle altre. */
  .slgn-v2 .slgn-elenco__titolo {
    color: rgba(238, 237, 234, .3);
    transition: color .45s var(--v2-ease);
  }

  .slgn-elenco__etichetta {
    opacity: .5;
    transition: opacity .45s var(--v2-ease);
  }

  .slgn-elenco__riga.is-accesa .slgn-elenco__titolo { color: var(--v2-carta); }
  .slgn-elenco__riga.is-accesa .slgn-elenco__etichetta { opacity: 1; }
}

/* Su telefono la riga a tre colonne non ci sta: il titolo si fa largo e le
   etichette scivolano sotto, una accanto all'altra, in un nastro che torna
   relativo. Il titolo resta dentro al bordo: senza pavimento alto, scende
   quanto serve. */
@media (max-width: 900px) {
  .slgn-v2 .slgn-elenco { padding: 60px 0 72px; }

  /* Il rientro orizzontale e' la cosa che mancava. Su schermo grande il
     titolo sta al centro e le etichette sono un nastro assoluto fra i due
     margini, quindi nessuno dei due tocca il bordo. Qui il nastro torna in
     flusso e il titolo va a sinistra: senza rientro partivano tutti e due da
     zero, e sul telefono "BRANDING" e il suo numero uscivano dallo schermo
     dalla parte sbagliata - tagliati a sinistra, non a destra. */
  .slgn-elenco__riga {
    min-height: 0;
    padding: 30px var(--v2-margine);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
  }

  .slgn-elenco__titolo {
    max-width: 100%;
    font-size: clamp(34px, 11vw, 60px);
    text-align: left;
  }

  .slgn-elenco__etichette {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    transform: none;
  }
}


/* ---- Meno movimento ---------------------------------------------- *
 *
 * Il blocco in site.css spegne gia' opacita', spostamento e transizione
 * delle parole, ma non conosce la sfocatura - qui e' nuova, e senza questa
 * riga i titoli restavano illeggibili proprio a chi ha chiesto meno
 * animazioni. E' il modo peggiore di sbagliare un'opzione di
 * accessibilita': peggiorare la pagina di chi la attiva. */
@media (prefers-reduced-motion: reduce) {
  .slgn-js .slgn-v2 .slgn-reveal .slgn-word,
  .slgn-js .slgn-v2 .slgn-reveal.is-in .slgn-word {
    filter: none !important;
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta__apre {
    display: block !important;
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta__apre > p {
    opacity: 1 !important;
    transform: none !important;
  }

  .slgn-v2 .slgn-coppie--apre .slgn-carta__segno { display: none; }

  .slgn-js .slgn-v2 .slgn-prog__quadro,
  .slgn-js .slgn-v2 .slgn-prog__meta {
    opacity: 1;
    transform: none;
  }

  /* Meno animazioni: il video della vetrina non parte mai. Anche la
     transizione di opacita' va spenta, perche' con display: none non serve
     ma senza quel blocco la regola base la erediterebbe. */
  .slgn-v2 .slgn-prog__video { display: none; }
  .slgn-v2 .slgn-prog__video { opacity: 0 !important; transition: none !important; }

  /* E con lui la grana: e' l'unica cosa in pagina che si muove da sola per
     tutto il tempo in cui resta accesa, quindi qui non ci sta proprio. La
     classe 'is-accesa' puo' arrivare lo stesso - lo script gira comunque -
     e senza questa riga resterebbe una texture che sfarfalla sul vuoto. */
  .slgn-v2 .slgn-prog__quadro::after {
    opacity: 0 !important;
    animation: none !important;
  }

  /* Meno animazioni: l'elenco resta tutto acceso e l'immagine dietro al
     puntatore non esiste. Chi ha chiesto meno movimento non deve vedere
     ne' titoli spenti ne' un'inquietudine che lo segue. */
  .slgn-v2 .slgn-elenco__titolo { color: var(--v2-carta); }
  .slgn-v2 .slgn-elenco__titolo,
  .slgn-v2 .slgn-elenco__etichetta { opacity: 1; transition: none; }
  .slgn-v2 .slgn-elenco__scena { display: none; }
}


/* =========================================================================
   ARCHIVIO A SCHEDE
   =========================================================================
   La stessa scheda della vetrina, ferma in una griglia invece che in corsa
   dentro a una corsia. Qui non c'e' niente del disegno della scheda - quello
   sta tutto sopra, in '.slgn-prog' - solo la disposizione e le due misure che
   in griglia devono cambiare: una scheda larga mezzo schermo, giusta quando ne
   passano tre di fila, in una colonna sarebbe un manifesto.

   Le tinte non sono scritte a mano ma prese dai token della pagina
   ('--ws-line', '--ws-mute', '--ws-paper'): l'archivio puo' stare su fondo
   nero o su fondo avorio, e la sezione avorio ridefinisce quei tre valori.
   Scriverli fissi qui vorrebbe dire filtri invisibili il giorno che qualcuno
   sposta il blocco su carta. */

.slgn-archivio {
  display: grid;
  grid-template-columns: repeat(var(--archivio-colonne, 3), minmax(0, 1fr));
  gap: clamp(30px, 4vw, 68px) clamp(16px, 2.2vw, 38px);
  margin-top: clamp(26px, 3.6vw, 58px);
}

/* La scheda in vetrina e' larga a misura di corsia e non si stringe mai
   ('flex: none'): in una colonna di griglia deve fare l'opposto. */
.slgn-archivio .slgn-prog {
  width: auto;
  flex: initial;
}

/* In corsia il riquadro e' alto quanto la finestra lo lascia. In griglia
   l'altezza la detta la colonna, altrimenti tre schede accanto verrebbero di
   tre altezze diverse. Il 4:5 e' lo stesso formato della copertina che i case
   study caricano gia'. */
.slgn-archivio .slgn-prog__quadro {
  height: auto;
  aspect-ratio: 4 / 5;
  padding: 20px;
}

.slgn-archivio .slgn-prog__meta {
  gap: 16px;
  padding-top: 14px;
}

/* Il numero del segnaposto e' tarato sulla scheda della vetrina, che e' larga
   mezzo schermo: dentro a una colonna di griglia riempirebbe il riquadro e
   diventerebbe il soggetto invece dell'attesa di un soggetto. */
.slgn-archivio .slgn-prog__quadro > span {
  font-size: clamp(52px, 5.6vw, 128px);
}

.slgn-archivio .slgn-prog__quadro small {
  font-size: 9.5px;
}

.slgn-archivio .slgn-prog__meta h3 {
  font-size: clamp(20px, 1.7vw, 30px);
}

.slgn-archivio .slgn-prog__meta p {
  flex: none;
  color: var(--ws-silver, rgba(255, 255, 255, .58));
  text-align: right;
}

/* Sfalsato: una scheda si' e una no scende. E' un margine e non una
   traslazione perche' il margine lo sa anche la griglia - l'ultima riga si
   porta dietro la sua altezza invece di sbordare sotto alla sezione. */
.slgn-archivio--sfalsato .slgn-archivio__carta:nth-child(2n) {
  margin-top: clamp(22px, 4.5vw, 88px);
}

/* -- I filtri --
   Pastiglie, non un menu a tendina: le categorie sono tre o quattro e stanno
   tutte in una riga, e una tendina nasconderebbe la sola informazione che
   questa fila da' anche a chi non ci clicchera' mai - di che cosa parla
   l'archivio. */
.slgn-archivio__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(22px, 3vw, 44px);
}

.slgn-archivio__filtro {
  padding: 9px 17px;
  border: 1px solid var(--ws-line, rgba(255, 255, 255, .18));
  border-radius: 999px;
  background: transparent;
  color: var(--ws-mute, rgba(255, 255, 255, .6));
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s var(--v2-ease), border-color .25s var(--v2-ease), background .25s var(--v2-ease);
}

.slgn-archivio__filtro:hover {
  color: var(--ws-paper, #ece9e1);
  border-color: var(--ws-paper, #ece9e1);
}

.slgn-archivio__filtro.is-attivo {
  background: var(--ws-paper, #ece9e1);
  border-color: var(--ws-paper, #ece9e1);
  color: var(--ws-ink, #080808);
}

/* Le schede escluse dal filtro se ne vanno con un tempo, non sparendo di
   colpo: e' l'unico modo di capire che il filtro ha fatto qualcosa. Dopo la
   transizione lo script mette 'hidden' e la scheda esce dalla griglia. */
.slgn-archivio__carta {
  transition: opacity .3s var(--v2-ease), transform .3s var(--v2-ease);
}

.slgn-archivio__carta.is-fuori {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* La scheda e' un flex ('.slgn-prog'), e una classe batte il 'display: none'
   che il browser da' da se' agli elementi con 'hidden': senza questa riga la
   scheda filtrata via resterebbe nella griglia, trasparente ma ingombrante,
   e le altre non si richiuderebbero. */
.slgn-archivio__carta[hidden] {
  display: none;
}

@media (max-width: 1080px) {
  .slgn-archivio {
    grid-template-columns: repeat(min(var(--archivio-colonne, 3), 2), minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  /* Una colonna sola, e lo sfalsamento sparisce: in colonna singola non
     sfalsa niente, aggiunge solo un buco fra una scheda e l'altra. */
  .slgn-archivio {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .slgn-archivio--sfalsato .slgn-archivio__carta:nth-child(2n) {
    margin-top: 0;
  }

  .slgn-archivio .slgn-prog__quadro {
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Stessa scelta della vetrina: niente video, niente grana. Qui la regola
     non e' sotto '.slgn-v2' perche' l'archivio si puo' mettere anche in una
     pagina della prima versione, e chi ha chiesto meno movimento lo ha
     chiesto li' come altrove. */
  .slgn-archivio .slgn-prog__video { display: none; }

  .slgn-archivio .slgn-prog__quadro::after {
    opacity: 0 !important;
    animation: none !important;
  }

  .slgn-archivio__carta { transition: none; }
}

/* L'elenco progetti a schede.
 *
 * L'elenco a righe e' a tutta pagina e i suoi figli si tengono da se' il
 * margine laterale ('.slgn-elenco__occhiello', '.slgn-pagine'): la griglia
 * deve fare lo stesso, altrimenti le schede toccherebbero il bordo dello
 * schermo mentre l'occhiello sopra sta rientrato. */
.slgn-elenco--schede .slgn-archivio {
  margin-inline: var(--v2-margine);
}

/* Sfondo scelto per il singolo servizio nelle coppie. */
.slgn-v2 .slgn-carta > .slgn-carta__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.35);
  pointer-events: none;
}
.slgn-v2 .slgn-carta:has(.slgn-carta__sfondo) { color: #fff; }
.slgn-v2 .slgn-carta:has(.slgn-carta__sfondo) .slgn-carta__testo p { color: #fff; }
.slgn-carta:has(.slgn-carta__sfondo) .slgn-carta__n,
.slgn-carta:has(.slgn-carta__sfondo) .slgn-carta__testo { position: relative; z-index: 1; }

.slgn-elenco__sfondo-mobile { display: none; }
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .slgn-v2 .slgn-elenco__riga { isolation: isolate; }
  .slgn-v2 .slgn-elenco__sfondo-mobile {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .slgn-elenco__sfondo-mobile img { width: 100%; height: 100%; object-fit: cover; }
  .slgn-elenco__sfondo-mobile::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
  .slgn-v2 .slgn-elenco__riga.is-foto-mobile { background: #111; color: #fff; }
  .slgn-v2 .is-foto-mobile .slgn-elenco__sfondo-mobile { opacity: 1; }
  .slgn-v2 .is-foto-mobile .slgn-elenco__titolo,
  .slgn-v2 .is-foto-mobile .slgn-elenco__etichetta { color: #fff; opacity: 1; }
}

/* Servizi, Portfolio e Contatti: una schermata esatta, stessa scala. */
/* Modulo contatti: griglia leggibile anche con i paragrafi aggiunti da CF7. */
.slgn-v2 .slgn-contact { gap: clamp(36px, 6vw, 100px); align-items: start; }
.slgn-v2 .slgn-contact > * { min-width: 0; }
.slgn-v2 .slgn-form { gap: 28px; }
.slgn-v2 .slgn-form__grid { gap: 26px 24px; }
.slgn-v2 .slgn-form__grid > p { display: contents; }
.slgn-v2 .slgn-field { min-width: 0; gap: 10px; margin: 0; }
.slgn-v2 .slgn-field > span:first-child {
  color: #d7d7d2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
}
.slgn-v2 .slgn-contact .wpcf7 :is(input[type="text"], input[type="email"], select, textarea) {
  min-height: 56px;
  padding: 15px 16px;
  border: 1px solid #454545;
  background: #151515 !important;
  color: #f7f7f4 !important;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
}
.slgn-v2 .slgn-contact .wpcf7 textarea { height: 180px; min-height: 160px; }
.slgn-v2 .slgn-contact .wpcf7 :is(input, select, textarea):focus-visible {
  outline: 2px solid #f7f7f4;
  outline-offset: 3px;
}
/* Il controllo nativo conserva tastiera, accessibilita' e selettore mobile. */
.slgn-v2 .slgn-contact .pxl-select select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  pointer-events: auto;
  appearance: auto;
}
.slgn-v2 .slgn-contact :is(.pxl-select-higthlight, .pxl-select-options) { display: none !important; }
.slgn-v2 .slgn-form__submit { display: flex; align-items: center; gap: 16px; }
.slgn-v2 .slgn-contact .wpcf7 input[type="submit"] {
  min-height: 56px;
  padding: 16px 30px;
  font-size: 16px;
  font-weight: 700;
  transition: background-color .2s, color .2s;
}
.slgn-v2 .slgn-contact .wpcf7 input[type="submit"]:hover { background: #ccc; }
.slgn-v2 .slgn-contact .wpcf7-not-valid-tip { margin-top: 8px; font-size: 13px; letter-spacing: normal; text-transform: none; }
.slgn-v2 .slgn-contact .wpcf7-response-output { margin: 24px 0 0; padding: 16px; }
.slgn-v2 .slgn-company { padding-block: clamp(36px, 4vw, 64px); }
.slgn-v2 .slgn-company__title {
  max-width: 900px;
  margin: 10px 0 24px;
  color: #f7f7f4;
  font-family: var(--ws-display);
  font-size: clamp(25px, 2.8vw, 40px);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .95;
}
.slgn-v2 .slgn-company__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid #4a4a48; }
.slgn-v2 .slgn-company__item { display: grid; gap: 6px; min-height: 78px; padding: 14px 0; border-bottom: 1px solid #4a4a48; }
.slgn-v2 .slgn-company__item:nth-child(odd) { padding-right: clamp(20px, 4vw, 64px); }
.slgn-v2 .slgn-company__item:nth-child(even) { padding-left: clamp(20px, 4vw, 64px); border-left: 1px solid #4a4a48; }
.slgn-v2 .slgn-company__item dt { color: #a7a7a2; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.slgn-v2 .slgn-company__item dd { margin: 0; color: #f7f7f4; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.4; }
.slgn-v2 .slgn-company__item a { color: inherit; text-decoration-color: rgba(247,247,244,.42); text-underline-offset: .18em; }
.slgn-v2 .slgn-company__item a:hover { text-decoration-color: currentColor; }
@media (max-width: 600px) {
  .slgn-v2 .slgn-form__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .slgn-v2 .slgn-form__submit { position: relative; }
  .slgn-v2 .slgn-form__submit .wpcf7-spinner { position: absolute; right: 12px; margin: 0; }
  .slgn-v2 .slgn-contact .wpcf7 input[type="submit"] { width: 100%; }
  .slgn-v2 .slgn-company { padding-block: 32px; }
  .slgn-v2 .slgn-company__list { grid-template-columns: minmax(0, 1fr); }
  .slgn-v2 .slgn-company__item { min-height: 0; padding: 12px 0; }
  .slgn-v2 .slgn-company__item:nth-child(odd),
  .slgn-v2 .slgn-company__item:nth-child(even) { padding-inline: 0; border-left: 0; }
  .slgn-v2 .slgn-company__item dd { font-size: 14px; }
}

/* Servizi, Portfolio e Contatti: una schermata esatta, stessa scala. */
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) {
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
}
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__inner {
  position: absolute;
  top: 20%;
  padding-top: 0;
  padding-bottom: 0;
}
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
  font-size: min(clamp(92px, 12.4vw, 238px), calc(100cqw / 3.72), 10vh);
}
@media (max-width: 900px) {
  .slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
    font-size: min(clamp(44px, 21.5vw, 142px), calc((100vw - 40px) / 6.5), 7.4vh);
  }
}