/* ============================================================
   Regola dello scroll (§4 del brief)
   ============================================================
   Nelle scene principali la pagina non scorre. Su mobile lo scroll e' concesso,
   perche' vietarlo li' significherebbe tagliare contenuto. */

/* La classe sta sul body. L'overflow del viewport viene preso da html se html e'
   visible, e lo e': quindi nascondere lo scroll qui basta e non serve toccare html. */
/*
 * L'altezza utile toglie la barra di WordPress.
 *
 * In backend quella barra spinge il documento in basso di 32 px: senza tenerne conto,
 * una scena "a schermo intero" e' alta quanto lo schermo piu' la barra, e la pagina
 * scorre esattamente di quei pixel — su una scena che per specifica non deve scorrere.
 * Il visitatore non la vede mai; l'amministratore che guarda il sito si', ed e' lui a
 * doverlo approvare.
 */
body.nm-scena-piena { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); overflow: hidden; }

body.nm-scena-piena .nm-page { height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
body.nm-scena-piena .nm-main { min-height: 0; display: flex; flex-direction: column; }

/*
 * Su mobile la scatola si apre.
 *
 * Liberare il `body` non bastava: `.nm-page` restava alta quanto lo schermo, e il
 * contenuto che non ci stava usciva dalla scatola e si stampava sopra il footer. Non era
 * un ritaglio — la pagina scorreva davvero, di 2218 px su Chi siamo — ma header, testo e
 * footer stavano tutti dentro il primo schermo, uno sopra l'altro. Da qui i tagli a metà
 * riga su Chi siamo, sulla scheda del libro e sull'articolo.
 *
 * `min-height` al posto di `height`: la pagina riempie lo schermo quando il contenuto è
 * corto, e cresce quando è lungo. È l'unica differenza, ed è tutta la differenza.
 *
 * L'altezza dinamica del viewport (`dvh`) invece di quella piccola (`svh`): su mobile la
 * barra degli indirizzi si ritira scorrendo, e con `svh` resterebbe per sempre una striscia
 * vuota alta quanto la barra sotto il footer.
 */
@media (max-width: 900px) {
	body.nm-scena-piena { height: auto; overflow: visible; }

	body.nm-scena-piena .nm-page {
		height: auto;
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}
}

/*
 * Il catalogo porta la fascia in alto e quella in basso alla misura compatta del design
 * system, cioè quella che /libri-personalizzabili/ aveva quando la griglia, chiedendo più
 * spazio, gliela schiacciava. Ora ce l'hanno per dichiarazione tutte e due le pagine:
 * la stessa misura anche a griglia vuota, dove prima non c'era niente che spingesse e la
 * testa restava alta 151 px contro 90.
 *
 * Il logotipo resta della sua grandezza e sporge sotto la fascia, come faceva prima:
 * l'header è alto quanto la sua misura, non quanto il suo contenuto.
 *
 * La fascia in basso invece no: quella resta alla sua misura su ogni scena, la stessa
 * della Home. Forzarla anche qui alla misura compatta le toglieva quattordici pixel di
 * padding e portava la riga dei crediti a sette pixel dal bordo, mentre altrove ne ha
 * ventuno — il footer sembrava appoggiato più in basso proprio dove la pagina era più
 * piena.
 */
body.nm-scena-catalogo .nm-header { height: var(--nm-header-height-compact); }

/* ============================================================
   Scena 1 — Hero
   ============================================================ */

/*
 * Densita' della hero.
 *
 * Il testo della hero non puo' essere piu' alto dello spazio che gli resta: se lo e',
 * con align-items:center sfora sopra e sotto, e finisce addosso all'header e al bordo
 * strappato. E' esattamente cio' che succedeva.
 *
 * La regola scelta e' l'adattamento per densita': prima si stringono gli spazi, che non
 * costano nulla in leggibilita'; solo dopo si riduce la scala tipografica. Il fattore
 * moltiplica i token invece di sostituirli, cosi' i valori configurati dal backend
 * restano validi e vengono solo scalati.
 */
.nm-hero {
	--nm-d: 1;
	--nm-d-spazio: 1;
	position: relative;
	flex: 1 1 auto;
	display: flex;
	/* "safe" e' la garanzia strutturale: se il contenuto e' comunque piu' alto dello
	   spazio, l'allineamento riparte dall'alto invece di traboccare sopra l'header.
	   La densita' qui sotto fa in modo che non serva quasi mai. */
	align-items: safe center;
	min-height: 0;
	/*
	 * La colonna sta un po' sopra il centro: «alzare leggermente», ha chiesto il
	 * committente il 1° ottobre 2026. Il centro si sposta in su di meta' del padding in
	 * piu' sotto, quindi qui c'e' due volte lo spostamento — 3vh, cioe' 27 px a 900 di
	 * altezza. Con un padding e non con un `transform`: dentro c'e' il ventaglio delle due
	 * strade, e una trasformazione cambierebbe il riferimento di quello che ci sta dentro.
	 * Sul telefono il padding e' un altro, e questo non vale.
	 */
	padding-bottom: calc(var(--space-unit) * 2 + 6vh);
}

@media (max-height: 1000px) { .nm-hero { --nm-d: 0.94; --nm-d-spazio: 0.62; } }
@media (max-height: 880px)  { .nm-hero { --nm-d: 0.86; --nm-d-spazio: 0.50; } }
@media (max-height: 780px)  { .nm-hero { --nm-d: 0.76; --nm-d-spazio: 0.38; } }
@media (max-height: 680px)  { .nm-hero { --nm-d: 0.66; --nm-d-spazio: 0.30; } }

/*
 * Il media occupa tutto il viewport, non una colonna: nel riferimento la scena e' unica e
 * l'header ci sta sopra trasparente. E' anche l'unico modo per far entrare la composizione
 * — l'artwork e' 1,29:1 e una finestra 16:9 ne mostrerebbe troppo poco se il media fosse
 * confinato fra header e footer.
 *
 * position: fixed dentro .nm-page, che e' un contesto di impilamento: cosi' resta sotto
 * header, footer e colonna di testo, e sopra lo stage.
 */
.nm-hero__media {
	position: fixed;
	inset: 0;
	z-index: 0;
}

.nm-hero__media img,
.nm-hero__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * La tela e' allargata a 1,620:1 apposta, cosi' a 16:9 non si ritaglia quasi nulla e
	 * il soggetto resta alla distanza del riferimento. Ritagliando invece il 19% in
	 * altezza il libro riempiva il quadro e la scena sembrava ingrandita.
	 *
	 * L'allargamento aveva un difetto: la punta della piuma, che nell'originale e'
	 * tagliata dal bordo del quadro, restava mozzata a mezz'aria. E' stata ricostruita.
	 */
	object-position: 50% 50%;
}

/*
 * Un filo di saturazione sul video caricato dall'amministratore. Non sull'immagine del
 * tema: e' il primo fotogramma del filmato e deve restargli identica, o quando il filmato
 * parte i colori cambiano di colpo.
 */
.nm-hero__video {
	filter: saturate(1.14);
}

/*
 * Velo sul lato del testo. Non e' piu' la dissolvenza pesante di prima: l'artwork ha gia'
 * il suo cielo scuro a sinistra, qui serve solo a garantire il contrasto sotto le righe,
 * perche' l'immagine e' sostituibile da backend e non possiamo contare sulla fortuna.
 */
.nm-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * Il velo, ridotto al minimo.
	 *
	 * Era il doppio piu' carico, ed era lui l'ombra che spegneva tutta la hero: su un
	 * artwork che ha gia' il suo cielo scuro a sinistra faceva un lavoro che l'immagine
	 * fa da sola, e in cambio ingrigiva il champagne.
	 *
	 * Resta il tanto che serve a staccare le prime righe dal fondo. Non basta a portare
	 * sottotitolo e pulsante sopra soglia — quello, su questo artwork, si otterrebbe solo
	 * con un velo che si vede.
	 */
	background:
		linear-gradient(to right, color-mix(in srgb, var(--color-bg) 24%, transparent) 0%,
		                          color-mix(in srgb, var(--color-bg) 16%, transparent) 22%,
		                          color-mix(in srgb, var(--color-bg) 7%, transparent) 42%,
		                          transparent 62%),
		linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 20%, transparent) 0%, transparent 12%),
		/*
		 * L'ombra sotto il piede della pagina.
		 *
		 * Il footer sta fra il 93% e il 100% dell'altezza, e su questo artwork li' sotto c'e'
		 * il champagne: crema smorzata su crema chiara dava 1,03 di contrasto, cioe'
		 * invisibile. Il 68% in fondo non e' scelto a occhio: e' il minimo che porta a 4,66
		 * il peggiore di 2.864 punti campionati sotto le righe del piede.
		 *
		 * Sale dal 58%, senza mai un tratto piatto: la prima versione saliva ripida e poi si
		 * fermava, e quel gradino si leggeva come una fascia appoggiata sopra la
		 * fotografia. Una rampa lunga e sempre crescente non ha un punto dove l'occhio
		 * possa dire «qui comincia».
		 */
		linear-gradient(to bottom,
			transparent 58%,
			color-mix(in srgb, var(--color-bg) 7%, transparent) 72%,
			color-mix(in srgb, var(--color-bg) 22%, transparent) 82%,
			color-mix(in srgb, var(--color-bg) 42%, transparent) 90%,
			color-mix(in srgb, var(--color-bg) 68%, transparent) 100%);
}




.nm-hero__testo {
	position: relative;
	z-index: 2;
	width: var(--container-width);
	margin-inline: auto;
	max-width: none;
}

.nm-hero__testo > * { max-width: min(46%, 34rem); }

/* Il ditino che dice di scorrere c'e' solo sul telefono (piu' giu'). */
.nm-hero__scorri { display: none; }

.nm-hero__titolo {
	font-size: calc(var(--scale-h1) * var(--nm-d));
	font-weight: 700;
	margin-bottom: calc(var(--space-unit) * 2.5 * var(--nm-d-spazio));
}

.nm-hero__titolo-riga { display: block; }

/* L'accento del titolo prende il gradiente: e' il pezzo d'oro piu' grande della pagina,
   ed e' li' che una tinta piatta si nota di piu'. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nm-hero__titolo .nm-accent {
		/*
		 * Il riquadro cresce sotto, e la crescita viene ripresa dal margine.
		 *
		 * `background-clip: text` dipinge solo dove il fondo copre le lettere: la pancia
		 * della «g» esce dal riquadro del testo e resterebbe senza colore, cioe' tagliata.
		 * Il padding la include, il margine negativo annulla lo spostamento.
		 */
		display: inline-block;
		padding-bottom: 0.16em;
		margin-bottom: -0.16em;
		background-image: var(--nm-oro-lucente);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
.nm-hero__titolo:focus-visible { outline-offset: 8px; }

.nm-hero .nm-lead {
	font-size: calc(clamp(1.2rem, 2.24vw, 1.8rem) * var(--nm-d));
	margin-bottom: calc(var(--space-unit) * 3 * var(--nm-d-spazio));
}

.nm-hero .nm-rule { margin-block: calc(var(--space-unit) * 2 * var(--nm-d-spazio)); }


.nm-hero__paragrafo {
	font-size: calc(clamp(1.05rem, 1.6vw, 1.32rem) * var(--nm-d));
	font-weight: 500;
	line-height: calc(1.45 + 0.55 * var(--nm-d-spazio));
	margin-bottom: calc(var(--space-unit) * 4 * var(--nm-d-spazio));
}

/*
 * "la tua storia.": e' la riga che chiude il pensiero e deve staccarsi dal resto.
 * Nel riferimento e' gia' nel serif del display, non nel sans del paragrafo; qui va
 * anche in corsivo, che e' la voce narrativa del sistema.
 *
 * La brillantezza non e' un alone che pulsa ma un riflesso che attraversa le lettere da
 * sinistra a destra, come una luce che ci passa sopra: un gradiente con una banda chiara
 * al centro, ritagliato sulla forma del testo e fatto scorrere. Fra un passaggio e
 * l'altro c'e' una pausa, altrimenti sembra una scansione continua invece di un
 * bagliore che capita.
 */
.nm-hero__firma {
	display: inline-block;
	margin-top: 0.12em;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.34em;
	font-weight: 600;
	line-height: 1.25;
	color: var(--nm-gold-100);
}

/*
 * background-clip: text con color: transparent renderebbe il testo invisibile dove non
 * e' supportato. La guardia non e' teorica: senza, in quei browser la riga sparirebbe.
 */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.nm-hero__firma {
		background-image: linear-gradient(
			104deg,
			var(--nm-gold-300) 0%,
			var(--nm-gold-300) 40%,
			var(--nm-gold-100) 47%,
			#FFF4DE 50%,
			var(--nm-gold-100) 53%,
			var(--nm-gold-300) 60%,
			var(--nm-gold-300) 100%
		);
		background-size: 220% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation: nm-riflesso 6s linear infinite;
	}
}

/*
 * Con background-size al 220%, la posizione al 100% allinea il bordo destro
 * dell'immagine a quello del testo — la banda chiara e' allora a sinistra. Portandola
 * a 0% la banda scorre verso destra. Il resto del ciclo e' la pausa.
 */
@keyframes nm-riflesso {
	0%   { background-position: 100% 0; }
	38%  { background-position: 0% 0; }
	100% { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-hero__firma { animation: none; background-position: 62% 0; }
}

@media (max-width: 900px) {
	/*
	 * Sul telefono il testo parte in alto, non al centro.
	 *
	 * Con `safe center` e 82svh di altezza il blocco restava sospeso in mezzo: misurato su
	 * un 375x812, centosessantatre pixel di vuoto fra il fondo dell'header e il titolo, e
	 * altrettanti sotto. Su uno schermo alto e stretto quel vuoto non e' respiro, e'
	 * assenza — e costringe a scorrere per arrivare al pulsante.
	 */
	.nm-hero {
		/*
		 * Il ritmo verticale della hero, sul telefono, torna quasi pieno.
		 *
		 * Le soglie in altezza lo stringono a 0,50 su uno schermo da 812: ha senso su un
		 * portatile basso, dove il testo rischia di non entrare, ma qui la colonna e'
		 * stretta e il testo e' corto — il risultato era titolo, sottotitolo e pulsante
		 * incollati fra loro. E' l'unica variabile da toccare: governa tutte le distanze
		 * insieme, e restano proporzionate invece di essere ritoccate una a una.
		 *
		 * A 1 il respiro era troppo: 0,72 sta in mezzo fra quello e i 10-12 px di prima.
		 */
		--nm-d-spazio: 0.72;
		align-items: flex-start;
		/*
		 * `flex: 0 1 auto` e non `1 1 auto`: la hero non si allunga piu' per riempire la
		 * pagina. Crescendo, con un testo corto, lasciava 317 px di vuoto fra la striscia
		 * dei marchi e il piede — e il footer finiva fuori dalla prima schermata per fare
		 * spazio a niente.
		 *
		 * I 62svh sono quello che serve perche' il piede arrivi appena sopra la piega
		 * invece che sotto: il vuoto resta, ma e' meta' di prima ed e' aria dell'artwork,
		 * non spazio perso.
		 */
		flex: 0 1 auto;
		min-height: 62svh;
		/*
		 * Il respiro sotto l'header: 24 px. Erano 52, quando sotto il titolo c'era solo il
		 * pulsante; con il filmato in mezzo alla colonna il committente ha chiesto titolo e
		 * righe «un po' piu' su» (6 ottobre 2026), come nella sua reference.
		 */
		padding-block: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
	}

	/* La striscia dei marchi segue il pulsante da vicino: qui sopra non c'e' spazio da
	   regalare, e la sua aria era tarata su una pagina larga. */
	.nm-loghi { padding-block: clamp(0.7rem, 2.2vh, 1.4rem) clamp(0.2rem, 0.8vh, 0.5rem); }
	/*
	 * L'artwork per nome, non «ogni immagine dentro la hero». Un selettore largo qui ha gia'
	 * colpito due volte elementi che non doveva — il filtro sugli strati della scia, e poi il
	 * fotogramma di raccordo del filmato. La specificita' e' alzata apposta: la regola di base
	 * e' `.nm-hero__media img`, e senza il nome del contenitore questa perderebbe.
	 */
	/*
	 * Il filmato in una fascia sua, fra le parole e il pulsante.
	 *
	 * Cosi' la reference del committente del 6 ottobre 2026: in alto titolo e righe sul blu,
	 * poi il libro con le fotografie che ne escono, poi «Crea il tuo libro» e i marchi. Prima
	 * il filmato era lo sfondo di tutta la hero, e per leggere il testo ci voleva una velina
	 * scura; il committente lo vuole «vivido, come la versione desktop», e dove sopra non c'e'
	 * testo la velina non serve.
	 *
	 * La colonna del testo si scioglie (`display: contents`) perche' le sue parti si mettano in
	 * fila con il filmato, che nel documento sta prima: titolo e righe, il filmato, poi
	 * pulsante e marchi. Le parti stanno sopra il pulviscolo (1), e il pulsante sopra i marchi,
	 * perche' il ventaglio gli si apre sotto. Sul desktop la colonna resta quella che era.
	 */
	.nm-hero {
		flex-direction: column;
		align-items: stretch;
		padding-inline: calc((100vw - var(--container-width)) / 2);
		/*
		 * Di lato non esce niente. L'alone largo di «Crea il tuo libro», ora che il pulsante e'
		 * al centro e largo, passava il bordo destro di un centinaio di pixel: la pagina
		 * diventava larga 495 px invece di 390, e con lei il pannello del menu, che usciva a
		 * destra. `clip` e non `hidden`: non fa della hero un contenitore che scorre, e sotto
		 * il ventaglio puo' ancora uscire.
		 */
		overflow-x: clip;
	}

	.nm-hero__testo { display: contents; }

	.nm-hero__testo > * {
		position: relative;
		z-index: 2;
		max-width: none;
	}

	.nm-hero .nm-scelta-ancora { z-index: 3; }

	.nm-hero .nm-scelta-ancora,
	.nm-hero .nm-loghi { order: 2; }

	/*
	 * La fascia: a tutta larghezza, il quadro tagliato sul libro.
	 *
	 * Nel fotogramma il libro va dal 42 al 95% della larghezza, con il centro al 68,5%, e le
	 * fotografie partono al 13% dell'altezza. La fascia mostra il quadro intero in altezza e il
	 * 61% in larghezza, dal 38 al 99%: e' il ritaglio che mette il libro in mezzo, largo quasi
	 * tutto lo schermo come nella reference. Da qui la proporzione, 1,1:1, e la posizione, il
	 * 97% in orizzontale. Sopra e sotto sfuma nel blu: in alto il cielo del quadro, in basso
	 * la nebbia calda sotto il libro. Il margine negativo fa entrare quel cielo sotto le
	 * ultime righe, invece di lasciare un vuoto fra le righe e le fotografie.
	 */
	.nm-hero__media {
		position: relative;
		inset: auto;
		order: 1;
		width: 100vw;
		aspect-ratio: 1.1;
		margin: calc(var(--space-unit) * -4) calc(50% - 50vw) calc(var(--space-unit) * -3);
		-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
		mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
	}

	.nm-hero__media .nm-hero__immagine,
	.nm-hero__media .nm-hero__filmato { object-position: 97% 50%; }

	/* Nessun velo: sul filmato non c'e' piu' testo. */
	.nm-hero__media::after { content: none; }

	/*
	 * Sotto il libro, il fondo e' il blu del logo, come nella reference: il cielo notte del
	 * tema, che sta dietro, era molto piu' scuro del cielo del quadro, e la fascia sarebbe
	 * sembrata un riquadro appoggiato sopra.
	 */
	body.nm-scena-home-hero .nm-stage__paint { background: var(--nm-logo-blu); }

	/*
	 * «Crea il tuo libro» al centro e largo, come nella reference: l'84% della colonna, con
	 * parole e stella insieme in mezzo (il committente, lo stesso giorno). Il ventaglio che
	 * apre ha la stessa larghezza.
	 */
	.nm-hero .nm-scelta-ancora { text-align: center; }
	.nm-hero .nm-scelta-ancora > .nm-magia { width: 84%; }
	.nm-hero .nm-hero__cta { flex: 1 1 auto; justify-content: center; }
	.nm-hero .nm-ventaglio { left: 8%; right: 8%; }

	/*
	 * Il ditino che dice di scorrere (`.nm-dito-scorri`, components.css): «nella home da mobile
	 * mettere piccolo ditino che scrolla in basso per far capire che deve scrollare, mantieni
	 * anche l'attuale ditino sul pulsante crea il tuo libro», il committente il 17 ottobre 2026.
	 *
	 * Il suo posto e' alto zero e sta fra il libro e il pulsante, ed e' `sticky` in basso: quando
	 * il pulsante e' sotto la piega — un telefono basso, Safari con le sue barre — il posto resta
	 * attaccato al fondo dello schermo, e il ditino con lui; quando il pulsante si vede, il ditino
	 * gli sta sopra, senza coprirlo. Sopra il posto quanto basta perche' il gesto, che scende di
	 * 0,7rem, non tocchi il pulsante. Col ventaglio aperto non c'e'.
	 *
	 * Senza l'alone scuro di «Chi siamo»: l'ha tolto il committente, lo stesso giorno, e ha tolto
	 * anche la freccetta che gli aveva fatto mettere accanto. Resta l'ombra sottile del ditino di
	 * «Crea il tuo libro», che lo stacca dalla luce del libro.
	 */
	.nm-hero .nm-hero__scorri {
		position: sticky;
		bottom: env(safe-area-inset-bottom, 0px);
		z-index: 3;
		display: block;
		order: 2;
		height: 0;
	}

	.nm-hero__scorri .nm-dito-scorri {
		--nm-dito-w: 1.7rem;
		position: absolute;
		left: 50%;
		bottom: 1.5rem;
		margin-left: calc(var(--nm-dito-w) / -2);
		filter:
			drop-shadow(0 0 1px var(--nm-night-900))
			drop-shadow(0 0 4px color-mix(in srgb, var(--nm-night-900) 70%, transparent));
	}

	.nm-hero:has(.nm-hero__cta[aria-expanded="true"]) .nm-hero__scorri { display: none; }

	/*
	 * Titolo e sottotitolo piu' grandi, sul solo telefono.
	 *
	 * Misurato su un 375: il titolo occupava 193 px di una colonna larga 341, il 57%, e
	 * lasciava centoquarantotto pixel di larghezza inutilizzata. Su desktop lo stesso
	 * titolo riempie la sua colonna — ed e' quella differenza, non il valore in punti, che
	 * lo faceva leggere come rimpicciolito.
	 *
	 * I fattori sono quelli che portano la riga piu' lunga a circa tre quarti della
	 * colonna: oltre, le tre righe del titolo cominciano a stringersi fra loro.
	 */
	.nm-hero__titolo { font-size: calc(var(--scale-h1) * var(--nm-d) * 1.34); }
	/* Il sottotitolo e il paragrafo insieme: quello che sta sotto il titolo e' l'uno o
	   l'altro, o tutti e due, a seconda di cosa ha scritto l'admin. Con il sottotitolo
	   vuoto il paragrafo e' la seconda voce della Home, e restava a 14 px mentre la frase
	   delle vetrine — che ha la sua stessa misura — saliva a 19: lo ha visto il committente. */
	.nm-hero .nm-lead,
	.nm-hero__paragrafo { font-size: calc(clamp(1.2rem, 2.24vw, 1.8rem) * var(--nm-d) * 1.15); }
}

/* Facciata degli embed: nessun iframe prima del click. */
.nm-facade {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: var(--nm-cursore-attivo);
}

.nm-facade img { width: 100%; height: 100%; object-fit: cover; }

.nm-facade__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(56px, 5vw, 84px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: var(--nm-rule-width) solid var(--color-accent-gold);
	border-radius: 50%;
	background: color-mix(in srgb, var(--nm-night-900) 45%, transparent);
	transition: background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-facade__play::before {
	content: "";
	position: absolute;
	left: 56%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0.42em 0 0.42em 0.7em;
	border-color: transparent transparent transparent var(--nm-gold-200);
	font-size: clamp(14px, 1.4vw, 20px);
}

.nm-facade:hover .nm-facade__play { background: color-mix(in srgb, var(--nm-night-900) 20%, transparent); }

.nm-hero__media iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   La scheda che si accende
   ============================================================ */

/*
 * ---- la scheda che si accende ----
 *
 * `nm-accesa` e' la meccanica, non un componente: la portano le schede dei libri e degli
 * articoli sulla carta — e prima di loro le card della scelta, che non ci sono piu'. La
 * variante `--chiara` e' per la carta.
 *
 * Passandoci sopra, la scheda si fa avanti di poco e un filo di luce le gira attorno.
 *
 * Il giro è un settore di conica che ruota: il bordo non è disegnato, è la finestra di
 * un pennello che passa. La corona si ottiene mascherando il riquadro con se stesso —
 * `content-box` meno riquadro pieno — così resta solo lo spessore del bordo, che segue
 * il raggio di curvatura senza doverlo ridichiarare.
 *
 * L'angolo è registrato con @property perché una custom property, senza un tipo
 * dichiarato, non si può animare: resterebbe testo. Dove @property non c'è, il filo
 * compare fermo — il bordo si accende comunque, semplicemente non gira.
 */
@property --nm-giro {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.nm-accesa {
	/* Gli spessori del filo — alone sfocato, filo netto — e la misura delle faville. Sono
	   quelli nati per le card grandi della scelta; una scheda piccola li stringe (v. le vetrine). */
	--nm-accesa-alone: 14px;
	--nm-accesa-sfocatura: 11px;
	--nm-accesa-filo: 2.5px;
	--nm-accesa-favilla: clamp(16px, 1.7vw, 28px);
	position: relative;
	isolation: isolate;
	transition:
		transform 340ms var(--motion-ease),
		box-shadow 340ms var(--motion-ease);
}

/*
 * Il bordo acceso, in due strati.
 *
 * ::before è il bagliore: la stessa conica sfocata, larga il triplo, che deborda verso
 * l'interno della card e le fa da alone. ::after è il filo netto sopra di esso. Un solo
 * strato o è nitido e sottile, o è morbido e sporco: due strati sono l'unico modo per
 * avere un filo di luce che brilla davvero.
 */
.nm-accesa::before,
.nm-accesa::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity 260ms var(--motion-ease);
	background:
		conic-gradient(
			from var(--nm-giro),
			transparent 0deg,
			transparent 22deg,
			color-mix(in srgb, var(--nm-gold-200) 62%, transparent) 52deg,
			var(--nm-gold-100) 74deg,
			#FFF6E2 84deg,
			var(--nm-gold-100) 94deg,
			color-mix(in srgb, var(--nm-gold-200) 55%, transparent) 118deg,
			transparent 152deg,
			transparent 360deg
		),
		linear-gradient(
			color-mix(in srgb, var(--nm-gold-300) 34%, transparent),
			color-mix(in srgb, var(--nm-gold-300) 34%, transparent)
		);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}

.nm-accesa::before {
	z-index: 2;
	padding: var(--nm-accesa-alone);
	filter: blur(var(--nm-accesa-sfocatura));
}

.nm-accesa::after {
	z-index: 3;
	padding: var(--nm-accesa-filo);
}

.nm-accesa:hover,
.nm-accesa:focus-within {
	/*
	 * Avanti, non su: la card cresce verso chi guarda invece di scivolare in alto. Una
	 * traslazione sposta, una scala avvicina — e con l'ombra che si allarga sotto, è
	 * quest'ultima a leggersi come profondità.
	 */
	transform: scale(1.035);
	/* L'ultima ombra e' oro e non nera: e' l'alone che la card getta intorno a se',
	   e non viene ritagliata da overflow: hidden come sarebbe qualunque elemento. */
	box-shadow:
		0 6px 14px -6px rgb(2 6 14 / 0.36),
		0 40px 84px -24px rgb(2 6 14 / 0.6),
		0 0 26px -2px color-mix(in srgb, var(--nm-gold-200) 46%, transparent),
		0 0 74px 4px color-mix(in srgb, var(--nm-gold-300) 30%, transparent);
}

/* In ciclo finché il puntatore resta: il filo continua a girare, non fa un passaggio solo. */
.nm-accesa:hover::before,
.nm-accesa:focus-within::before,
.nm-accesa:hover::after,
.nm-accesa:focus-within::after {
	opacity: 1;
	animation: nm-accesa-giro 3.2s linear infinite;
}

.nm-accesa:hover::before,
.nm-accesa:focus-within::before { opacity: 0.85; }

@keyframes nm-accesa-giro {
	to { --nm-giro: 360deg; }
}

/*
 * Sulla card chiara la stessa luce non si vede: l'oro acceso su carta chiara sta poco
 * sopra il fondo, e un bagliore chiaro su fondo chiaro non e' un bagliore. Qui il filo si
 * appoggia sull'oro d'inchiostro — quello nato per stare su carta — e resta luminoso solo
 * il colmo dell'onda, che e' cio' che si legge come scintilla.
 */
.nm-accesa--chiara::before,
.nm-accesa--chiara::after {
	background:
		conic-gradient(
			from var(--nm-giro),
			transparent 0deg,
			transparent 22deg,
			color-mix(in srgb, var(--nm-gold-graphic) 75%, transparent) 52deg,
			var(--nm-gold-ink) 70deg,
			var(--nm-gold-100) 84deg,
			var(--nm-gold-ink) 98deg,
			color-mix(in srgb, var(--nm-gold-graphic) 70%, transparent) 118deg,
			transparent 152deg,
			transparent 360deg
		),
		linear-gradient(
			color-mix(in srgb, var(--nm-gold-graphic) 46%, transparent),
			color-mix(in srgb, var(--nm-gold-graphic) 46%, transparent)
		);
}

.nm-accesa--chiara:hover,
.nm-accesa--chiara:focus-within {
	box-shadow:
		0 6px 14px -6px rgb(2 6 14 / 0.3),
		0 40px 84px -24px rgb(2 6 14 / 0.42),
		0 0 26px -4px color-mix(in srgb, var(--nm-gold-ink) 44%, transparent),
		0 0 78px 2px color-mix(in srgb, var(--nm-gold-graphic) 26%, transparent);
}

/* ---- le faville sul bordo ---- */

.nm-accesa__faville {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

.nm-accesa__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	width: calc(var(--nm-accesa-favilla) * var(--s, 1));
	transform: translate(-50%, -50%) scale(0.2);
	color: #FFF6E2;
	opacity: 0;
	filter:
		drop-shadow(0 0 5px var(--nm-gold-100))
		drop-shadow(0 0 14px color-mix(in srgb, var(--nm-gold-200) 90%, transparent));
}

/* Su carta una favilla bianca sparisce: il segno e' d'inchiostro d'oro, e la luce le sta
   attorno invece che dentro. */
.nm-accesa--chiara .nm-accesa__favilla {
	color: var(--nm-gold-ink);
	filter:
		drop-shadow(0 0 4px color-mix(in srgb, var(--nm-gold-100) 95%, transparent))
		drop-shadow(0 0 12px color-mix(in srgb, var(--nm-gold-200) 80%, transparent));
}

.nm-accesa__favilla svg { display: block; width: 100%; height: auto; }

/*
 * Si accendono a turno, non insieme: sei lampi sincronizzati sarebbero un lampeggio,
 * sfalsati sono una scintilla che corre lungo il bordo.
 */
.nm-accesa:hover .nm-accesa__favilla,
.nm-accesa:focus-within .nm-accesa__favilla {
	animation: nm-favilla 2.6s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.32s);
}

@keyframes nm-favilla {
	0%, 58%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
	10%           { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(30deg); }
	30%           { opacity: 0.7; transform: translate(-50%, -50%) scale(0.85) rotate(65deg); }
}

@media (prefers-reduced-motion: reduce) {
	.nm-accesa:hover,
	.nm-accesa:focus-within { transform: none; }

	.nm-accesa:hover .nm-accesa__favilla,
	.nm-accesa:focus-within .nm-accesa__favilla { animation: none; opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
   Transizione fra scene
   ============================================================
   Il crossfade avviene sopra lo stage, che non viene mai smontato. Il fondo della pagina
   cambia con una transizione propria: passando da scuro a chiaro attraversa la tonalita'
   intermedia del design system, mai il bianco. */

/*
 * La transizione ha tre tempi, non due: uscita, una sosta al buio, entrata.
 *
 * La sosta e' il motivo per cui prima si vedeva il cambio: la dissolvenza in uscita
 * durava quanto tutta la transizione, ma il contenuto veniva sostituito a meta' strada,
 * cioe' mentre la scena era ancora visibile a meta'. Si vedeva il vecchio diventare
 * nuovo. Ora l'uscita finisce davvero prima che si tocchi il contenuto, e fra le due
 * meta' resta un istante di campo vuoto: e' quello che al cinema separa due inquadrature.
 *
 * Le curve sono diverse nei due sensi. Uscire accelerando e entrare posandosi e' il
 * gesto della luce; una curva sola in tutte e due le direzioni e' il gesto di un
 * meccanismo.
 */
#scene {
	transition:
		opacity var(--nm-durata-entrata, var(--motion-duration-scene)) var(--motion-ease),
		transform var(--nm-durata-entrata, var(--motion-duration-scene)) var(--motion-ease);
}

#scene[data-uscita] {
	opacity: 0;
	transition-duration: var(--nm-durata-uscita, var(--motion-duration-scene));
	transition-timing-function: var(--nm-ease-uscita);
}

/*
 * Lo stato di partenza dell'entrata.
 *
 * Serve perche' uscita ed entrata sono lo stesso elemento: senza, la scena nuova
 * ricomparirebbe rifacendo al contrario l'uscita, e i preset del §7 — che chiedono
 * un'entrata diversa dall'uscita — non esisterebbero. Si applica senza transizione,
 * altrimenti la scena viaggerebbe fin li' invece di trovarcisi gia'.
 */
#scene[data-entrata] {
	opacity: 0;
	transition: none;
}

html,
.nm-stage__paint {
	transition: background-color var(--nm-durata-scena, var(--motion-duration-scene)) var(--motion-ease);
}

/*
 * Durante il passaggio il cielo si abbassa appena.
 *
 * Le costellazioni stanno sotto la scena e restano ferme: quando la scena si dissolve
 * riemergono e attraversano le card come righe sopra il testo. Basta attenuarle: portarle
 * quasi a zero, come avevo fatto prima, svuotava il fondo e rendeva il passaggio una cosa
 * che si guarda invece di una che si attraversa.
 */
.nm-sky {
	transition: opacity var(--nm-durata-uscita, var(--motion-duration-scene)) var(--motion-ease);
}

[data-transizione] .nm-sky { opacity: 0.55; }

.nm-header,
.nm-footer {
	transition: color var(--nm-durata-scena, var(--motion-duration-scene)) var(--motion-ease);
}

/* ---- i preset del §7 del brief ----------------------------------------------
 *
 * Le durate stanno nel router, in rapporto a --motion-duration-scene: cosi' l'unica
 * manopola che l'amministratore vede rallenta o accelera tutto insieme, mantenendo le
 * proporzioni misurate nel §8 di DESIGN-ANALYSIS.md. Qui c'e' solo la forma del gesto.
 *
 * VINCOLO, da conoscere prima di aggiungere movimento a un preset: dentro #scene c'e'
 * almeno un elemento in position: fixed — il media della hero, che occupa il viewport.
 * Una trasformazione su #scene ne diventerebbe il blocco contenitore e lo farebbe saltare
 * di posto all'istante, mentre la scena e' ancora visibile. Per questo i tre passaggi
 * dissolvenza NON traslano: sono gli unici che coinvolgono la hero. I preset con
 * movimento riguardano catalogo, libro, blog e articolo, dove elementi fissi non ce ne
 * sono. Se un domani ne comparisse uno, o quella scena rinuncia al movimento, o quel
 * media smette di essere fixed.
 */

/* dark → dark: la luce si spegne e si riaccende, e basta. */
[data-transizione="dissolvenza"] #scene[data-entrata] { transform: none; }

/*
 * Il fondo non fa piu' tappa sulla tonalita' intermedia.
 *
 * Serviva a non passare per il bianco fra scena scura e scena chiara. Ma ora il fondo
 * cambia insieme alla scena che se ne va, in una sola interpolazione fra due colori del
 * sistema: quel percorso il bianco non lo tocca — la luminanza sale al massimo fino a
 * quella della destinazione, verificato — e una tappa in mezzo vorrebbe dire un secondo
 * cambio di colore proprio mentre la scena nuova sta comparendo, cioe' di nuovo le fasce
 * dietro header e footer. Il token resta nel design system, come chiede il §10 del brief.
 */

/* catalogo → singolo: la scena entrante sale e si posa. */
[data-transizione="reveal"] #scene[data-uscita] { transform: translateY(-0.5rem); }
[data-transizione="reveal"] #scene[data-entrata] { transform: translateY(1.1rem) scale(0.994); }

/* singolo → catalogo: il gesto contrario, si torna da dove si era venuti. */
[data-transizione="reverse"] #scene[data-uscita] { transform: translateY(0.55rem) scale(0.994); }
[data-transizione="reverse"] #scene[data-entrata] { transform: translateY(-0.8rem); }

/* blog → articolo: come il reveal, piu' trattenuto. */
[data-transizione="fade-reveal"] #scene[data-uscita] { transform: translateY(-0.3rem); }
[data-transizione="fade-reveal"] #scene[data-entrata] { transform: translateY(0.75rem); }

/* Senza JavaScript non c'e' nessuna transizione da preparare, e #scene non deve mai
   restare invisibile per colpa di uno stato che nessuno rimuovera'. */
.no-js #scene { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	#scene { transition-duration: var(--nm-motion-duration-reduced); }

	/* Resta la dissolvenza breve, che conserva la continuita' fra le scene. Il
	   movimento no: e' esattamente quello che qui non si vuole. */
	#scene[data-uscita],
	#scene[data-entrata] { transform: none; }

	[data-transizione] .nm-sky { opacity: 1; }
}

/* ============================================================
   Stato di caricamento
   ============================================================
   Compare solo se la scena tarda: sotto quella soglia lampeggerebbe e basta. Bagliore,
   stella e filetto, come chiede il §6 del brief — mai una rotella su fondo bianco. */

.nm-caricamento {
	position: fixed;
	inset: 0;
	/* Sopra la scena che sta uscendo, sotto header e footer, che restano raggiungibili. */
	z-index: 15;
	display: grid;
	place-items: center;
	pointer-events: none;
	/*
	 * Un velo, non un pannello.
	 *
	 * Senza, bagliore e stella atterrano su qualunque cosa ci sia in pagina in quel
	 * momento — misurato: sopra la card scura della Scena 2 sparivano — e la loro
	 * leggibilita' dipenderebbe dal punto in cui e' capitato il visitatore. Il velo e'
	 * il colore della scena stessa, denso al centro e trasparente ai bordi: la pagina
	 * si attenua intorno alla luce invece di essere coperta da una finestra.
	 */
	/*
	 * E il velo e' d'oro, non del colore della scena: era il blu della notte, e il
	 * committente lo ha visto come un'aura blu — «dev'essere sempre dorata». Un'aura d'oro
	 * intorno alla stella: densa al centro, niente ai bordi. Sulla carta l'oro acceso non si
	 * vedrebbe, e li' e' oro grafico (piu' sotto).
	 */
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--nm-gold-300) 62%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 34%, transparent) 44%,
		transparent 72%
	);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--motion-duration-ui) var(--motion-ease),
		visibility 0s linear var(--motion-duration-ui);
}

.nm-caricamento[data-attivo] {
	opacity: 1;
	visibility: visible;
	transition: opacity 300ms var(--motion-ease), visibility 0s linear 0s;
}

.nm-caricamento__bagliore {
	position: absolute;
	width: min(36vmin, 300px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--nm-gold-200) 28%, transparent) 0%,
		transparent 68%
	);
	animation: nm-caricamento-bagliore 2.4s ease-in-out infinite;
}

.nm-caricamento__stella {
	position: relative;
	width: 1.5rem;
	color: var(--nm-gold-100);
	animation: nm-caricamento-stella 2.4s ease-in-out infinite;
}

.nm-caricamento__stella svg { display: block; width: 100%; height: auto; }

.nm-caricamento__filo {
	position: absolute;
	top: calc(50% + 2.6rem);
	width: min(26vmin, 180px);
	height: var(--nm-rule-width);
	background: linear-gradient(90deg, transparent, var(--nm-gold-300), transparent);
	animation: nm-caricamento-filo 2.4s ease-in-out infinite;
}

/*
 * Su carta l'oro in luce non si vede: misurato, la stella stava a 1,01:1 sul fondo crema,
 * cioe' invisibile. Si passa all'oro d'inchiostro, che e' il token nato per questo — e il
 * rapporto sale a 4,7:1. Lo stato di caricamento compare prima che la transizione entri
 * nella tonalita' intermedia, quindi il fondo su cui atterra e' ancora quello della scena
 * da cui si parte: deve reggere entrambi i mondi.
 */
[data-scene-theme="cream"] .nm-caricamento__stella { color: var(--nm-gold-ink); }

[data-scene-theme="cream"] .nm-caricamento {
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--nm-gold-graphic) 46%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-graphic) 22%, transparent) 44%,
		transparent 72%
	);
}

[data-scene-theme="cream"] .nm-caricamento__bagliore {
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--nm-gold-ink) 20%, transparent) 0%,
		transparent 68%
	);
}

[data-scene-theme="cream"] .nm-caricamento__filo {
	background: linear-gradient(90deg, transparent, var(--nm-gold-ink), transparent);
}

@keyframes nm-caricamento-bagliore {
	0%, 100% { opacity: 0.4; transform: scale(0.9); }
	50%      { opacity: 0.85; transform: scale(1.06); }
}

@keyframes nm-caricamento-stella {
	0%, 100% { opacity: 0.5; transform: rotate(0deg) scale(0.88); }
	50%      { opacity: 1;   transform: rotate(45deg) scale(1.12); }
}

@keyframes nm-caricamento-filo {
	0%, 100% { opacity: 0.25; transform: scaleX(0.18); }
	50%      { opacity: 0.8;  transform: scaleX(1); }
}

/*
 * Pulviscolo sopra la scena.
 *
 * Le stelle dello stage restavano invisibili: lo stage sta a z-index 0 e .nm-page, che
 * contiene l'immagine della hero a piena pagina, gli sta sopra. I puntini c'erano ma
 * l'immagine li copriva. Questo strato vive dentro la hero, quindi sopra la fotografia
 * e sotto il testo.
 */
.nm-hero__pulviscolo {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* ---- il filmato della hero ----

   Si sovrappone all'immagine, che e' il suo primo fotogramma: l'immagine e' gia' dipinta
   quando la pagina arriva, quindi il primo pixel non aspetta il video, e quando il filmato
   parte — dal primo fotogramma, sopra se stesso — il passaggio non si vede. Per questo entra
   senza dissolvenza: sfumando, per quasi un secondo la scia ferma dell'immagine e quella che
   gira nel filmato si sarebbero viste tutte e due. Parte quando ha fotogrammi a sufficienza,
   e la classe la mette hero-filmato.js.

   Sta sotto il velo (`::after`), come l'immagine, perche' il velo serve a tenere leggibile
   il testo tanto sopra l'una quanto sopra l'altro. */

.nm-hero__filmato {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	opacity: 0;
	pointer-events: none;
}

.nm-hero__filmato.is-acceso { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	/* Il modulo non lo accende nemmeno; questa e' la seconda serratura. */
	.nm-hero__filmato { display: none; }
}

/* Il contenitore delle particelle della Home, sopra il filmato: copre il riquadro, e il punto
   da cui salgono glielo scrive hero-luce.js (`--nm-luce-x`, `--nm-luce-y`). */
.nm-hero__luce {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.nm-particella {
	position: absolute;
	left: var(--nm-luce-x, 59.6%);
	top: var(--nm-luce-y, 55%);
	width: var(--s);
	height: var(--s);
	margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
	border-radius: 50%;
	background: var(--nm-gold-100);
	box-shadow: 0 0 calc(var(--s) * 2.2) color-mix(in srgb, var(--nm-gold-100) 60%, transparent);
	opacity: 0;
	animation: nm-salita var(--d) linear var(--delay) infinite;
	will-change: opacity, transform;
}

/* Le particelle salgono aprendosi: la corsa e' quasi tutta verticale all'inizio e si
   allarga mentre svanisce, come la polvere che si disperde nell'aria. */
@keyframes nm-salita {
	0%   { opacity: 0;         transform: translate(0, 0) scale(0.35); }
	14%  { opacity: var(--o);  transform: translate(calc(var(--dx) * 0.12), calc(var(--dy) * 0.14)) scale(1); }
	72%  { opacity: var(--o);  transform: translate(calc(var(--dx) * 0.7), calc(var(--dy) * 0.72)) scale(0.9); }
	100% { opacity: 0;         transform: translate(var(--dx), var(--dy)) scale(0.5); }
}

/*
 * Le stesse particelle, sulle scene che non sono la home.
 *
 * Lì un libro non c'è, e inventargli una sorgente sarebbe peggio che non averla: salgono
 * dal bordo basso, ognuna dalla sua ascissa, come polvere sospesa che la luce prende
 * mentre attraversa la stanza. L'animazione è la stessa — cambia solo da dove parte.
 */
.nm-particella--libera {
	left: var(--x);
	top: auto;
	bottom: -3%;
}

/* Sulla home si spengono: lì la fotografia copre lo stage e le particelle vere escono dal
   libro. La classe sta sul body perché il router la riscrive a ogni passaggio, mentre lo
   stage non viene mai ricostruito. */
body.nm-scena-home-hero .nm-stage__polvere { display: none; }

/*
 * Sulla carta le stesse particelle diventano pagliuzze.
 *
 * Una pagliuzza dentro la carta fatta a mano non sale: sta dove il foglio l'ha presa, e
 * cambia solo quando cambia la luce che la incontra. Quindi qui il movimento si ferma —
 * ogni particella si posa alla quota che l'animazione le avrebbe fatto raggiungere, e
 * resta il respiro della luce.
 *
 * E niente alone: su carta l'oro non brilla, riflette. Il colore è quello nato per stare
 * su un fondo chiaro, non l'oro in luce, che qui sarebbe invisibile.
 */
[data-scene-theme="cream"] .nm-particella--libera {
	top: var(--y);
	bottom: auto;
	background: var(--nm-gold-ink);
	box-shadow: none;
	transform: none;
	animation: nm-pagliuzza var(--d) ease-in-out var(--delay) infinite alternate;
}

@keyframes nm-pagliuzza {
	from { opacity: calc(var(--o) * 0.4); }
	to   { opacity: calc(var(--o) * 1.05); }
}

@media (prefers-reduced-motion: reduce) {
	[data-scene-theme="cream"] .nm-particella--libera { animation: none; opacity: var(--o); }
}

/* Su schermi piccoli meno polvere: stessa scena, meno lavoro. */
@media (max-width: 900px) {
	.nm-particella:nth-child(n + 20) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/* Le particelle ferme al punto di partenza sarebbero un grumo: si spengono. */
	.nm-particella { display: none; }
}

/* ============================================================
   Catalogo: archivio di una tipologia
   ============================================================
   La scena non scorre: scorre la griglia, dentro di sé. Intro, filtri e paginazione hanno
   un'altezza propria, e quello che resta è della griglia — è per questo che il budget
   verticale qui non ha bisogno di un fattore di densità come la Scena 2. */

.nm-catalogo {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

.nm-catalogo__interno {
	display: flex;
	flex-direction: column;
	gap: clamp(0.7rem, 1.8vh, 1.6rem);
	width: var(--container-width);
	/* Respiro sopra e sotto: fra l'header e il titolo, e fra la paginazione e il footer.
	   Senza, il catalogo sembra incastrato fra le due fasce invece che appoggiato. */
	padding-block: clamp(1.4rem, 4.2vh, 3.4rem);
	min-height: 0;
}

.nm-catalogo__intro {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.3rem, 0.9vh, 0.7rem);
	text-align: center;
}

.nm-catalogo__titolo {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.5rem, 3.4vw, 2.9rem);
	line-height: 1.12;
	color: var(--color-heading);
}

.nm-catalogo__titolo:focus-visible { outline-offset: 8px; }

.nm-catalogo__racconto {
	max-width: 62ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: clamp(0.82rem, 1.05vw, 0.98rem);
}

.nm-catalogo__racconto p { margin: 0; }

/* ---- le due colonne ---- */

/*
 * A sinistra ciò che non cambia — ricerca, filtri, come funziona il servizio — a destra i
 * libri. La colonna di sinistra ha una larghezza sua e non si comprime sotto una soglia:
 * una riga di filtri strizzata è peggio di una colonna un po' stretta.
 */
.nm-catalogo__colonne {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(200px, 21%) minmax(0, 1fr);
	gap: clamp(1rem, 2.6vw, 3rem);
	min-height: 0;
	padding-top: clamp(0.6rem, 1.6vh, 1.4rem);
	border-top: var(--nm-rule-width) solid var(--color-border);
}

/* La colonna di sinistra ha lo stesso trattamento di quella dei libri: scorre dentro di
   sé, e lo dice. Il riquadro che la contiene è il punto d'appoggio dei due segnali, che
   dentro scorrerebbero via insieme al contenuto. */
.nm-catalogo__lato-area {
	position: relative;
	display: flex;
	min-height: 0;
}

.nm-catalogo__lato {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.4vh, 2rem);
	min-height: 0;
	/* Lo spazio in fondo è per l'invito a scorrere: senza, l'ultima riga di filtri gli
	   finisce sotto, e in una colonna stretta si legge una parola sopra l'altra. */
	padding: 0 0.4rem clamp(2.2rem, 5.5vh, 3.6rem) 0;
}

.nm-catalogo__colonna {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ---- i filtri, in colonna ---- */

.nm-filtri {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: clamp(0.7rem, 1.6vh, 1.2rem);
}

.nm-filtri__cerca {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.nm-filtri__campo {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5em 0.7em;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-button);
	background: color-mix(in srgb, var(--color-bg) 55%, transparent);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: clamp(0.78rem, 1vw, 0.9rem);
}

.nm-filtri__campo::placeholder { color: var(--color-text-muted); }

/*
 * La lente nella casella, e sotto la casella gli esempi di quello che si puo' cercare (6 ottobre
 * 2026). Fuori dal flusso tutti e due: la lente sta dentro il campo, e gli esempi sotto, senza
 * allungare la riga — se no i menu a tendina, che si allungano quanto la riga, diventerebbero
 * piu' alti della casella. Lo spazio sotto lo fa chi contiene la barra.
 */
.nm-filtri__cerca { position: relative; }

.nm-filtri__lente {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	display: block;
	width: 1.1rem;
	color: currentColor;
	pointer-events: none;
	transform: translateY(-50%);
}

.nm-filtri__lente svg { display: block; width: 100%; height: auto; }

.nm-filtri__lente + .nm-filtri__campo { padding-left: 2.4rem; }

.nm-filtri__esempi {
	position: absolute;
	left: 2.4rem;
	right: 0;
	top: calc(100% + 0.35rem);
	overflow: hidden;
	font-size: 0.72rem;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--color-text-muted);
	pointer-events: none;
}

/* L'icona davanti al nome dei due menu fissi: un regalo, le persone. */
.nm-filtri__segno {
	flex: 0 0 auto;
	display: block;
	width: 1.35em;
	color: var(--nm-gold-300);
}

.nm-filtri__segno svg { display: block; width: 100%; height: auto; }

/*
 * Il menu a tendina di un filtro fisso (Occasione, Destinatario): un `<select>` vero, con
 * la freccina del tema al posto di quella del sistema. E' nativo apposta: sul telefono apre
 * la ruota del sistema, da tastiera si sceglie con le frecce, e senza JavaScript parte con
 * il modulo.
 */
.nm-filtri__tendina {
	position: relative;
	display: flex;
	min-width: 0;
}

.nm-filtri__scelta {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5em 2.4em 0.5em 0.7em;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-button);
	background: color-mix(in srgb, var(--color-bg) 55%, transparent);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: clamp(0.78rem, 1vw, 0.9rem);
	text-overflow: ellipsis;
	cursor: var(--nm-cursore-attivo);
	-webkit-appearance: none;
	appearance: none;
}

.nm-filtri__freccia {
	position: absolute;
	right: 0.8em;
	top: 50%;
	width: 1.1em;
	color: var(--nm-gold-300);
	pointer-events: none;
	transform: translateY(-50%);
	transition: transform var(--motion-duration-ui) var(--motion-ease);
}

.nm-filtri__freccia svg { display: block; width: 100%; height: auto; }

/*
 * Il menu del tema al posto dell'elenco di sistema (tendine.js). Il `<select>` vero resta
 * per chi non ha JavaScript; con JavaScript si vede il bottone, e sotto, aperto, il foglio
 * con i valori. Il bottone ha la stessa misura del campo di ricerca e del `<select>` che
 * sostituisce: la riga non si muove.
 */
.nm-filtri__scelta { display: none; }
.no-js .nm-filtri__scelta { display: block; }

.no-js .nm-filtri__bottone,
.no-js .nm-filtri__togli,
.no-js .nm-filtri__lista { display: none; }

.nm-filtri__bottone {
	position: relative;
	flex: 1 1 auto;
	/* In fila, perche' davanti al nome puo' esserci l'icona del filtro. */
	display: flex;
	align-items: center;
	gap: 0.55em;
	min-width: 0;
	padding: 0.5em 2.4em 0.5em 0.7em;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-button);
	background: color-mix(in srgb, var(--color-bg) 55%, transparent);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: clamp(0.78rem, 1vw, 0.9rem);
	text-align: left;
	cursor: var(--nm-cursore-attivo);
}

.nm-filtri__mostra {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.nm-filtri__bottone[aria-expanded="true"] .nm-filtri__freccia { transform: translateY(-50%) rotate(180deg); }

.nm-filtri__bottone:focus-visible {
	outline: 2px solid transparent;
	border-color: var(--nm-gold-200);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 28%, transparent);
}

/* Con un valore scelto, al posto della freccia c'e' la croce che lo toglie. */
.nm-filtri__tendina--scelta .nm-filtri__bottone .nm-filtri__freccia { visibility: hidden; }

.nm-filtri__togli {
	position: absolute;
	right: 0.35em;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--nm-gold-300);
	cursor: var(--nm-cursore-attivo);
	transform: translateY(-50%);
	transition: background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-filtri__togli svg { display: block; width: 0.95em; height: auto; }
.nm-filtri__togli:hover,
.nm-filtri__togli:focus-visible { background: color-mix(in srgb, var(--nm-gold-300) 22%, transparent); outline: none; }

/*
 * Il foglio dei valori: sotto il bottone, largo almeno quanto lui, con un'ombra che lo
 * stacca dai libri sotto. Apre con una dissolvenza e un soffio di discesa.
 */
.nm-filtri__lista {
	position: absolute;
	left: 0;
	top: calc(100% + 0.45rem);
	z-index: 20;
	min-width: 100%;
	max-width: min(22rem, 86vw);
	max-height: min(19rem, 60vh);
	margin: 0;
	padding: 0.4rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border: var(--nm-rule-width) solid var(--color-border);
	/*
	 * Lo stesso raggio del bottone da cui scende: sono la stessa cosa, aperta. Con un tetto:
	 * nello stile «arrotondato» del Design il raggio dei bottoni e' 999 px, e un foglio alto
	 * con quel raggio sarebbe una capsula, con gli angoli che tagliano le voci.
	 */
	border-radius: min(var(--radius-button), 1.1rem);
	background: var(--color-bg);
	box-shadow: 0 18px 44px -18px rgb(2 6 14 / 0.45);
	animation: nm-tendina-apre 180ms var(--motion-ease);
}

.nm-filtri__lista:focus { outline: none; }

@keyframes nm-tendina-apre {
	from { opacity: 0; transform: translateY(-0.35rem); }
	to   { opacity: 1; transform: none; }
}

/* Il bottone aperto sta sopra le cose vicine: il suo foglio non deve finire sotto i libri. */
.nm-filtri__tendina[data-nm-aperta] { z-index: 20; }

.nm-filtri__opzione {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.62em 0.85em;
	/* Dentro il foglio, il raggio del foglio meno il suo margine interno: le curve restano
	   parallele. */
	border-radius: max(2px, calc(min(var(--radius-button), 1.1rem) - 0.4rem));
	color: var(--color-text);
	font-size: clamp(0.88rem, 1vw, 0.96rem);
	line-height: 1.3;
	white-space: nowrap;
	cursor: var(--nm-cursore-attivo);
}

.nm-filtri__opzione--attiva { background: color-mix(in srgb, var(--nm-gold-300) 16%, transparent); }

.nm-filtri__spunta {
	flex: 0 0 auto;
	width: 0.95em;
	color: var(--nm-gold-300);
	opacity: 0;
	transform: scale(0.6) rotate(-20deg);
	transition: opacity var(--motion-duration-ui) var(--motion-ease), transform var(--motion-duration-ui) var(--motion-ease);
}

.nm-filtri__spunta svg { display: block; width: 100%; height: auto; }

/* La voce scelta: piu' marcata, e la stellina d'oro accesa accanto. */
.nm-filtri__opzione[aria-selected="true"] { font-weight: 600; }
.nm-filtri__opzione[aria-selected="true"] .nm-filtri__spunta { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.nm-filtri__lista { animation-name: nm-tendina-sfuma; }
	.nm-filtri__freccia,
	.nm-filtri__spunta { transition: none; }
}

@keyframes nm-tendina-sfuma {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/*
 * Il campo ha già un bordo suo: un contorno staccato di tre pixel gli si affianca come un
 * secondo bordo, e si legge come un errore invece che come "sono qui". Qui il fuoco
 * accende il bordo che c'è già e gli mette intorno un alone che ne segue esattamente la
 * curvatura — un'ombra con estensione, non un contorno.
 *
 * Il contorno resta dichiarato trasparente: in modalità a contrasto forzato i colori li
 * decide il sistema operativo e le ombre spariscono, ma il contorno no.
 */
.nm-filtri__campo:focus-visible,
.nm-filtri__scelta:focus-visible,
.nm-filtri__invio:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 0;
	border-color: var(--nm-gold-200);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 28%, transparent);
}

/* Con JavaScript la ricerca parte da sola: il pulsante resta per chi non ce l'ha, e per
   chi preferisce premere Invio e vedere qualcosa succedere. */
.nm-filtri__invio {
	flex: 0 0 auto;
	padding: 0.5em 0.8em;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--nm-gold-300);
	cursor: var(--nm-cursore-attivo);
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-filtri__invio:hover { color: var(--nm-gold-100); border-color: var(--nm-gold-300); }

.nm-filtri__gruppo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.nm-filtri__nome {
	float: none;
	padding: 0;
	color: var(--nm-gold-400);
	font-size: clamp(0.6rem, 0.78vw, 0.7rem);
}

.nm-filtri__valori {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-filtri__valore {
	display: inline-block;
	padding: 0.34em 0.72em;
	border: var(--nm-rule-width) solid transparent;
	border-radius: 999px;
	color: var(--color-text-muted);
	font-size: clamp(0.72rem, 0.92vw, 0.84rem);
	text-decoration: none;
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease),
	            background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-filtri__valore:hover { color: var(--nm-gold-200); border-color: var(--color-border); }

/* Acceso si vede dal filetto e dal fondo, non solo dal colore: chi non distingue l'oro
   dal grigio deve comunque capire quali filtri sono in funzione. */
.nm-filtri__valore--acceso {
	border-color: var(--nm-gold-300);
	background: color-mix(in srgb, var(--nm-gold-300) 14%, transparent);
	color: var(--nm-gold-100);
}

.nm-filtri__azzera {
	color: var(--nm-gold-400);
	font-size: clamp(0.6rem, 0.78vw, 0.7rem);
	text-underline-offset: 0.3em;
}

.nm-filtri__azzera-icona { display: inline-block; width: 1.2em; vertical-align: -0.2em; margin-right: 0.35em; }
.nm-filtri__azzera-icona svg { display: block; width: 100%; height: auto; }

/* ---- la griglia ---- */

.nm-catalogo__risultati {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Il riquadro a cui sono ancorati i segnali: contiene la griglia e nient'altro. */
.nm-catalogo__area {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

/* Due libri per riga: le schede sono grandi abbastanza da far leggere copertina e titolo
   senza doverci entrare, ed e' quello che una colonna di catalogo deve fare. */
.nm-griglia {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
	gap: var(--nm-gutter);
	margin: 0;
	padding: 0 2px clamp(0.6rem, 1.6vh, 1.4rem);
	list-style: none;
	min-height: 0;
}

.nm-libro { display: flex; }

/*
 * La copertina sta di fianco al testo, non sopra.
 *
 * Con due libri per riga la scheda è larga quasi settecento pixel: una copertina a tutta
 * larghezza, qualunque proporzione le si dia, diventa un nastro alto duecento o un
 * manifesto alto cinquecento. Nessuna delle due somiglia a un libro.
 *
 * Di fianco invece la copertina può tenere la proporzione che ha davvero — più alta che
 * larga — e la larghezza avanzata va al titolo, che è la cosa che si legge per scegliere.
 */
.nm-libro__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 1.5vw, 1.5rem);
	width: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * La copertina ha una proporzione, ma anche un tetto.
 *
 * Con due libri per riga su uno schermo largo la colonna arriva a settecento pixer per
 * scheda, e una proporzione fissa ne farebbe una copertina alta cinquecento: due libri
 * riempirebbero lo schermo e il catalogo smetterebbe di sembrare un catalogo. Il tetto è
 * legato all'altezza della finestra, che è la cosa di cui qui c'è scarsità.
 */
.nm-libro__cornice {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	width: clamp(84px, 10.5vw, 150px);
	/* La proporzione di un libro illustrato: più alto che largo, senza esagerare. */
	aspect-ratio: 3 / 4;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-media);
	background: color-mix(in srgb, var(--color-bg) 60%, transparent);
}

.nm-libro__copertina {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 520ms var(--motion-ease);
}

.nm-libro__vuota {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--nm-gold-400);
}

.nm-libro__vuota svg { width: 44%; }

.nm-libro__testo {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.nm-libro__titolo {
	font-family: var(--font-display);
	font-size: clamp(0.95rem, 1.3vw, 1.15rem);
	line-height: 1.25;
	color: var(--color-heading);
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-libro__estratto {
	font-size: clamp(0.74rem, 0.92vw, 0.85rem);
	line-height: 1.5;
	color: var(--color-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * I dati del libro — eta', destinatario, occasione — con il loro segno, separati da un
 * filetto verticale. Sono i valori dei filtri del libro, letti dalla sua scheda.
 *
 * Con tre dati, su una scheda stretta, la riga va a capo: e il filetto non deve finire in
 * testa alla riga nuova. Ogni dato ha il suo filetto a sinistra, nel varco; la fila parte
 * un varco prima del bordo, e quel varco si ritaglia (`clip-path`): il primo dato di ogni
 * riga ha il filetto li' dentro, e non si vede.
 */
.nm-libro__dati {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35em 0;
	margin-left: -1.5em;
	clip-path: inset(0 0 0 1.5em);
	font-size: clamp(0.72rem, 0.9vw, 0.82rem);
	line-height: 1.3;
	color: var(--nm-gold-400);
}

.nm-libro__dato {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-left: 1.5em;
}

.nm-libro__dato::before {
	content: "";
	position: absolute;
	left: -0.75em;
	top: 50%;
	width: var(--nm-rule-width);
	height: 1.1em;
	margin-top: -0.55em;
	background: currentColor;
	opacity: 0.55;
}

.nm-libro__dato-icona { flex: 0 0 auto; width: 1.2em; }
.nm-libro__dato-icona svg { display: block; width: 100%; height: auto; }

.nm-libro__link:hover .nm-libro__copertina,
.nm-libro__link:focus-visible .nm-libro__copertina { transform: scale(1.05); }

.nm-libro__link:hover .nm-libro__titolo,
.nm-libro__link:focus-visible .nm-libro__titolo { color: var(--color-accent); }

/* ---- paginazione ---- */

.nm-paginazione {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding-top: clamp(0.5rem, 1.2vh, 1rem);
	border-top: var(--nm-rule-width) solid var(--color-border);
	font-size: clamp(0.66rem, 0.85vw, 0.76rem);
}

.nm-paginazione a,
.nm-paginazione span {
	display: inline-block;
	min-width: 2.2em;
	padding: 0.45em 0.6em;
	border: var(--nm-rule-width) solid transparent;
	border-radius: var(--radius-button);
	color: var(--color-text-muted);
	text-align: center;
	text-decoration: none;
}

.nm-paginazione a:hover { color: var(--nm-gold-200); border-color: var(--color-border); }

.nm-paginazione .current {
	border-color: var(--nm-gold-300);
	color: var(--nm-gold-100);
}

/* ---- i tre stati ---- */

.nm-catalogo__attesa { display: none; }

/*
 * Attesa: la griglia resta dov'è e si spegne, con un filetto d'oro che scorre sopra. Non
 * si svuota — far sparire i risultati per rimetterli mezzo secondo dopo è il modo più
 * sicuro di far sembrare rotto qualcosa che funziona.
 */
.nm-catalogo__risultati[data-stato="caricamento"] .nm-griglia {
	opacity: 0.34;
	pointer-events: none;
	transition: opacity var(--motion-duration-ui) var(--motion-ease);
}

.nm-catalogo__risultati[data-stato="caricamento"] .nm-catalogo__attesa {
	display: block;
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: var(--nm-rule-width);
	overflow: hidden;
}

.nm-catalogo__attesa-filo {
	display: block;
	width: 34%;
	height: 100%;
	background: linear-gradient(90deg, transparent, var(--nm-gold-200), transparent);
	animation: nm-catalogo-attesa 1.15s ease-in-out infinite;
}

@keyframes nm-catalogo-attesa {
	from { transform: translateX(-110%); }
	to   { transform: translateX(400%); }
}

.nm-catalogo__risultati[data-stato="errore"] .nm-griglia,
.nm-catalogo__risultati[data-stato="errore"] .nm-paginazione { display: none; }

/*
 * Il blocco d'errore condivide l'impaginato con quello del vuoto ma non la visibilità, e
 * le due cose vanno tenute separate: dichiarare `display: flex` nella regola comune lo
 * rendeva visibile sempre, perché quella regola viene dopo e vince su `display: none`.
 */
.nm-catalogo__vuoto,
.nm-catalogo__errore {
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: clamp(1.5rem, 6vh, 4rem) 1rem;
	text-align: center;
}

.nm-catalogo__vuoto { display: flex; }
.nm-catalogo__errore { display: none; }
.nm-catalogo__risultati[data-stato="errore"] .nm-catalogo__errore { display: flex; }

.nm-catalogo__stella { display: block; width: clamp(16px, 1.8vw, 26px); color: var(--color-accent-gold); }

.nm-catalogo__vuoto-titolo {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.9vw, 1.5rem);
	color: var(--color-heading);
}

.nm-catalogo__vuoto-testo {
	max-width: 42ch;
	margin: 0;
	color: var(--color-text-muted);
	font-size: clamp(0.8rem, 1vw, 0.92rem);
}

/* ---- i bersagli del dito ----

   Misurati durante la passata sul telefono del 7 settembre, navigando e non ricaricando.
   Sette comandi sotto i 34 px di altezza, e fra loro i due che si usano per primi in un
   catalogo: la casella di ricerca (29) e il pulsante Cerca (28).

   Cresce il riquadro, non la scritta: il testo resta della misura decisa, e a diventare
   grande è l'area che il dito prende. Dove il comando è una riga di testo — l'occhiello
   della categoria, il ritorno all'elenco — il riquadro si allarga con il padding e si
   recupera con un margine negativo, così la riga non si sposta di dove sta.

   Quaranta e non quarantaquattro dove il comando è secondario e sta da solo, con niente
   di cliccabile attorno che si possa prendere per sbaglio. Quarantotto sui due comandi
   della ricerca, che sono quelli su cui si insiste. */

@media (max-width: 900px) {
	.nm-filtri__campo,
	.nm-filtri__invio {
		min-height: 48px;
		padding-block: 0;
	}

	.nm-filtri__invio {
		display: inline-flex;
		align-items: center;
		padding-inline: 1em;
	}

	.nm-catalogo__come {
		min-height: 40px;
		padding-block: 0.6em;
	}

	/* La paginazione: le cifre sono bersagli piccolissimi, ed è l'ultima cosa che si tocca
	   scendendo un elenco lungo — sbagliarla vuol dire risalire. */
	.nm-paginazione a,
	.nm-paginazione span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* L'occhiello sopra il titolo e il ritorno all'elenco sono righe di testo: il riquadro
	   cresce sotto e sopra, e il margine negativo rimette la riga dov'era. */
	.nm-scheda__scaffale,
	.nm-ritorno__link {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		margin-block: calc((40px - 1.4em) / -2);
	}
}

/* ---- il foglio dei filtri ----

   Sopra i 900 px non esiste: i gruppi stanno in colonna e questi due comandi non si
   vedono. Le due regole stanno fuori dal media query perché sono la forma di partenza, e
   quella che si applica va detta prima di quella che la sostituisce. */

.nm-filtri__apri,
.nm-filtri__piede { display: none; }

/* ---- su mobile scorre la pagina, non la colonna ----

   Sul desktop la scena non scorre e scorre un riquadro dentro di sé: è la regola del §4 del
   brief, ed è quella che tiene la testa e il piede fermi mentre i libri passano.

   Sul telefono quella regola non ha più senso, e diventa un dispetto: il dito scorre i
   libri, la colonna finisce, e continuando a spingere nello stesso punto la pagina non si
   muove — perché quel riquadro dichiara `overscroll-behavior: contain`, che è proprio
   l'istruzione «lo scorrimento finisce qui». Da fuori sembra una pagina bloccata.

   Quindi sotto i 900 px i riquadri di scena restituiscono lo scorrimento alla pagina.
   Restano scorrevoli solo i contenitori che sono scorrevoli per mestiere, come la fila
   delle miniature della galleria, che scorre in orizzontale e non ruba niente a nessuno. */

@media (max-width: 900px) {
	.nm-griglia.nm-scroll,
	.nm-catalogo__lato.nm-scroll,
	.nm-scheda__lato.nm-scroll,
	.nm-scheda__scorre.nm-scroll {
		overflow: visible;
		overscroll-behavior: auto;
	}
}

@media (max-width: 900px) {
	.nm-catalogo__colonne { grid-template-columns: 1fr; }
	.nm-catalogo__lato { overflow: visible; }
	.nm-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/*
	 * Il pulsante che apre, sotto la ricerca e largo quanto lei. Non è una CTA e non ne
	 * prende il linguaggio — l'oro pieno del filetto è di «Crea il tuo libro» e resta suo —
	 * ma è un bersaglio da dito, quindi 48 di altezza.
	 */
	.nm-filtri__apri {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		min-height: 48px;
		padding: 0 1em;
		border: var(--nm-rule-width) solid var(--color-border);
		border-radius: var(--radius-button);
		background: color-mix(in srgb, var(--color-bg) 55%, transparent);
		color: var(--color-text);
	}

	/* Il numero dei filtri accesi: chiuso il foglio, è l'unica cosa in pagina che dice che
	   una selezione è in corso. */
	.nm-filtri__accesi {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.7em;
		height: 1.7em;
		padding-inline: 0.35em;
		border-radius: 999px;
		background: var(--nm-gold-300);
		color: var(--nm-night-900);
		font-size: 0.78em;
		letter-spacing: 0;
	}

	/*
	 * Il velo. È uno pseudo-elemento del form e non un div in più: non deve essere un
	 * bersaglio del focus né una voce in lettura, e un elemento vuoto in pagina lo
	 * sarebbe stato per sbaglio, prima o poi.
	 */
	.nm-filtri::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 34;
		background: color-mix(in srgb, var(--nm-night-900) 62%, transparent);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--motion-duration-scene) var(--motion-ease),
		            visibility var(--motion-duration-scene) var(--motion-ease);
	}

	/*
	 * La scatola dei gruppi diventa il foglio: sale dal basso, si ferma a otto decimi
	 * dello schermo e da lì scorre dentro di sé. Sopra resta una striscia di pagina, che
	 * è il modo in cui un foglio dice di non essere una pagina nuova.
	 */
	.nm-filtri__gruppi {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		z-index: 35;
		display: flex;
		flex-direction: column;
		gap: clamp(0.9rem, 2.4vh, 1.4rem);
		max-height: 82dvh;
		padding: clamp(1rem, 3vh, 1.6rem) 6vw 0;
		border-radius: var(--radius-card) var(--radius-card) 0 0;
		border-top: var(--nm-rule-width) solid var(--color-border);
		background: var(--color-bg);
		box-shadow: var(--shadow-card);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(101%);
		visibility: hidden;
		transition: transform var(--motion-duration-scene) var(--motion-ease),
		            visibility var(--motion-duration-scene) var(--motion-ease);
	}

	[data-filtri="aperti"] .nm-filtri::after { opacity: 1; visibility: visible; }

	[data-filtri="aperti"] .nm-filtri__gruppi { transform: none; visibility: visible; }

	/*
	 * Nel foglio i valori sono bersagli da dito, non parole in una colonna stretta — e il
	 * bordo ce l'hanno sempre, non solo al passaggio del puntatore. Da mouse il contorno
	 * che compare all'hover basta a dire «questo si preme»; da dito quel momento non
	 * esiste, e restava una lista di parole in fila che non sembrava toccabile.
	 */
	.nm-filtri__valore {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-inline: 0.9em;
		border-color: var(--color-border);
		background: color-mix(in srgb, var(--color-bg) 55%, transparent);
	}

	.nm-filtri__valore--acceso { border-color: var(--nm-gold-300); }

	.nm-filtri__valori { gap: 0.5rem; }

	/* Lo spazio che teneva libera l'ultima riga sotto l'invito a scorrere: qui l'invito
	   non c'è più, e restavano sessanta pixel di vuoto fra «Filtra» e il primo libro. */
	.nm-catalogo__lato { padding-bottom: 0; }

	/*
	 * Il piede resta attaccato in fondo mentre i gruppi scorrono sotto: senza, per
	 * chiudere bisognerebbe scorrere fino all'ultimo formato. Il fondo è pieno perché
	 * sotto ci passano i valori.
	 */
	.nm-filtri__piede {
		position: sticky;
		bottom: 0;
		display: block;
		margin-inline: -6vw;
		padding: clamp(0.7rem, 2vh, 1rem) 6vw
		         calc(clamp(0.7rem, 2vh, 1rem) + env(safe-area-inset-bottom));
		border-top: var(--nm-rule-width) solid var(--color-border);
		background: var(--color-bg);
	}

	.nm-filtri__vedi {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		width: 100%;
		min-height: 48px;
		border: var(--nm-rule-width) solid var(--nm-gold-300);
		border-radius: var(--radius-button);
		background: transparent;
		color: var(--color-accent-gold);
	}

	.nm-filtri__trovati { color: var(--color-text-muted); }

	/* L'invito a scorrere la colonna dei filtri non ha più una colonna da scorrere. */
	.nm-catalogo__lato-area > .nm-catalogo__scorri { display: none; }
}

@media (max-width: 560px) {
	/* Una colonna sola: a 375 px due schede stanno in 160 px l'una, e il titolo di un
	   libro ci va a capo tre volte. */
	.nm-filtri__gruppi { padding-inline: 5vw; }
	.nm-filtri__piede { margin-inline: -5vw; padding-inline: 5vw; }
}

/* Senza JavaScript il foglio non si aprirebbe: il pulsante sparisce e i gruppi restano in
   pagina, come sopra la soglia. */
.no-js .nm-filtri__apri,
.no-js .nm-filtri__piede { display: none; }

@media (max-width: 900px) {
	.no-js .nm-filtri__gruppi {
		position: static;
		max-height: none;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		transform: none;
		visibility: visible;
		overflow: visible;
	}

	.no-js .nm-filtri::after { display: none; }
}

@media (max-width: 560px) {
	.nm-griglia { grid-template-columns: 1fr; }
}

/* ---- il segnale che si può scorrere ---- */

/*
 * Una riga tagliata a metà dice "c'è dell'altro" solo a chi già lo sa: sfumandola, lo dice
 * a tutti.
 *
 * Non si dipinge un velo sopra il contenuto — si sfuma il contenuto. Un velo del colore
 * del tema sembra giusto solo finché il fondo è una tinta piatta: appena il fondo ha una
 * grana, una vignettatura o una fotografia, quel rettangolo si stacca e si vede. Sfumando
 * l'elemento che scorre, sotto resta il fondo vero, qualunque esso sia.
 */
[data-nm-area][data-scorri="inizio"] > .nm-scroll,
[data-nm-area][data-scorri="dentro"] > .nm-scroll {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nm-sfuma, 4.5rem)), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--nm-sfuma, 4.5rem)), transparent 100%);
}

.nm-catalogo__scorri {
	position: absolute;
	left: 50%;
	bottom: clamp(0.5rem, 1.6vh, 1.2rem);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	pointer-events: none;
	color: var(--nm-gold-400);
	opacity: 0;
	transform: translate(-50%, 0.4rem);
	transition:
		opacity var(--motion-duration-ui) var(--motion-ease),
		transform var(--motion-duration-ui) var(--motion-ease);
}

[data-nm-area][data-scorri="inizio"] > .nm-catalogo__scorri {
	opacity: 1;
	transform: translate(-50%, 0);
}

.nm-catalogo__scorri-testo { font-size: clamp(0.56rem, 0.72vw, 0.66rem); }

/* Un filetto verticale con una goccia di luce che scende: è il vocabolario del sito, non
   una freccia presa altrove. */
.nm-catalogo__scorri-filo {
	position: relative;
	display: block;
	width: var(--nm-rule-width);
	height: clamp(16px, 2.4vh, 26px);
	overflow: hidden;
	background: color-mix(in srgb, var(--nm-gold-400) 34%, transparent);
}

.nm-catalogo__scorri-filo::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 46%;
	background: linear-gradient(to bottom, transparent, var(--nm-gold-100));
	animation: nm-scorri 1.7s ease-in-out infinite;
}

@keyframes nm-scorri {
	0%   { transform: translateY(-120%); opacity: 0; }
	35%  { opacity: 1; }
	100% { transform: translateY(230%); opacity: 0; }
}

/* ---- il richiamo e la modale "come funziona" ---- */

.nm-catalogo__come {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.2rem;
	padding: 0.3em 0.1em;
	color: var(--nm-gold-300);
	font-size: clamp(0.6rem, 0.78vw, 0.72rem);
	text-decoration: none;
	border-bottom: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-300) 45%, transparent);
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-catalogo__come:hover { color: var(--nm-gold-100); border-color: var(--nm-gold-300); }

.nm-catalogo__come-stella { display: block; width: 0.9em; color: var(--color-accent-gold); }
.nm-catalogo__come-stella svg { display: block; width: 100%; height: auto; }
.nm-catalogo__come:hover .nm-catalogo__come-stella { color: var(--nm-gold-100); }

/*
 * La modale.
 *
 * È un <dialog>: fondo oscurato, chiusura con Esc e trappola del focus li fa il browser,
 * meglio di qualunque cosa scriverei io. Senza JavaScript resta in pagina come una
 * sezione normale, e l'ancora del richiamo ci porta — la regola è in fondo a questo blocco.
 */
.nm-modale {
	max-width: min(46rem, 92vw);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	overflow: visible;
}

.nm-modale::backdrop {
	background: color-mix(in srgb, var(--nm-night-800) 78%, transparent);
	backdrop-filter: blur(4px);
}

.nm-modale__foglio {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	padding: clamp(1.6rem, 4.5vh, 3rem) clamp(1.4rem, 4vw, 3.4rem);
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-300) 55%, transparent);
	border-radius: var(--radius-card);
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--nm-gold-300) 12%, transparent) 0%, transparent 62%),
		var(--nm-night-700);
	box-shadow:
		0 40px 90px -30px rgb(2 6 14 / 0.8),
		0 0 60px -12px color-mix(in srgb, var(--nm-gold-300) 30%, transparent);
	text-align: center;
}

.nm-modale__titolo {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.3rem, 2.6vw, 2rem);
	color: var(--color-heading);
}

.nm-modale__testo,
.nm-modale__rimando {
	max-width: 46ch;
	margin: 0;
	font-size: clamp(0.86rem, 1.1vw, 1rem);
	line-height: 1.75;
	color: var(--color-text);
}

.nm-modale__rimando { color: var(--color-text-muted); }

.nm-modale__link { color: var(--nm-gold-200); text-underline-offset: 0.24em; white-space: nowrap; }
.nm-modale__link:hover { color: var(--nm-gold-100); }

.nm-modale__chiudi {
	margin-top: 0.4rem;
	padding: 0.7em 1.4em;
	border: var(--nm-rule-width) solid var(--nm-gold-400);
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--nm-gold-300);
	font-family: var(--font-body);
	font-size: clamp(0.62rem, 0.8vw, 0.74rem);
	cursor: var(--nm-cursore-attivo);
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-modale__chiudi:hover { color: var(--nm-gold-100); border-color: var(--nm-gold-300); }

/* Le faville intorno al foglio: si accendono a turno mentre la modale è aperta. */
.nm-modale__faville { position: absolute; inset: -12px; pointer-events: none; }

.nm-modale__favilla {
	position: absolute;
	display: block;
	width: clamp(12px, 1.3vw, 20px);
	color: #FFF6E2;
	opacity: 0;
	filter: drop-shadow(0 0 6px var(--nm-gold-100));
	animation: nm-favilla 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.62s);
}

.nm-modale__favilla svg { display: block; width: 100%; height: auto; }

.nm-modale__favilla:nth-child(1) { left: 6%;  top: 0; }
.nm-modale__favilla:nth-child(2) { left: 52%; top: -2%; }
.nm-modale__favilla:nth-child(3) { right: 4%; top: 26%; }
.nm-modale__favilla:nth-child(4) { right: 18%; bottom: 2%; }
.nm-modale__favilla:nth-child(5) { left: 2%;  bottom: 24%; }

/* L'entrata: il foglio arriva da poco sotto e si posa, il fondo si scurisce. */
.nm-modale[open] .nm-modale__foglio { animation: nm-modale-entra 420ms var(--motion-ease) both; }

@keyframes nm-modale-entra {
	from { opacity: 0; transform: translateY(1.2rem) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-modale[open] .nm-modale__foglio { animation: none; }
	.nm-modale__favilla { animation: none; opacity: 0.9; transform: none; }
}

/* Senza JavaScript la finestra non si apre: il riquadro resta in pagina, dopo il catalogo,
   e il richiamo diventa un'ancora che ci porta. */
.no-js .nm-modale {
	display: block;
	position: static;
	width: min(46rem, 92vw);
	margin: clamp(1.5rem, 5vh, 3rem) auto;
}

.no-js .nm-modale__faville { display: none; }

/* La parola sotto ogni libro: non un link dentro un link, l'etichetta di ciò che il
   click fa già. Si accende quando la scheda si accende. */
.nm-libro__cta {
	margin-top: 0.35rem;
	color: var(--nm-gold-400);
	font-size: clamp(0.58rem, 0.74vw, 0.68rem);
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-libro__cta span {
	display: inline-block;
	margin-left: 0.35em;
	transition: transform var(--motion-duration-ui) var(--motion-ease);
}

.nm-libro__cta-freccia { vertical-align: middle; width: 1.1em; }
.nm-libro__cta-freccia svg { display: block; width: 100%; height: auto; }

.nm-libro__link:hover .nm-libro__cta,
.nm-libro__link:focus-visible .nm-libro__cta { color: var(--nm-gold-200); }

.nm-libro__link:hover .nm-libro__cta span,
.nm-libro__link:focus-visible .nm-libro__cta span { transform: translateX(3px); }

/* ============================================================
   Scena — la scheda del libro
   ============================================================
   Stessa architettura del catalogo, con le colonne invertite di ruolo: a sinistra le
   immagini, che stanno ferme, a destra tutto il resto, che scorre dentro di sé. La pagina
   non scorre — §4 del brief — quindi la colonna di destra è l'unico contenitore che si
   muove, e lo dice con gli stessi due segnali della griglia dei libri. */

.nm-scheda {
	/* Lo spazio fra le due colonne, e la misura della descrizione: servono anche alla barra
	   dell'acquisto, che mette il pulsante sotto la descrizione. */
	--nm-scheda-spazio: clamp(1.2rem, 3.4vw, 3.6rem);
	--nm-racconto-corpo: clamp(0.86rem, 1.08vw, 1rem);
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

.nm-scheda__interno {
	display: flex;
	flex-direction: column;
	width: var(--container-width);
	padding-block: clamp(1.4rem, 4.2vh, 3.4rem);
	min-height: 0;
}

/* Sulla carta lo spazio sopra e sotto e' piu' stretto: e' altezza che va all'immagine. */
.nm-scheda--carta .nm-scheda__interno { padding-block: clamp(0.9rem, 2.4vh, 1.8rem); }

/*
 * Le immagini prendono poco meno della metà. Sotto quella soglia una copertina di libro —
 * che è verticale — diventa un francobollo; sopra, la colonna del testo scende sotto le
 * cinquanta battute per riga e si legge a fatica.
 */
.nm-scheda__colonne {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
	gap: var(--nm-scheda-spazio);
	min-height: 0;
}

.nm-scheda__media {
	display: flex;
	min-height: 0;
}

.nm-scheda__lato-area {
	position: relative;
	display: flex;
	min-height: 0;
}

.nm-scheda__lato {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 2.4vh, 1.8rem);
	min-height: 0;
	/* E mai piu' larga della colonna: un figlio di flex si allarga fino al suo contenuto piu'
	   largo se non glielo si vieta, e qui dentro c'e' il nastro dei tips. */
	min-width: 0;
	/* Lo spazio in fondo è per l'invito a scorrere: senza, l'ultima riga gli finisce
	   sotto. Quello a destra è per la barra, che altrimenti taglia il testo. */
	padding: 0 0.6rem clamp(2.2rem, 5.5vh, 3.6rem) 0;
}

/* ---- la testa della colonna ---- */

.nm-scheda__testa {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Dove si è finiti, e come si torna indietro. Sta sopra il titolo perché è la cosa che si
   legge per prima quando si arriva da un link condiviso. */
.nm-scheda__scaffale {
	align-self: flex-start;
	color: var(--nm-gold-400);
	font-size: clamp(0.58rem, 0.76vw, 0.7rem);
	text-decoration: none;
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-scheda__scaffale:hover,
.nm-scheda__scaffale:focus-visible { color: var(--nm-gold-200); }

.nm-scheda__titolo {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 3.6vw, 3.1rem);
	line-height: 1.1;
	color: var(--color-heading);
}

.nm-scheda__titolo:focus-visible { outline-offset: 8px; }

.nm-scheda__racconto {
	max-width: 62ch;
	color: var(--color-text-muted);
	font-size: var(--nm-racconto-corpo);
	line-height: 1.75;
}

.nm-scheda__racconto > * { margin-block: 0 0.9em; }
.nm-scheda__racconto > :last-child { margin-bottom: 0; }

.nm-scheda__cta { align-self: flex-start; }

/*
 * Il prezzo sopra il pulsante: piu' grande che nella scheda del catalogo, e piu' vicino al
 * pulsante di quanto la colonna distanzi i suoi figli — sono la stessa cosa, il prezzo e
 * il modo di pagarlo. Il margine negativo mangia parte del `gap` della colonna.
 */
.nm-scheda__prezzo {
	align-self: flex-start;
	margin: 0 0 calc(0.6rem - clamp(0.9rem, 2.4vh, 1.8rem));
	font-size: clamp(1.35rem, 1.6vw, 1.6rem);
}

/*
 * Il guscio del pulsante che brilla e' il figlio della colonna, non il pulsante: e la
 * colonna e' un flex in colonna, che allarga i figli a tutta la sua larghezza. Cosi' il
 * guscio era largo quanto la colonna, e le comete e le faville — che girano intorno al
 * guscio — giravano intorno a tutta la colonna. Ferma a sinistra, largo quanto il pulsante.
 * E la colonna non scorre di lato: l'alone del guscio sporge del 14%, e sporgendo a destra
 * creava uno scorrimento orizzontale che non doveva esserci.
 */
.nm-scheda__lato > .nm-magia,
.nm-scheda__lato > .nm-scelta-ancora { align-self: flex-start; }
.nm-scheda__lato { overflow-x: hidden; }

/* Il titolo di una sezione dentro la colonna: recensioni, video. Un filetto sopra invece
   di uno spazio più largo — lo spazio da solo, in una colonna che scorre, non basta a dire
   che qui comincia un'altra cosa. */
.nm-scheda__sezione {
	margin: 0 0 clamp(0.6rem, 1.6vh, 1rem);
	padding-top: clamp(0.7rem, 1.8vh, 1.2rem);
	border-top: var(--nm-rule-width) solid var(--color-border);
	color: var(--nm-gold-400);
	font-size: clamp(0.6rem, 0.78vw, 0.72rem);
	font-weight: 500;
}

/*
 * L'invito a scorrere resta al centro, come nel catalogo. Perché si legga anche quando
 * sotto ci passano i comandi del carosello, qui la sfumatura in fondo è più lunga: sotto
 * l'invito il contenuto è già quasi trasparente, e le due cose non si disturbano.
 */
.nm-scheda__lato-area { --nm-sfuma: 7rem; }

/*
 * ---- la colonna del libro: ferma in cima, scorre la descrizione ----
 *
 * Dal 3 ottobre 2026, per il committente: «Torna alla libreria», la tipologia e il titolo
 * stanno fermi; scorre soltanto la descrizione, con quello che le viene dopo — le recensioni e
 * i video, se il libro li ha. Il prezzo e «Acquista su Amazon» stanno nella barra sotto, larga
 * quanto la pagina. L'articolo del blog resta com'era: li' scorre la colonna intera.
 *
 * La descrizione sfuma in basso finche' c'e' altro da leggere, e in alto appena la si scorre:
 * la sfumatura in alto cresce con i primi 40 px di scorrimento (`--nm-scorso`, da
 * catalogo.js), quella in basso se ne va in fondo (`data-scorri="fine"`).
 */
.nm-scheda--libro .nm-scheda__lato { padding-bottom: 0; }

/* Sotto la barra niente spazio della scena: la barra si appoggia al piede. */
.nm-scheda--libro .nm-scheda__interno { padding-bottom: 0; }

.nm-scheda__racconto-area {
	--nm-sfuma: 4.2rem;
	--nm-sfuma-su: 2.8rem;
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
}

.nm-scheda__scorre {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 2.4vh, 1.8rem);
	min-height: 0;
	/* In fondo un po' d'aria dopo l'ultima riga, che arrivata li' torna piena: la sfumatura in
	   basso se ne va. A destra lo spazio per la barra di scorrimento. */
	padding: 0 0.6rem clamp(1.2rem, 3vh, 2rem) 0;
}

.nm-scheda__racconto-area[data-scorri="inizio"] > .nm-scroll,
.nm-scheda__racconto-area[data-scorri="dentro"] > .nm-scroll,
.nm-scheda__racconto-area[data-scorri="fine"] > .nm-scroll {
	--nm-giu: var(--nm-sfuma);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--nm-sfuma-su) * var(--nm-scorso, 0)), #000 calc(100% - var(--nm-giu)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--nm-sfuma-su) * var(--nm-scorso, 0)), #000 calc(100% - var(--nm-giu)), transparent 100%);
}

.nm-scheda__racconto-area[data-scorri="fine"] > .nm-scroll { --nm-giu: 0px; }

/*
 * ---- la barra dell'acquisto ----
 *
 * Larga quanto la pagina, sotto le due colonne: la copertina, il titolo, il prezzo con i dati
 * del libro — «18-30 anni | Compleanno», come sulle schede della libreria — e il pulsante a
 * destra. «Above the fold, a piena pagina»: l'ha chiesto il committente il 3 ottobre 2026 con
 * un esempio di posizione, non di stile. Lo stile e' quello del sito: un vetro di carta sul
 * cielo pastello, il filetto d'oro, il pulsante che brilla.
 */
.nm-scheda__barra {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 1.6vw, 1.6rem);
	margin-top: clamp(0.7rem, 1.8vh, 1.3rem);
	/*
	 * La barra sta appoggiata al piede — «un po' piu' in basso», ha chiesto il committente — e
	 * li' in basso a destra c'e' la nuvoletta della chat, che sporge oltre il margine della
	 * pagina: 12 px a 1512, 32 a 1024. Invece di alzare la barra, la si accorcia a destra di
	 * quanto la nuvoletta sporge, piu' 8 px d'aria: la nuvoletta resta nel suo angolo, come su
	 * ogni pagina. (100vw - 100%) / 2 e' il margine della pagina, perche' 100% qui e' la
	 * larghezza del contenitore. Dove il margine basta, da circa 1700 px, non si accorcia.
	 *
	 * Il margine e lo spazio ai lati stanno in due variabili perche' servono anche al posto del
	 * pulsante (`.nm-scheda__barra-azione`). Nella variabile, al posto di 100% c'e' la larghezza
	 * del contenitore, che e' la stessa: un 100% vorrebbe dire altro, la' dove la si usa.
	 */
	--nm-barra-margine: max(0px, calc(var(--nm-chat-pulsante) + max(1rem, env(safe-area-inset-right)) + 0.5rem - (100vw - var(--container-width)) / 2));
	--nm-barra-spazio: clamp(0.8rem, 1.6vw, 1.4rem);
	margin-right: var(--nm-barra-margine);
	padding: clamp(0.5rem, 1.1vh, 0.75rem) var(--nm-barra-spazio);
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent);
	border-radius: var(--radius-card);
	background: color-mix(in srgb, var(--nm-pastello-crema) 80%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow:
		0 18px 40px -24px color-mix(in srgb, var(--nm-night-900) 60%, transparent),
		0 0 26px -10px color-mix(in srgb, var(--nm-gold-200) 45%, transparent);
}

.nm-scheda__barra-copertina {
	flex: 0 0 auto;
	width: clamp(44px, 3.8vw, 58px);
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--nm-night-900) 45%, transparent);
}

.nm-scheda__barra-testo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.nm-scheda__barra-titolo {
	margin: 0;
	overflow: hidden;
	color: var(--nm-logo-blu);
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-weight: 700;
	line-height: 1.2;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.nm-scheda__barra-riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2rem 0;
}

.nm-scheda__barra .nm-scheda__prezzo {
	align-self: center;
	margin: 0;
	font-size: clamp(1.05rem, 1.3vw, 1.3rem);
}

/* «29,90 | Per lei | Compleanno»: dopo il prezzo il filetto c'e' anche davanti al primo dato,
   quindi li' la fila non ritaglia il primo come fa sulle schede. Senza prezzo lo ritaglia: un
   filetto in testa alla riga non separerebbe niente. */
.nm-scheda__barra-dati { color: var(--nm-gold-ink); }

.nm-scheda__prezzo + .nm-scheda__barra-dati {
	margin-left: 0;
	clip-path: none;
}

/* Il posto del pulsante, in fondo a destra; sul computer, sotto la descrizione (piu' giu'). */
.nm-scheda__barra-azione {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	margin-left: auto;
}

/* ---- la carta ---- */

/*
 * La scheda e' di carta: lo stesso foglio della seconda sezione delle vetrine, con il suo
 * fondo (`--nm-carta-fondo`, definito su `.nm-vetrina` e ridichiarato qui perche' questa
 * scena non sta dentro una vetrina) e il suo decor. Sul cielo il testo crema finiva nella
 * foschia chiara e non si leggeva: l'ha visto il committente, e ha chiesto questa carta.
 *
 * I colori sono quelli della carta delle vetrine: titolo nel blu del logo, ciò che si tocca
 * in oro d'inchiostro, il testo in inchiostro. La scena e' «cream», quindi la testa mostra
 * il logotipo scuro e il cielo dello stage e' spento. Dal 3 ottobre 2026 il fondo, qui, non
 * e' piu' la carta ma il cielo pastello della libreria, dipinto sullo stage (piu' giu', con
 * `.nm-vetrina__cielo`): prima nella scheda del libro, poi nel blog e nell'articolo.
 */
body.nm-scena-libro,
body.nm-scena-blog,
body.nm-scena-articolo {
	--nm-carta-fondo: radial-gradient(130% 190% at 6% -34%, var(--nm-ink-50) 0%, color-mix(in srgb, var(--nm-ink-50) 92%, var(--nm-paper-50)) 46%, color-mix(in srgb, var(--nm-ink-50) 78%, var(--nm-paper-50)) 100%), var(--nm-ink-50);
}

/* Senza la grana della carta e senza la vignettatura: sul cielo pastello la grana lo sgranava
   (l'ha visto il committente sulla scheda del libro, e per il blog l'ha raccomandato: «sfondo
   non sgranato»), e il cielo della libreria non ce l'ha. */
body.nm-scena-libro .nm-stage__paint::after,
body.nm-scena-libro .nm-stage__paint::before,
body.nm-scena-blog .nm-stage__paint::after,
body.nm-scena-blog .nm-stage__paint::before,
body.nm-scena-articolo .nm-stage__paint::after,
body.nm-scena-articolo .nm-stage__paint::before { display: none; }

.nm-scheda--carta {
	position: relative;
	/*
	 * Niente esce di lato. L'alone del pulsante che brilla sporge del 40% della sua
	 * larghezza per parte: su un telefono, con un pulsante lungo — «Raccontaci la tua
	 * storia», nella pagina dei libri su misura — usciva di 23 px e la pagina scorreva di
	 * lato. `clip` e non `hidden`: taglia senza fare del foglio un contenitore che scorre.
	 */
	overflow-x: clip;
	color: var(--nm-ink-800);
}

/* Il decor sta sotto e non esce; il contenuto sopra. */
.nm-scheda--carta .nm-scheda__interno { position: relative; z-index: 1; }

.nm-scheda--carta .nm-scheda__scaffale { color: var(--nm-gold-ink); }

.nm-scheda--carta .nm-scheda__scaffale:hover,
.nm-scheda--carta .nm-scheda__scaffale:focus-visible { color: var(--nm-gold-ink); text-decoration: underline; text-underline-offset: 0.3em; }

.nm-scheda--carta .nm-scheda__titolo {
	font-weight: 700;
	color: var(--nm-logo-blu);
}

.nm-scheda--carta .nm-scheda__racconto { color: color-mix(in srgb, var(--nm-ink-800) 84%, transparent); }

/* La descrizione del libro piu' marcata: prendeva il 300 del corpo, e sul pastello «non si
   legge bene» (il committente, 7 ottobre 2026). E sfuma meno, in fondo: 2 rem invece di 4,2 —
   con la sfumatura lunga le ultime due righe si leggevano a fatica. */
/* Lo stesso peso al posto del pulsante, nella barra: li' i 62ch della descrizione si misurano col
   suo carattere (piu' giu'). Il pulsante ha misura e peso suoi. */
.nm-scheda--libro .nm-scheda__racconto,
.nm-scheda--libro .nm-scheda__barra-azione { font-weight: 500; }

.nm-scheda--libro .nm-scheda__racconto-area {
	--nm-sfuma: 2rem;
	position: relative;
}

/*
 * La freccetta che dice «c'e' altro»: compare quando la descrizione ha ancora testo sotto, e se
 * ne va quando si arriva in fondo o quando il testo ci sta tutto (lo stato lo scrive catalogo.js,
 * `data-scorri`). «Piccolissima», l'ha chiesta il committente il 7 ottobre 2026. Sta nell'area e
 * non nel testo che scorre, quindi la sfumatura non la tocca; i clic le passano attraverso. Il
 * tratto e' piu' spesso di quello dell'icona: a questa misura, quello dell'icona sparirebbe.
 */
.nm-scheda__giu {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	display: block;
	width: 1.6rem;
	color: var(--nm-gold-ink);
	pointer-events: none;
	opacity: 0;
	transform: translateX(-50%);
	transition: opacity var(--motion-duration-ui) var(--motion-ease);
}

.nm-scheda__giu svg { display: block; width: 100%; height: auto; }
.nm-scheda__giu svg * { stroke-width: 3; }

.nm-scheda__racconto-area[data-scorri="inizio"] .nm-scheda__giu,
.nm-scheda__racconto-area[data-scorri="dentro"] .nm-scheda__giu {
	opacity: 1;
	animation: nm-giu-respiro 1.6s var(--motion-ease) infinite alternate;
}

@keyframes nm-giu-respiro {
	from { translate: 0 -2px; }
	to   { translate: 0 3px; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-scheda__racconto-area .nm-scheda__giu { animation: none; }
}

/*
 * La barra dell'acquisto nello smalto blu di «Crea il tuo libro», con il filetto d'oro e le
 * parole chiare (7 ottobre 2026): il titolo in grassetto, il prezzo e i dati no — tutte chiare
 * allo stesso peso non avrebbero un ordine. Il prezzo perde il suo oro che brilla e resta
 * chiaro; le faville restano. Il pulsante e' quello d'oro di «L’atelier» (`.nm-button--oro`,
 * components.css): prima era il filetto della carta, in oro d'inchiostro.
 */
.nm-scheda--libro .nm-scheda__barra {
	border-color: var(--nm-gold-400);
	background: var(--nm-smalto-blu);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--nm-ink-50);
}

.nm-scheda--libro .nm-scheda__barra-titolo { color: var(--nm-ink-50); }
/* I dati — «Per lei» — chiari pieni, a 500 e un filo piu' grandi: all'82% e leggeri, sul blu, si
   perdevano («questo piu' visibile», 7 ottobre 2026). L'icona e il trattino nell'oro chiaro. */
.nm-scheda--libro .nm-scheda__barra-dati {
	color: var(--nm-ink-50);
	font-size: clamp(0.82rem, 1vw, 0.95rem);
	font-weight: 500;
}

.nm-scheda--libro .nm-scheda__barra .nm-libro__dato-icona { color: var(--nm-gold-200); }
.nm-scheda--libro .nm-scheda__barra .nm-libro__dato::before { background: var(--nm-gold-200); opacity: 0.8; }

.nm-scheda--libro .nm-scheda__barra .nm-prezzo {
	color: var(--nm-ink-50);
	font-weight: 400;
}

.nm-scheda--libro .nm-scheda__barra .nm-prezzo__testo {
	background: none;
	-webkit-text-fill-color: currentColor;
	animation: none;
}

.nm-scheda--libro .nm-scheda__barra .nm-prezzo__favilla { color: var(--nm-gold-100); }

/*
 * Sul computer la colonna del testo sale, e la descrizione ha respiro sopra e sotto: il
 * committente il 7 ottobre 2026, con la tipologia tolta da sopra il titolo. E il decoro sta solo
 * dalla parte della copertina: a destra c'e' il testo, e le linee non devono toccarlo.
 */
@media (min-width: 901px) {
	/* Galleria e colonna del testo salgono insieme, vicino alla testata: sotto, prima della barra,
	   resta piu' aria («un po' piu' su per dare respiro»). */
	.nm-scheda--libro .nm-scheda__interno { padding-top: calc(var(--space-unit) * 0.3); }

	/* E la colonna del testo ancora un po' piu' su, sola: «solleva un po' questa colonna». La
	   copertina e' centrata nella sua, e sopra non le serve. */
	.nm-scheda--libro .nm-scheda__lato-area { margin-top: calc(var(--space-unit) * -2); }

	/* Cosi' «Torna alla libreria» entra nella fascia della testata, che e' trasparente ma prende
	   i clic: li', le parti vuote della testata li lasciano passare. Marchio, menu e azioni li
	   tengono. */
	body.nm-scena-libro .nm-header { pointer-events: none; }
	body.nm-scena-libro .nm-header > * { pointer-events: auto; }
	/* La descrizione vicino al titolo, poco piu' di un modulo: lo spazio va al testo. */
	.nm-scheda--libro .nm-scheda__racconto-area { margin-top: calc(var(--space-unit) * -0.3); }
	/* Sotto la descrizione ancora piu' aria («un altro po' di respiro»): circa 45 px a 900 di
	   altezza. */
	.nm-scheda--libro .nm-scheda__barra { margin-top: clamp(2.2rem, 5vh, 3.4rem); }

	/*
	 * Il pulsante sotto il centro della descrizione: «centrato al testo descrizione sopra», il
	 * committente il 17 ottobre 2026. Il suo posto e' largo quanto la descrizione e sta dove sta
	 * lei: comincia con la colonna di destra, che e' meta' pagina meno lo spazio fra le colonne;
	 * e' larga quanto la colonna meno i suoi due margini a destra (0,6rem della colonna, 0,6rem
	 * per la barra di scorrimento) e mai piu' dei 62ch della descrizione, misurati col suo
	 * carattere. Il margine a destra lo porta li': la barra finisce prima della pagina, per la
	 * nuvoletta della chat, e il margine puo' essere negativo. Dentro, il pulsante sta al centro.
	 */
	.nm-scheda--libro .nm-scheda__barra-azione {
		--nm-colonna: calc((var(--container-width) - var(--nm-scheda-spazio)) / 2);
		--nm-descrizione: min(var(--nm-colonna) - 1.2rem, 62ch);
		width: var(--nm-descrizione);
		margin-right: calc(var(--nm-colonna) - var(--nm-descrizione) - var(--nm-barra-margine) - var(--nm-rule-width) - var(--nm-barra-spazio));
		font-size: var(--nm-racconto-corpo);
	}

	.nm-scheda--libro .nm-carta-decor {
		-webkit-mask-image: linear-gradient(to right, #000 40%, transparent 48%);
		mask-image: linear-gradient(to right, #000 40%, transparent 48%);
	}
}

.nm-scheda--carta .nm-scheda__sezione {
	border-top-color: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent);
	color: var(--nm-gold-ink);
}

.nm-scheda--carta .nm-ritorno { border-color: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent); }
.nm-scheda--carta .nm-ritorno__link { color: var(--nm-gold-ink); }
.nm-scheda--carta .nm-ritorno__link:hover,
.nm-scheda--carta .nm-ritorno__link:focus-visible { color: var(--nm-gold-ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* L'invito a scorrere, in oro d'inchiostro. */
.nm-scheda--carta .nm-catalogo__scorri { color: var(--nm-gold-ink); }

/*
 * La gallery sulla carta: l'immagine si vede tutta — «la gallery non deve presentare
 * alcun taglio» — quindi `contain` e non `cover`, e le lastre non vengono ritagliate.
 * L'altezza del riquadro resta quella della colonna, cosi' passando da un'immagine
 * all'altra non salta niente: cambia solo quanto del riquadro l'immagine riempie.
 */
/*
 * L'immagine piu' grande possibile: «l'immagine dev'essere piu' grande», e su un portatile
 * basso era limitata dall'altezza — la colonna meno le miniature sotto. Quindi le miniature
 * vanno di fianco, in colonna a sinistra, e il riquadro prende tutta l'altezza della
 * colonna: quadrato, perche' le immagini dei libri sono quadrate — con il riquadro largo
 * quanto la colonna le frecce cadevano a mezz'aria, lontane dall'immagine. Un'immagine piu'
 * larga che alta ci sta dentro, piu' piccola. La colonna delle immagini e' la meta' della
 * pagina, non i 43% di prima.
 */
/*
 * Solo da 901 px in su: sotto, la scena e' a una colonna e a scorrere e' la pagina — e
 * queste regole, piu' specifiche di quelle della colonna sola, la rimettevano su due
 * colonne con le miniature di fianco: sul telefono la scheda usciva dallo schermo.
 */
@media (min-width: 901px) {
	.nm-scheda--carta .nm-scheda__colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

	.nm-scheda--carta .nm-galleria {
		flex-direction: row-reverse;
		align-items: center;
		justify-content: center;
		gap: clamp(0.7rem, 1.4vw, 1.2rem);
	}

	.nm-scheda--carta .nm-galleria__lastre {
		flex: 0 1 auto;
		align-self: stretch;
		height: 100%;
		width: auto;
		aspect-ratio: 1;
		max-width: calc(100% - clamp(48px, 5vw, 72px) - clamp(0.7rem, 1.4vw, 1.2rem));
	}

	.nm-scheda--carta .nm-galleria__miniature {
		flex-direction: column;
		max-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 0.3rem 0;
	}
}

.nm-scheda--carta .nm-galleria__lastre { border-radius: 0; overflow: visible; }

/* Sul telefono l'immagine sta sopra le miniature, intera e quadrata, larga quanto la colonna. */
@media (max-width: 900px) {
	.nm-scheda--carta .nm-galleria__lastre { width: 100%; aspect-ratio: 1; }
}

.nm-scheda--carta .nm-galleria__immagine { object-fit: contain; }

.nm-scheda--carta .nm-galleria--sola { border-radius: 0; overflow: visible; }

/* I comandi sopra l'immagine: dischi di carta con il segno in oro d'inchiostro. */
.nm-scheda--carta .nm-galleria__freccia,
.nm-scheda--carta .nm-galleria__lente {
	border-color: color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent);
	background: color-mix(in srgb, var(--nm-ink-50) 88%, transparent);
	color: var(--nm-gold-ink);
}

.nm-scheda--carta .nm-galleria__freccia:hover,
.nm-scheda--carta .nm-galleria__lente:hover {
	border-color: var(--nm-gold-graphic);
	color: var(--nm-gold-ink);
	background: var(--nm-ink-50);
}

.nm-scheda--carta .nm-galleria__lente-segno svg { width: 58%; }

/*
 * Recensioni e video sulla carta: le stelle prese e le frecce dei caroselli erano oro
 * acceso, che sulla carta e' quasi bianco. Oro grafico per i segni, oro d'inchiostro per
 * cio' che si tocca, come su tutto il foglio. Non c'e' ancora un libro con recensioni sul
 * banco: la regola e' scritta sui token, e va guardata la prima volta che ce ne sara' uno.
 */
.nm-scheda--carta .nm-recensione__stella--piena { color: var(--nm-gold-graphic); }
.nm-scheda--carta .nm-recensione__voto { color: color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent); }
.nm-scheda--carta .nm-recensione { background: color-mix(in srgb, var(--nm-ink-50) 62%, transparent); border-color: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent); }

.nm-scheda--carta .nm-carosello__freccia { color: var(--nm-gold-ink); border-color: color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent); }
.nm-scheda--carta .nm-carosello__freccia:hover { color: var(--nm-gold-ink); border-color: var(--nm-gold-graphic); }
.nm-scheda--carta .nm-carosello__punto::before { border-color: color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent); }
.nm-scheda--carta .nm-carosello__punto[aria-current="true"]::before,
.nm-scheda--carta .nm-carosello__punto:hover::before { border-color: var(--nm-gold-ink); background: var(--nm-gold-ink); }

/* Le miniature: intere anche loro, su un fondo di carta appena piu' chiaro. */
.nm-scheda--carta .nm-galleria__scelta {
	background: color-mix(in srgb, var(--nm-ink-50) 70%, transparent);
	border-color: color-mix(in srgb, var(--nm-gold-graphic) 30%, transparent);
	opacity: 0.7;
}

.nm-scheda--carta .nm-galleria__scelta img { object-fit: contain; }

.nm-scheda--carta .nm-galleria__scelta[aria-current="true"] {
	border-color: var(--nm-gold-graphic);
	opacity: 1;
}

/* ============================================================
   Il popup «Come funziona?»
   ============================================================
   Un foglio di carta sopra un velo di notte, al centro dello schermo: il titolo, una frase,
   l'immagine se c'e', i tre passi nella lingua della striscia — pastiglia con l'icona e la
   moneta con il numero — e una riga di chiusura. Lo apre popup.js dalla riga sotto il
   pulsante di ogni scheda delle vetrine. */

.nm-popup {
	width: min(92vw, 40rem);
	/*
	 * Niente percentuale dentro `min()`: WebKit la risolveva contro un'altezza che non
	 * c'era e il foglio si chiudeva in una striscia di 51 px — visto con il motore di
	 * Safari il 14 settembre 2026. La riga con `vh` e' per chi non conosce `svh`.
	 */
	max-height: 88vh;
	max-height: 88svh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--radius-card);
	background: transparent;
	color: var(--nm-ink-800);
	overflow: visible;
}

.nm-popup::backdrop {
	background: color-mix(in srgb, var(--nm-night-900) 62%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nm-popup__foglio {
	position: relative;
	max-height: 88vh;
	max-height: 88svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.3rem, 3vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.2rem);
	border: 1.5px solid var(--nm-ink-50);
	border-radius: var(--radius-card);
	background: var(--nm-carta-fondo, var(--nm-ink-50));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nm-paper-300) 52%, transparent),
		0 30px 80px -20px rgb(2 6 14 / 0.6);
}

.nm-popup__chiudi {
	position: absolute;
	top: clamp(0.6rem, 1.4vw, 1rem);
	right: clamp(0.6rem, 1.4vw, 1rem);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent);
	border-radius: var(--radius-button);
	background: var(--nm-ink-50);
	color: var(--nm-gold-ink);
	cursor: var(--nm-cursore-attivo);
	transition: border-color var(--motion-duration-ui) var(--motion-ease),
	            background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-popup__chiudi:hover,
.nm-popup__chiudi:focus-visible { border-color: var(--nm-gold-graphic); background: color-mix(in srgb, var(--nm-gold-300) 22%, var(--nm-ink-50)); }
.nm-popup__chiudi svg { display: block; width: 14px; height: 14px; }

/* L'immagine in cima, da bordo a bordo: esce dal margine del foglio e ne segue gli angoli.
   E' la prima cosa che si vede, prima del titolo. */
.nm-popup__figura {
	margin: calc(-1 * clamp(1.6rem, 3vw, 2.6rem)) calc(-1 * clamp(1.3rem, 3vw, 2.6rem)) clamp(1.2rem, 2.4vw, 1.8rem);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	overflow: hidden;
}

.nm-popup__immagine {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Una fascia con una proporzione fissa, 3:1 — 640 × 213 sul foglio largo — e non
	 * un'immagine lasciata alla sua: quella riempiva il foglio e spingeva il pulsante
	 * sotto il bordo dello schermo. «Il popup deve vedersi sempre bene su tutte le
	 * risoluzioni», ha detto il committente, e la proporzione e' quella consigliata nel
	 * backend, cosi' un'immagine fatta bene si vede intera; un'altra si taglia ai bordi.
	 * Sul telefono il foglio e' stretto e la fascia si alza a 16:9 (vedi sotto i 700 px),
	 * con una sua immagine se l'amministratore l'ha caricata.
	 */
	aspect-ratio: 3 / 1;
	object-fit: cover;
}

.nm-popup__figura picture { display: block; }

/* Sul telefono il foglio e' largo 92vw: una fascia 3:1 sarebbe un nastro. 16:9. */
@media (max-width: 700px) {
	.nm-popup__immagine { aspect-ratio: 16 / 9; }
}

/*
 * Il video, al posto dell'immagine: da bordo a bordo come lei, ma nelle proporzioni sue — 16:9
 * di solito, quelle dell'iframe se le dice —, su un fondo di notte finche' non c'e' copertina.
 * La facciata e' quella dei video del sito (il cerchio d'oro col triangolo).
 */
.nm-popup__figura--video {
	position: relative;
	aspect-ratio: var(--nm-video-r, 16 / 9);
	background: var(--nm-night-900);
}

.nm-popup__figura--video .nm-facade,
.nm-popup__figura--video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Un video verticale non sta da bordo a bordo: diventerebbe piu' alto dello schermo. Si stringe
   fino a stare in sei decimi della finestra, al centro, con gli angoli del foglio. */
.nm-popup__figura--verticale {
	width: min(100%, calc(60vh * var(--nm-video-k)));
	margin-inline: auto;
	margin-top: 0;
	border-radius: var(--radius-media);
}

.nm-popup__titolo {
	margin: 0 0 0.4em;
	padding-right: 3rem;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--nm-logo-blu);
}

.nm-popup__testo,
.nm-popup__nota {
	margin: 0;
	font-size: clamp(0.92rem, 1.1vw, 1.05rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--nm-ink-800) 84%, transparent);
}

.nm-popup__testo { margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem); }

.nm-popup__passi {
	display: flex;
	flex-direction: column;
	gap: clamp(0.9rem, 1.8vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-popup__passo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

/* La pastiglia della striscia, con la stessa luce, un po' piu' grande: qui e' la cosa da
   guardare, non un'illustrazione di lato. */
.nm-popup__segno {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(54px, 5vw, 70px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(120% 120% at 26% 18%,
		var(--nm-ink-50) 0%,
		color-mix(in srgb, var(--nm-gold-300) 34%, var(--nm-ink-50)) 46%,
		color-mix(in srgb, var(--nm-gold-300) 62%, var(--nm-ink-50)) 100%);
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 42%, transparent);
	box-shadow: 0 0 14px color-mix(in srgb, var(--nm-gold-300) 52%, transparent);
	color: var(--nm-ink-900);
}

.nm-popup__icona { display: block; width: 50%; }
.nm-popup__icona svg { display: block; width: 100%; height: auto; }

.nm-popup__numero {
	position: absolute;
	left: -10%;
	bottom: -2%;
	width: 24px;
	font-size: 0.72rem;
}

.nm-popup__parole { display: block; }

.nm-popup__nome {
	display: block;
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--nm-ink-900);
}

.nm-popup__riga {
	display: block;
	margin-top: 0.2em;
	font-size: clamp(0.86rem, 1vw, 0.96rem);
	line-height: 1.45;
	color: color-mix(in srgb, var(--nm-ink-800) 80%, transparent);
}

/* Nel popup dei contatti la riga sotto il nome e' il recapito: si tocca per scrivere, chiamare,
   aprire WhatsApp. */
.nm-popup__recapito {
	color: var(--nm-ink-900);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent);
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
	transition: text-decoration-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-popup__recapito:hover,
.nm-popup__recapito:focus-visible { text-decoration-color: var(--nm-gold-graphic); }

/* Senza JavaScript «Contatti» porta all'ancora del popup, e il foglio compare da solo, al
   centro dello schermo; la croce, un collegamento, lo richiude. */
.no-js .nm-popup--contatti:target {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: block;
	height: fit-content;
}

.nm-popup__nota {
	margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
	padding-top: clamp(0.8rem, 1.6vw, 1.2rem);
	border-top: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent);
	font-size: clamp(0.84rem, 0.96vw, 0.92rem);
}

/* ---- I popup dell'amministratore ---- */

/*
 * Lo stesso foglio, con in piu' il countdown e il pulsante (popup-campagna.php), e tutto
 * al centro — titolo, testo, conto, pulsante — come ha chiesto il committente. Il dialogo
 * porta i token della carta con se' — `data-scene-theme="cream"` — perche' sta nella
 * scena, e la scena puo' essere il cielo: il foglio e' di carta comunque.
 */
.nm-popup--campagna .nm-popup__foglio { text-align: center; }
.nm-popup--campagna .nm-popup__titolo { padding: 0 2.6rem; }
/*
 * Lo spazio fra un pezzo e l'altro lo mette chi viene dopo — il countdown con il suo
 * margine interno, il pulsante con il suo — e il testo non ne aggiunge. Il pulsante sta
 * in riga, e un margine in riga non si fonde con quello di sopra: senza countdown, fra
 * testo e pulsante lo spazio era doppio, 58 px invece di 29. Si e' visto quando il
 * countdown ha cominciato a sparire a zero.
 */
.nm-popup--campagna .nm-popup__testo { margin-bottom: 0; }

.nm-popup__azione {
	margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
}

/*
 * Il conto alla rovescia: quattro numeri grandi in Playfair, con la luce che ci passa
 * sopra e le faville — la magia del prezzo, su cifre piu' grandi — e sotto ogni numero
 * la sua parola in maiuscoletto. Le cifre sono tabulari: un «1» largo quanto un «8», cosi'
 * i numeri non ballano a ogni secondo.
 */
.nm-conto {
	margin: 0;
	/* Lo spazio sopra e' dentro, non fuori: chiudendosi, il countdown se lo porta via, e
	   quello che resta e' identico a un popup che il countdown non l'ha mai avuto. */
	padding-top: clamp(1.2rem, 2.4vw, 1.8rem);
	text-align: center;
	transition:
		height 0.42s var(--motion-ease),
		padding-top 0.42s var(--motion-ease),
		opacity 0.3s var(--motion-ease);
}

/* Sotto l'immagine lo spazio c'e' gia': il margine della figura. */
.nm-popup__figura + .nm-conto { padding-top: 0; }

/*
 * A zero il countdown se ne va (campagne.js): sfuma, e intanto si chiude — l'altezza la
 * scrive lo script, da quella di adesso a zero — cosi' il pulsante sale al suo posto.
 * Il taglio serve solo mentre si chiude: prima le faville devono poter uscire.
 */
.nm-conto[data-nm-sparisce] {
	overflow: hidden;
	opacity: 0;
}

/* Lo spazio sopra si chiude con l'altezza. Con il movimento ridotto resta dov'e' fino
   all'ultimo: uno scatto solo, alla fine della dissolvenza, invece di due. */
@media (prefers-reduced-motion: no-preference) {
	.nm-conto[data-nm-sparisce] { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-conto { transition: opacity 150ms linear; }
}

.nm-conto__frase {
	margin: 0 0 0.6rem;
	color: var(--nm-gold-ink);
	font-size: clamp(0.62rem, 0.8vw, 0.74rem);
}

.nm-conto__riga {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: clamp(0.5rem, 1.4vw, 1rem);
	padding: 0.4rem 0.6rem;
}

.nm-conto__unita {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 2.2em;
}

.nm-conto__cifre {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.2vw, 2.8rem);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.nm-conto__nome {
	margin-top: 0.45rem;
	font-size: clamp(0.56rem, 0.7vw, 0.64rem);
	color: color-mix(in srgb, var(--nm-ink-800) 70%, transparent);
}

.nm-conto__due-punti {
	padding-top: 0.05em;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
	font-weight: 700;
	line-height: 1;
	color: color-mix(in srgb, var(--nm-gold-graphic) 70%, transparent);
}

/* ---- schermi stretti ---- */

/*
 * Sotto i 900 px la scena smette di essere a schermo intero — è la regola già in vigore
 * per le altre — quindi le due colonne diventano una e a scorrere è la pagina. La colonna
 * del testo perde lo scorrimento proprio: due scorrimenti annidati su un telefono sono una
 * trappola, e qui non servono più a niente.
 */
@media (max-width: 900px) {
	.nm-scheda__colonne {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.2rem, 4vh, 2.2rem);
	}

	.nm-scheda__lato {
		overflow: visible;
		padding-bottom: 0;
	}

	.nm-scheda__lato-area > .nm-catalogo__scorri { display: none; }

	.nm-scheda__scorre { padding: 0; }

	/*
	 * Il libro sul telefono: prima il titolo, poi la galleria e il resto, e il titolo resta fermo
	 * sotto la testata mentre il resto gli scorre sotto (il committente, 7 ottobre 2026). Le due
	 * scatole della colonna del testo si sciolgono, e i loro pezzi stanno in fila con la
	 * galleria: il titolo per primo. La fascia del titolo va da bordo a bordo; quando la pagina
	 * scorre — come la testata, `data-nm-scorsa` — prende il pastello velato e sfocato, che si
	 * scioglie in basso: le copertine ci passano sotto senza coprirlo. Ferma in cima, niente
	 * fondo. L'altezza della testata la scrive menu.js; senza JavaScript vale la sua misura
	 * solita.
	 */
	.nm-scheda--libro .nm-scheda__colonne {
		display: flex;
		flex-direction: column;
	}

	.nm-scheda--libro .nm-scheda__lato-area,
	.nm-scheda--libro .nm-scheda__lato { display: contents; }

	/*
	 * La fascia del titolo sale dietro la testata fino al bordo dello schermo (il margine in
	 * meno e lo spazio in piu' sopra si annullano: il titolo resta dov'e'), e si ferma li'. Cosi'
	 * tutto cio' che scorre sparisce sotto testata e titolo insieme. Fa passare i clic, tranne
	 * sul titolo: in fondo copre l'orlo della galleria.
	 */
	.nm-scheda--libro .nm-scheda__testa {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 6;
		order: -1;
		margin: calc(var(--space-unit) * -1 - var(--nm-testata-alta, 7rem)) calc((100vw - 100%) / -2) 0;
		padding: calc(var(--nm-testata-alta, 7rem) + 0.5rem) calc((100vw - 100%) / 2) 1.3rem;
		/* Al centro, sopra la copertina che e' al centro: «da mobile titolo centrato». */
		text-align: center;
		pointer-events: none;
		/* In fondo, nel margine sotto il titolo, la fascia sfuma: cio' che scorre ci entra piano. */
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3rem), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 1.3rem), transparent 100%);
	}

	.nm-scheda--libro .nm-scheda__titolo { pointer-events: auto; }

	/*
	 * Fra il titolo e la galleria poca aria: «meno spazio tra gallery e titolo». La galleria
	 * comincia 8 px sotto il titolo (erano 56 a 390); la copertina che si vede, un po' piu' giu',
	 * perche' le immagini del committente — mockup quadrati — hanno attorno al libro un margine
	 * trasparente, circa il 10%. Un'immagine senza margine resta comunque sotto il titolo.
	 */
	.nm-scheda--libro .nm-scheda__media { margin-top: calc(-0.8rem - clamp(1.2rem, 4vh, 2.2rem)); }

	/*
	 * Sotto testata e titolo, mentre si scorre, c'e' il cielo della pagina: una copia del cielo
	 * dello stage, fissa allo schermo come lui (stessa scatola, stesso disegno: vedi il cielo
	 * pastello, piu' giu'), ritagliata dalla fascia. Non si vede — e' il fondo che c'e' gia' —,
	 * ma cio' che scorre ci passa sotto e sparisce, sfumando sotto il titolo: come la descrizione
	 * sul computer, che scorre nel suo riquadro. Prima era un vetro sfocato, e il committente
	 * non lo voleva: «deve scrollare tutto tranne titolo, ma non con questo effetto» (7 ottobre
	 * 2026). Compare solo mentre la pagina e' scorsa: ferma in cima, l'orlo della galleria sotto
	 * la fascia resta scoperto. La sfocatura della testata, qui, non serve: sotto non le passa
	 * niente.
	 */
	.nm-scheda--libro .nm-scheda__testa::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		opacity: 0;
		transition: opacity var(--motion-duration-ui) var(--motion-ease);
	}

	body:has(.nm-header[data-nm-scorsa]) .nm-scheda--libro .nm-scheda__testa::before { opacity: 1; }
	body:has(.nm-scheda--libro) .nm-header[data-nm-scorsa]::before { opacity: 0; }

	/*
	 * Le miniature piu' vicine alla copertina: «meno spazio tra immagine e riquadri gallery». Il
	 * passo fra le due e' piu' corto, e le miniature salgono nel margine trasparente che le
	 * immagini del committente hanno sotto l'ombra del libro (il 6%): restano una decina di px
	 * sotto l'ombra, una trentina sotto il libro. Un'immagine senza margine ne avrebbe il fondo
	 * coperto di poco.
	 */
	.nm-scheda--libro .nm-galleria { gap: 0.3rem; }
	.nm-scheda--libro .nm-galleria__miniature { margin-top: -5%; }

	/* Le miniature al centro, sotto l'immagine; se sono tante da scorrere, cominciano dal bordo. */
	.nm-scheda--carta .nm-galleria__miniatura:first-child { margin-left: auto; }
	.nm-scheda--carta .nm-galleria__miniatura:last-child { margin-right: auto; }

	/* La barra resta attaccata al fondo dello schermo mentre si scorre; il titolo c'e' gia'
	   sopra, e qui c'e' posto per il prezzo, i dati e il pulsante. */
	.nm-scheda__barra {
		position: sticky;
		bottom: max(0.6rem, env(safe-area-inset-bottom));
		gap: 0.7rem;
		margin: 1.6rem 0 0;
		padding: 0.55rem 0.7rem;
	}

	.nm-scheda__barra-titolo { display: none; }
	.nm-scheda__barra-copertina { width: 44px; }
	.nm-scheda__barra-dati { font-size: 0.74rem; }

	/* Senza prezzo e senza dati il testo, qui senza titolo, e' vuoto: via, o terrebbe il suo
	   spazio accanto al pulsante. */
	.nm-scheda__barra-testo:not(:has(.nm-scheda__prezzo, .nm-scheda__barra-dati)) { display: none; }

	/* Finche' la barra sta attaccata al fondo, la nuvoletta della chat le sta sopra: in basso a
	   destra copriva il pulsante. Lo stato lo scrive libro.js. */
	.nm-chat[data-nm-barra="sopra"] { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.8rem); }
}

/*
 * In fondo alla pagina la barra si stacca e sale col resto, fin sopra il piede: per quel tratto
 * passerebbe sotto la nuvoletta. La nuvoletta si fa da parte, scende nel suo angolo quando e'
 * gia' sparita, e ricompare li' quando la barra e' passata. Aperta, la chat resta dov'e'.
 */
.nm-chat[data-nm-barra="via"]:not([data-nm-aperto]) {
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 280ms var(--motion-ease),
		visibility 0s linear 280ms,
		bottom 0s linear 280ms,
		padding-bottom 0s linear 280ms;
}

/* Sotto i 601 px la barra di WordPress scorre via, e la fascia del titolo si ferma in cima, con la testata. */
@media (max-width: 600px) {
	.nm-scheda--libro .nm-scheda__testa { top: 0; }
}

@media (max-width: 640px) {
	.nm-chat[data-nm-barra="sopra"] {
		bottom: 0;
		padding-bottom: calc(max(0.9rem, env(safe-area-inset-bottom)) + 4.8rem);
	}
}

/* Su un telefono il pulsante prende quasi tutta la barra, e accanto ci sta il prezzo, nient'altro.
   I dati andavano a capo a meta' parola; con la copertina il prezzo finiva sotto il pulsante — di
   15 px a 390, di 42 a 360. La copertina grande e' in cima alla pagina. */
@media (max-width: 480px) {
	.nm-scheda__barra-copertina,
	.nm-scheda__barra-dati { display: none; }
	.nm-scheda__barra .nm-scheda__prezzo { white-space: nowrap; }

	/* Il testo qui e' il prezzo e basta, e senza prezzo non c'e'. Il pulsante prende il posto che
	   resta, e un libro senza prezzo ha la barra tutta per lui: a destra con niente a sinistra
	   pareva fuori posto. */
	.nm-scheda__barra-testo { flex: 0 0 auto; }
	.nm-scheda__barra-testo:not(:has(.nm-scheda__prezzo)) { display: none; }
	.nm-scheda__barra-azione,
	.nm-scheda__barra-azione > .nm-magia { flex: 1 1 auto; }
	.nm-scheda__barra .nm-scheda__cta { flex: 1 1 auto; justify-content: center; }
}

/* ---- l'elenco del blog: una colonna sola ---- */

/*
 * Senza filtri le colonne diventano una e la griglia prende tutta la larghezza. Restano
 * due schede per riga, non tre: la scheda è disegnata con la copertina di fianco al testo
 * e quel disegno vale intorno ai settecento pixel — a tre per riga ne misura 440, e
 * dentro restano novanta pixel di immagine e un estratto che va a capo ogni quattro
 * parole. Due per riga a tutta pagina danno esattamente la misura per cui la scheda è
 * fatta, la stessa che ha nel catalogo.
 */
.nm-catalogo__colonne--una { grid-template-columns: minmax(0, 1fr); }

/* La ricerca sotto il titolo: larga quanto una frase, non quanto la pagina. */
.nm-catalogo__intro .nm-filtri {
	width: min(100%, 30rem);
	margin-top: clamp(0.2rem, 0.8vh, 0.5rem);
}

/* ============================================================
   Chi siamo, l'articolo e la scheda a una colonna
   ============================================================
   Sono la stessa scena della scheda del libro. Quello che segue è soltanto ciò che
   cambia: che cosa succede quando la colonna delle immagini non c'è, e come si compone
   un blocco di racconto. */

/*
 * Senza immagini le colonne diventano una, e il testo non si allarga per tutta la pagina:
 * una riga di centoventi caratteri non si legge, si scorre con gli occhi e si perde il
 * capo. Il limite è quello della prosa, e la colonna resta al centro.
 */
.nm-scheda--sola .nm-scheda__colonne { grid-template-columns: minmax(0, 1fr); }

.nm-scheda--sola .nm-scheda__lato-area {
	width: min(100%, 72ch);
	margin-inline: auto;
}

/* ---- la riga di dati sopra il titolo ---- */

.nm-articolo__dati {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	color: var(--nm-gold-400);
	font-size: clamp(0.58rem, 0.76vw, 0.7rem);
}

.nm-libro__testo .nm-articolo__dati { margin-bottom: 0.35rem; }

/* ---- il corpo dell'articolo ---- */

/*
 * Qui il contenuto lo scrive WordPress, quindi gli elementi non li scegliamo noi: si
 * dichiara come si comportano quelli che possono arrivare, una volta sola.
 */
.nm-prosa h2,
.nm-prosa h3 {
	margin: 1.4em 0 0.4em;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.25;
	color: var(--color-heading);
}

.nm-prosa h2 { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.nm-prosa h3 { font-size: clamp(1rem, 1.6vw, 1.25rem); }
.nm-prosa h2:first-child, .nm-prosa h3:first-child { margin-top: 0; }

.nm-prosa img { border-radius: var(--radius-media); }
.nm-prosa figure { margin: 1.2em 0; }
.nm-prosa figcaption { margin-top: 0.5rem; font-size: clamp(0.7rem, 0.9vw, 0.82rem); }

.nm-prosa blockquote {
	margin: 1.2em 0;
	padding-left: clamp(0.8rem, 2vw, 1.4rem);
	border-left: var(--nm-rule-width) solid var(--color-accent-gold);
	font-family: var(--font-display);
	font-style: italic;
	color: var(--color-text);
}

.nm-prosa ul,
.nm-prosa ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.nm-prosa li { margin-bottom: 0.3em; }

.nm-prosa a {
	color: var(--nm-gold-300);
	text-underline-offset: 0.24em;
}

.nm-prosa a:hover { color: var(--nm-gold-100); }

/* I titoli del racconto nel blu del logo, come l'h1: l'inchiostro quasi nero li faceva
   sembrare un'altra voce. */
.nm-scheda--carta .nm-scheda__racconto h2,
.nm-scheda--carta .nm-scheda__racconto h3 { color: var(--nm-logo-blu); }

/* ============================================================
   Chi siamo: la scena della reference
   ============================================================
   La pagina della reference del committente (docs/reference/chisiamo-reference.webp): la
   scena di Donatella alla macchina da scrivere, e sopra il titolo, i quattro punti sul filo
   d'oro e «E adesso?». Prima le regole comuni — la colonna del telefono —, poi la scena
   degli schermi larghi.

   Le quote della scena sono misurate sulla reference, a 1536 x 1024: le posizioni in
   percentuale della tela, i corpi dei caratteri in `cqw` (un centesimo della larghezza della
   tela), cosi' tutto cresce e cala con l'immagine. I corpi sono tarati sulla larghezza delle
   righe — il titolo in Playfair occupa lo spazio che occupava il carattere della reference —
   e le righe stanno sulla stessa linea di base. */

.nm-chisiamo {
	position: relative;
	flex: 1 1 auto;
}

/* ---- il telefono: una colonna ---- */

/* La colonna scorre sul cielo del sito, che in basso si schiarisce nella foschia calda della
   Home: li' i nomi dei punti e «E adesso?» non si leggerebbero. Del cielo resta la parte alta,
   la notte stellata come in cima alla reference, e sotto e' notte. Sugli schermi larghi la
   scena copre lo stage, e questo non si vede. */
body.nm-scena-chisiamo .nm-stage__cielo {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 40%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 16%, transparent 40%);
}

/* Il titolo scende un po' sotto la testata: attaccato a lei sembrava parte del marchio. */
.nm-chisiamo__tela {
	display: flex;
	flex-direction: column;
	gap: clamp(1.4rem, 5vw, 2.2rem);
	padding: clamp(1.6rem, 9vw, 2.6rem) calc((100% - var(--container-width)) / 2) clamp(2.4rem, 8vw, 3.4rem);
}

.nm-chisiamo__testa {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.nm-chisiamo__titolo {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 9vw, 2.9rem);
	font-weight: 400;
	line-height: 1.08;
	color: var(--nm-gold-100);
	outline: none;
}

.nm-chisiamo__sottotitolo {
	margin: 0.9em 0 0;
	font-weight: 400;
	font-size: clamp(0.74rem, 3.4vw, 0.86rem);
	letter-spacing: 0.24em;
	color: var(--nm-ink-200);
}

.nm-chisiamo__filetto {
	display: block;
	width: 3.8rem;
	height: var(--nm-rule-width);
	margin-top: 1.1rem;
	background: color-mix(in srgb, var(--nm-ink-200) 70%, transparent);
}

/* La scena, a tutta larghezza: la meta' sinistra dell'immagine, Donatella e la macchina da
   scrivere, che sfuma sopra e sotto nel cielo dello stage. */
.nm-chisiamo__immagine {
	order: 2;
	display: block;
	width: calc(100% + (100vw - var(--container-width)));
	max-width: none;
	height: auto;
	aspect-ratio: 4 / 5;
	margin-inline: calc((var(--container-width) - 100vw) / 2);
	object-fit: cover;
	object-position: 20% 60%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%);
	/* La scena non si prende con un clic: il tasto destro, la pressione lunga del telefono e il
	   trascinamento passano attraverso e arrivano alla pagina, il cui menu non ha «Apri
	   immagine» ne' «Salva immagine». L'ha chiesto il committente; chi ispeziona la pagina la
	   trova lo stesso, e va bene cosi'. Resta un'immagine vera, per il testo alternativo e
	   perche' arrivi per prima. */
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.nm-chisiamo__velo { display: none; }

/*
 * I quattro punti, uno sotto l'altro su un filo d'oro verticale: il medaglione sul filo, il
 * nome accanto, e il racconto che si apre sotto il nome toccandolo.
 */
.nm-chisiamo__punti {
	--nm-segno: 3.3rem;
	order: 3;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
}

.nm-chisiamo__punti::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--nm-segno) / 2 - 1px);
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(to bottom,
		transparent 0%,
		color-mix(in srgb, var(--nm-gold-200) 85%, transparent) 10%,
		var(--nm-gold-100) 50%,
		color-mix(in srgb, var(--nm-gold-200) 85%, transparent) 90%,
		transparent 100%);
	box-shadow:
		0 0 6px color-mix(in srgb, var(--nm-gold-200) 80%, transparent),
		0 0 18px color-mix(in srgb, var(--nm-gold-300) 45%, transparent);
}

.nm-punto {
	position: relative;
	z-index: 1;
}

.nm-punto__apri {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: var(--nm-cursore-attivo);
}

.nm-punto__apri:focus-visible { outline: none; }

/*
 * Il medaglione della reference: un tondo color seppia scuro, l'anello d'oro e il segno pieno.
 * I colori sono misurati sulla reference (fondo #4C3E34, anello #E8C69F, segno #D0AE84) e
 * detti con i token: l'oro d'inchiostro nella notte, l'oro chiaro, l'oro delle etichette.
 */
.nm-punto__segno {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--nm-segno);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 36%,
		color-mix(in srgb, var(--nm-gold-ink) 68%, var(--nm-night-700)) 0%,
		color-mix(in srgb, var(--nm-gold-ink) 58%, var(--nm-night-800)) 72%);
	box-shadow:
		inset 0 0 0 max(1.5px, 0.1em) var(--nm-gold-300),
		0 0 0.7rem color-mix(in srgb, var(--nm-gold-200) 55%, transparent),
		0 0 1.8rem color-mix(in srgb, var(--nm-gold-300) 28%, transparent);
	color: var(--nm-gold-400);
	transition: transform 320ms var(--motion-ease), color 240ms var(--motion-ease), box-shadow 320ms var(--motion-ease);
}

.nm-punto__segno svg { display: block; width: 56%; height: auto; }

/*
 * La lente: dice che il medaglione si tocca, dove non c'e' il passaggio del puntatore a
 * scoprirlo da se' — sul telefono, sul tablet. Una pastiglia d'oro in alto a destra, appena
 * sopra l'anello, con la lente della galleria del libro; aperto il racconto, se ne va.
 */
.nm-punto__lente {
	position: absolute;
	top: -9%;
	right: -11%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, var(--nm-gold-100), var(--nm-gold-300) 80%);
	box-shadow:
		0 0 0 1.5px var(--nm-night-800),
		0 2px 8px color-mix(in srgb, var(--nm-night-900) 70%, transparent);
	color: var(--nm-night-800);
	transition: opacity 240ms var(--motion-ease), transform 240ms var(--motion-ease);
}

.nm-punto__lente svg { width: 66%; }
.nm-punto__lente svg g { stroke-width: 4.4; }

.nm-punto--aperto .nm-punto__lente {
	opacity: 0;
	transform: scale(0.6);
}

/* Senza JavaScript i racconti sono gia' aperti: non c'e' niente da toccare. */
.no-js .nm-punto__lente { display: none; }

/* Un alone che respira: dice che il punto si tocca, senza bisogno di scriverlo. */
.nm-punto__segno::after {
	content: "";
	position: absolute;
	inset: -22%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--nm-gold-200) 34%, transparent) 0%, transparent 68%);
	animation: nm-magia-respiro 4.8s var(--motion-ease) infinite alternate;
	pointer-events: none;
}

.nm-punto:nth-child(2) .nm-punto__segno::after { animation-delay: -1.2s; }
.nm-punto:nth-child(3) .nm-punto__segno::after { animation-delay: -2.4s; }
.nm-punto:nth-child(4) .nm-punto__segno::after { animation-delay: -3.6s; }

.nm-punto__nome {
	font-family: var(--font-display);
	font-size: 1.12rem;
	font-weight: 400;
	line-height: 1.33;
	color: var(--nm-ink-100);
	text-shadow:
		0 0 0.45em color-mix(in srgb, var(--nm-night-900) 85%, transparent),
		0 0 1.1em color-mix(in srgb, var(--nm-night-900) 60%, transparent);
	transition: color 240ms var(--motion-ease);
}

/* Acceso: al passaggio, al fuoco, aperto. */
.nm-punto--aperto .nm-punto__segno,
.nm-punto:has(:focus-visible) .nm-punto__segno {
	color: var(--nm-gold-100);
	transform: scale(1.08);
	box-shadow:
		inset 0 0 0 max(1.5px, 0.1em) var(--nm-gold-200),
		0 0 0.9rem color-mix(in srgb, var(--nm-gold-100) 75%, transparent),
		0 0 2.4rem color-mix(in srgb, var(--nm-gold-200) 45%, transparent);
}

.nm-punto--aperto .nm-punto__nome,
.nm-punto:has(:focus-visible) .nm-punto__nome { color: var(--nm-gold-100); }

@media (hover: hover) {
	.nm-punto:hover .nm-punto__segno {
		color: var(--nm-gold-100);
		transform: scale(1.08);
		box-shadow:
			inset 0 0 0 max(1.5px, 0.1em) var(--nm-gold-200),
			0 0 0.9rem color-mix(in srgb, var(--nm-gold-100) 75%, transparent),
			0 0 2.4rem color-mix(in srgb, var(--nm-gold-200) 45%, transparent);
	}

	.nm-punto:hover .nm-punto__nome { color: var(--nm-gold-100); }
}

/* Il racconto: sul telefono si apre sotto il nome, e spinge giu' quello che viene dopo. */
.nm-punto__racconto {
	display: none;
	margin: 0.8rem 0 0 calc(var(--nm-segno) + 1rem);
}

.nm-punto--aperto .nm-punto__racconto,
.nm-punto:has(:focus-visible) .nm-punto__racconto { display: block; }

/* Senza JavaScript, sul telefono, il tocco non apre niente: i racconti stanno aperti. */
.no-js .nm-punto__racconto { display: block; }

/* Chiuso con Esc: resta chiuso finche' il fuoco e il puntatore non lasciano il punto. */
.nm-chisiamo .nm-punto[data-nm-zitto] .nm-punto__racconto { display: none; }

.nm-punto__carta {
	--nm-carta-sopra: 0.95rem;
	position: relative;
	max-width: 23em;
	padding: var(--nm-carta-sopra) 1.1rem;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-300) 45%, transparent);
	border-radius: var(--radius-card);
	background: color-mix(in srgb, var(--nm-night-900) 84%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow:
		0 20px 50px -22px color-mix(in srgb, var(--nm-night-900) 90%, transparent),
		0 0 30px -12px color-mix(in srgb, var(--nm-gold-200) 40%, transparent);
	color: var(--nm-ink-200);
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.6;
}

.nm-punto__testo p { margin: 0 0 0.7em; }
.nm-punto__testo p:last-child { margin-bottom: 0; }

/*
 * Oltre 300 caratteri il racconto scorre dentro il suo riquadro: il riquadro tiene un po' meno
 * di 300 caratteri, cosi' quello che li supera scorre davvero; la barra laterale si vede
 * sempre, sottile e d'oro, e in fondo una freccia dice che c'e' dell'altro. Arrivati in fondo,
 * la freccia se ne va (chisiamo.js). Perche' i caratteri che ci stanno siano sempre quelli, il
 * riquadro e' largo in `em`, cioe' in proporzione al suo carattere: piu' largo, su uno schermo
 * grande, ci starebbe tutto, e la barra non comparirebbe.
 */
.nm-punto__racconto--lungo .nm-punto__carta {
	--nm-carta-sotto: 2.1rem;
	padding-bottom: var(--nm-carta-sotto);
}

.nm-punto__racconto--lungo .nm-punto__testo {
	max-height: 11.5em;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 0.4em;
	outline: none;
}

.nm-punto__racconto--lungo .nm-punto__testo:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nm-gold-200) 60%, transparent); border-radius: 4px; }

/*
 * La barra laterale e' disegnata: quella del sistema, sul telefono e sui Mac con il trackpad,
 * compare solo mentre si scorre, e qui deve esserci sempre. Un binario d'oro appena accennato
 * e il cursore pieno, lungo quanto la parte che si vede; si trascina come l'altra. Le due
 * misure — quanta parte si vede, a che punto si e' — le scrive chisiamo.js.
 */
.nm-punto__barra {
	position: absolute;
	top: var(--nm-carta-sopra);
	bottom: var(--nm-carta-sotto);
	right: 0.3rem;
	width: 0.9rem;
	cursor: var(--nm-cursore-attivo);
	touch-action: none;
}

.nm-punto__barra::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	border-radius: 2px;
	background: color-mix(in srgb, var(--nm-gold-300) 20%, transparent);
	translate: -50% 0;
}

.nm-punto__cursore {
	position: absolute;
	left: 50%;
	top: calc(var(--nm-posizione, 0) * (100% - var(--nm-vista, 0.4) * 100%));
	width: 3px;
	height: calc(var(--nm-vista, 0.4) * 100%);
	border-radius: 3px;
	background: var(--nm-gold-300);
	box-shadow: 0 0 6px color-mix(in srgb, var(--nm-gold-200) 55%, transparent);
	translate: -50% 0;
	transition: width 160ms var(--motion-ease), background-color 160ms var(--motion-ease);
}

/* Sotto il puntatore, o il dito, il cursore si allarga, come le barre del sistema. Serve anche
   al tocco: Chrome sposta il tocco sull'elemento vicino che reagisce, e senza questo stato la
   barra non reagirebbe — il dito finiva sul testo accanto, e scorreva la pagina. */
.nm-punto__barra:hover .nm-punto__cursore,
.nm-punto__barra:active .nm-punto__cursore {
	width: 5px;
	background: var(--nm-gold-200);
}

.nm-punto__carta[data-nm-non-scorre] .nm-punto__barra { display: none; }

/* Con JavaScript la barra del sistema lascia il posto a quella disegnata. Senza, nessuno
   muoverebbe il cursore disegnato: resta quella del sistema. */
html:not(.no-js) .nm-punto__racconto--lungo .nm-punto__testo { scrollbar-width: none; }
html:not(.no-js) .nm-punto__racconto--lungo .nm-punto__testo::-webkit-scrollbar { display: none; }
.no-js .nm-punto__barra { display: none; }

.nm-punto__altro {
	position: absolute;
	left: 50%;
	bottom: 0.45rem;
	display: block;
	width: 1.3rem;
	color: var(--nm-gold-300);
	translate: -50% 0;
	cursor: var(--nm-cursore-attivo);
	animation: nm-punto-altro 1.6s var(--motion-ease) infinite;
	transition: opacity 240ms var(--motion-ease);
}

.nm-punto__altro svg { display: block; width: 100%; height: auto; }

@keyframes nm-punto-altro {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(0.22rem); }
}

/* In fondo, o se il testo ci sta tutto: niente freccia. */
.nm-punto__carta[data-nm-fine] .nm-punto__altro,
.nm-punto__carta[data-nm-non-scorre] .nm-punto__altro { opacity: 0; pointer-events: none; }

/* ---- la chiusura ---- */

.nm-chisiamo__fine {
	order: 4;
	display: block;
	align-self: center;
	text-align: center;
}

/* Sul telefono il ventaglio si apre sotto la domanda, e qui sotto c'e' il piede: invece di
   coprirlo, lo spinge giu'. */
@media (max-width: 900px) {
	.nm-chisiamo__fine .nm-ventaglio {
		position: static;
		margin-top: 1.1rem;
	}
}

.nm-chisiamo__chiusura {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	text-decoration: none;
	cursor: var(--nm-cursore-attivo);
}

.nm-chisiamo__adesso {
	font-family: var(--font-display);
	font-size: clamp(2.3rem, 10vw, 2.9rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: var(--nm-gold-100);
	transition: color 240ms var(--motion-ease), text-shadow 320ms var(--motion-ease);
}

.nm-chisiamo__sotto {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nm-chisiamo__domanda {
	margin-top: 1rem;
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.19em;
	color: color-mix(in srgb, var(--nm-ink-200) 80%, transparent);
}

.nm-chisiamo__sotto .nm-chisiamo__filetto {
	width: 3rem;
	margin-top: 1.4rem;
	background: color-mix(in srgb, var(--nm-ink-200) 45%, transparent);
}

.nm-chisiamo__chiusura:hover .nm-chisiamo__adesso,
.nm-chisiamo__chiusura:focus-visible .nm-chisiamo__adesso,
.nm-chisiamo__chiusura[aria-expanded="true"] .nm-chisiamo__adesso {
	color: var(--nm-gold-200);
	text-shadow: 0 0 0.6em color-mix(in srgb, var(--nm-gold-200) 55%, transparent);
}

.nm-chisiamo__chiusura:focus-visible { outline: none; }

/*
 * Il ditino che tocca «E adesso?»: dice che la domanda si tocca — o, col mouse, che basta
 * passarci sopra. Arriva dal basso a sinistra, preme sul piede della E, e dove preme si allarga
 * un cerchio. A sinistra perche' li' c'e' cielo libero: a destra la domanda arriva quasi al
 * bordo, e sotto c'e' la riga piccola. Mentre le due strade sono aperte non c'e'; richiuse — un
 * clic altrove, il puntatore che se ne va — torna, e il gesto riparte da capo.
 */
.nm-chisiamo__adesso { position: relative; }

/* Il ditino e' quello di components.css (`.nm-tocco`); qui il suo posto, e la sua misura, che
   segue la domanda. */
.nm-chisiamo__tocco {
	right: 100%;
	top: 0.55em;
	width: max(1.6rem, 0.62em);
	margin-right: -0.26em;
	rotate: 24deg;
}

.nm-chisiamo__chiusura[aria-expanded="true"] .nm-chisiamo__tocco { display: none; }

/*
 * Sul telefono, il ditino che dice di scorrere (`.nm-dito-scorri`, components.css): in fondo
 * allo schermo, al centro, sopra la scena. Sugli schermi larghi la pagina non scorre, e lui non
 * c'e'.
 */
.nm-chisiamo__scorri {
	position: fixed;
	left: 50%;
	bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
	z-index: 5;
	margin-left: -1rem;
	filter:
		drop-shadow(0 0 2px var(--nm-night-900))
		drop-shadow(0 0 8px color-mix(in srgb, var(--nm-night-900) 80%, transparent));
}

/* Sotto il dito un'ombra tonda e morbida: in fondo allo schermo c'e' spesso la macchina da
   scrivere, chiara, e il filo d'oro da solo li' sopra si perdeva. */
.nm-chisiamo__scorri::before {
	content: "";
	position: absolute;
	inset: -55%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--nm-night-900) 54%, transparent) 0%, color-mix(in srgb, var(--nm-night-900) 24%, transparent) 42%, transparent 70%);
}

/*
 * Sopra i 900 px e su una finestra non piu' alta che larga: la scena.
 *
 * La scena e' ferma — copre la pagina, che qui non scorre — e dentro c'e' la tela: un
 * rettangolo con le proporzioni dell'immagine (3 a 2), largo quanto la finestra e ancorato in
 * alto. In alto perche' li' stanno il titolo e il quarto punto, sotto la testata: su una
 * finestra larga a perdere un po' di scena e' il fondo — la base della macchina da scrivere,
 * il tavolo —, dove passa il piede. Mai ai lati, dove stanno il quarto punto e «E adesso?».
 * Su una finestra piu' quadrata di 3 a 2 — il tablet di traverso — la tela non arriva in
 * fondo: sta in basso, e sopra, sotto la testata, c'e' la stessa scena sfocata. Prima la tela
 * cresceva fino a coprire anche li', e a 1024 x 768 il punto di domanda usciva dalla finestra
 * e il quarto medaglione finiva sotto MENU. Su schermi larghissimi (oltre 2,1 a 1) la tela
 * smette di crescere, per non tagliare «E adesso?»: ai lati c'e' la scena sfocata.
 *
 * Una finestra piu' alta che larga, anche sopra i 900 px, prende la colonna del telefono: la
 * tela, per coprirla, taglierebbe proprio i punti.
 */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
	/*
	 * La scena copre la pagina, che qui e' alta quanto la finestra e non scorre: sta ferma
	 * come se fosse `fixed`, e comincia sotto la barra di WordPress, quando c'e', come la
	 * testata. `clip` e non `hidden`: cosi' la scena non scorre nemmeno quando lo chiede uno
	 * script — aprendo il ventaglio, scelta.js porta il pulsante al centro di cio' che scorre,
	 * e la tela saliva di 160 px.
	 *
	 * `absolute` e non `fixed`, e senza `z-index`: un elemento fisso fa un piano a se', e
	 * tutto quello che ha dentro restava sotto il piede, che ha un piano piu' alto — il
	 * committente ha visto «Privacy Policy» scritta sopra il racconto del primo punto (3
	 * ottobre 2026). Cosi' i punti stanno sullo stesso piano del piede, e gli passano sopra.
	 */
	.nm-chisiamo { position: static; }

	.nm-chisiamo__scena {
		position: absolute;
		inset: 0;
		overflow: clip;
		background: var(--nm-night-800);
	}

	/* Il piede sotto i punti, sopra tutto il resto della scena. */
	body.nm-scena-chisiamo .nm-footer { z-index: 5; }

	.nm-chisiamo__scena::before {
		content: "";
		position: absolute;
		inset: -3rem;
		background: var(--nm-scena-immagine) 50% 30% / cover no-repeat;
		filter: blur(28px) brightness(0.7);
	}

	.nm-chisiamo__tela {
		--nm-tela-w: min(100vw, 2.1 * (100svh - var(--wp-admin--admin-bar--height, 0px)));
		--nm-tela-cima: max(0px, 100svh - var(--wp-admin--admin-bar--height, 0px) - var(--nm-tela-w) / 1.5);
		position: absolute;
		top: var(--nm-tela-cima);
		/* Centrata col margine e non con `translate`: anche quello fa della tela un piano a se',
		   e i punti ci restavano chiusi dentro. */
		left: calc((100% - var(--nm-tela-w)) / 2);
		width: var(--nm-tela-w);
		aspect-ratio: 3 / 2;
		padding: 0;
		display: block;
		container-type: inline-size;
	}

	.nm-chisiamo__immagine {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		aspect-ratio: auto;
		object-fit: cover;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* La pagina qui non scorre: il ditino che lo dice non serve. */
	.nm-chisiamo__scorri { display: none; }

	/* Dove passa il piede: l'ultimo quinto della finestra si scurisce. Il fondo della finestra
	   e' a 100svh dalla cima della tela, meno la barra di WordPress e la fascia sopra la tela,
	   se ci sono. */
	.nm-chisiamo__velo {
		position: absolute;
		left: 0;
		right: 0;
		top: calc(78svh - var(--wp-admin--admin-bar--height, 0px) - var(--nm-tela-cima));
		z-index: 1;
		display: block;
		height: 22svh;
		background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--nm-night-900) 72%, transparent));
		pointer-events: none;
	}

	/* Il titolo: centrato a 63,3% della larghezza, la prima riga sulla linea di base della
	   reference (y 152 su 1024), la seconda 55 px sotto. */
	.nm-chisiamo__testa {
		position: absolute;
		left: 63.3%;
		top: 10.07%;
		z-index: 2;
		translate: -50% 0;
		width: max-content;
	}

	.nm-chisiamo__titolo {
		font-size: 3.36cqw;
		line-height: 1.066;
	}

	.nm-chisiamo__sottotitolo {
		margin-top: 1.52cqw;
		font-size: 1.25cqw;
		line-height: 1;
		letter-spacing: 0.24em;
		/* La spaziatura cade anche dopo l'ultima lettera: la si toglie, o la riga non e' piu'
		   centrata sul titolo. */
		margin-right: -0.24em;
	}

	.nm-chisiamo__testa > .nm-chisiamo__filetto {
		width: 3.97cqw;
		margin-top: 2.17cqw;
	}

	/* ---- i punti, sul filo dell'immagine ---- */

	.nm-chisiamo__punti {
		position: static;
		display: block;
		margin: 0;
		padding: 0;
	}

	.nm-chisiamo__punti::before { display: none; }

	/* Ogni punto sta con il centro del medaglione sul centro del medaglione dell'immagine, che
	   copre. */
	.nm-punto {
		position: absolute;
		left: var(--x);
		top: var(--y);
		/* Sopra il piede (5): il racconto che si apre in basso ci passa sopra. */
		z-index: 6;
		display: flex;
		flex-direction: column;
		align-items: center;
		translate: -50% calc(var(--nm-segno) / -2);
	}

	/*
	 * I centri sono quelli degli anelli dipinti, trovati adattando un cerchio al loro bordo
	 * interno e a quello esterno (i due danno lo stesso centro); il diametro e' quello
	 * dell'anello piu' un pixel per parte, perche' lo copra tutto — il quarto medaglione, nella
	 * reference, e' piu' piccolo degli altri. Il nome sta dove stava, misurato dalla cima delle
	 * maiuscole: `--nome-y` lo scosta dal medaglione, `--nome-x` di lato (il terzo, nella
	 * reference, e' spostato a destra).
	 */
	.nm-punto--inizio   { --x: 52.14%; --y: 42.08%; --nm-segno: 3.8cqw;  --nome-y: 0.07cqw; --nome-x: 0.22cqw; }
	.nm-punto--libro    { --x: 69.19%; --y: 33.72%; --nm-segno: 3.78cqw; --nome-y: 0.38cqw; --nome-x: -0.04cqw; }
	.nm-punto--imparato { --x: 82.98%; --y: 28.28%; --nm-segno: 3.74cqw; --nome-y: 0cqw;    --nome-x: 1.44cqw; }
	.nm-punto--oggi     { --x: 91.11%; --y: 12.31%; --nm-segno: 3.34cqw; --nome-y: 0.17cqw; --nome-x: 0cqw; }

	.nm-punto:hover,
	.nm-punto:has(:focus-visible),
	.nm-punto--aperto { z-index: 7; }

	.nm-punto__apri {
		flex-direction: column;
		gap: 0;
		width: auto;
		text-align: center;
	}

	.nm-punto__segno {
		font-size: 1.2cqw;
		box-shadow:
			inset 0 0 0 max(1.5px, 0.12cqw) var(--nm-gold-300),
			0 0 0.7cqw color-mix(in srgb, var(--nm-gold-200) 55%, transparent),
			0 0 1.8cqw color-mix(in srgb, var(--nm-gold-300) 28%, transparent);
	}

	.nm-punto__nome {
		margin-top: var(--nome-y);
		translate: var(--nome-x) 0;
		font-size: 1.2cqw;
		white-space: nowrap;
	}

	/*
	 * Il racconto: un riquadro sotto il nome, attaccato a lui — il margine e' un'imbottitura
	 * trasparente, cosi' passando dal nome al riquadro non si esce mai dal punto e il riquadro
	 * non si chiude. Sul quarto punto, vicino al bordo destro, si apre verso sinistra.
	 */
	.nm-punto__racconto {
		position: absolute;
		top: 100%;
		left: 50%;
		display: block;
		width: 23.3em;
		margin: 0;
		padding-top: 0.6cqw;
		font-size: clamp(0.85rem, 0.9cqw, 1.05rem);
		translate: -50% 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.4cqw);
		transition:
			opacity 240ms var(--motion-ease),
			transform 320ms var(--motion-ease),
			visibility 0s linear 320ms;
	}

	.nm-punto--oggi .nm-punto__racconto {
		left: auto;
		right: -1cqw;
		translate: none;
	}

	.nm-punto--aperto .nm-punto__racconto,
	.nm-punto:has(:focus-visible) .nm-punto__racconto,
	.no-js .nm-punto:hover .nm-punto__racconto {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.no-js .nm-punto__racconto { display: block; }

	.nm-chisiamo .nm-punto[data-nm-zitto] .nm-punto__racconto {
		display: block;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.4cqw);
		transition-delay: 0s, 0s, 320ms;
	}

	.nm-punto__carta {
		--nm-carta-sopra: clamp(0.8rem, 1.05cqw, 1.3rem);
		max-width: none;
		padding: var(--nm-carta-sopra) clamp(0.95rem, 1.25cqw, 1.5rem);
		font-size: inherit;
	}

	.nm-punto__racconto--lungo .nm-punto__carta { --nm-carta-sotto: clamp(1.9rem, 2.4cqw, 2.6rem); }

	/* ---- la chiusura, in basso a destra ---- */

	.nm-chisiamo__fine {
		position: absolute;
		right: 4.5%;
		top: 50.23%;
		z-index: 3;
		text-align: right;
	}

	.nm-chisiamo__chiusura { align-items: flex-end; }

	/* I racconti del secondo e del terzo punto scendono fin sopra «E adesso?»: mentre li si
	   legge, lui si fa da parte. */
	.nm-chisiamo__fine { transition: opacity 240ms var(--motion-ease); }

	.nm-chisiamo__tela:has(.nm-punto--libro.nm-punto--aperto, .nm-punto--imparato.nm-punto--aperto, .nm-punto--libro:not([data-nm-zitto]) :focus-visible, .nm-punto--imparato:not([data-nm-zitto]) :focus-visible) .nm-chisiamo__fine { opacity: 0.16; }

	.nm-chisiamo__adesso { font-size: 4.28cqw; }

	.nm-chisiamo__domanda {
		margin-top: 1.44cqw;
		margin-right: -0.19em;
		font-size: 0.82cqw;
		line-height: 1;
	}

	.nm-chisiamo__sotto .nm-chisiamo__filetto {
		width: 3.3cqw;
		margin-top: 1.64cqw;
	}
}

/* Su una finestra piu' quadrata di 3 a 2 la tela sta in basso: il suo cielo sfuma nella stessa
   scena sfocata che c'e' sopra, invece di cominciare con un taglio. */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) {
	.nm-chisiamo__immagine {
		-webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%);
		mask-image: linear-gradient(to bottom, transparent, #000 8%);
	}
}

/* Sopra i 900 px la colonna scorre: la scena piena non lo farebbe. */
@media (min-width: 901px) and (max-aspect-ratio: 5/4) {
	body.nm-scena-chisiamo.nm-scena-piena { height: auto; overflow: visible; }

	body.nm-scena-chisiamo.nm-scena-piena .nm-page {
		height: auto;
		min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}
}

@media (hover: hover) and (min-width: 901px) and (min-aspect-ratio: 5/4) {
	/* Col mouse il racconto si scopre passando: la lente non serve, e la scena resta quella
	   della reference. */
	.nm-punto__lente { display: none; }

	.nm-punto:hover .nm-punto__racconto {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.nm-chisiamo__tela:has(.nm-punto--libro:not([data-nm-zitto]):hover, .nm-punto--imparato:not([data-nm-zitto]):hover) .nm-chisiamo__fine { opacity: 0.16; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-punto__segno::after,
	.nm-punto__altro { animation: none; }

	.nm-punto__segno,
	.nm-punto__racconto { transition: opacity 150ms linear, visibility 0s linear 150ms; }

	.nm-punto__segno,
	.nm-punto:hover .nm-punto__segno,
	.nm-punto--aperto .nm-punto__segno,
	.nm-punto:has(:focus-visible) .nm-punto__segno { transform: none; }

	.nm-punto__racconto { transform: none; }

	/* Il ditino resta, fermo: dice lo stesso dove toccare. Quello che dice di scorrere sta fermo
	   anche lui (components.css). */
	.nm-chisiamo__tocco,
	.nm-chisiamo__tocco::before { animation: none; }

	.nm-punto__lente { transition: opacity 150ms linear; }
	.nm-punto--aperto .nm-punto__lente { transform: none; }
}

/* ---- il modo di tornare indietro ---- */

.nm-ritorno {
	margin: 0;
	padding-top: clamp(0.7rem, 1.8vh, 1.2rem);
	border-top: var(--nm-rule-width) solid var(--color-border);
}

/* In cima il filetto sta sotto, dalla parte del contenuto, e sopra non c'e' niente. */
.nm-ritorno--cima {
	padding-top: 0;
	padding-bottom: clamp(0.7rem, 1.8vh, 1.2rem);
	border-top: 0;
	border-bottom: var(--nm-rule-width) solid var(--color-border);
}

.nm-ritorno__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--color-text-muted);
	font-size: clamp(0.6rem, 0.78vw, 0.72rem);
	text-decoration: none;
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-ritorno__link:hover,
.nm-ritorno__link:focus-visible { color: var(--nm-gold-300); }

/* La freccia e' l'icona del tema, girata: il glifo «←» sporgeva dal proprio riquadro a
   sinistra e la colonna che scorre lo tagliava. Un'icona sta nel suo riquadro. Arretra di
   un soffio al passaggio: dice «indietro» senza scriverlo. */
.nm-ritorno__freccia {
	display: block;
	width: 1.3em;
	transform: scaleX(-1);
	transition: transform var(--motion-duration-ui) var(--motion-ease);
}

.nm-ritorno__freccia svg { display: block; width: 100%; height: auto; }
.nm-ritorno__link:hover .nm-ritorno__freccia { transform: scaleX(-1) translateX(3px); }

/* ============================================================
   «Parlano di noi»: la fascia dei loghi
   ============================================================
   Una striscia sottile in fondo alla Home, sopra il footer. Sta lì perché è lì che una
   riga di riconoscimenti si legge senza rubare il posto a niente: chi arriva guarda il
   titolo e il libro, e la trova dopo, quando l'occhio scende.

   Il giro non lo fa il JavaScript: la fila è nel markup due volte e la pista trasla di
   metà della propria larghezza. Quando la prima copia è uscita a sinistra la seconda è
   esattamente dove era la prima, quindi il ciclo non ha un punto di ricongiunzione — e
   quello che non c'è non si vede. */

.nm-loghi {
	flex: 0 0 auto;
	position: relative;
	z-index: 2;
	/* Più aria sopra che sotto: la striscia segue il pulsante, e appiccicata a lui sembra
	   una sua appendice invece di una riga a sé. Sotto ce n'è già, perché la hero ha il suo
	   margine e poi comincia il footer. */
	padding-block: clamp(1.5rem, 4.4vh, 3rem) clamp(0.3rem, 1vh, 0.7rem);
}

.nm-loghi__interno {
	/* Il logo misura cento pixel di larghezza; la casella è lui più il suo respiro. Si
	   dichiarano qui perché servono a tre elementi che non sono uno dentro l'altro per
	   caso: la vetrina, che è larga due caselle, la voce, che ne è larga una, e il logo. */
	--nm-loghi-largo: 124px;
	/*
	 * La casella e' il marchio piu' l'aria attorno, ed e' l'aria a fare la distanza fra
	 * uno e l'altro — ma il vuoto vero lo fa il `padding-inline` della voce, non questa
	 * misura. Stringendo solo la casella il marchio si schiaccia e basta: il suo
	 * `max-width: 100%` si riferisce alla voce gia' scontata del padding.
	 *
	 * Quindi la casella deve restare larga almeno quanto il marchio piu' i suoi due
	 * padding, altrimenti lo comprime: 124 + 2x5,4 = 134,8, e qui ce ne sono 136.
	 */
	--nm-loghi-casella: calc(var(--nm-loghi-largo) + 0.75rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.45rem, 1.2vh, 0.85rem);
	min-width: 0;
}

.nm-loghi__titolo {
	flex: 0 0 auto;
	margin: 0;
	color: var(--nm-gold-400);
	font-size: clamp(0.62rem, 0.84vw, 0.78rem);
}

/*
 * La vetrina è larga due caselle esatte: se ne vedono due per volta, mai tre. Ai due lati
 * sfuma, così i loghi non compaiono e spariscono su un bordo netto — che si legge come un
 * ritaglio — ma entrano ed escono da niente.
 */
.nm-loghi__vetrina {
	/*
	 * In colonna il `flex-basis` smette di essere una larghezza e diventa un'altezza — e' la
	 * direzione dell'asse principale a deciderlo — quindi la larghezza tornerebbe `auto`,
	 * cioe' tutta la riga, e di marchi se ne vedrebbero tre invece di due. Qui si dichiara, e
	 * resta quella voluta: due caselle esatte. Era gia' scritto nel blocco del telefono,
	 * quando la colonna valeva solo li'; adesso vale sempre e sta qui.
	 */
	flex: 0 0 auto;
	width: calc(var(--nm-loghi-casella) * 2);
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

/*
 * La pista è lunga quanto sono i loghi, in caselle: le file traboccano a destra ed è la
 * vetrina a tagliarle. Ogni logo occupa una casella di larghezza fissa, quindi il conto
 * torna sempre — la traslazione di una fila intera è il 100% diviso il numero di copie.
 */
.nm-loghi__pista {
	display: flex;
	width: max-content;
	/* Sei secondi a logo: abbastanza lento da poterne leggere uno mentre passa. Con la
	   fila scritta due volte, il giro dura il doppio. */
	animation: nm-loghi-giro calc(var(--nm-loghi-n, 5) * 6s) linear infinite;
}

/* La pista trasla di una fila esatta, cioè del suo 100% diviso il numero di copie: a fine
   corsa la seconda copia sta dove stava la prima, e il ciclo non ha una giunzione. */

.nm-loghi__fila {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Una casella per logo, tutte uguali: è quello che rende prevedibile quanti se ne vedono. */
.nm-loghi__voce {
	flex: 0 0 var(--nm-loghi-casella, 100px);
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * E' questo che separa un marchio dall'altro: 12,8 px per lato facevano 26 px di vuoto,
	 * e con marchi larghi 124 la fila si leggeva come marchi sparsi.
	 */
	padding-inline: clamp(0.15rem, 0.42vw, 0.34rem);
}

/*
 * I loghi arrivano come sono: di ogni colore, chiari o scuri, e su un cielo notturno una
 * tavolozza di marchi diversi diventa una fila di adesivi. Si portano tutti allo stesso
 * bianco, che è il modo in cui le fasce di questo tipo si tengono insieme.
 *
 * La catena di filtri fa una cosa sola: `brightness(0)` schiaccia ogni pixel visibile a
 * nero conservandone l'alfa, `invert(1)` lo ribalta a bianco. Ma il bianco puro su questo
 * sito non esiste — è una regola, non una preferenza — quindi si torna indietro di un
 * soffio e si scalda: il pixel finale sta sull'avorio dell'inchiostro del tema, non sul
 * bianco dello schermo.
 */
/*
 * Cento pixel di larghezza per tutti, altezza secondo la propria proporzione: i marchi
 * arrivano con forme diverse e uguagliarli in altezza farebbe di un logotipo lungo una
 * striscia e di uno tozzo un bollo. L'altezza ha comunque un tetto, perché un logo quasi
 * quadrato non deve alzare la fascia da solo.
 */
.nm-loghi__segno {
	display: block;
	width: var(--nm-loghi-largo, 100px);
	max-width: 100%;
	height: auto;
	max-height: clamp(34px, 4.1vh, 56px);
	object-fit: contain;
	filter: brightness(0) invert(1) brightness(0.94) sepia(0.12) saturate(0.55);
	opacity: 0.82;
}

/* Il giro non si ferma al passaggio del puntatore, e non è una dimenticanza: una striscia
   che si blocca quando il mouse ci passa sopra dà l'impressione di essersi rotta. E non
   c'è niente da cliccare, quindi non c'è nemmeno la ragione per cui di solito ci si ferma. */
.nm-loghi:hover .nm-loghi__pista { animation-play-state: running; }

@keyframes nm-loghi-giro {
	to { transform: translateX(calc(-100% / var(--nm-loghi-copie, 2))); }
}

/* Su schermi bassi la fascia se ne va: il budget verticale della hero viene prima. */
@media (max-height: 620px) {
	.nm-loghi { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Ferma, la striscia mostrerebbe due loghi e basta: gli altri resterebbero fuori dalla
	 * vetrina senza niente che li porti dentro. Chi ha chiesto di non far muovere le cose
	 * non ha chiesto di vederne meno, quindi la vetrina si allarga, le copie in più se ne
	 * vanno e la fila va a capo come un elenco qualunque.
	 */
	.nm-loghi__pista { animation: none; width: auto; }
	.nm-loghi__vetrina { flex: 1 1 auto; width: auto; }
	.nm-loghi__fila + .nm-loghi__fila { display: none; }
	.nm-loghi__fila { flex-wrap: wrap; justify-content: flex-start; row-gap: 0.6rem; }
}

/* ============================================================
   Vetrina «Libri da compilare»: la prima pagina che scorre
   ============================================================

   Tutte le altre scene sono alte quanto la finestra e non scorrono: `nm-scena-piena`
   mette `overflow: hidden` sul body e il contenuto si arrangia dentro. Questa no. Qui la
   hero resta ferma e la sezione dopo le sale sopra, come una carta che si appoggia
   sull'altra.

   Il meccanismo non ha una riga di JavaScript e non e' un'animazione: la hero e' `sticky`,
   l'elenco viene dopo nel documento ed e' opaco, quindi mentre la pagina scorre lo copre.
   A muoverlo e' chi legge. Per questo sotto `prefers-reduced-motion` non c'e' niente da
   spegnere: non si muove nulla da solo.

   Attenzione a non mettere `overflow` su un antenato: `sticky` smette di funzionare e il
   guasto non da' errori, semplicemente la hero scorre via. */

body.nm-scena-vetrina .nm-page { min-height: 100svh; }

/*
 * La testa resta fissa sulla hero, e la carta la copre.
 *
 * `fixed` e non nel flusso: se restasse nel flusso, la hero alta quanto la finestra sommata
 * alla testa farebbe una pagina piu' alta della finestra gia' prima di scorrere, e la hero
 * si vedrebbe tagliata in fondo esattamente dell'altezza della testa.
 *
 * Ma non deve entrare nella seconda sezione: quando la carta sale fin li', deve passarle
 * sopra. Non lo si fa con gli z-index — abbassare la testa sotto la sezione tirerebbe
 * sotto anche il menu, che vive dentro la testa — ma **ritagliandola dal basso** man mano
 * che la carta la raggiunge (`clip-path`, scritto da scorrimento.js sui suoi pezzi uno per uno,
 * e sulla fascia sfocata del telefono: non sulla testa intera, che cosi' perdeva la
 * sfocatura). A occhio e' identico a essere coperta, e il menu resta il menu.
 */
body.nm-scena-vetrina .nm-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
}

/*
 * Con il menu aperto la testa non si ritaglia: il pannello del menu vive dentro di lei, e il
 * ritaglio di scorrimento.js — scritto nello stile dei suoi pezzi, quindi qui serve
 * `!important` — lo taglierebbe. Provato il 2 ottobre 2026 sul telefono, aprendo MENU
 * con la carta che copriva gia' il fondo della testa: il pannello non si vedeva affatto,
 * restavano il marchio e la croce, e sotto la pagina. Valeva anche sul desktop, con la
 * sezione a meta' della testa.
 */
[data-nm-menu] body.nm-scena-vetrina .nm-header > * { clip-path: none !important; }

.nm-vetrina {
	position: relative;
	/*
	 * Il fondo della carta, uno solo per tutta la scena: lo usano la striscia «Come
	 * funziona?» e la seconda sezione, e devono essere lo stesso foglio. Erano due gradienti
	 * simili scritti due volte, e il committente ha visto che non erano uguali.
	 *
	 * Il colore e' misurato sulla grafica del committente — rgb(249,246,235), cioe'
	 * `--nm-ink-50` — con un verso della luce da sinistra in alto.
	 */
	--nm-carta-fondo:
		radial-gradient(130% 190% at 6% -34%,
			var(--nm-ink-50) 0%,
			color-mix(in srgb, var(--nm-ink-50) 92%, var(--nm-paper-50)) 46%,
			color-mix(in srgb, var(--nm-ink-50) 78%, var(--nm-paper-50)) 100%),
		var(--nm-ink-50);
}

/*
 * Il pie' di pagina, su questa scena, sta sulla carta: e' il seguito del foglio, non un
 * ritorno alla notte. Senza, sotto il foglio spuntava la foschia del cielo con il piede
 * crema sopra, illeggibile — l'ha visto il committente. I colori sono quelli della scena di
 * carta, gli stessi token.
 */
body.nm-scena-vetrina .nm-footer,
body.nm-scena-libro .nm-footer,
body.nm-scena-blog .nm-footer,
body.nm-scena-articolo .nm-footer {
	--color-text: var(--nm-ink-800);
	--color-text-muted: color-mix(in srgb, var(--nm-ink-900) 72%, transparent);
	--color-accent: var(--nm-gold-ink);
	--color-link: var(--nm-ink-900);
	--color-border: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent);
	background: color-mix(in srgb, var(--nm-ink-50) 80%, var(--nm-paper-50));
	width: 100%;
	padding-inline: calc((100% - var(--container-width)) / 2);
	color: var(--color-text);
}

/* Sulla scheda del libro il piede sta sulla stessa carta di tutto il resto: niente fondo
   suo. (Dopo la regola condivisa, o non vincerebbe.) */
body.nm-scena-libro .nm-footer,
body.nm-scena-blog .nm-footer,
body.nm-scena-articolo .nm-footer { background: transparent; }

/*
 * La densita' vale anche qui.
 *
 * `--nm-d` e `--nm-d-spazio` erano dichiarate solo su `.nm-hero`, quella della Home: senza,
 * ogni `calc(... * var(--nm-d))` di questo blocco era invalido e il browser lo buttava via
 * senza dire niente — i corpi del testo restavano quelli ereditati, e la scala non c'era.
 * Misurato: `.nm-passi__nome` risultava 19,2 px invece dei 14,7 chiesti.
 *
 * La hero e' alta quanto la finestra anche qui, quindi il motivo di allora vale ancora: su
 * una finestra bassa il testo non ci sta, e prima si stringono gli spazi e poi si riduce la
 * scala. La pagina scorre, ma questa schermata no: e' ferma finche' non le sale sopra
 * l'elenco, e quello che non ci sta dentro non si vede mai.
 */
.nm-vetrina__hero {
	--nm-d: 1;
	--nm-d-spazio: 1;
	position: sticky;
	/*
	 * Ferma sotto la barra di WordPress, non sotto di lei. Con `top: 0`, a chi e' collegato
	 * la hero saliva di 32 px appena si scorreva, e in fondo allo schermo restava una
	 * fascia di cielo sotto «Come funziona?»: il committente l'ha vista il 1° ottobre 2026,
	 * quando la hero, senza i tre tips, e' diventata alta quanto lo schermo — prima ne
	 * usciva, e la fascia stava sotto il bordo. Per chi visita la barra non c'e', e vale 0.
	 */
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	overflow: hidden;
}

/*
 * Gli stessi identici gradini della hero della Home, soglia per soglia.
 *
 * Prima erano soglie mie, ed e' bastato quello a far divergere i corpi: la stessa
 * espressione `clamp(...)` moltiplicata per 0,93 invece che per 0,86 dava 19,64 px contro
 * i 18,16 della Home. Il testo si vedeva piu' grande pur essendo scritto uguale.
 *
 * Dopo la regola qui sopra e non prima: la media query non aggiunge specificita', quindi a
 * decidere e' l'ordine, e messa prima sarebbe stata riscritta da `--nm-d: 1`.
 */
@media (max-height: 1000px) { .nm-vetrina__hero { --nm-d: 0.94; --nm-d-spazio: 0.62; } }
@media (max-height: 880px)  { .nm-vetrina__hero { --nm-d: 0.86; --nm-d-spazio: 0.50; } }
@media (max-height: 780px)  { .nm-vetrina__hero { --nm-d: 0.76; --nm-d-spazio: 0.38; } }
@media (max-height: 680px)  { .nm-vetrina__hero { --nm-d: 0.66; --nm-d-spazio: 0.30; } }

/* ------------------------------------------------------------
   Le due colonne
   ------------------------------------------------------------ */

.nm-vetrina__colonne {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	/*
	 * La colonna delle parole e' ancorata in alto, non centrata.
	 *
	 * Centrata, la quota del titolo dipendeva dall'altezza di tutto cio' che gli sta sotto:
	 * una frase di una riga in piu' e il titolo saliva addosso al logo, e per riportarlo giu'
	 * si ricalibrava un margine a mano — e' successo quattro volte. Ancorata in alto, il
	 * titolo sta sempre alla stessa quota su tutte le vetrine: `--header-height` piu' 5,45
	 * unita', che a 1440x860 lo mette a 220, un pixel dalla Home. La colonna
	 * cresce verso il basso, dove c'e' la striscia a fermarla.
	 */
	align-items: flex-start;
	width: var(--container-width);
	margin-inline: auto;
	--nm-colonne-cima: calc(var(--header-height) + var(--space-unit) * 5.45);
	padding-top: var(--nm-colonne-cima);
}

.nm-vetrina__parole {
	position: relative;
	z-index: 1;
	/* 33 rem, non 30: la terza riga dei personalizzati — «Stampato da [logo] e spedito a
	   casa tua.» — misura 511 px con il marchio dentro, e a 480 «tua.» andava a capo da solo. */
	width: min(38%, 33rem);
	/*
	 * Nessun margine di compensazione: la colonna si centra nello spazio fra la testa e la
	 * striscia, e la quota dell'H1 la decide il riempimento sotto la testa, uguale per
	 * tutte e due le vetrine. C'era un margine calibrato a mano per portare l'H1 a 219 come
	 * in Home, e ogni cambiamento — i tips piu' alti, un titolo lungo, la testa vera al
	 * posto di quella compatta — lo rompeva. Un numero che va ricalibrato a ogni ritocco
	 * non e' una regola, e' un debito.
	 */
}

/*
 * Niente velo sotto le parole.
 *
 * Ce n'era uno, notte piena che sfumava verso destra, per difendere il testo da una
 * copertina chiara. Copriva pero' esattamente la costellazione — misurata a (14, 447),
 * larga 432 — e senza costellazione il fondo non e' piu' quello della Home ma una
 * campitura blu. Nella Home il titolo la costellazione ce l'ha dietro, e va bene cosi'.
 *
 * Le due colonne non si toccano: sotto i 1200 px i libri si stringono, sotto i 900
 * vanno a capo. Il velo difendeva da una sovrapposizione che non c'e'.
 */

/*
 * I libri escono dal contenitore e arrivano al bordo della finestra, come nella grafica.
 *
 * Sono assoluti e non una colonna della griglia: nella grafica occupano dal 34% in poi e
 * passano sotto la striscia di carta, cioe' non hanno una colonna loro — hanno una zona.
 */
.nm-vetrina__media {
	position: absolute;
	right: calc((var(--container-width) - 100vw) / 2);
	top: 50%;
	translate: 0 -50%;
	width: min(64vw, 1180px);
	pointer-events: none;
}

/* La fila dei libri: ognuno e' un'immagine sua, messa al suo posto dal componente. */
/*
 * Il riquadro dei libri e' piu' basso di quanto sembri necessario, ed e' voluto.
 *
 * Misurato a 1440x860: fra la testa e la striscia restano 587 px, e con la proporzione di
 * prima il riquadro ne veniva 734 — sbordava sopra, e la hero glielo tagliava. Adesso ci
 * sta dentro, e la compattezza fa anche la seconda cosa che serviva: le due file si
 * avvicinano, come nella grafica, dove i libri aperti appoggiano sulla base di quelli in
 * piedi invece di stargli lontano.
 */
.nm-vetrina__media { aspect-ratio: 1180 / 730; }

.nm-vetrina__libro {
	position: absolute;
	left: var(--nm-x);
	top: var(--nm-y);
	z-index: var(--nm-z);
	width: var(--nm-w);
	height: auto;
	transform: rotate(var(--nm-r));
	transform-origin: 50% 100%;
	/* L'ombra e' blu notte e non nera: su questo cielo un'ombra nera e' un buco. */
	filter: drop-shadow(0 clamp(6px, 1vw, 14px) clamp(10px, 1.6vw, 24px) rgb(2 6 14 / 0.62));
}

/* Le quote di ciascuno arrivano inline dal componente: la` si leggono accanto all'elenco
   dei libri, e nessuna immagine aggiunta alla scena puo' spostarle. */
.nm-vetrina__libro { --nm-x: 0%; --nm-y: 8%; --nm-w: 27%; --nm-r: 0deg; --nm-z: 2; }

/*
 * I passi in figura, nei personalizzati: la grafica del committente del 2 ottobre 2026. Tre
 * oggetti in fila sul cielo — il libro di Leonardo sulla pila, il portatile con il modulo, il
 * libro stampato aperto — e sotto ognuno la sua scheda crema: la moneta col numero a cavallo
 * del bordo, il nome del passo, la frase, e sul terzo la nota in una pillola. Fra un passo e
 * l'altro una freccia d'oro che sale.
 *
 * Qui il riquadro non ha proporzioni sue: e' alto quanto la fila, che sta nel flusso. Le
 * misure vengono dalla grafica, in proporzione alla larghezza di un passo: la scheda tre
 * quarti, il titolo il 6%, la frase il 4,3%, la moneta l'11%; e la scheda copre solo il piede
 * dell'oggetto. I corpi crescono con la fila (`cqw`, un centesimo della sua larghezza): un
 * passo e' circa un terzo della fila.
 */
/*
 * I passi devono essere grandi — il committente l'ha chiesto tre volte — e in fila. In fila
 * accanto alle parole lo spazio e' quello che resta fra il testo e il bordo della finestra:
 * la fila lo prende tutto. Non parte piu' dal 38% del contenitore ma da dove finisce davvero il
 * testo — la colonna delle parole e' larga quanto la sua riga piu' lunga, e la frase va a capo
 * una riga prima —: a 1440 px sono 70-180 px in piu', secondo l'altezza della finestra. Arriva
 * fino al bordo destro, e sta a meta' fra la cima della hero e la striscia, come prima.
 */
/*
 * Le parole dei personalizzati: la frase grande e' la piu' lunga delle due vetrine, e la sua
 * terza riga — «Stampato da [logo] e spedito a casa tua.» — con il marchio dentro misura 25,8
 * em, contro 20,6 e 21,5 delle prime due: a 21,8 em va a capo sempre nello stesso punto,
 * qualunque sia lo schermo.
 */
@media (min-width: 901px) {
	.nm-vetrina__hero--personalizzati .nm-vetrina__lead { max-width: 21.8em; }

	/*
	 * Le figure dei personalizzati occupano tutto lo spazio che hanno: dal testo al bordo
	 * destro dello schermo, e dalla testata fino ai tre punti del servizio, su cui poggiano.
	 * Centrate, su uno schermo basso il portatile saliva fin sotto «Menu», e su uno alto restava
	 * un vuoto fra loro e i punti. Il riquadro e' largo una volta e mezzo la sua altezza: tanto
	 * quanto lo spazio fra la colonna del testo — la sua larghezza e' `min(38%, 33rem)` della
	 * colonna — e il bordo, se l'altezza lo consente; altrimenti lo stringe l'altezza, con 360 px
	 * per la testata e i punti: con meno, a 1920 x 1080 il portatile toccava «L’atelier».
	 * Misurato da 1280 x 720 a 2560 x 1300.
	 */
	.nm-vetrina__hero--personalizzati .nm-vetrina__media {
		top: auto;
		bottom: 0;
		translate: none;
		width: min(
			calc((100vw + var(--container-width)) / 2 - min(var(--container-width) * 0.38, 33rem) - 1rem),
			calc((100svh - 360px) * 1.47)
		);
		aspect-ratio: 1.47;
	}

	/* La polvere sale dal libro stampato, a destra. */
	.nm-vetrina__hero--personalizzati .nm-vetrina__polvere { --nm-luce-x: 80%; --nm-luce-y: 74%; }
}

/*
 * Sugli schermi larghi e bassi — piu' di 17 a 10, come un portatile da 16 pollici con il
 * browser aperto — le figure sono grandi quanto lo spazio libero: «le immagini devono occupare
 * molto piu' spazio», e «non devono essere lineari», con la libreria di sfondo in vista (il
 * committente, 7 ottobre 2026). La' la diagonale di sopra, stretta dall'altezza, restava
 * piccola in fondo a destra, con il vuoto in mezzo.
 *
 * Il riquadro e' tutto lo spazio libero: dalla fine del testo — la colonna e' larga quanto le
 * sue parole, non quanto il suo massimo, e questo da solo da' 150 px — al bordo dello schermo,
 * e da sotto la testata ai tre punti. Dentro, la composizione e' disegnata su un foglio di
 * 1430 x 620 pixel (`posti_larghi`), e `--nm-u` e' quanto vale un pixel del foglio: il piu'
 * grande che lo fa stare nel riquadro, in larghezza e in altezza. Il foglio sta in basso, sui
 * punti, e al centro se avanza larghezza. Sugli schermi piu' alti, come 1512 x 982, resta la
 * diagonale di sopra, che li' riempie gia' lo spazio.
 */
@media (min-width: 901px) and (min-aspect-ratio: 17/10) {
	.nm-vetrina__hero--personalizzati .nm-vetrina__parole {
		flex: 0 0 auto;
		width: fit-content;
	}

	.nm-vetrina__hero--personalizzati .nm-vetrina__media {
		position: relative;
		top: auto;
		right: auto;
		bottom: auto;
		translate: none;
		flex: 1 1 0;
		align-self: stretch;
		width: auto;
		min-width: 0;
		aspect-ratio: auto;
		/* Comincia un poco sopra il fondo della testata: le figure a destra stanno sotto
		   «Menu» e «L’atelier», che finiscono prima. */
		margin: calc(var(--header-height) - var(--nm-colonne-cima) - 1.5rem) calc((var(--container-width) - 100vw) / 2) 0 1rem;
		container-type: size;
		--nm-u: min(100cqw / 1430, 100cqh / 620);
		--nm-ox: max(0px, (100cqw - 1430 * var(--nm-u)) / 2);
	}

	.nm-vetrina__hero--personalizzati .nm-vetrina__libro {
		left: calc(var(--nm-ox) + var(--nm-lx) * var(--nm-u));
		top: auto;
		bottom: calc(var(--nm-lb) * var(--nm-u));
		z-index: var(--nm-lz);
		width: calc(var(--nm-lw) * var(--nm-u));
		transform: rotate(var(--nm-lr));
	}

	/*
	 * La libreria di sfondo come nella 1.0.4, dove al committente «andava bene»: larga il 112%
	 * del riquadro, sfumata ai lati e in basso. Il riquadro qui e' piu' basso di quello di allora,
	 * quindi non si appende in alto ma si appoggia: la sua sfumatura finisce sul fondo del
	 * riquadro, sui tre punti. Abbassata e ingrandita fin sotto il portatile, il suo fondo scuro
	 * sul cielo chiaro faceva un rettangolo velato, e i bagliori sopra le pile, grandi, esplosioni.
	 */
	.nm-vetrina__hero--personalizzati .nm-vetrina__pile {
		top: auto;
		bottom: calc(112cqw / 2.4 * -0.12);
	}
}

.nm-vetrina__pile {
	position: absolute;
	left: -6%;
	top: 20%;
	z-index: 0;
	width: 112%;
	height: auto;
	pointer-events: none;
	/* A fuoco ma non in primo piano: a tenerle indietro basta un velo di opacita', che non
	   ne cambia il disegno — la sfocatura invece lo cambiava, e si vedeva. */
	opacity: 0.74;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 82%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 82%, transparent 100%);
}


/* Sui personalizzati le pile restano scoperte fino in fondo, e il loro bordo basso, dritto, si
   vedeva sul cielo (l'ha cerchiato il committente): sfumano anche in basso. */
.nm-vetrina__hero--personalizzati .nm-vetrina__pile {
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, #000 15%, #000 82%, transparent 100%),
		linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
	-webkit-mask-composite: source-in;
	mask-image:
		linear-gradient(to right, transparent 0%, #000 15%, #000 82%, transparent 100%),
		linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
	mask-composite: intersect;
}

/*
 * I filamenti d'oro.
 *
 * Stessa meccanica dei libri — quote inline dal componente — perche' sono la stessa scena.
 * Il colore e' un token, non un valore: il disegno e' in `currentColor`.
 */
.nm-vetrina__filamento {
	position: absolute;
	left: var(--nm-x);
	top: var(--nm-y);
	z-index: var(--nm-z);
	display: block;
	width: var(--nm-w);
	color: var(--nm-gold-200);
	opacity: var(--nm-o, 0.7);
	transform: rotate(var(--nm-r));
	pointer-events: none;
	/* L'alone: un filamento d'oro senza alone e' un tratto di penna, con l'alone e' luce. */
	filter: drop-shadow(0 0 clamp(3px, 0.5vw, 7px) color-mix(in srgb, var(--nm-gold-300) 55%, transparent));
}

.nm-vetrina__filamento svg { display: block; width: 100%; height: auto; }



/* Le scintille sparse: stesso pulviscolo della Home, su tutta la zona dei libri. Sopra le
   pile e i filamenti, sotto i libri: la polvere sta nell'aria davanti al fondo, non davanti
   al soggetto. */
.nm-vetrina__scintille {
	position: absolute;
	inset: -4%;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

/*
 * La polvere che sale dal libro aperto di sinistra.
 *
 * Il riquadro e' tutta la zona dei libri; a dire da dove nasce la luce sono `--nm-luce-x`
 * e `--nm-luce-y`, che `.nm-particella` legge — misurate sul libro cinque, fra le due
 * pagine aperte. Sopra i libri, non dietro: la luce esce dalle pagine.
 */
.nm-vetrina__polvere {
	position: absolute;
	inset: 0;
	z-index: 9;
	--nm-luce-x: 22%;
	--nm-luce-y: 66%;
	pointer-events: none;
}

/*
 * Il bagliore dietro la fila.
 *
 * Quattro copertine ritagliate su una campitura sembrano incollate. Nella Home la luce
 * viene dal libro e allaga la scena: qui la stessa cosa, un alone caldo largo dietro i
 * libri, in `screen` perche' su un cielo quasi nero si puo' solo aggiungere luce.
 */
.nm-vetrina__bagliore {
	position: absolute;
	left: 4%;
	right: 0;
	top: -6%;
	bottom: 4%;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(
		62% 58% at 52% 46%,
		color-mix(in srgb, var(--nm-gold-300) 30%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-400) 13%, transparent) 42%,
		transparent 72%
	);
}

/* ------------------------------------------------------------
   Le parole
   ------------------------------------------------------------ */

/*
 * Il titolo e' grande **esattamente quanto quello della Home**: stesso token `--scale-h1`,
 * stesso fattore di densita', nessuna interlinea propria — cosi' prende quella globale,
 * che e' la stessa che usa la Home. Prima era una scala mia, ricavata dalla grafica del
 * committente, e veniva l'86% di quella della Home.
 */
.nm-vetrina__titolo {
	font-size: calc(var(--scale-h1) * var(--nm-d));
	font-weight: 700;
	margin-bottom: calc(var(--space-unit) * 0.8 * var(--nm-d-spazio));
}

/* Il logo del partner dentro la frase: alto quanto la riga, allineato alla base del
   testo, con un po' d'aria ai lati. */
.nm-vetrina__partner {
	display: inline-block;
	width: auto;
	height: 1.35em;
	margin: 0 0.15em;
	vertical-align: -0.35em;
}

.nm-vetrina__titolo-riga { display: block; }

/* La riga in oro e' piu' piccola della prima: nella grafica e' un prezzo, non un titolo. */
.nm-vetrina__titolo .nm-accent {
	font-size: 0.74em;
	line-height: 1.15;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nm-vetrina__titolo .nm-accent {
		display: inline-block;
		padding-bottom: 0.16em;
		margin-bottom: -0.16em;
		background-image: var(--nm-oro-lucente);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.nm-vetrina__titolo:focus-visible { outline-offset: 8px; }

.nm-vetrina__lead {
	/* Corpo, peso e interlinea identici al testo sotto l'H1 della Home, non simili: e' la
	   stessa voce, e l'interlinea fa parte del modo in cui una voce suona. */
	font-size: calc(clamp(1.05rem, 1.6vw, 1.32rem) * var(--nm-d));
	font-weight: 500;
	line-height: calc(1.42 + 0.55 * var(--nm-d-spazio));
	/* Aria fra la frase e il prezzo: «un po' di spazio», ha chiesto il committente. */
	margin-bottom: calc(var(--space-unit) * 1.4 * var(--nm-d-spazio));
}

/*
 * La riga piccola sotto la frase grande. Nasce vuota sui compilabili; sui personalizzati
 * porta «A partire da 39,90 €», e nella grafica del committente e' una riga che si vede —
 * non una nota. Crema pieno, un filo piu' grande della frase, la cifra in oro se e' scritta
 * come cifra (le cifre stanno in un `<span>` d'oro: vedi il componente).
 */
.nm-vetrina__testo {
	font-size: calc(clamp(1.1rem, 1.5vw, 1.45rem) * var(--nm-d));
	font-weight: 500;
	line-height: 1.3;
	color: var(--color-text);
	/* Piu' vicino alla frase che al bottone: il prezzo chiude la frase, non apre il
	   pulsante. */
	margin-bottom: calc(var(--space-unit) * 0.8 * var(--nm-d-spazio));
}

/* La cifra: nel serif dei titoli, in oro, quasi il doppio della riga — nella grafica del
   committente il prezzo e' la seconda cosa che si legge dopo il titolo. */
.nm-vetrina__testo .nm-vetrina__cifra {
	font-family: var(--font-display);
	font-size: 1.85em;
	font-weight: 700;
	line-height: 1;
	color: var(--nm-gold-200);
	margin-left: 0.2em;
	vertical-align: -0.08em;
}

/* Aria sotto il bottone: con i tips subito sotto, il bottone e la riga delle icone si
   leggevano come un blocco solo. */
/*
 * Lo spazio sotto il pulsante sta sul suo guscio (`.nm-magia`), non sul pulsante: il
 * guscio e' il figlio della colonna, e comete e faville girano intorno al guscio. Con il
 * margine sul pulsante il guscio era alto pulsante piu' margine, e le comete giravano
 * anche intorno al margine — «i pallini girano non solo intorno al pulsante».
 */
.nm-vetrina__parole > .nm-magia,
.nm-vetrina__parole > .nm-vetrina__cta { margin-bottom: calc(var(--space-unit) * 2.5 * var(--nm-d-spazio)); }
.nm-magia > .nm-vetrina__cta { margin: 0; }

/*
 * Su uno schermo basso — il portatile del committente, 1440x729 — la densita' della hero
 * scende a 0,38 e gli spazi moltiplicati per quel fattore diventano niente: titolo, frase,
 * pulsante e tips finivano uno addosso all'altro, «tutto troppo vicino». Qui gli spazi
 * sono scritti in pixel, e lo spazio per darglieli viene da sopra il titolo — che a
 * 729 px stava a 108 px dalla testa, e a 82 respira lo stesso — e dalla striscia, che
 * cede quello che ai passi non serve.
 */
@media (max-height: 780px) {
	.nm-vetrina__colonne { --nm-colonne-cima: calc(var(--header-height) + var(--space-unit) * 3.6); }
	.nm-vetrina__titolo { margin-bottom: 12px; }
	.nm-vetrina__lead { margin-bottom: 12px; }
	.nm-vetrina__testo { margin-bottom: 8px; }
	.nm-vetrina__parole > .nm-magia,
	.nm-vetrina__parole > .nm-vetrina__cta { margin-bottom: 20px; }
}

.nm-vetrina__tips {
	display: grid;
	/*
	 * Alla loro larghezza, uno accanto all'altro — non spalmati su tutta la colonna. Con
	 * tre colonne uguali il primo e il terzo finivano ai due capi e in mezzo restava un
	 * vuoto: si leggevano come tre cose lontane invece che come una riga di tre.
	 */
	grid-template-columns: repeat(var(--nm-vetrina-tips-n, 3), max-content);
	justify-content: start;
	gap: calc(var(--space-unit) * 2.2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-vetrina__tip {
	display: flex;
	flex-direction: column;
	/* Icona e parola vicine: con il varco di prima, e la scatola dell'icona alta il doppio
	   del disegno, fra le due restava un vuoto e si leggevano come due cose. */
	gap: 0;
}

/*
 * L'icona accesa, senza cerchio.
 *
 * C'era un anello d'oro intorno, come sui passi di «Come funziona?»; il committente l'ha
 * tolto. Resta la luce: l'alone segue il disegno dell'icona — `drop-shadow` sull'SVG, non
 * `box-shadow` sulla scatola, che senza anello avrebbe disegnato un disco sfocato — e le
 * tre scintille intorno. La scatola resta quadrata e trasparente solo per avere un posto
 * in cui appendere le scintille.
 */
.nm-vetrina__tip-icona {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(46px, 3.8vw, 60px);
	/* Piu' bassa che larga: la scatola serve solo ad appendere le scintille, e alta quanto
	   larga lasciava aria vuota sotto il disegno. */
	height: clamp(30px, 2.4vw, 38px);
	color: var(--nm-gold-200);
}

.nm-vetrina__tip-icona > svg {
	display: block;
	width: 64%;
	height: auto;
	margin-top: -4%;
	filter: drop-shadow(0 0 clamp(5px, 0.6vw, 9px) color-mix(in srgb, var(--nm-gold-300) 70%, transparent));
}

.nm-vetrina__tip-scintilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	width: var(--s);
	color: var(--nm-gold-100);
	opacity: var(--o);
	filter: drop-shadow(0 0 5px color-mix(in srgb, var(--nm-gold-200) 70%, transparent));
}

.nm-vetrina__tip-scintilla svg { display: block; width: 100%; height: auto; }

/*
 * Il testo: piu' grande, in crema pieno, e nient'altro.
 *
 * Questi tips stanno sulla foschia chiara del cielo (luminanza 163 dietro, misurata) e il
 * committente ha bocciato, una per volta, tutte le strade per rinforzarli: la velatura, il
 * testo scuro, il cielo piu' profondo e infine anche l'alone attorno alle lettere. Quindi
 * restano crema puro sul cielo com'e'. Il contrasto li' e' sotto la soglia — ~1,4 contro
 * 4,5 — ed e' una scelta del committente, presa sapendolo. Sta in docs/STATO.md.
 */
.nm-vetrina__tip-testo {
	font-size: calc(clamp(0.92rem, 1.12vw, 1.1rem) * var(--nm-d));
	font-weight: 500;
	line-height: 1.28;
	color: var(--color-text);
}

/* ------------------------------------------------------------
   «Come funziona?»: la striscia di carta
   ------------------------------------------------------------

   È la scena di carta del sito — la stessa lingua della scheda del libro — appoggiata in fondo alla
   hero: esce dal bordo sinistro dello schermo, ha il bordo alto a onda e finisce con un
   capo tondo. Su carta il testo torna scuro, ed è il verso giusto: non è un'eccezione, è
   l'altro dei due mondi del sito.

   C'è stato un giro in cui la carta era stata tolta e i passi scritti sul cielo. Il
   committente ha guardato le due pagine affiancate e ha chiesto la carta: le due prove
   stanno nella storia, e questa è quella scelta. */

.nm-passi {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	/* Esce a sinistra dallo schermo, come nella grafica: la carta non comincia, continua.
	   Stretta: larga quasi quanto la finestra diventava un muro che spegne la scena. Ma non
	   troppo: a 52 rem le parole dei passi stavano in colonne da 130 px e «Ordina in modo
	   semplice e sicuro.» andava su quattro righe, e la striscia cresceva con loro. */
	width: min(66%, 64rem);
	margin-right: auto;
	margin-left: calc((var(--container-width) - 100vw) / 2);
	/* A filo del bordo basso della hero, dove comincia la sezione dopo: la carta si
	   appoggia sul taglio, non ci galleggia sopra. Quando finiva sotto il bordo (y=888 su
	   860) la colpa era della hero troppo piena, non di questo margine. */
	margin-bottom: 0;
}

/*
 * Le faville a cavallo del bordo: meta' sulla carta, meta' sul cielo.
 *
 * Sopra il foglio, e con la fascia che le contiene alta quanto il bordo: e' l'unico modo
 * perche' una favilla possa stare sopra la linea e sotto l'altra meta' del suo corpo.
 */
.nm-passi__faville {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 0;
	z-index: 2;
	pointer-events: none;
}

.nm-passi__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	width: var(--s);
	color: var(--nm-gold-100);
	opacity: var(--o);
	filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nm-gold-200) 70%, transparent));
}

.nm-passi__favilla svg { display: block; width: 100%; height: auto; }

.nm-passi__foglio {
	position: relative;
	--nm-onda: clamp(20px, 2.4vw, 38px);
	/*
	 * Alta uguale su tutte e due le vetrine, qualunque cosa ci sia scritto: la striscia
	 * e' appoggiata al bordo basso della hero, quindi e' la sua altezza a decidere dove
	 * comincia — e il committente la vuole «nella stessa identica posizione» sulle due
	 * pagine. Con l'altezza lasciata al contenuto, tre parole in piu' in un passo la
	 * facevano partire 70 px piu' in alto. I passi stanno centrati nello spazio che avanza.
	 */
	display: flex;
	flex-direction: column;
	/*
	 * Le parole in cima al foglio, subito sotto l'onda, e la carta che avanza sotto: il 7
	 * ottobre 2026 il committente le ha volute «piu' su», senza muovere la striscia. Dal 1°
	 * ottobre stavano al centro, con lo stesso spazio sopra e sotto — «il giusto spazio su e
	 * giu'», dopo due prove.
	 *
	 * Sopra, lo spazio si conta dall'onda, non dal bordo del rettangolo: e sopra il titolo
	 * l'onda e' nel suo punto piu' basso, all'80% della sua altezza (onda-carta.svg, x da
	 * 0 a 150). Il margine sopra e' quindi l'80% dell'onda piu' un terzo di modulo: era un
	 * modulo intero, e il committente le parole le ha volute ancora «piu' su».
	 */
	justify-content: flex-start;
	min-height: clamp(180px, 26.2vh, 300px);
	/*
	 * Il colore e' misurato sulla grafica del committente, non scelto: il suo pannello sta a
	 * **rgb(249, 246, 235)**. Il token piu' vicino e' `--nm-ink-50`, rgb(252, 249, 243).
	 * `--nm-paper-100`, che avevo usato prima, sta a rgb(226, 214, 198) — dai 23 ai 37
	 * livelli piu' scuro su ogni canale, ed e' quel grigio-fango che faceva sembrare la
	 * striscia un muro.
	 *
	 * E non e' una campitura piatta: la carta prende luce da sinistra in alto, come tutta la
	 * scena. Senza un verso della luce un rettangolo di colore non e' un foglio.
	 */
	background: var(--nm-carta-fondo);
	/* Si stacca dal cielo invece di essere incollata: e' un foglio appoggiato, e un foglio
	   appoggiato fa ombra. */
	box-shadow: 0 clamp(-22px, -2vw, -10px) clamp(26px, 3vw, 52px) rgb(2 6 14 / 0.38);
	border-top-right-radius: clamp(24px, 3vw, 52px);
	border-bottom-right-radius: clamp(24px, 3vw, 52px);
	/* A sinistra due moduli dentro la colonna, non mezzo: le monete dei numeri sporgono a
	   sinistra delle pastiglie e arrivavano quasi al bordo (7 ottobre 2026, «leggermente piu' a
	   destra»). */
	padding: calc(var(--nm-onda) * 0.8 + var(--space-unit) * 0.35)
		calc(var(--space-unit) * 4)
		var(--space-unit)
		calc((100vw - var(--container-width)) / 2 + var(--space-unit) * 2);
	/*
	 * Il bordo alto a onda, non strappato: lo strappo è il profilo che il sito usa fra
	 * notte e carta nella fascia dei tips, ma nella grafica di questa striscia il bordo è
	 * una curva lunga e bassa — un foglio appoggiato, non un foglio lacerato.
	 *
	 * Il rettangolo di mezzo si sovrappone di un pixel all'onda invece di accostarvisi: fra
	 * due strati accostati resta una giuntura, e la giuntura cade su una quota frazionaria.
	 * È lo stesso accorgimento della fascia dei tips, e lì il difetto era stato misurato —
	 * una riga di un pixel larga tutto lo schermo.
	 */
	-webkit-mask-image: url("../img/onda-carta.svg"), linear-gradient(#000, #000);
	mask-image: url("../img/onda-carta.svg"), linear-gradient(#000, #000);
	-webkit-mask-size: clamp(360px, 42vw, 720px) var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
	mask-size: clamp(360px, 42vw, 720px) var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
	-webkit-mask-position: left top, left calc(var(--nm-onda) - 1px);
	mask-position: left top, left calc(var(--nm-onda) - 1px);
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
}

/* Su uno schermo basso la striscia cede qualche pixel: a 729 di altezza i passi ci stanno
   in 166, e quei pixel servono alla colonna dei personalizzati per non finirle sotto. */
@media (max-height: 780px) {
	.nm-passi__foglio { min-height: clamp(160px, 25vh, 250px); }
}

/*
 * La grana della carta, la stessa della scena crema: e' quella a fare la differenza fra
 * una campitura e un foglio, e a occhio la si nota solo quando manca.
 */
.nm-passi__foglio::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("../img/paper-grain.webp");
	background-size: var(--nm-grain-size) var(--nm-grain-size);
	mix-blend-mode: soft-light;
	opacity: var(--nm-grain-opacity);
}

.nm-passi__titolo {
	display: flex;
	align-items: center;
	gap: calc(var(--space-unit) * 1.2);
	font-family: var(--font-display);
	font-style: italic;
	font-size: calc(clamp(1.24rem, 1.82vw, 1.84rem) * var(--nm-d));
	font-weight: 600;
	/* Stretta: il titolo e' una riga sola, e l'interlinea normale gli lasciava aria sopra. */
	line-height: 1.15;
	/* Mezzo modulo piu' giu' dell'onda, senza spostare i passi: «leggermente piu' in basso»,
	   dopo averlo portato su con loro (7 ottobre 2026). */
	position: relative;
	top: calc(var(--space-unit) * 0.5);
	color: var(--nm-ink-900);
	/* Il respiro fra il titolo e i passi, chiesto il 7 ottobre 2026: le scintille delle
	   pastiglie arrivavano sotto le lettere. Segue l'altezza dello schermo, 25-32 px. */
	margin-bottom: clamp(1.1rem, 3.2vh, 2rem);
}

.nm-passi__cuore { display: block; width: clamp(14px, 1.1vw, 19px); color: var(--nm-gold-graphic); }
.nm-passi__cuore svg { display: block; width: 100%; height: auto; }

.nm-passi__lista {
	display: grid;
	grid-template-columns: repeat(var(--nm-passi-n, 3), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La fila e' nel markup due volte per il nastro del telefono: dove il nastro non gira, la
   seconda copia non esiste. Pista e nastro, fermi, non cambiano niente. */
.nm-passi__pista:not([data-nm-vivo]) .nm-passi__lista[aria-hidden] { display: none; }

/*
 * Un passo: la pastiglia a sinistra, le parole a destra, la freccia in fondo.
 *
 * La freccia dice una cosa che un filetto non dice: che c'è un ordine, e che dopo questo
 * viene quello. Un filetto separa, una freccia porta.
 */
.nm-passi__passo {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: calc(var(--space-unit) * 1.5);
	padding-right: clamp(1.2rem, 2.2vw, 2.4rem);
}

/*
 * La pastiglia è piena, e qui è giusto: sta su carta, non sul cielo. Il divieto di pieno
 * riguarda i bottoni, e sul cielo un pieno chiaro sarebbe l'unica macchia opaca della
 * pagina — su carta invece è la carta stessa a reggerlo.
 */
.nm-passi__segno {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(52px, 4.6vw, 74px);
	aspect-ratio: 1;
	border-radius: 50%;
	/*
	 * La pastiglia prende luce dall'alto a sinistra, come la carta e come tutta la scena, e
	 * porta un anello d'oro e un alone. Piatta era un pittogramma dentro un cerchio; con la
	 * luce, l'anello e le scintille diventa un piccolo incantesimo — ed e' quello che
	 * serviva.
	 */
	background: radial-gradient(120% 120% at 26% 18%,
		var(--nm-ink-50) 0%,
		color-mix(in srgb, var(--nm-gold-300) 34%, var(--nm-ink-50)) 46%,
		color-mix(in srgb, var(--nm-gold-300) 62%, var(--nm-ink-50)) 100%);
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 42%, transparent);
	box-shadow:
		0 0 clamp(10px, 1.2vw, 20px) color-mix(in srgb, var(--nm-gold-300) 52%, transparent),
		inset 0 clamp(1px, 0.14vw, 2px) 0 color-mix(in srgb, var(--nm-ink-50) 80%, transparent);
	color: var(--nm-ink-900);
}

/* Le scintille intorno alla pastiglia: sporgono, quindi il cerchio non le puo' contenere. */
.nm-passi__scintilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	width: var(--s);
	color: var(--nm-gold-graphic);
	opacity: var(--o);
}

.nm-passi__scintilla svg { display: block; width: 100%; height: auto; }

.nm-passi__icona { display: block; width: 50%; }
.nm-passi__icona svg { display: block; width: 100%; height: auto; }

/*
 * La moneta: un dischetto d'oro acceso con un numero, non una macchia marrone.
 *
 * Misurato sulla grafica del committente, il suo dischetto sta a rgb(244, 188, 92): un
 * ambra molto piu' chiaro e saturo di `--nm-gold-graphic`, che sta a rgb(169, 131, 71) —
 * settantacinque livelli piu' scuro sul rosso. Quell'ambra pero' non entra nella
 * tavolozza: «mai un oro diverso» e' la prima regola che il committente ha dato, e vale
 * anche quando l'oro diverso e' suo.
 *
 * Quindi la stessa impressione con gli ori che ci sono: una luce dall'alto a sinistra che
 * corre da `--nm-gold-200` a `--nm-gold-graphic`. E' la differenza fra una moneta e un
 * bollo — la moneta ha un verso della luce, il bollo no.
 *
 * E' una classe a se' perche' la portano in due: il numero dei passi nella striscia e le
 * etichette dei passi in figura nella hero dei personalizzati. Misura e posizione le
 * mette chi la usa.
 */
.nm-moneta {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(125% 125% at 28% 18%,
		var(--nm-gold-100) 0%,
		var(--nm-gold-200) 34%,
		var(--nm-gold-300) 66%,
		var(--nm-gold-graphic) 100%);
	box-shadow: 0 0 clamp(5px, 0.6vw, 10px) color-mix(in srgb, var(--nm-gold-300) 60%, transparent);
	/* Cifra scura sull'oro chiaro: crema su quell'oro starebbe a un contrasto di 1,9. */
	color: var(--nm-ink-900);
	font-weight: 700;
	line-height: 1;
}

/* Il numero morde la pastiglia in basso a sinistra, come nella grafica. */
.nm-passi__numero {
	position: absolute;
	left: -10%;
	bottom: -2%;
	width: clamp(20px, 1.7vw, 27px);
	font-size: calc(clamp(0.66rem, 0.8vw, 0.84rem) * var(--nm-d));
}

.nm-passi__parole { display: block; }

.nm-passi__nome {
	display: block;
	/* Piu' grande di prima: a 12,9 px il passo si leggeva come una didascalia, e i tre passi
	   sono il cuore di questa fascia, non una nota a margine. */
	font-size: calc(clamp(1rem, 1.24vw, 1.24rem) * var(--nm-d));
	font-weight: 700;
	line-height: 1.25;
	color: var(--nm-ink-900);
}

.nm-passi__riga {
	display: block;
	margin-top: calc(var(--space-unit) * 0.4);
	font-size: calc(clamp(0.86rem, 1.06vw, 1.04rem) * var(--nm-d));
	line-height: 1.4;
	color: color-mix(in srgb, var(--nm-ink-800) 84%, transparent);
}

/* La freccia sta nel varco fra un passo e il successivo, all'altezza della pastiglia. */
.nm-passi__freccia {
	position: absolute;
	right: clamp(0.1rem, 0.8vw, 0.9rem);
	top: 50%;
	translate: 0 -50%;
	display: block;
	width: clamp(16px, 1.5vw, 24px);
	color: var(--nm-gold-graphic);
}

.nm-passi__freccia svg { display: block; width: 100%; height: auto; }

/* Dopo l'ultimo passo non c'è un poi. */
.nm-passi__passo:last-child .nm-passi__freccia { display: none; }
.nm-passi__passo:last-child { padding-right: 0; }

/* ------------------------------------------------------------
   Il servizio in tre punti, al posto di «Come funziona?»
   ------------------------------------------------------------

   Sui personalizzati, dal 7 ottobre 2026 (servizio.php): tre colonne sul cielo, in fondo alla
   hero, nella lingua delle schede che stavano sotto le figure — il segno nell'oro grafico, il
   titolo in Playfair nel blu del logo, il testo in Playfair e in inchiostro —, divise da un filo
   d'oro con due stelline. Senza carta: in fondo alla hero il cielo e' gia' chiaro. Le colonne
   sono quante i punti: di partenza tre. */

.nm-servizio {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: var(--container-width);
	margin-inline: auto;
	padding-block: clamp(0.6rem, 1.6vh, 1.2rem) clamp(1.4rem, 4vh, 2.8rem);
	color: var(--nm-ink-800);
}

.nm-servizio__punti {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-servizio__punto {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	padding-inline: clamp(1rem, 2.4vw, 2.6rem);
	text-align: center;
}

/* Il filo fra due punti: verticale, con una stellina in cima e una, piu' piccola, in fondo. */
.nm-servizio__filo {
	position: absolute;
	left: 0;
	top: 4%;
	bottom: 6%;
	display: flex;
	flex-direction: column;
	align-items: center;
	translate: -50% 0;
	color: var(--nm-gold-graphic);
}

.nm-servizio__filo svg { flex: 0 0 auto; display: block; width: 0.95rem; height: auto; }
.nm-servizio__filo svg:last-child { width: 0.6rem; }

.nm-servizio__filo-linea {
	flex: 1 1 auto;
	width: var(--nm-rule-width);
	margin-block: 0.2rem;
	background: linear-gradient(to bottom, var(--nm-gold-graphic), color-mix(in srgb, var(--nm-gold-graphic) 35%, transparent));
}

.nm-servizio__segno {
	position: relative;
	display: block;
	width: clamp(2.3rem, 2.9vw, 3rem);
	color: var(--nm-gold-graphic);
}

.nm-servizio__segno > svg { display: block; width: 100%; height: auto; }

.nm-servizio__scintilla {
	position: absolute;
	left: 100%;
	top: 34%;
	display: block;
	width: 0.7rem;
	margin-left: 0.15rem;
}

.nm-servizio__scintilla svg { display: block; width: 100%; height: auto; }

.nm-servizio__titolo {
	margin: 0.15rem 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.45vw, 1.45rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--nm-logo-blu);
	text-shadow: 0 0 14px color-mix(in srgb, var(--nm-ink-50) 75%, transparent);
}

/*
 * Il testo nel carattere del sito, a 500, e nell'inchiostro piu' scuro: in Playfair, sottile, sul
 * cielo con le nuvole e le luci «non si legge bene» (il committente, 7 ottobre 2026). Un alone
 * chiaro, largo e tenue, lo stacca dalle luci che gli passano dietro senza fare da velina.
 */
.nm-servizio__testo {
	max-width: 25em;
	margin: 0;
	font-family: var(--font-body);
	font-size: clamp(0.92rem, 1.02vw, 1.04rem);
	font-weight: 500;
	line-height: 1.55;
	color: var(--nm-ink-900);
	text-shadow: 0 0 14px color-mix(in srgb, var(--nm-ink-50) 75%, transparent);
}

/* Sul telefono e sul tablet i punti vanno uno sotto l'altro, e il filo sta sopra ciascuno,
   di traverso: corto, con le due stelline ai lati. */
@media (max-width: 900px) {
	.nm-servizio__punti {
		grid-auto-flow: row;
		gap: 1.8rem;
	}

	.nm-servizio__filo {
		position: static;
		flex-direction: row;
		width: min(40%, 9rem);
		margin-bottom: 0.5rem;
		translate: none;
	}

	.nm-servizio__filo-linea {
		width: auto;
		height: var(--nm-rule-width);
		margin: 0 0.3rem;
		background: linear-gradient(to right, var(--nm-gold-graphic), color-mix(in srgb, var(--nm-gold-graphic) 35%, transparent));
	}
}

/* ------------------------------------------------------------
   La seconda sezione: quella che sale
   ------------------------------------------------------------ */

.nm-vetrina__elenco {
	position: relative;
	z-index: 1;
	min-height: 100svh;
	/*
	 * Opaca — e' questo che la fa coprire la hero mentre sale. Il fondo che si vede e' il
	 * cielo pastello, in `.nm-vetrina__cielo` qui sotto; la carta resta come ripiego e come
	 * lingua dei componenti, che sul pastello si leggono come sulla carta.
	 */
	background: var(--nm-carta-fondo);
	--nm-onda: clamp(22px, 2.8vw, 44px);
	padding-top: calc(var(--nm-onda) + clamp(2.4rem, 6vh, 4.6rem));
	padding-bottom: clamp(3rem, 7vh, 6rem);
	color: var(--color-text);
	/*
	 * Il bordo alto a onda, lo stesso della striscia «Come funziona?» e della grafica del
	 * committente: un foglio appoggiato, non un taglio dritto. La maschera lavora insieme
	 * al ritaglio della carta che si apre — `clip-path` decide quanto foglio si vede,
	 * `mask` che profilo ha il suo bordo — e il rettangolo di mezzo si sovrappone di un
	 * pixel all'onda, altrimenti fra i due strati resta una riga.
	 */
	-webkit-mask-image: url("../img/onda-carta.svg"), linear-gradient(#000, #000);
	mask-image: url("../img/onda-carta.svg"), linear-gradient(#000, #000);
	-webkit-mask-size: clamp(520px, 46vw, 900px) var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
	mask-size: clamp(520px, 46vw, 900px) var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
	-webkit-mask-position: left top, left calc(var(--nm-onda) - 1px);
	mask-position: left top, left calc(var(--nm-onda) - 1px);
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;

	/*
	 * Entra come una carta e si apre.
	 *
	 * Copiato da themenectar.com, con i numeri letti dal suo sorgente: la sezione parte
	 * ritagliata a `inset(15% 25% 0 25% round 50px)` e arriva a `inset(0 0 0 0 round 0)`.
	 * Il lato basso resta a zero perche' la carta cresce verso l'alto, da dove sta
	 * entrando. Il progresso — `--nm-entrata`, da 0 a 1 — lo scrive assets/js/scorrimento.js
	 * seguendo lo scorrimento; senza JavaScript vale 1 e la sezione e' intera.
	 *
	 * Gli angoli arrotondati del riferimento qui non ci sono, e non vanno rimessi. Con
	 * `round` il ritaglio non e' piu' un rettangolo: il browser lo disegna come una maschera
	 * grande quanto la sezione — quasi cinquemila pixel, con sopra la maschera dell'onda — e
	 * la ridisegna a ogni fotogramma, perche' a ogni fotogramma cambia. Ogni tanto non fa in
	 * tempo, e per un fotogramma la sezione sparisce, o resta dipinta a meta', e sotto si vede
	 * la hero: il «glitch mentre scrollo» che il committente ha filmato il 2 ottobre 2026.
	 * Misurato in un Chrome con la scheda grafica, scorrendo su e giu' come col trackpad:
	 * 6, 7 e 8 fotogrammi senza sezione con gli angoli tondi, 0 e 0 con il ritaglio dritto.
	 * Il rettangolo il compositore lo taglia da se', senza ridisegnare niente.
	 *
	 * Niente ombra portata: `clip-path` ritaglia anche le ombre, quindi qualunque ombra
	 * qui sarebbe invisibile e basta.
	 */
	--nm-entrata: 1;
	--nm-entrata-lati: 25%;
	/*
	 * Quando i risultati cambiano altezza — una ricerca che da 101 libri ne lascia 2 — il
	 * browser, per «ancoraggio dello scorrimento», sposta la pagina da solo per tenere fermo
	 * quello che aveva sotto gli occhi, e la sezione saltava di trenta pixel a ogni lettera
	 * scritta nella ricerca. Misurato: 33,5 px. Qui si spegne.
	 */
	overflow-anchor: none;
	/*
	 * In alto niente inset: il riferimento tagliava anche il 15% dal bordo alto, ma il suo
	 * bordo era dritto. Il nostro e' a onda, e l'onda deve esserci da subito — con il taglio
	 * in alto la carta partiva dritta e l'onda compariva solo a fine corsa. Cosi' la carta
	 * nasce gia' dal suo bordo ondulato e si apre soltanto sui fianchi.
	 */
	clip-path: inset(
		0
		calc(var(--nm-entrata-lati) * (1 - var(--nm-entrata)))
		0
		calc(var(--nm-entrata-lati) * (1 - var(--nm-entrata)))
	);
}

/* Su tablet e telefono i fianchi del ritaglio sono al 15%, come sul riferimento: al 25% la
   carta sarebbe una fessura. */
@media (max-width: 1000px) { .nm-vetrina__elenco { --nm-entrata-lati: 15%; } }

/* Sul telefono la carta e' gia' aperta: la hero non e' ferma e la sezione non le sale
   sopra, quindi una carta che si allarga mentre si scorre non racconta niente — l'ha
   chiesto il committente. `!important` perche' la quota la scrive scorrimento.js inline. */
@media (max-width: 900px) { .nm-vetrina__elenco { --nm-entrata: 1 !important; } }

/* Chi ha chiesto meno movimento vede la sezione intera, sempre: lo script non scrive il
   progresso, e per sicurezza qui si ignora comunque. */
@media (prefers-reduced-motion: reduce) { .nm-vetrina__elenco { --nm-entrata: 1 !important; } }

/*
 * Il cielo della sezione: un pastello di nuvole chiare, crema, cipria, lilla e pesca, con le
 * scintille d'oro. Il committente l'ha scelto il 2 ottobre 2026 da un riferimento suo — «e se
 * lo sfondo della sezione libri fosse con questi colori?» — dopo averlo visto in una prova; i
 * colori sono i token `--nm-pastello-*`, misurati su quel riferimento (design-system.php).
 * Prima, per un giorno, era il cielo della hero: le prove che ci hanno portato, e quelle
 * scartate, stanno in docs/STATO.md e in CLAUDE.md.
 *
 * E' disegnato, non un'immagine: sfumature radiali — le grandi zone di colore, poi le nuvole
 * piu' piccole, chiare in basso a sinistra, rosa a destra, lilla in alto e al centro — su una
 * sfumatura dall'alto in basso, e sopra due tessere di scintille (genera-scintille-pastello.mjs)
 * sfalsate, cosi' la ripetizione non si vede. Le quote sono quelle della prova approvata.
 *
 * Alto quanto la finestra e `sticky`: sale con la sezione mentre la sezione sale sulla hero, e
 * si ferma quando la sezione tocca la cima, cosi' i libri gli scorrono sopra come su un fondo
 * fermo. Non `fixed`: fisso alla finestra mostrava, durante la salita, la sua parte bassa sotto
 * il titolo. Il margine in alto lo riporta al bordo della sezione, sopra la sua spaziatura;
 * quello in basso gli toglie l'ingombro. Dentro una sezione con `clip-path` e `mask` resta
 * ritagliato dalla sezione (il ritaglio e' rettangolare: vedi `.nm-vetrina__elenco`).
 */
.nm-vetrina__cielo,
body.nm-scena-libro .nm-stage__paint,
body.nm-scena-libro .nm-scheda--libro .nm-scheda__testa::before,
body.nm-scena-blog .nm-stage__paint,
body.nm-scena-articolo .nm-stage__paint {
	/* I colori di mezzo, mescolati dai token: rosa e chiaro per le nuvole, caldo e grigio per
	   le zone, e i tre punti della sfumatura di fondo. */
	--nm-pastello-rosa: color-mix(in srgb, var(--nm-pastello-cipria) 50%, var(--nm-pastello-crema));
	--nm-pastello-rosa-vivo: color-mix(in srgb, var(--nm-pastello-cipria) 70%, var(--nm-pastello-crema));
	--nm-pastello-chiaro: color-mix(in srgb, var(--nm-pastello-pesca) 60%, var(--nm-pastello-crema));
	--nm-pastello-caldo: color-mix(in srgb, var(--nm-pastello-pesca) 60%, var(--nm-pastello-albicocca));
	--nm-pastello-grigio: color-mix(in srgb, var(--nm-pastello-nebbia) 50%, var(--nm-pastello-lilla));
	--nm-pastello-mezzo: color-mix(in srgb, var(--nm-pastello-pesca) 50%, var(--nm-pastello-lilla));
	--nm-pastello-basso: color-mix(in srgb, var(--nm-pastello-pesca) 75%, var(--nm-pastello-lilla));
	background:
		url("../img/pastello-scintille-a.svg") 0 0 / 620px 620px repeat,
		url("../img/pastello-scintille-b.svg") 211px 337px / 980px 980px repeat,
		/* nuvole chiare in basso a sinistra */
		radial-gradient(13% 9% at 10% 84%, color-mix(in srgb, var(--nm-pastello-crema) 75%, transparent), transparent 72%) no-repeat,
		radial-gradient(15% 10% at 21% 79%, color-mix(in srgb, var(--nm-pastello-crema) 70%, transparent), transparent 72%) no-repeat,
		radial-gradient(12% 9% at 31% 87%, color-mix(in srgb, var(--nm-pastello-crema) 65%, transparent), transparent 72%) no-repeat,
		radial-gradient(18% 11% at 4% 93%, color-mix(in srgb, var(--nm-pastello-crema) 80%, transparent), transparent 72%) no-repeat,
		/* nuvole rosa a destra, a meta' */
		radial-gradient(14% 10% at 86% 46%, color-mix(in srgb, var(--nm-pastello-rosa) 70%, transparent), transparent 72%) no-repeat,
		radial-gradient(12% 9% at 95% 54%, color-mix(in srgb, var(--nm-pastello-chiaro) 75%, transparent), transparent 72%) no-repeat,
		radial-gradient(16% 10% at 78% 58%, color-mix(in srgb, var(--nm-pastello-rosa-vivo) 60%, transparent), transparent 72%) no-repeat,
		/* il lilla delle nuvole, in alto a sinistra e al centro */
		radial-gradient(22% 14% at 24% 30%, color-mix(in srgb, var(--nm-pastello-lilla) 70%, transparent), transparent 72%) no-repeat,
		radial-gradient(26% 16% at 56% 62%, color-mix(in srgb, var(--nm-pastello-lilla) 65%, transparent), transparent 72%) no-repeat,
		/* il lilla piu' grigio: in alto a sinistra, in basso a destra, e una fascia al centro */
		radial-gradient(34% 30% at 3% 24%, color-mix(in srgb, var(--nm-pastello-nebbia) 95%, transparent), transparent 72%) no-repeat,
		radial-gradient(36% 32% at 98% 70%, color-mix(in srgb, var(--nm-pastello-grigio) 95%, transparent), transparent 72%) no-repeat,
		radial-gradient(70% 16% at 50% 47%, color-mix(in srgb, var(--nm-pastello-lilla) 80%, transparent), transparent 72%) no-repeat,
		/* la pesca piu' calda: in basso a sinistra, in alto a destra */
		radial-gradient(30% 26% at 2% 74%, color-mix(in srgb, var(--nm-pastello-caldo) 95%, transparent), transparent 72%) no-repeat,
		radial-gradient(30% 26% at 99% 22%, color-mix(in srgb, var(--nm-pastello-albicocca) 95%, transparent), transparent 72%) no-repeat,
		/* le grandi zone di colore */
		radial-gradient(70% 55% at 6% 4%, color-mix(in srgb, var(--nm-pastello-crema) 95%, transparent), transparent 70%) no-repeat,
		radial-gradient(55% 48% at 94% 6%, color-mix(in srgb, var(--nm-pastello-cipria) 85%, transparent), transparent 70%) no-repeat,
		radial-gradient(60% 50% at 50% 50%, color-mix(in srgb, var(--nm-pastello-lilla) 70%, transparent), transparent 72%) no-repeat,
		radial-gradient(48% 40% at 4% 58%, color-mix(in srgb, var(--nm-pastello-pesca) 95%, transparent), transparent 70%) no-repeat,
		radial-gradient(50% 42% at 97% 74%, color-mix(in srgb, var(--nm-pastello-albicocca) 90%, transparent), transparent 70%) no-repeat,
		radial-gradient(60% 45% at 28% 98%, color-mix(in srgb, var(--nm-pastello-chiaro) 95%, transparent), transparent 70%) no-repeat,
		radial-gradient(55% 45% at 90% 100%, color-mix(in srgb, var(--nm-pastello-nebbia) 85%, transparent), transparent 70%) no-repeat,
		linear-gradient(180deg, var(--nm-pastello-pesca) 0%, var(--nm-pastello-mezzo) 48%, var(--nm-pastello-basso) 100%);
}

.nm-vetrina__cielo {
	position: sticky;
	top: 0;
	z-index: 0;
	display: block;
	height: 100vh;
	/* Su e giu' della stessa misura: in tutto non occupa posto, e il titolo resta dov'era. */
	margin-top: calc(-1 * (var(--nm-onda) + clamp(2.4rem, 6vh, 4.6rem)));
	margin-bottom: calc(var(--nm-onda) + clamp(2.4rem, 6vh, 4.6rem) - 100vh);
	pointer-events: none;
}

/* I fili d'oro del decor, un po' piu' presenti: nel riferimento, ai bordi, si vedono. Anche
   nella scheda del libro, nel blog e nell'articolo, che hanno lo stesso cielo. */
.nm-vetrina__elenco .nm-carta-decor__pezzo,
.nm-blog .nm-carta-decor__pezzo,
.nm-scheda--carta .nm-carta-decor__pezzo { opacity: calc(var(--o) * 1.5); }

/* In fondo il cielo sfuma nel colore del piede, che e' carta: senza, fra i due ci sarebbe un
   taglio. */
.nm-vetrina__orizzonte {
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	height: 30vh;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--nm-ink-50) 80%, var(--nm-paper-50)) 100%);
}

/* ------------------------------------------------------------
   Dentro il foglio: titolo, filtri, libri
   ------------------------------------------------------------ */

/* Il decor sta fra la carta e il contenuto: sopra la grana (z 0), sotto le parole (z 1). */
/* Il decor della carta (carta-decor.php): sta sotto il contenuto, dentro il foglio, e non
   esce dal foglio. Lo portano la seconda sezione delle vetrine e la scheda del libro. */
.nm-carta-decor {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.nm-carta-decor__pezzo {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	width: var(--w);
	color: var(--nm-gold-graphic);
	opacity: var(--o);
	transform: rotate(var(--r));
}

.nm-carta-decor__pezzo svg { display: block; width: 100%; height: auto; }

.nm-elenco {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: clamp(1.6rem, 3.2vh, 2.6rem);
}

/*
 * ---- l'avviso del partner ----
 *
 * In cima al foglio, prima del titolo: un riquadro della stessa carta delle schede — appena
 * piu' chiaro del fondo, orlo sottile, nessuna ombra — con tre cose in fila. A sinistra il
 * marchio a colori con la piuma d'oro che gli sale accanto; in mezzo il titolo, due righe
 * di spiegazione e la riga con la busta; a destra un cuore disegnato e una frase in corsivo
 * inclinata, che e' il piu' vicino alla scrittura a mano della grafica che il tema possa
 * fare con i caratteri che ha.
 *
 * Nasce vuoto su tutte e due le vetrine — il committente l'ha tolto dai personalizzati il
 * 1° ottobre 2026 — e vuoto non compare.
 */
.nm-avviso {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.2rem, 2.8vw, 3rem);
	margin-bottom: clamp(2.4rem, 5vh, 4rem);
	padding: clamp(1.1rem, 1.9vw, 1.8rem) clamp(1.3rem, 2.6vw, 2.6rem);
	border: 1.5px solid var(--nm-ink-50);
	border-radius: var(--radius-card);
	/* Piu' coprente delle schede: sotto le parole il decor del foglio non deve trasparire. */
	background: color-mix(in srgb, var(--nm-ink-50) 88%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--nm-paper-300) 52%, transparent);
}

.nm-avviso__marchio {
	position: relative;
	display: block;
	width: clamp(140px, 14vw, 230px);
	/* Sopra il marchio c'e' la piuma: lo spazio e' suo. */
	padding-top: clamp(3rem, 5vw, 5.2rem);
}

.nm-avviso__logo {
	display: block;
	width: 100%;
	height: auto;
}

/* La piuma del logotipo sale dal marchio verso destra, come nella grafica: e' il segno del
   tema appoggiato al marchio dell'altro. E' un'immagine — la piuma vera, non l'icona in
   linea — alta quanto lo spazio che il marchio le lascia sopra, la punta sulla «c». */
.nm-avviso__piuma {
	position: absolute;
	left: 52%;
	top: 0;
	width: auto;
	height: clamp(3rem, 5vw, 5.2rem);
	transform: translateY(10%);
	pointer-events: none;
}

.nm-avviso__titolo {
	margin: 0 0 0.5em;
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.8vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--nm-logo-blu);
}

.nm-avviso__testo,
.nm-avviso__aiuto {
	margin: 0;
	font-size: clamp(0.9rem, 1.08vw, 1.05rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--nm-logo-blu) 84%, transparent);
}

.nm-avviso__testo { margin-bottom: 0.9em; }

.nm-avviso__aiuto {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
}

.nm-avviso__busta {
	flex: 0 0 auto;
	width: 1.6em;
	margin-top: 0.05em;
	color: var(--nm-logo-blu);
}

.nm-avviso__busta svg { display: block; width: 100%; height: auto; }

/* L'indirizzo e' la sola cosa che si tocca, e sulla carta cio' che si tocca e' oro
   d'inchiostro: non blu, come ogni altro collegamento del foglio. */
.nm-avviso__email {
	color: var(--nm-gold-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent);
	text-underline-offset: 0.18em;
	transition: text-decoration-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-avviso__email:hover,
.nm-avviso__email:focus-visible { color: var(--nm-gold-ink); text-decoration-color: var(--nm-gold-ink); }

.nm-avviso__nota {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	width: clamp(150px, 15vw, 240px);
	margin: 0;
	padding-top: 0.6rem;
	text-align: center;
}

/* Il cuore e' disegnato, non pieno — l'icona del tema e' un tratto — e sta un po' storto,
   come lo si farebbe a mano su un margine. */
.nm-avviso__cuore {
	display: block;
	width: clamp(26px, 2.3vw, 38px);
	margin-right: 42%;
	color: var(--nm-gold-graphic);
	transform: rotate(-10deg);
}

.nm-avviso__cuore svg { display: block; width: 100%; height: auto; }

.nm-avviso__corsivo {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	font-style: italic;
	line-height: 1.25;
	color: var(--nm-gold-ink);
	transform: rotate(-11deg);
}

.nm-elenco__intro {
	text-align: center;
	max-width: 52rem;
	margin-inline: auto;
}

/*
 * Titolo e sottotitolo nel blu del logo, `--nm-logo-blu`: e' il colore che il committente
 * ha indicato — «come il logo Noomray versione scura» — misurato sul file del logo e messo
 * fra i token fissi. L'inchiostro quasi nero di prima era corretto e spento.
 */
.nm-elenco__titolo {
	position: relative;
	font-family: var(--font-display);
	font-size: var(--scale-h1);
	font-weight: 700;
	line-height: 1.06;
	color: var(--nm-logo-blu);
	margin: 0 0 clamp(0.6rem, 1.4vh, 1rem);
}

/*
 * «per te», la parte del titolo in oro: l'oro di «L’atelier» (6 ottobre 2026). Il committente
 * l'aveva chiesta prima nell'oro di «magico», che sul pastello non si leggeva: e' un oro fatto
 * per la notte. Anche questo da solo sul rosa resta tenue — nel pulsante e' il fondo, non la
 * scritta —: un filo d'oro grafico sul contorno delle lettere le stacca dal cielo, come una
 * lamina d'oro sulla carta.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nm-elenco__titolo .nm-oro-lucente {
		background-image: var(--nm-oro-smalto);
		-webkit-text-stroke: 1px var(--nm-gold-graphic);
	}
}

/* Sopra il titolo: «PICCOLI MOMENTI ♥ GRANDI STORIE», maiuscoletto spaziato d'oro
   d'inchiostro con il cuore in mezzo. */
.nm-elenco__motto {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.9rem, 1.6vw, 1.5rem);
	margin: 0 0 clamp(0.9rem, 2vh, 1.4rem);
	color: var(--nm-gold-ink);
	font-size: clamp(0.66rem, 0.82vw, 0.78rem);
	letter-spacing: 0.32em;
}

.nm-elenco__motto-cuore { display: block; width: clamp(18px, 1.5vw, 24px); color: var(--nm-gold-ink); }
.nm-elenco__motto-cuore svg { display: block; width: 100%; height: auto; }

.nm-elenco__testo {
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	font-weight: 400;
	line-height: 1.5;
	color: color-mix(in srgb, var(--nm-logo-blu) 80%, transparent);
	margin: 0;
}

/* Il decor attorno al titolo: scintille e un cuore che gli stanno addosso, non sparsi sul
   foglio. Le quote sono relative all'intro, cosi' seguono il titolo a ogni larghezza. */
.nm-elenco__intro { position: relative; }

.nm-elenco__vezzo {
	position: absolute;
	left: var(--x);
	top: var(--y);
	display: block;
	width: var(--w);
	color: var(--nm-gold-graphic);
	opacity: var(--o);
	transform: rotate(var(--r));
	pointer-events: none;
}

.nm-elenco__vezzo svg { display: block; width: 100%; height: auto; }

/* ------------------------------------------------------------
   Il blog: la seconda sezione, da sola
   ------------------------------------------------------------
   La stessa sezione della vetrina — il cielo pastello, il decor, l'intro, la ricerca, la
   griglia, le pagine — ma non sale su niente: sta sotto la testa dalla prima riga, e la pagina
   scorre. Il committente l'ha voluto uguale alla seconda sezione dei compilabili. Il cielo, qui,
   e' dipinto sullo stage, come nella scheda del libro. */

.nm-blog {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding-top: clamp(1.4rem, 4vh, 3rem);
	padding-bottom: clamp(3rem, 7vh, 6rem);
	color: var(--color-text);
}

/* La frase sotto il titolo arriva dalla pagina degli articoli, a paragrafi. */
.nm-elenco__testo p { margin: 0; }
.nm-elenco__testo p + p { margin-top: 0.5em; }

/*
 * ---- «I più amati»: la riga dei libri in evidenza ----
 *
 * Le stesse schede del catalogo, in una fila che scorre di lato con l'aggancio sulle
 * schede, due frecce nel linguaggio della gallery e ai due capi la fila sfuma. Il titolo
 * con il cuore, nel blu del logo, come i titoli del foglio.
 */
.nm-amati {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(0.8rem, 1.6vw, 1.2rem);
}

.nm-amati__testa {
	position: relative;
	/*
	 * Sopra la pista: la pista ha 40 px d'aria in alto — per non tagliare l'alone delle
	 * schede — e quell'aria, venendo dopo nel documento, copriva le frecce. Un tocco al
	 * centro della freccia arrivava alla pista, e non succedeva niente: misurato con gli
	 * eventi touch, e' il difetto che il committente vedeva dal telefono. Con il mouse non
	 * si notava perche' i clic di prova erano fatti dallo script, non dal puntatore.
	 */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.nm-amati__titolo {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--nm-logo-blu);
}

.nm-amati__cuore { display: block; width: 0.8em; color: var(--nm-gold-graphic); }
.nm-amati__cuore svg { display: block; width: 100%; height: auto; }

.nm-amati__frecce { display: flex; gap: 0.5rem; }

.nm-amati__freccia {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, var(--nm-ink-50) 88%, transparent);
	color: var(--nm-gold-ink);
	cursor: var(--nm-cursore-attivo);
	transition: border-color var(--motion-duration-ui) var(--motion-ease),
	            background-color var(--motion-duration-ui) var(--motion-ease),
	            opacity var(--motion-duration-ui) var(--motion-ease);
}

.nm-amati__freccia svg { display: block; width: 18px; height: 18px; }
.nm-amati__freccia--prima svg { transform: scaleX(-1); }

.nm-amati__freccia:hover,
.nm-amati__freccia:focus-visible { border-color: var(--nm-gold-graphic); background: var(--nm-ink-50); }

.nm-amati__freccia:disabled { opacity: 0.35; cursor: default; }

/* Senza JavaScript le frecce non fanno niente, e la fila si scorre a mano. */
.no-js .nm-amati__frecce { display: none; }

/*
 * La fila: le schede una accanto all'altra, larghe come quelle della griglia a quattro
 * colonne, e la pista che scorre di lato con l'aggancio. La barra non si vede: ci sono le
 * frecce, e il dito o la rotella. Ai due capi la fila sfuma, cosi' la scheda tagliata dice
 * che continua invece di sembrare rotta.
 */
.nm-carta .nm-amati__pista {
	display: flex;
	flex-wrap: nowrap;
	gap: clamp(0.9rem, 1.6vw, 1.5rem);
	/* Aria dentro la pista, su tutti e quattro i lati: una pista che scorre taglia tutto
	   cio' che esce dal suo riquadro, e la scheda che al passaggio si fa avanti — con l'alone
	   e le faville — usciva dai bordi: sopra, e ai due capi della fila. Il margine negativo
	   restituisce fuori lo spazio preso dentro. */
	/* Quanta aria: 40 px, che e' quanto si vede dell'alone; sul telefono non piu' del margine
	   della pagina, altrimenti la pista uscirebbe dallo schermo e la pagina scorrerebbe di lato. */
	--nm-amati-aria: min(2.5rem, calc((100vw - var(--container-width)) / 2));
	margin: -2.5rem calc(-1 * var(--nm-amati-aria));
	padding: 2.5rem var(--nm-amati-aria) 2.9rem;
	/* L'aggancio delle schede tiene conto dell'aria: la prima si ferma dove comincia il
	   contenuto, non sul bordo della pista. */
	scroll-padding-inline: var(--nm-amati-aria);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/*
	 * La sfumatura ai capi c'e' solo dalla parte in cui la fila continua (amati.js scrive
	 * i due attributi): in partenza a sinistra non c'e', e sull'ultimo libro non c'e' a
	 * destra — una scheda sfumata sul niente sembra tagliata. Sta tutta nell'aria: la
	 * scheda resta intera, e' l'alone che si spegne.
	 */
	--nm-amati-sx: #000;
	--nm-amati-dx: #000;
	-webkit-mask-image: linear-gradient(to right, var(--nm-amati-sx) 0, #000 var(--nm-amati-aria), #000 calc(100% - var(--nm-amati-aria)), var(--nm-amati-dx) 100%);
	mask-image: linear-gradient(to right, var(--nm-amati-sx) 0, #000 var(--nm-amati-aria), #000 calc(100% - var(--nm-amati-aria)), var(--nm-amati-dx) 100%);
}

.nm-carta .nm-amati__pista[data-nm-altro-prima] { --nm-amati-sx: transparent; }
.nm-carta .nm-amati__pista[data-nm-altro-dopo] { --nm-amati-dx: transparent; }

.nm-carta .nm-amati__pista::-webkit-scrollbar { display: none; }

.nm-carta .nm-amati__pista[data-nm-presa] { cursor: grabbing; scroll-snap-type: none; }

/*
 * Da ferme, le schede in evidenza si distinguono da quelle del catalogo: l'orlo e' d'oro
 * invece che bianco, con un velo d'oro sotto. «Leggermente in evidenza», ha chiesto il
 * committente. Il cuoricino in alto a destra l'ha tolto il 1° ottobre 2026: il cuore resta
 * nel titolo della riga.
 */
.nm-carta .nm-amati__pista > .nm-libro {
	flex: 0 0 auto;
	width: calc((100% - 3 * clamp(0.9rem, 1.6vw, 1.5rem)) / 4);
	scroll-snap-align: start;
	border-color: color-mix(in srgb, var(--nm-gold-graphic) 62%, transparent);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nm-gold-200) 70%, transparent),
		0 12px 30px -18px color-mix(in srgb, var(--nm-gold-ink) 45%, transparent);
}

.nm-carta .nm-amati__pista img { -webkit-user-drag: none; }

@media (max-width: 1100px) { .nm-carta .nm-amati__pista > .nm-libro { width: calc((100% - 2 * clamp(0.9rem, 1.6vw, 1.5rem)) / 3); } }
@media (max-width: 760px)  { .nm-carta .nm-amati__pista > .nm-libro { width: calc((100% - clamp(0.9rem, 1.6vw, 1.5rem)) / 2); } }
@media (max-width: 460px)  { .nm-carta .nm-amati__pista > .nm-libro { width: 84%; } }

/* «Tutti i libri»: il titolo del catalogo intero, sopra la ricerca, nella stessa voce di
   «I più amati» — con il libro al posto del cuore. Fra lui e la ricerca c'e' aria: attaccato
   alla casella sembrava la sua etichetta. */
.nm-elenco__tutti {
	display: flex;
	align-items: center;
	gap: 0.45em;
	margin: 0 0 calc(-1 * clamp(0.3rem, 0.6vw, 0.5rem));
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.8rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--nm-logo-blu);
}

.nm-elenco__tutti-segno { display: block; width: 0.85em; color: var(--nm-gold-graphic); }
.nm-elenco__tutti-segno svg { display: block; width: 100%; height: auto; }

/*
 * ---- in fondo alla vetrina: le altre strade e l'invito per le aziende ----
 *
 * Chiesti dal committente il 1° ottobre 2026 (strade.php), e rifatti lo stesso giorno: la
 * prima versione — fogli bianchi con un'icona in una pastiglia — era «troppo easy». Ora sono
 * le due carte della Home portate qui: vetro blu, il filetto d'oro con la luce che lo
 * percorre, il segno in un medaglione d'oro che respira, il nome in Playfair dorato, e
 * nell'angolo una grande scintilla in filigrana. Al passaggio la carta si fa avanti, il filo
 * si accende e partono le faville, come sulle schede dei libri. Niente immagini — ne' libri
 * ne' loghi —: l'ha chiesto il committente.
 *
 * L'invito per le aziende e' la stessa lingua in una lastra di notte larga quanto la pagina,
 * con un filo d'oro e qualche scintilla disegnati sul fondo. Le parole sono chiare perche'
 * stanno sul vetro, non sul cielo: il vetro e' abbastanza coprente da tenerle sopra 4,5:1
 * anche quando dietro passa la pesca.
 */
.nm-strade {
	margin-top: clamp(3.4rem, 8vh, 5.6rem);
}

/* Al centro e grande quanto i titoli delle sezioni, dal 6 ottobre 2026: era a sinistra, a
   1,3-1,8 rem, e si leggeva come una nota sopra le carte. */
.nm-strade__titolo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	margin: 0 0 clamp(1.5rem, 3.4vh, 2.3rem);
	font-family: var(--font-display);
	font-size: var(--scale-h2);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	/* Nel blu del logo, come gli altri titoli del foglio: sta sul pastello delle vetrine e
	   sulla carta della pagina «Libri su misura». */
	color: var(--nm-logo-blu);
}

.nm-strade__segno { display: block; width: 0.8em; color: var(--nm-gold-graphic); }
.nm-strade__segno svg { display: block; width: 100%; height: auto; }

.nm-strade__elenco {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
	gap: clamp(1rem, 2vw, 1.6rem) clamp(1.2rem, 2.2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-strada { display: flex; }

.nm-strada__link {
	--nm-accesa-alone: 9px;
	--nm-accesa-sfocatura: 8px;
	--nm-accesa-filo: 1.5px;
	--nm-accesa-favilla: clamp(13px, 1.25vw, 19px);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: clamp(1rem, 2vw, 1.6rem);
	width: 100%;
	padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.3rem, 2.6vw, 2.3rem);
	border-radius: var(--radius-card);
	/*
	 * Il vetro blu delle carte della Home, piu' coprente: li' sono due etichette, qui c'e' una
	 * frase da leggere, e sotto puo' passare la pesca chiara del cielo.
	 */
	background: color-mix(in srgb, var(--nm-logo-blu) 76%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(0.9);
	backdrop-filter: blur(14px) saturate(0.9);
	box-shadow: 0 26px 54px -30px color-mix(in srgb, var(--nm-night-900) 80%, transparent);
	color: var(--nm-ink-100);
	text-decoration: none;
	transition:
		transform 340ms var(--motion-ease),
		background-color 240ms var(--motion-ease),
		box-shadow 340ms var(--motion-ease);
}

.nm-strada__link:hover,
.nm-strada__link:focus-visible {
	outline: none;
	transform: translateY(-4px);
	/* Scelta, la carta si scalda: lo stesso blu con un filo d'oro, come in Home. */
	background: color-mix(in srgb, color-mix(in srgb, var(--nm-logo-blu) 86%, var(--nm-gold-300)) 82%, transparent);
	box-shadow:
		0 30px 60px -28px color-mix(in srgb, var(--nm-night-900) 80%, transparent),
		0 0 30px -6px color-mix(in srgb, var(--nm-gold-200) 34%, transparent);
}

/*
 * Il filo che si accende al passaggio (`nm-accesa`). Del suo doppio strato resta il filo
 * netto (`::after`) con la luce che gira: il bagliore sfocato (`::before`), che sulle card
 * della notte e' un alone, sul vetro blu disegnava una fascia grigia larga nove pixel dentro
 * il bordo — misurato togliendolo: sparita lei, sparita la fascia. La corona fissa del filo e'
 * un velo d'oro al 12%, non al 34%: il filetto d'oro c'e' gia', ed e' la cornice.
 */
.nm-strada__link::before,
.nm-aziende::before { display: none; }

.nm-strada__link::after,
.nm-aziende::after {
	background:
		conic-gradient(
			from var(--nm-giro),
			transparent 0deg,
			transparent 22deg,
			color-mix(in srgb, var(--nm-gold-300) 55%, transparent) 52deg,
			var(--nm-gold-200) 74deg,
			var(--nm-gold-100) 84deg,
			var(--nm-gold-200) 94deg,
			color-mix(in srgb, var(--nm-gold-300) 50%, transparent) 118deg,
			transparent 152deg,
			transparent 360deg
		),
		linear-gradient(
			color-mix(in srgb, var(--nm-gold-300) 12%, transparent),
			color-mix(in srgb, var(--nm-gold-300) 12%, transparent)
		);
}

/* Il filetto con la luce che lo percorre: la stessa cornice delle carte della Home. */
.nm-strada__cornice,
.nm-aziende__cornice {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	pointer-events: none;
	padding: 1px;
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--nm-gold-400) 34%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 70%, transparent) 40%,
		var(--nm-gold-100) 50%,
		color-mix(in srgb, var(--nm-gold-300) 70%, transparent) 60%,
		color-mix(in srgb, var(--nm-gold-400) 34%, transparent) 100%);
	background-size: 320% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: nm-magia-corsa 4.6s linear infinite;
}

/*
 * Il segno in un medaglione d'oro: un tondo di luce con l'orlo d'oro, che respira come
 * l'alone del pulsante della Home. Al passaggio si accende di piu'.
 */
.nm-strada__segno {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(3.6rem, 5vw, 4.6rem);
	aspect-ratio: 1;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-300) 70%, transparent);
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%,
		color-mix(in srgb, var(--nm-gold-100) 30%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 14%, transparent) 55%,
		color-mix(in srgb, var(--nm-gold-400) 6%, transparent) 100%);
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--nm-gold-300) 8%, transparent),
		0 0 22px -2px color-mix(in srgb, var(--nm-gold-200) 40%, transparent);
	color: var(--nm-gold-100);
	animation: nm-strada-respiro 5.4s var(--motion-ease) infinite alternate;
	transition: transform 420ms var(--motion-ease), box-shadow 340ms var(--motion-ease);
}

.nm-strada__segno svg { display: block; width: 46%; height: auto; }

@keyframes nm-strada-respiro {
	from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--nm-gold-300) 6%, transparent), 0 0 16px -4px color-mix(in srgb, var(--nm-gold-200) 30%, transparent); }
	to   { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nm-gold-300) 12%, transparent), 0 0 28px 0 color-mix(in srgb, var(--nm-gold-200) 46%, transparent); }
}

.nm-strada__link:hover .nm-strada__segno,
.nm-strada__link:focus-visible .nm-strada__segno { transform: rotate(-8deg) scale(1.08); }

/* La scintilla grande nell'angolo, quasi spenta: e' il cielo che passa dietro il vetro. */
.nm-strada__filigrana {
	position: absolute;
	right: clamp(0.8rem, 2vw, 1.6rem);
	bottom: clamp(0.6rem, 1.6vw, 1.2rem);
	z-index: 1;
	display: block;
	width: clamp(4.5rem, 8vw, 6.5rem);
	color: var(--nm-gold-200);
	opacity: 0.12;
	pointer-events: none;
	transform: rotate(12deg);
	transition: opacity 420ms var(--motion-ease), transform 620ms var(--motion-ease);
}

.nm-strada__filigrana svg { display: block; width: 100%; height: auto; }

.nm-strada__link:hover .nm-strada__filigrana,
.nm-strada__link:focus-visible .nm-strada__filigrana { opacity: 0.22; transform: rotate(57deg) scale(1.08); }

.nm-strada__parole {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.nm-strada__nome {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 1.9vw, 1.7rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--nm-gold-100);
}

.nm-strada__testo {
	font-size: clamp(0.9rem, 1vw, 1rem);
	line-height: 1.55;
	color: var(--nm-ink-100);
}

/*
 * «Vai» nelle carte e «Scrivici» nella lastra: lo stile di «Crea il tuo libro», chiesto dal
 * committente il 6 ottobre 2026 — lo smalto blu (`--nm-smalto-blu`), il filetto d'oro, il
 * maiuscoletto, la stella dopo il testo. Non sono `.nm-button`: «Vai» sta dentro il link della
 * carta, e il link di «Scrivici» copre tutta la lastra; e sulla carta `.nm-button` prende
 * l'inchiostro, che sul blu non si leggerebbe. Si accendono quando si passa sulla carta o
 * sulla lastra, non solo su di loro.
 */
.nm-strada__cta,
.nm-aziende__cta {
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 1.3em;
	padding: 1em 1.6em;
	border: 0.14em solid var(--nm-gold-400);
	border-radius: var(--radius-button);
	background: var(--nm-smalto-blu);
	box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--nm-night-900) 75%, transparent);
	color: var(--nm-gold-300);
	font-family: var(--font-body);
	font-size: clamp(0.66rem, 0.9vw, 0.8rem);
	font-weight: 700;
	letter-spacing: var(--nm-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	transition:
		border-color var(--motion-duration-ui) var(--motion-ease),
		color var(--motion-duration-ui) var(--motion-ease),
		box-shadow var(--motion-duration-ui) var(--motion-ease);
}

.nm-strada__cta {
	position: relative;
	align-self: flex-start;
	margin-top: 0.75rem;
	/*
	 * Piu' oro (7 ottobre 2026): il filetto nell'oro del tema e non un gradino sotto, con un filo
	 * di luce sul bordo interno, come una cornice di metallo; la scritta nel gradiente di
	 * «magico», piatta: niente rilievo.
	 */
	border-color: var(--nm-gold-300);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--nm-gold-100) 40%, transparent),
		0 12px 26px -16px color-mix(in srgb, var(--nm-night-900) 75%, transparent);
}

/* Lo stesso oro sui nomi delle carte, «Personalizzalo online», «Creiamolo da zero»: erano l'oro
   della luna, piatto, e accanto a «Vai» sembravano spenti (7 ottobre 2026). Senza ombra sotto:
   in rilievo il committente non le vuole. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nm-strada__nome,
	.nm-strada__cta-testo {
		background-image: var(--nm-oro-lucente);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.nm-strada__link:hover .nm-strada__cta,
.nm-strada__link:focus-visible .nm-strada__cta,
.nm-aziende:hover .nm-aziende__cta,
.nm-aziende:focus-within .nm-aziende__cta {
	border-color: var(--nm-gold-300);
	color: var(--nm-gold-200);
	box-shadow:
		inset 0 0 0 100vmax color-mix(in srgb, var(--nm-gold-300) 8%, transparent),
		0 0 1.9rem -0.5rem color-mix(in srgb, var(--nm-gold-300) 60%, transparent);
}

/* Su «Vai» il filo di luce del bordo resta anche acceso. */
.nm-strada__link:hover .nm-strada__cta,
.nm-strada__link:focus-visible .nm-strada__cta {
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, var(--nm-gold-100) 40%, transparent),
		inset 0 0 0 100vmax color-mix(in srgb, var(--nm-gold-300) 8%, transparent),
		0 0 1.9rem -0.5rem color-mix(in srgb, var(--nm-gold-300) 60%, transparent);
}

/* La stella dopo il testo: al passaggio si accende e fa mezzo giro di punta, come nei pulsanti. */
.nm-strada__stella,
.nm-aziende__scintilla {
	flex: 0 0 auto;
	display: block;
	width: 1.08em;
	color: var(--nm-gold-300);
	transition:
		color var(--motion-duration-ui) var(--motion-ease),
		transform 420ms var(--motion-ease),
		filter var(--motion-duration-ui) var(--motion-ease);
}

.nm-strada__stella svg,
.nm-aziende__scintilla svg { display: block; width: 100%; height: auto; }

.nm-strada__link:hover .nm-strada__stella,
.nm-strada__link:focus-visible .nm-strada__stella,
.nm-aziende:hover .nm-aziende__scintilla,
.nm-aziende:focus-within .nm-aziende__scintilla {
	color: var(--nm-gold-100);
	transform: rotate(45deg) scale(1.14);
	filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--nm-gold-100) 65%, transparent));
}

/* ---- la lastra delle aziende ---- */

.nm-aziende {
	--nm-accesa-alone: 10px;
	--nm-accesa-sfocatura: 9px;
	--nm-accesa-filo: 1.5px;
	--nm-accesa-favilla: clamp(13px, 1.25vw, 19px);
	--nm-aziende-pad: clamp(1.6rem, 3.2vw, 2.6rem);
	--nm-aziende-alta: clamp(14rem, 18vw, 16.5rem);
	--nm-scaffale-largo: clamp(15rem, 21vw, 19rem);
	/* In fila: le parole, la libreria accanto, e il pulsante in fondo a destra. Le parole si
	   stringono, se serve, invece di mandare il pulsante a capo. */
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(1.2rem, 2.6vw, 2.4rem);
	/* Piu' aria sopra: la libreria disegnata esce dal bordo alto della lastra. */
	margin-top: clamp(4rem, 9vh, 6rem);
	min-height: var(--nm-aziende-alta);
	padding: var(--nm-aziende-pad) clamp(1.4rem, 3.4vw, 3rem);
	border-radius: var(--radius-card);
	/*
	 * D'oro, dal 6 ottobre 2026: l'oro di «L’atelier», bombato, con le scritte nel blu del
	 * logo. Era una lastra di notte, «un altro discorso, rivolto a un altro lettore»: l'oro lo
	 * dice ancora di piu'.
	 */
	background: var(--nm-oro-smalto);
	box-shadow: 0 30px 64px -34px color-mix(in srgb, var(--nm-gold-ink) 80%, transparent);
	color: var(--nm-logo-blu);
	transition: transform 340ms var(--motion-ease), box-shadow 340ms var(--motion-ease);
}

.nm-aziende:hover,
.nm-aziende:focus-within {
	transform: translateY(-3px);
	box-shadow:
		0 34px 70px -34px color-mix(in srgb, var(--nm-gold-ink) 80%, transparent),
		0 0 34px -8px color-mix(in srgb, var(--nm-gold-300) 55%, transparent);
}

/* Sull'oro la luce che corre sul filetto e' quella dell'oro grafico: quella delle strade, sul
   blu, qui non si vedrebbe. */
.nm-aziende__cornice {
	background-image: linear-gradient(100deg,
		color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent) 0%,
		var(--nm-gold-graphic) 40%,
		var(--nm-gold-100) 50%,
		var(--nm-gold-graphic) 60%,
		color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent) 100%);
}

/*
 * La libreria disegnata, prima di «Sei una libreria?»: poggia sul bordo di sotto ed esce da
 * quello di sopra, come nel riferimento del committente. Era al centro della lastra; il 7
 * ottobre 2026 il committente l'ha voluta prima vicino alle parole, poi al loro posto, a
 * sinistra, con le parole subito dopo, e a destra i fili.
 *
 * Sta nella fila, la prima (`order`: nel documento viene dopo le parole, che chi legge con lo
 * screen reader incontra prima); e con i margini negativi non allunga la lastra: sotto scende
 * quanto il padding, sopra sale quanto serve perche' il suo riquadro sia alto quanto lo spazio
 * fra i due padding. Il margine a destra delle parole, `auto`, manda il pulsante in fondo.
 *
 * E' un SVG con i colori per classe (docs/strumenti/disegna-scaffale.py): qui sotto le classi
 * prendono i token.
 */
.nm-aziende__scaffale {
	position: relative;
	z-index: 1;
	order: -1;
	flex: 0 0 auto;
	align-self: flex-end;
	display: block;
	width: var(--nm-scaffale-largo);
	margin: calc(var(--nm-aziende-alta) - var(--nm-aziende-pad) - var(--nm-scaffale-largo) * 1.075) 0 calc(var(--nm-aziende-pad) * -1) 0;
	pointer-events: none;
}

/* I fili: quelli che il sito usa gia' sul fondo delle carte, sulla destra della lastra e
   girati, perche' corrano verso la libreria. Crema, sull'oro: fili di luce. */
.nm-aziende__decoro {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

.nm-aziende__fili {
	position: absolute;
	right: -3%;
	top: 50%;
	display: block;
	width: min(54%, 40rem);
	color: var(--nm-ink-50);
	opacity: 0.78;
	transform: translateY(-50%) scaleX(-1) rotate(-4deg);
}

.nm-aziende__fili svg { display: block; width: 100%; height: auto; }

.nm-aziende__scaffale svg { display: block; width: 100%; height: auto; }

.nm-aziende__scaffale .l-blu { fill: var(--nm-logo-blu); }
.nm-aziende__scaffale .l-notte { fill: color-mix(in srgb, var(--nm-logo-blu) 55%, var(--nm-night-900)); }
.nm-aziende__scaffale .l-cielo { fill: color-mix(in srgb, var(--nm-logo-blu) 50%, var(--nm-ink-50)); }
.nm-aziende__scaffale .l-malva { fill: color-mix(in srgb, var(--nm-pastello-cipria) 55%, var(--nm-logo-blu)); }
.nm-aziende__scaffale .l-lavanda { fill: color-mix(in srgb, var(--nm-pastello-lilla) 66%, var(--nm-logo-blu)); }
.nm-aziende__scaffale .l-rosa { fill: var(--nm-pastello-cipria); }
.nm-aziende__scaffale .l-terracotta { fill: color-mix(in srgb, var(--nm-pastello-albicocca) 50%, var(--nm-gold-ink)); }
.nm-aziende__scaffale .l-crema { fill: var(--nm-ink-50); }
.nm-aziende__scaffale .l-oro { fill: var(--nm-gold-300); }
.nm-aziende__scaffale .l-oro-chiaro { fill: var(--nm-gold-100); }
.nm-aziende__scaffale .l-oro-scuro { fill: var(--nm-gold-graphic); }
.nm-aziende__scaffale .l-legno { fill: var(--nm-gold-ink); }
.nm-aziende__scaffale .l-ombra { fill: var(--nm-night-900); }
.nm-aziende__scaffale .l-luce { fill: var(--nm-ink-50); }
.nm-aziende__scaffale .l-oro-filo { fill: none; stroke: var(--nm-gold-graphic); }
.nm-aziende__scaffale .l-luce-filo { fill: none; stroke: var(--nm-ink-50); }

/* Le parole dopo la libreria, larghe quanto sono; se manca il posto si stringono loro. */
.nm-aziende__parole {
	position: relative;
	z-index: 2;
	flex: 0 1 auto;
	max-width: 28rem;
	min-width: 0;
	margin-right: auto;
}

.nm-aziende__titolo {
	margin: 0 0 0.4em;
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 2.3vw, 2.05rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--nm-logo-blu);
}

.nm-aziende__testo {
	margin: 0;
	max-width: 44rem;
	font-size: clamp(0.95rem, 1.06vw, 1.05rem);
	font-weight: 500;
	line-height: 1.6;
	color: var(--nm-logo-blu);
}

/* Il pulsante e' il link, e copre tutta la lastra (`::after`): si tocca dove si vuole. Per
   questo resta `static`, e il suo `::after` si allarga sulla lastra. */
.nm-aziende__cta {
	position: static;
	flex: 0 0 auto;
}

.nm-aziende__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: var(--radius-card);
}

/* Dalla tastiera il fuoco si vede sul pulsante; dove c'e' `:has()` si accende anche la lastra. */
.nm-aziende__cta:focus-visible {
	outline: 2px solid var(--nm-logo-blu);
	outline-offset: 3px;
}

.nm-aziende:has(.nm-aziende__cta:focus-visible) {
	box-shadow:
		0 0 0 2px var(--nm-logo-blu),
		0 0 34px -8px color-mix(in srgb, var(--nm-gold-300) 55%, transparent);
}

/* Sul telefono la carta delle strade va in colonna: il libro sopra, che esce dal bordo. */
@media (max-width: 560px) {
	.nm-strada__link {
		grid-template-columns: minmax(0, 1fr);
		gap: 1rem;
	}

}

/*
 * Sotto gli 800 px parole, libreria e pulsante in fila non ci stanno piu' (misurato: servono
 * circa 700 px di lastra): la lastra va in colonna. La libreria in cima, al centro, che esce dal
 * bordo alto; sotto le parole e il pulsante; i fili scendono dietro il pulsante.
 */
@media (max-width: 800px) {
	.nm-aziende {
		flex-direction: column;
		align-items: flex-start;
		min-height: 0;
		margin-top: clamp(7rem, 22vw, 9rem);
	}

	.nm-aziende__scaffale {
		align-self: center;
		width: min(64%, 15rem);
		margin: calc(var(--nm-aziende-pad) * -1 - clamp(5rem, 16vw, 7rem)) auto 0;
	}

	.nm-aziende__parole { flex: 0 0 auto; max-width: none; }

	.nm-aziende__fili {
		top: auto;
		bottom: -14%;
		right: -22%;
		width: 115%;
		opacity: 0.65;
		transform: scaleX(-1) rotate(-4deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nm-strada__link,
	.nm-strada__segno,
	.nm-strada__filigrana,
	.nm-strada__stella,
	.nm-aziende,
	.nm-aziende__scintilla { transition: none; }

	.nm-strada__link:hover .nm-strada__stella,
	.nm-strada__link:focus-visible .nm-strada__stella,
	.nm-aziende:hover .nm-aziende__scintilla,
	.nm-aziende:focus-within .nm-aziende__scintilla { transform: none; }

	.nm-strada__link:hover,
	.nm-strada__link:focus-visible,
	.nm-aziende:hover,
	.nm-aziende:focus-within { transform: none; }

	.nm-strada__cornice,
	.nm-aziende__cornice,
	.nm-strada__segno { animation: none; }
}

/*
 * ---- il catalogo sulla carta: `.nm-carta` ----
 *
 * Da qui in poi le regole valgono per ogni catalogo che sta su un foglio di carta: la
 * seconda sezione delle vetrine, che le ha generate, e l'elenco del blog, che il
 * committente ha voluto uguale. La classe e' `nm-carta`, sul contenitore: la meccanica
 * della vetrina che sale (`.nm-vetrina__elenco`) resta sua.
 */
/*
 * I filtri, in una riga: la ricerca, i menu a tendina di Occasione e Destinatario, e — se
 * l'amministratore ne ha aggiunti — l'icona degli altri filtri, che apre un popup. Cosi'
 * li ha disegnati il committente il 1° ottobre 2026.
 *
 * Gli altri filtri possono essere uno come dieci, e in riga non ci starebbero: stanno in un
 * foglio che si apre al centro, con dentro i gruppi in colonna e in fondo «Vedi libri · N»,
 * dove N e' quanti libri restano — e cambia mentre si sceglie, perche' ogni valore e'
 * applicato al tocco e il catalogo riscrive il numero.
 *
 * E' lo stesso foglio che il catalogo a schermo intero apre sul telefono: stesso markup,
 * stesso JavaScript (`catalogo.js`), stessa parola. Qui compare a ogni larghezza, e invece
 * di salire dal fondo si apre al centro.
 */
.nm-carta .nm-filtri {
	flex-direction: row;
	flex-wrap: wrap;
	/* `stretch`, non `center`: cosi' «Filtri» e' alto quanto il campo di ricerca, che e'
	   la cosa piu' alta della riga, senza che nessuno dei due debba sapere l'altezza
	   dell'altro. */
	align-items: stretch;
	gap: clamp(0.6rem, 1.2vw, 1rem);
}

.nm-carta .nm-filtri__cerca {
	flex: 1 1 20rem;
	min-width: 0;
	gap: 0.5rem;
}

/* I menu a tendina: la mano del campo di ricerca — filetto d'oro grafico, carta — e larghi
   quanto basta a «Cerca per destinatario» con la sua icona, non di piu'. Le regole valgono
   per il bottone del tema e per il `<select>` di chi non ha JavaScript.

   Il 6 ottobre 2026, sulla grafica del committente: davanti al nome «Cerca per» e un'icona
   d'oro grafico, e le parole nel blu del logo, piu' marcate — prima erano oro d'inchiostro, a
   peso normale. */
.nm-carta .nm-filtri__tendina { flex: 0 1 19rem; }

.nm-carta .nm-filtri__bottone,
.nm-carta .nm-filtri__scelta {
	padding: 0.85em 2.8em 0.85em 1.3em;
	border-color: color-mix(in srgb, var(--nm-gold-graphic) 42%, transparent);
	background: var(--nm-ink-50);
	color: var(--nm-logo-blu);
	font-size: clamp(0.9rem, 1.05vw, 1rem);
	font-weight: 600;
	box-shadow: 0 2px 10px rgb(20 25 38 / 0.06);
	transition: border-color var(--motion-duration-ui) var(--motion-ease),
	            background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-carta .nm-filtri__bottone:hover,
.nm-carta .nm-filtri__bottone[aria-expanded="true"],
.nm-carta .nm-filtri__scelta:hover { border-color: var(--nm-gold-graphic); }

/* Un valore scelto: il menu si scalda, come un valore acceso negli altri filtri. Chiuso,
   e' quello che dice che il filtro e' attivo. */
.nm-carta .nm-filtri__tendina--scelta .nm-filtri__bottone,
.nm-carta .nm-filtri__tendina--scelta .nm-filtri__scelta {
	border-color: var(--nm-gold-graphic);
	background: color-mix(in srgb, var(--nm-gold-300) 30%, var(--nm-ink-50));
	font-weight: 600;
}

.nm-carta .nm-filtri__freccia,
.nm-carta .nm-filtri__togli { color: var(--nm-logo-blu); }

.nm-carta .nm-filtri__segno { color: var(--nm-gold-graphic); }

.nm-carta .nm-filtri__bottone:focus-visible,
.nm-carta .nm-filtri__scelta:focus-visible {
	border-color: var(--nm-gold-graphic);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 40%, transparent);
}

/* Il foglio dei valori, sulla carta: lo stesso foglio del campo, piu' chiaro dei libri
   sotto; le voci in inchiostro, la voce scelta in oro d'inchiostro, la stellina in oro
   grafico. */
.nm-carta .nm-filtri__lista {
	border-color: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent);
	background: var(--nm-ink-50);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nm-paper-300) 52%, transparent),
		0 22px 48px -20px rgb(20 25 38 / 0.42);
}

.nm-carta .nm-filtri__opzione { color: var(--nm-ink-800); }
.nm-carta .nm-filtri__opzione--attiva { background: color-mix(in srgb, var(--nm-gold-300) 24%, var(--nm-ink-50)); }
.nm-carta .nm-filtri__opzione[aria-selected="true"] { color: var(--nm-gold-ink); }
.nm-carta .nm-filtri__spunta { color: var(--nm-gold-graphic); }

.nm-carta .nm-filtri__campo {
	padding: 0.85em 1.4em;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 42%, transparent);
	border-radius: var(--radius-button);
	background: var(--nm-ink-50);
	/* Quello che si scrive, e il segnaposto, nel blu del logo e con il peso dei menu accanto
	   (6 ottobre 2026): prima erano oro d'inchiostro, a peso normale. */
	color: var(--nm-logo-blu);
	font-size: clamp(0.9rem, 1.05vw, 1rem);
	font-weight: 600;
	box-shadow: 0 2px 10px rgb(20 25 38 / 0.06);
}

/* Il segnaposto come le parole dei menu accanto: stesso blu pieno, stesso peso (7 ottobre 2026). */
.nm-carta .nm-filtri__campo::placeholder { color: var(--nm-logo-blu); font-weight: 600; opacity: 1; }

.nm-carta .nm-filtri__lente {
	left: 1.05rem;
	width: 1.2rem;
	color: var(--nm-logo-blu);
}

.nm-carta .nm-filtri__lente + .nm-filtri__campo { padding-left: 2.9rem; }

/* Gli esempi si leggono: il blu del logo quasi pieno, un filo piu' grandi delle note («questo
   piu' visibile», al 62% erano un'ombra). */
.nm-carta .nm-filtri__esempi {
	left: 2.9rem;
	font-size: 0.8rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--nm-logo-blu) 88%, transparent);
}

/* Lo spazio per gli esempi: sotto la riga, e fra le righe quando la barra va a capo e sotto
   la casella c'e' un menu. */
.nm-carta .nm-filtri:has(.nm-filtri__esempi) {
	row-gap: 1.9rem;
	margin-bottom: 1.4rem;
}

.nm-carta .nm-filtri__invio,
.nm-carta .nm-filtri__apri {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 0;
	padding: 0.85em 1.4em;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent);
	border-radius: var(--radius-button);
	background: var(--nm-ink-50);
	color: var(--nm-gold-ink);
	font-size: clamp(0.7rem, 0.84vw, 0.78rem);
	letter-spacing: var(--nm-tracking-caps);
	box-shadow: 0 2px 10px rgb(20 25 38 / 0.06);
	cursor: var(--nm-cursore-attivo);
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease);
}

/*
 * «Cerca» non serve: la ricerca parte da sola mentre si scrive (catalogo.js), e un
 * pulsante che non aggiunge niente e' rumore. Resta per chi non ha JavaScript, che senza
 * di lui non avrebbe modo di lanciarla se non con Invio.
 */
.nm-carta .nm-filtri__invio { display: none; }
.no-js .nm-carta .nm-filtri__invio { display: inline-flex; }

.nm-carta .nm-filtri__invio:hover,
.nm-carta .nm-filtri__apri:hover { color: var(--nm-gold-ink); border-color: var(--nm-gold-graphic); background: color-mix(in srgb, var(--nm-gold-300) 22%, var(--nm-ink-50)); }

/* L'icona degli altri filtri: un quadrato della stessa altezza dei menu, con il pallino dei
   filtri accesi sull'angolo. Il nome sta in `aria-label` e nel suggerimento. */
.nm-carta .nm-filtri__apri {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 1;
	padding: 0;
	min-width: 3.4em;
}

.nm-filtri__apri-icona { display: block; width: 1.75em; }
.nm-filtri__apri-icona svg { display: block; width: 100%; height: auto; }

.nm-carta .nm-filtri__apri .nm-filtri__accesi {
	position: absolute;
	top: -0.55em;
	right: -0.55em;
}

.nm-carta .nm-filtri__accesi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.7em;
	height: 1.7em;
	padding-inline: 0.35em;
	border-radius: 999px;
	background: var(--nm-gold-graphic);
	color: var(--nm-ink-50);
	font-size: 0.85em;
	letter-spacing: 0;
}

/* A zero filtri il pallino non c'e': `hidden` deve vincere sul display qui sopra. */
.nm-carta .nm-filtri__accesi[hidden] { display: none; }

/* «Togli i filtri»: in fondo alla riga, solo quando qualcosa e' acceso — un filtro o una
   ricerca. Un tocco e si ricomincia, senza dover rimettere a zero menu per menu. */
.nm-carta .nm-filtri__azzera {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	align-self: center;
	color: var(--nm-gold-ink);
	font-size: clamp(0.66rem, 0.8vw, 0.74rem);
	text-decoration: none;
	border-bottom: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent);
	padding-bottom: 0.2em;
}

.nm-carta .nm-filtri__azzera:hover { border-bottom-color: var(--nm-gold-graphic); }

/* Il velo dietro il popup, a ogni larghezza. */
.nm-carta .nm-filtri::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 34;
	background: color-mix(in srgb, var(--nm-night-900) 55%, transparent);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--motion-duration-scene) var(--motion-ease),
	            visibility var(--motion-duration-scene) var(--motion-ease);
}

/* Il popup: un foglio di carta al centro, con i gruppi in colonna. */
.nm-carta .nm-filtri__gruppi {
	position: fixed;
	inset: auto;
	left: 50%;
	top: 50%;
	bottom: auto;
	z-index: 35;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2.4vh, 1.5rem);
	width: min(92vw, 44rem);
	max-height: min(84dvh, 46rem);
	padding: clamp(1.4rem, 3vh, 2rem) clamp(1.4rem, 3vw, 2.4rem) 0;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 30%, transparent);
	border-radius: var(--radius-card);
	background: var(--nm-ink-50);
	color: var(--nm-ink-800);
	box-shadow: 0 30px 80px rgb(2 6 14 / 0.35);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translate(-50%, -50%) scale(0.96);
	opacity: 0;
	visibility: hidden;
	transition: transform var(--motion-duration-scene) var(--motion-ease),
	            opacity var(--motion-duration-scene) var(--motion-ease),
	            visibility var(--motion-duration-scene) var(--motion-ease);
}

[data-filtri="aperti"] .nm-carta .nm-filtri::after { opacity: 1; visibility: visible; }
[data-filtri="aperti"] .nm-carta .nm-filtri__gruppi { transform: translate(-50%, -50%); opacity: 1; visibility: visible; }

.nm-carta .nm-filtri__gruppo { gap: 0.6rem; }

.nm-carta .nm-filtri__nome {
	color: var(--nm-gold-ink);
	font-size: clamp(0.66rem, 0.8vw, 0.74rem);
}

.nm-carta .nm-filtri__valori { gap: 0.45rem; }

.nm-carta .nm-filtri__valore {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4em 1em;
	/* Il raggio del bottone, non la pillola del catalogo scuro: stessa mano del resto del foglio. */
	border-radius: var(--radius-button);
	border-color: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent);
	background: var(--nm-ink-50);
	/* Oro d'inchiostro, come ogni cosa che si tocca sulla carta: mai blu. */
	color: var(--nm-gold-ink);
	font-size: clamp(0.84rem, 0.98vw, 0.94rem);
}

.nm-carta .nm-filtri__valore:hover { color: var(--nm-gold-ink); border-color: var(--nm-gold-graphic); background: color-mix(in srgb, var(--nm-gold-300) 22%, var(--nm-ink-50)); }

.nm-carta .nm-filtri__valore--acceso {
	border-color: var(--nm-gold-graphic);
	background: color-mix(in srgb, var(--nm-gold-300) 46%, transparent);
	color: var(--nm-gold-ink);
}

/* La X in alto a destra del popup: la via d'uscita che l'occhio cerca per prima. */
.nm-carta .nm-filtri__chiudi {
	position: sticky;
	top: 0;
	z-index: 1;
	align-self: flex-end;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: calc(-1 * clamp(0.6rem, 1.6vh, 1rem)) calc(-1 * clamp(0.6rem, 1.4vw, 1rem)) -1.6rem 0;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent);
	border-radius: var(--radius-button);
	background: var(--nm-ink-50);
	color: var(--nm-gold-ink);
	cursor: var(--nm-cursore-attivo);
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-carta .nm-filtri__chiudi:hover { color: var(--nm-gold-ink); border-color: var(--nm-gold-graphic); background: color-mix(in srgb, var(--nm-gold-300) 22%, var(--nm-ink-50)); }
.nm-carta .nm-filtri__chiudi svg { display: block; width: 14px; height: 14px; }

/*
 * Sul telefono la ricerca prende la riga intera, con gli esempi sotto; poi i due menu a
 * tendina, uno per riga, e l'icona degli altri filtri — se c'e' — accanto all'ultimo;
 * «Togli i filtri» sotto. Fino al 6 ottobre 2026 i menu stavano fianco a fianco, a meta'
 * ciascuno: con «Cerca per» e l'icona davanti al nome a meta' riga non ci stanno piu'.
 */
@media (max-width: 640px) {
	.nm-carta .nm-filtri__cerca { flex-basis: 100%; }

	.nm-carta .nm-filtri:has(.nm-filtri__esempi) {
		row-gap: clamp(0.6rem, 1.2vw, 1rem);
		margin-bottom: 0;
	}

	/* Gli esempi vanno a capo invece di finire nei puntini: su un telefono stretto «Natale…»
	   restava fuori (7 ottobre 2026). Sotto la casella c'e' il posto per due righe. */
	.nm-carta .nm-filtri__cerca:has(.nm-filtri__esempi) { margin-bottom: 2.5rem; }

	.nm-carta .nm-filtri__esempi { white-space: normal; }

	.nm-carta .nm-filtri__tendina { flex: 1 1 14rem; }

	.nm-carta .nm-filtri__bottone,
	.nm-carta .nm-filtri__scelta {
		padding: 0.85em 2.3em 0.85em 0.95em;
		font-size: 0.92rem;
	}

	.nm-carta .nm-filtri__freccia { right: 0.7em; }

	.nm-carta .nm-filtri__azzera { flex-basis: 100%; justify-content: flex-start; }
}

/* Il piede del popup: resta in vista anche se i gruppi scorrono. */
.nm-carta .nm-filtri__piede {
	position: sticky;
	bottom: 0;
	display: block;
	margin-inline: calc(-1 * clamp(1.4rem, 3vw, 2.4rem));
	padding: clamp(0.8rem, 2vh, 1.1rem) clamp(1.4rem, 3vw, 2.4rem);
	border-top: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 30%, transparent);
	background: var(--nm-ink-50);
}

.nm-carta .nm-filtri__vedi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	min-height: 48px;
	border: var(--nm-rule-width) solid var(--nm-gold-graphic);
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--nm-gold-ink);
	font-size: clamp(0.72rem, 0.86vw, 0.8rem);
	letter-spacing: var(--nm-tracking-caps);
	cursor: var(--nm-cursore-attivo);
}

/* Al passaggio si accende il fondo, la scritta resta oro d'inchiostro: come «Visualizza
   libro», e come ogni pulsante sulla carta. */
.nm-carta .nm-filtri__vedi:hover { color: var(--nm-gold-ink); background: color-mix(in srgb, var(--nm-gold-300) 22%, transparent); }

/* «Vedi libri · 12»: il numero e' la cosa che cambia, e si vede. */
.nm-carta .nm-filtri__trovati::before { content: "· "; color: var(--nm-gold-graphic); }

/*
 * I libri: quattro per riga, ogni scheda una carta con la copertina sopra e il titolo
 * sotto. Nel catalogo a schermo intero la copertina sta di fianco al titolo, perche' li'
 * la griglia e' a due colonne e scorre dentro di se'; qui la pagina scorre e la scheda e'
 * stretta, e una copertina di fianco non avrebbe posto.
 */
.nm-carta .nm-catalogo__risultati,
.nm-carta .nm-catalogo__area { display: block; min-height: 0; }

.nm-carta .nm-griglia {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.9rem, 1.6vw, 1.5rem);
	padding: 0;
	overflow: visible;
	max-height: none;
}

/*
 * Il pannello e' la scheda intera, non il link: sotto il link puo' esserci la nota, che e'
 * un pulsante suo — dentro un link non potrebbe stare — e deve sedere nello stesso pannello.
 *
 * A riposo e' come nella grafica del committente: un foglio appena piu' chiaro della carta,
 * con un orlo di luce sottile e nessuna ombra — non una scatola con il filetto d'oro e
 * l'ombra sotto, che e' quello che c'era prima. Il raggio e' quello delle card del tema, non
 * i 22 px della grafica: troppo tondo per un sito che disegna filetti da un pixel.
 */
.nm-carta .nm-libro {
	/* Il filo che si accende, piu' fine che sulle card grandi per cui e' nato: la scheda e' un terzo di
	   quella, e con gli stessi spessori il bordo sembrava una cornice — «meno spesso». */
	--nm-accesa-alone: 7px;
	--nm-accesa-sfocatura: 6px;
	--nm-accesa-filo: 1.5px;
	--nm-accesa-favilla: clamp(11px, 1.05vw, 17px);
	flex-direction: column;
	padding: clamp(0.9rem, 1.4vw, 1.3rem);
	/*
	 * L'orlo: «un po' piu' bianco, evidente». La carta piu' chiara che il tema ha e' a due
	 * livelli dal foglio — misurato: foglio #FBF7F1, scheda #FCF8F2 — e da sola una riga di
	 * quel colore non si vede, con qualunque spessore. Si vede se accanto le sta un filo
	 * appena piu' scuro: e' il contrasto fra i due a fare il bordo, come sull'orlo di un
	 * foglio vero, dove il bianco della taglio e' evidente per l'ombra che gli sta sotto.
	 */
	border: 1.5px solid var(--nm-ink-50);
	border-radius: var(--radius-card);
	overflow: hidden;
	background: color-mix(in srgb, var(--nm-ink-50) 45%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--nm-paper-300) 52%, transparent);
}

/*
 * Al passaggio si accende — `nm-accesa`, variante chiara: la
 * scheda si fa avanti, il filo d'oro le gira attorno, le faville corrono sul bordo. Ma
 * «meno dorato», ha detto il committente vedendola: la corona fissa e' quasi niente — un
 * velo d'oro al 16% invece del 46% — e l'oro sta nel passaggio di luce che gira, non nel
 * bordo. L'ombra e' piu' leggera: sulla carta chiara un'ombra da notte pesa.
 */
.nm-carta .nm-libro::before,
.nm-carta .nm-libro::after {
	background:
		conic-gradient(
			from var(--nm-giro),
			transparent 0deg,
			transparent 22deg,
			color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent) 52deg,
			color-mix(in srgb, var(--nm-gold-ink) 62%, transparent) 70deg,
			var(--nm-gold-200) 84deg,
			color-mix(in srgb, var(--nm-gold-ink) 62%, transparent) 98deg,
			color-mix(in srgb, var(--nm-gold-graphic) 36%, transparent) 118deg,
			transparent 152deg,
			transparent 360deg
		),
		linear-gradient(
			color-mix(in srgb, var(--nm-gold-graphic) 16%, transparent),
			color-mix(in srgb, var(--nm-gold-graphic) 16%, transparent)
		);
}

.nm-carta .nm-libro:hover::before,
.nm-carta .nm-libro:focus-within::before { opacity: 0.6; }

.nm-carta .nm-libro:hover,
.nm-carta .nm-libro:focus-within {
	box-shadow:
		0 6px 14px -6px rgb(20 25 38 / 0.14),
		0 30px 60px -22px rgb(20 25 38 / 0.24),
		0 0 22px -4px color-mix(in srgb, var(--nm-gold-ink) 18%, transparent),
		0 0 64px 2px color-mix(in srgb, var(--nm-gold-graphic) 12%, transparent);
}

/* La copertina non zooma per conto suo — e' tutta la scheda che si avvicina — e il titolo
   resta del suo colore: l'oro come colore di testo sulla carta non si usa. */
.nm-carta .nm-libro__link:hover .nm-libro__copertina,
.nm-carta .nm-libro__link:focus-visible .nm-libro__copertina { transform: none; }

.nm-carta .nm-libro__link:hover .nm-libro__titolo,
.nm-carta .nm-libro__link:focus-visible .nm-libro__titolo { color: var(--nm-ink-900); }

.nm-carta .nm-libro__link {
	flex: 1 1 auto;
	flex-direction: column;
	align-items: stretch;
	gap: 0.9rem;
}

/* «Come funziona?» sotto il pulsante, centrato, in oro d'inchiostro: un rimando, come
   «Scopri di più» sulla scheda del libro. E' un pulsante che per ora non fa niente. */
.nm-carta .nm-libro__nota {
	display: block;
	width: 100%;
	margin-top: 0.8rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--nm-gold-ink);
	font-family: var(--font-body);
	font-size: clamp(0.74rem, 0.86vw, 0.82rem);
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	cursor: var(--nm-cursore-attivo);
}

.nm-carta .nm-libro__nota:hover,
.nm-carta .nm-libro__nota:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; }

/*
 * La copertina si vede tutta: niente cornice, niente proporzione imposta, niente taglio.
 *
 * Le immagini dei libri arrivano gia' come libri — il volume in tre dimensioni con la sua
 * ombra, su fondo trasparente — e una cornice con `object-fit: cover` ne tagliava un
 * pezzo. Il committente l'ha visto subito. Qui l'immagine decide la sua altezza.
 */
.nm-carta .nm-libro__cornice {
	width: 100%;
	max-height: none;
	aspect-ratio: auto;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.nm-carta .nm-libro__copertina {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.nm-carta .nm-libro__testo {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1 1 auto;
}

.nm-carta .nm-libro__titolo {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.42vw, 1.36rem);
	font-weight: 700;
	line-height: 1.15;
	color: var(--nm-ink-900);
}

.nm-carta .nm-libro__estratto {
	font-size: clamp(0.86rem, 1vw, 0.96rem);
	font-weight: 400;
	line-height: 1.45;
	color: color-mix(in srgb, var(--nm-ink-800) 80%, transparent);
}

/* La riga dei dati — «18-30 anni | Compleanno» — in oro d'inchiostro, con il segno davanti
   e un filetto verticale fra i due. Spinge in fondo quello che le sta sotto, cosi' prezzo e
   pulsante stanno alla stessa quota su tutta la riga di schede. */
.nm-carta .nm-libro__dati {
	margin-top: auto;
	padding-top: 0.35rem;
	color: var(--nm-gold-ink);
	font-size: clamp(0.76rem, 0.9vw, 0.86rem);
}

.nm-carta .nm-libro__dati + .nm-libro__prezzo { margin-top: 0; padding-top: 0.6rem; }

/* Il prezzo — «39,90 €», che brilla (components.css, `nm-prezzo`) — spinge il pulsante in
   fondo: le schede di una riga hanno il pulsante alla stessa quota anche se i testi sono
   lunghi diversi. Le faville salgono sopra la cifra: lo spazio sopra e' per loro. */
.nm-carta .nm-libro__prezzo {
	margin-top: auto;
	padding-top: 0.55rem;
}

/*
 * Il pulsante, nella lingua del sito: filetto d'oro da un pixel su niente, maiuscoletto
 * spaziato, la freccia. La grafica di riferimento aveva una pillola piena d'ambra: non e'
 * il tema — il tema ha una sola lingua per i pulsanti, e su carta il filetto e' quello
 * d'inchiostro dorato. Il pieno resta alle pastiglie, che non sono pulsanti.
 */
.nm-carta .nm-libro__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	margin-top: 0.4rem;
	padding: 0.95em 1.2em;
	border: var(--nm-rule-width) solid var(--nm-gold-graphic);
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--nm-gold-ink);
	font-size: clamp(0.66rem, 0.8vw, 0.74rem);
	font-weight: 500;
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            border-color var(--motion-duration-ui) var(--motion-ease),
	            background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-carta .nm-libro__cta span { margin-left: 0; }

/* Al passaggio cambia il fondo, non il colore della scritta: resta oro d'inchiostro. */
.nm-carta .nm-libro__link:hover .nm-libro__cta,
.nm-carta .nm-libro__link:focus-visible .nm-libro__cta {
	color: var(--nm-gold-ink);
	background: color-mix(in srgb, var(--nm-gold-300) 22%, transparent);
}

.nm-carta .nm-libro__link:hover .nm-libro__cta-freccia { transform: translateX(3px); }

/*
 * Sotto la griglia, le pagine.
 *
 * Non la fila di numeri, che qui e' un'altra lingua: due pulsanti del tema — filetto d'oro
 * da un pixel, maiuscoletto, la freccia — e in mezzo, piccolo, «2 / 9». I numeri delle
 * altre pagine restano nel documento per chi naviga con lo screen reader o senza CSS, ma
 * non si vedono. Le pagine sono un fatto del catalogo: 101 libri non stanno in una
 * schermata.
 */
/*
 * Tre colonne, non una fila: «2 / 9» sta sempre al centro della pagina, con «Indietro» a
 * sinistra e «Avanti» a destra. In fila, alla prima e all'ultima pagina — dove uno dei due
 * pulsanti non c'e' — tutto il gruppo si spostava, e il numero finiva fuori centro: l'ha
 * visto il committente. Le due colonne ai lati sono uguali, e il pulsante che manca lascia
 * la sua colonna vuota.
 */
.nm-carta .nm-paginazione {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(0.8rem, 1.6vw, 1.4rem);
	margin-top: clamp(1.6rem, 3.4vh, 2.8rem);
	padding-top: 0;
	border-top: 0;
	font-size: clamp(0.68rem, 0.84vw, 0.78rem);
}

.nm-carta .nm-paginazione .page-numbers:not(.prev):not(.next):not(.current) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Il numero corrente lo dice il campo del salto: il link «corrente» resta per gli screen
   reader ma non si vede due volte. */
.nm-carta .nm-paginazione .current {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* «2 / 9», con il 2 che si puo' scrivere. Il campo sembra testo finche' non lo si tocca:
   nessun bordo, stesso corpo, le frecce del numero nascoste; al fuoco compare il filetto. */
.nm-paginazione__salto { display: none; }

.nm-carta .nm-paginazione__salto {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	grid-area: 1 / 2;
	color: color-mix(in srgb, var(--nm-ink-800) 70%, transparent);
	letter-spacing: var(--nm-tracking-caps);
}

/* Riga scritta, non lasciata all'algoritmo: il campo viene prima nel documento e sta nella
   colonna 2, e un elemento messo dopo in una colonna piu' a sinistra finisce nella riga sotto. */
.nm-carta .nm-paginazione .prev { grid-area: 1 / 1; justify-self: end; }
.nm-carta .nm-paginazione .next { grid-area: 1 / 3; justify-self: start; }

/* Largo quanto le cifre, allineato a destra: il numero sta attaccato al «/ 9», non in
   mezzo a un campo vuoto. `--nm-cifre` lo scrive il componente dal totale. */
.nm-carta .nm-paginazione__campo {
	width: calc(var(--nm-cifre, 1) * 0.72em + 0.6em);
	padding: 0.35em 0.2em;
	border: var(--nm-rule-width) solid transparent;
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--nm-ink-900);
	font: inherit;
	letter-spacing: 0;
	text-align: right;
	-moz-appearance: textfield;
}

.nm-carta .nm-paginazione__campo::-webkit-outer-spin-button,
.nm-carta .nm-paginazione__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.nm-carta .nm-paginazione__campo:hover { border-color: color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent); }

.nm-carta .nm-paginazione__campo:focus-visible {
	outline: 2px solid transparent;
	border-color: var(--nm-gold-graphic);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 30%, transparent);
}

.nm-carta .nm-paginazione .prev,
.nm-carta .nm-paginazione .next {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	min-width: 0;
	padding: 0.95em 1.5em;
	border: var(--nm-rule-width) solid var(--nm-gold-graphic);
	border-radius: var(--radius-button);
	color: var(--nm-gold-ink);
	letter-spacing: var(--nm-tracking-caps);
	transition: color var(--motion-duration-ui) var(--motion-ease),
	            background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-carta .nm-paginazione .prev:hover,
.nm-carta .nm-paginazione .next:hover {
	color: var(--nm-gold-ink);
	border-color: var(--nm-gold-graphic);
	background: color-mix(in srgb, var(--nm-gold-300) 22%, transparent);
}

/* Le frecce: due lati di un quadrato ruotato, come la punta delle tendine. Niente immagini
   per un segno di sei pixel. */
.nm-carta .nm-paginazione .prev::before,
.nm-carta .nm-paginazione .next::after {
	content: "";
	width: 0.5em;
	height: 0.5em;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.nm-carta .nm-paginazione .prev::before { transform: rotate(-135deg); margin-left: 0.1em; }
.nm-carta .nm-paginazione .next::after { transform: rotate(45deg); margin-right: 0.1em; }

@media (max-width: 1100px) { .nm-carta .nm-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .nm-carta .nm-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .nm-carta .nm-griglia { grid-template-columns: minmax(0, 1fr); } }

/* Fra i 900 e i 1200 px le due colonne si avvicinano troppo: i libri cedono, perche' a
   cedere devono essere loro — escono di scena a destra, e non si legge come una perdita. */
@media (max-width: 1200px) {
	.nm-vetrina__media { width: min(58vw, 780px); }
	.nm-vetrina__parole { width: min(42%, 26rem); }
}

/* ------------------------------------------------------------
   Sotto i 900 px: una colonna
   ------------------------------------------------------------ */

@media (max-width: 900px) {
	.nm-vetrina__colonne {
		flex-direction: column;
		justify-content: flex-start;
		gap: calc(var(--space-unit) * 2);
	}

	/* L'avviso si impila: marchio, parole, e la frase in corsivo in fondo. */
	.nm-avviso { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.nm-avviso__nota { width: auto; align-items: flex-start; padding-top: 0; text-align: left; }
	.nm-avviso__cuore { margin-right: 0; }
	.nm-avviso__corsivo { transform: rotate(-4deg); }

	.nm-vetrina__parole { width: 100%; }

	/* Titolo e frase grandi come in Home, con gli stessi fattori: sul telefono il titolo
	   della Home cresce di un terzo per riempire la colonna, e questi devono fare lo stesso. */
	.nm-vetrina__titolo { font-size: calc(var(--scale-h1) * var(--nm-d) * 1.34); }
	.nm-vetrina__lead { font-size: calc(clamp(1.2rem, 2.24vw, 1.8rem) * var(--nm-d) * 1.15); }

	/* I libri tornano nel flusso e stanno sotto le parole: sovrapposti, su uno schermo
	   stretto, il testo cadrebbe sulle copertine. */
	.nm-vetrina__media {
		position: relative;
		right: auto;
		top: auto;
		translate: none;
		/* Fino al bordo destro dello schermo e non oltre: con tutto il margine di
		   entrambi i lati aggiunto alla larghezza, il riquadro usciva di 18 px a destra e la
		   terza etichetta con lui. */
		width: calc(100% + (100vw - var(--container-width)) / 2);
		margin-right: calc((var(--container-width) - 100vw) / 2);
	}

	/*
	 * I libri aperti dei compilabili escono sotto il riquadro di un sesto della sua larghezza,
	 * e sul telefono la striscia «Come funziona?», che e' larga quanto lo schermo, li copriva:
	 * della mano che scrive non si vedeva quasi niente (l'ha visto il committente). Sotto il
	 * riquadro resta lo spazio per loro. Le figure dei personalizzati stanno dentro il loro, e
	 * li' quello spazio era solo vuoto fra loro e i tre punti del servizio.
	 */
	.nm-vetrina__media { margin-bottom: 16vw; }
	.nm-vetrina__hero--personalizzati .nm-vetrina__media { margin-bottom: 0; }

	/* I tips vanno a capo: in fila a larghezza naturale il terzo usciva dallo schermo. */
	.nm-vetrina__tips { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit) * 1.4) calc(var(--space-unit) * 2.2); }

	/*
	 * Sul telefono la striscia e' a tutta larghezza — il capo tondo a destra sparisce con
	 * il bordo — e i passi stanno in una fila: se ci stanno, fermi e centrati; se non ci
	 * stanno, in un nastro che gira da solo e si trascina, come i tips nella scheda del
	 * libro. L'ha chiesto il committente: in colonna la striscia era una scaletta.
	 */
	.nm-passi { width: 100%; margin-left: 0; margin-bottom: 0; }

	/*
	 * Il foglio a tutta larghezza, alto quanto i passi. Sotto finisce dritto: l'orlo in
	 * fondo lo fa la sezione, che gli sale sopra (qui sotto, `.nm-vetrina__elenco`).
	 *
	 * Prima aveva un'onda sua anche in fondo — «il taglio sotto dev'essere ondulato come
	 * sopra», perche' sotto la striscia restava cielo — e poi, dopo un margine, cominciava la
	 * sezione con un'altra onda: fra le due una fascia di cielo rosa. Il committente le vuole
	 * «un incastro perfetto senza quello spazietto» (2 ottobre 2026). L'orlo sotto resta
	 * ondulato, ma e' uno solo.
	 */
	.nm-passi__foglio {
		/* Meno onda: sul telefono la tessera dell'onda e' quasi larga quanto lo schermo, e a
		   piena altezza faceva un'onda sola, alta. Piu' bassa e piu' fitta si legge come un
		   orlo, non come una collina. */
		--nm-onda: 16px;
		min-height: 0;
		border-radius: 0;
		/* Ma il foglio non e' sottile: con l'onda bassa e i passi in una riga sola restava una
		   fascia da 125 px, e sembrava un nastro adesivo. Sopra e sotto respira. */
		padding-top: calc(var(--nm-onda) + var(--space-unit) * 2.4);
		padding-right: calc((100vw - var(--container-width)) / 2 + var(--space-unit) * 0.5);
		padding-left: calc((100vw - var(--container-width)) / 2 + var(--space-unit) * 0.5);
		padding-bottom: calc(var(--nm-onda) + var(--space-unit) * 2.8);
		gap: calc(var(--space-unit) * 1.6);
		-webkit-mask-image: url("../img/onda-carta.svg"), linear-gradient(#000, #000);
		mask-image: url("../img/onda-carta.svg"), linear-gradient(#000, #000);
		-webkit-mask-size: 260px var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
		mask-size: 260px var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
		-webkit-mask-position: left top, left calc(var(--nm-onda) - 1px);
		mask-position: left top, left calc(var(--nm-onda) - 1px);
		-webkit-mask-repeat: repeat-x, no-repeat;
		mask-repeat: repeat-x, no-repeat;
	}

	/*
	 * La sezione s'incastra nella striscia: le sale sopra di quanto e' alta la sua onda, cosi'
	 * dove l'onda scende si vede la carta della striscia, e dove sale comincia la sezione. Fra
	 * le due non resta cielo. L'onda e' la stessa dell'orlo in cima alla striscia — 260 px per
	 * 16 — cosi' la carta ha lo stesso orlo sopra e sotto. I passi non ci finiscono sotto: il
	 * foglio ha sotto di loro piu' carta di quanta l'onda ne copra.
	 */
	.nm-vetrina__elenco {
		--nm-onda: 16px;
		margin-top: calc(-1 * var(--nm-onda));
		-webkit-mask-size: 260px var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
		mask-size: 260px var(--nm-onda), 100% calc(100% - var(--nm-onda) + 1px);
	}

	/* Sul telefono i passi stanno vicino al titolo: fra i due c'e' gia' lo spazio del foglio, e il
	   respiro in piu' chiesto per il computer qui li allontanava (7 ottobre 2026). */
	.nm-passi__titolo {
		top: 0;
		margin-bottom: calc(var(--space-unit) * 0.6);
	}

	.nm-passi__pista {
		width: 100%;
		min-width: 0;
		overflow: hidden;
		touch-action: pan-y;
		user-select: none;
		-webkit-user-select: none;
	}

	.nm-passi__pista[data-nm-vivo] {
		cursor: grab;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	}

	.nm-passi__pista[data-nm-presa] { cursor: grabbing; }

	.nm-passi__nastro { display: flex; will-change: transform; }
	.nm-passi__pista[data-nm-vivo] .nm-passi__nastro { width: max-content; }
	.nm-passi__pista:not([data-nm-vivo]) .nm-passi__nastro { width: 100%; justify-content: center; }

	.nm-passi__lista {
		display: flex;
		flex-wrap: nowrap;
		gap: 0;
		width: auto;
	}

	.nm-passi__passo {
		flex: 0 0 auto;
		width: clamp(240px, 72vw, 300px);
		padding-right: clamp(1.4rem, 5vw, 2.4rem);
		padding-bottom: 0;
	}

	/* Nel nastro dopo l'ultimo passo viene di nuovo il primo: la freccia c'e' anche li'. */
	.nm-passi__pista[data-nm-vivo] .nm-passi__passo:last-child .nm-passi__freccia { display: block; }
	.nm-passi__pista[data-nm-vivo] .nm-passi__passo:last-child { padding-right: clamp(1.4rem, 5vw, 2.4rem); }

	.nm-passi__passo img,
	.nm-passi__passo svg { -webkit-user-drag: none; }

	.nm-vetrina__hero { min-height: 0; }

	/* Su uno schermo stretto la hero e' piu' alta della finestra: tenerla ferma vorrebbe
	   dire non poterne leggere il fondo. Scorre come tutto il resto. */
	.nm-vetrina__hero { position: static; }

	/* Sul cielo delle hero, sul telefono, non c'e' velina: c'e' stata dal 3 al 7 ottobre 2026,
	   la stessa della Home di allora, e il committente l'ha tolta come dalla Home. */
}

/*
 * Sul telefono le frasi sotto il titolo delle vetrine e di «Libri su misura» ignorano gli «a
 * capo» scritti nell'admin, e scorrono: quelli sono scritti per la colonna del computer, e
 * sommati agli a capo dello schermo stretto lasciavano parole sole su una riga — «online»,
 * «parole.» (scelto dal committente il 7 ottobre 2026). Il `<br>` di `nl2br` si spegne, e lo
 * spazio fra le parole lo fa l'a capo vero che gli resta dopo. `text-wrap: pretty`, dove c'e',
 * evita l'ultima parola da sola.
 *
 * Non i titoli, i cui a capo sono il disegno, e non la Home: li' le righe scritte nell'admin
 * stanno gia' sul telefono — «Ogni vita e' fatta di piccoli punti. | Noi li uniamo per
 * trasformarli | in qualcosa di unico.» — e scorrendo peggioravano. Misurato a 390 px.
 */
@media (max-width: 600px) {
	.nm-vetrina__lead br,
	.nm-vetrina__testo br,
	.nm-misura__testo br { display: none; }

	.nm-vetrina__lead,
	.nm-vetrina__testo { text-wrap: pretty; }
}

/* ============================================================
   Il foglio sul cielo: `nm-carta--cielo`
   ============================================================
   La seconda sezione delle vetrine porta i componenti della carta sopra il cielo pastello
   (`.nm-vetrina__cielo`), e cosi' il blog, che dal 3 ottobre 2026 ha lo stesso cielo sullo
   stage. Sul chiaro le parole sono quelle della carta — titoli nel blu del logo, frase in
   inchiostro, l'oro d'inchiostro per il motto —, e qui resta solo il vetro dei pannelli: le
   schede e le pagine piu' piene di quelle della carta, perche' sotto non c'e' un foglio
   uniforme ma un cielo che cambia colore mentre si scorre.

   In fondo al file, perche' vinca sulle regole della carta a parita' di peso. */

.nm-carta--cielo .nm-libro { background: color-mix(in srgb, var(--nm-ink-50) 93%, transparent); }

.nm-carta--cielo .nm-paginazione .prev,
.nm-carta--cielo .nm-paginazione .next,
.nm-carta--cielo .nm-paginazione__salto { background: color-mix(in srgb, var(--nm-ink-50) 88%, transparent); }

.nm-carta--cielo .nm-paginazione__salto {
	padding: 0.55em 1.1em;
	border-radius: var(--radius-button);
}


/* ============================================================
   «Libri su misura»: l'atelier — dal 3 ottobre 2026
   ============================================================

   La reference del committente: la hero sul cielo dei personalizzati (lo stage, come nelle
   vetrine) con i cinque passi dall'idea al libro, e la sezione dell'atelier che le sale sopra
   come la libreria, sul cielo pastello. Il meccanismo e' quello della vetrina, con le sue
   classi; qui c'e' solo cio' che la pagina ha di suo. */

/*
 * La hero e' alta quanto la finestra, e ci stanno due cose. In alto a sinistra le parole, con la
 * misura e le regole delle altre hero: il committente, il 7 ottobre 2026, «h1, h2 e cta devono
 * avere la stessa grandezza della hero libri da compilare». E la figura della reference — la
 * scrittrice, il filo di luci, le persone disegnate, i cinque passi —, che comincia dopo le parole
 * e arriva al margine destro della pagina: «allargando l'illustrazione con gli steps e spostandola
 * un po' a destra», lo stesso giorno.
 *
 * La figura e' disegnata in unita' della tela (inc/sumisura.php), e `--nm-u` e' quanto vale
 * un'unita' in pixel. Le sue parti si dispongono attorno alle parole: la scrittrice in basso a
 * sinistra, sotto il pulsante; il cielo — le persone disegnate, il filo, le lucine — dopo le
 * parole, con la coppia (`--nm-dopo-parole`); i passi, oggetti e parole, dalla scrittrice fino a
 * poco prima del bordo della finestra (`--nm-destra`): «allarga la sezione, i testi sono troppo a
 * capo», «devono essere piu' distesi», il committente il 7 ottobre. Cielo e passi si allungano
 * a destra quanto serve (`--nm-uk-cielo`, `--nm-uk-fila`): i pezzi si allontanano, e le loro
 * misure restano quelle di `--nm-u`. Fra la penna e il cielo il filo fa da ponte.
 *
 * `--nm-u` e' la piu' grande che rispetta quattro cose: la figura sta fra la testata e il fondo,
 * che resta libero (`--nm-fondo`); il primo oggetto comincia sotto la frase, che va fino in fondo
 * alla colonna; la scrittrice comincia sotto il pulsante; il cielo non si stringe.
 *
 * Il fondo delle parole (`--nm-parole-fondo`) si conta con le stesse misure che le dimensionano,
 * con due righe di titolo e tre di frase: quelle dei testi di partenza.
 */
.nm-misura__hero {
	justify-content: center;
	padding-top: var(--header-height);
	padding-bottom: clamp(0.4rem, 1.6vh, 1.2rem);
}

/*
 * In basso il cielo dei personalizzati si scioglie in una foschia chiara: li' la copre la
 * striscia «Come funziona?», qui ci stanno le parole dei passi, crema, che non si leggevano. Un
 * velo di notte la scurisce verso il fondo, come nella reference, dove sotto i passi il cielo e'
 * viola.
 */
.nm-misura__hero::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	height: 48%;
	pointer-events: none;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--nm-night-800) 78%, transparent) 0%,
		color-mix(in srgb, var(--nm-night-800) 46%, transparent) 45%,
		transparent 100%);
}

/* La luna del cielo, qui, cadeva sulla frase scritta a mano: la reference non ce l'ha. */
body:has(.nm-misura) .nm-luna { opacity: 0; }

.nm-misura__tela {
	--nm-tela-h: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--header-height) - clamp(0.4rem, 1.6vh, 1.2rem));

	/* Le parole: le misure di `.nm-vetrina__titolo` e `.nm-vetrina__lead`, scritte qui una volta
	   per le regole qui sotto e per il conto del loro fondo. La colonna e' un poco piu' larga di
	   quella delle vetrine perche' «a un libro unico.» resti su una riga. */
	--nm-colonna: min(var(--container-width) * 0.4, 35rem);
	--nm-c-occhiello: calc(clamp(0.72rem, 0.95vw, 0.9rem) * var(--nm-d));
	--nm-c-titolo: calc(var(--scale-h1) * var(--nm-d));
	--nm-c-frase: calc(clamp(1.05rem, 1.6vw, 1.32rem) * var(--nm-d));
	--nm-i-frase: calc(1.42 + 0.55 * var(--nm-d-spazio));
	--nm-s-occhiello: calc(var(--space-unit) * 0.9 * var(--nm-d-spazio));
	--nm-s-titolo: calc(var(--space-unit) * 0.8 * var(--nm-d-spazio));
	--nm-s-frase: calc(var(--space-unit) * 1.4 * var(--nm-d-spazio));
	--nm-parole-cima: 3.5vh;
	--nm-parole-fondo: calc(var(--nm-parole-cima) + var(--nm-c-occhiello) * 1.4 + var(--nm-s-occhiello) + var(--nm-c-titolo) * 2.16 + var(--nm-s-titolo) + var(--nm-c-frase) * var(--nm-i-frase) * 3 + var(--nm-s-frase) + 3.25rem);
	--nm-frase-fondo: calc(var(--nm-parole-fondo) - 3.25rem - var(--nm-s-frase));

	/* La figura. A destra va oltre il margine del contenuto, fino a poco prima del bordo della
	   finestra: al piu' 6rem oltre, sugli schermi molto larghi. */
	--nm-fondo: clamp(2.5rem, 8vh, 6rem);
	--nm-dopo-parole: calc(var(--nm-colonna) + var(--container-width) * 0.015);
	--nm-destra: calc(var(--container-width) + min((100vw - var(--container-width)) / 2 - max(1.5rem, 2vw), 6rem));
	--nm-u: min(
		(var(--nm-tela-h) - var(--nm-fondo)) / var(--nm-f-alta),
		(var(--nm-tela-h) - var(--nm-fondo) - var(--nm-frase-fondo) - 0.5rem) / (var(--nm-f-alta) - var(--nm-f-primo-y)),
		(var(--nm-tela-h) - var(--nm-fondo) - var(--nm-parole-fondo)) / (var(--nm-f-alta) - var(--nm-f-penna-y)),
		(var(--nm-destra) - var(--nm-dopo-parole)) / var(--nm-f-cielo)
	);
	--nm-uk-cielo: min((var(--nm-destra) - var(--nm-dopo-parole)) / var(--nm-f-cielo), var(--nm-u) * 1.35);
	/* La fila dei passi: dalla scrittrice, ma il primo oggetto mai prima della fine del pulsante
	   (largo 16rem con le sue parole di partenza). */
	--nm-uk-fila: min(
		(var(--nm-destra) - var(--nm-f-snodo) * var(--nm-u)) / var(--nm-f-coda),
		(var(--nm-destra) - 17rem - var(--nm-f-primo-w) * var(--nm-u) / 2) / var(--nm-f-primo-c),
		var(--nm-u) * 1.6
	);

	/*
	 * Dove comincia la figura: il piu' in alto che puo' («questa parte spostala piu' sopra cosi'
	 * da dare maggiore spazio in basso», 7 ottobre 2026) con il primo oggetto sotto la frase e la
	 * scrittrice sotto il pulsante. Quando le resta spazio (`--nm-agio`) lo divide a meta' sopra e
	 * sotto.
	 */
	--nm-agio: calc(var(--nm-tela-h) - var(--nm-fondo) - var(--nm-f-alta) * var(--nm-u));
	--nm-figura-cima: max(
		var(--nm-frase-fondo) + 0.5rem - var(--nm-f-primo-y) * var(--nm-u),
		var(--nm-parole-fondo) - var(--nm-f-penna-y) * var(--nm-u),
		var(--nm-agio) / 2
	);

	position: relative;
	z-index: 1;
	width: var(--container-width);
	height: var(--nm-tela-h);
	margin: 0 auto;
}

/* ---- le parole, in alto a sinistra ---- */

.nm-misura__parole {
	position: absolute;
	top: var(--nm-parole-cima);
	left: 0;
	z-index: 3;
	width: var(--nm-colonna);
}

.nm-misura__occhiello {
	margin: 0 0 var(--nm-s-occhiello);
	color: var(--nm-gold-300);
	font-size: var(--nm-c-occhiello);
	letter-spacing: 0.3em;
}

/* Come `.nm-vetrina__titolo`: corpo, peso, interlinea (quella dei titoli), margine. */
.nm-misura__titolo {
	margin: 0 0 var(--nm-s-titolo);
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: var(--nm-c-titolo);
	font-weight: 700;
	line-height: 1.08;
}

/* Come `.nm-vetrina__lead`, la frase grande delle vetrine: Montserrat 500, crema. Raccolta, non
   distesa su tutta la colonna: «questo non distenderlo» (7 ottobre 2026); tre righe a ogni
   altezza della finestra, perche' la misura segue il corpo. */
.nm-misura__testo {
	max-width: 26em;
	margin: 0 0 var(--nm-s-frase);
	color: var(--color-text);
	font-size: var(--nm-c-frase);
	font-weight: 500;
	line-height: var(--nm-i-frase);
	/* Mai una parola sola sull'ultima riga («te.»). */
	text-wrap: pretty;
}

/* ---- la figura: persone a filo, il filo di luci, i passi ---- */

.nm-misura__figura {
	position: absolute;
	top: var(--nm-figura-cima);
	right: 0;
	left: 0;
	z-index: 1;
	height: calc(var(--nm-f-alta) * var(--nm-u));
}

/* Le persone disegnate stanno nel cielo: il centro, contato dalla coppia, a distanze allungate;
   la misura e l'altezza, quelle della figura. */
.nm-misura__disegno {
	position: absolute;
	top: calc(var(--y) * var(--nm-u));
	left: calc(var(--nm-dopo-parole) + var(--dx) * var(--nm-uk-cielo) - var(--w) * var(--nm-u) / 2);
	width: calc(var(--w) * var(--nm-u));
	height: auto;
	pointer-events: none;
	opacity: 0.9;
	/* Il filo bianco della reference ha un alone appena accennato: senza, sul blu e' un tratto
	   di penna; con, e' luce. */
	filter: drop-shadow(0 0 calc(var(--nm-u) * 3) color-mix(in srgb, var(--nm-paper-50) 45%, transparent));
}

/* La scrittrice tiene la penna: in basso a sinistra, sotto il pulsante, al suo posto. */
.nm-misura__disegno--penna { left: calc(var(--dx) * var(--nm-u)); }

/* Il filo, in tre pezzi: dalla penna allo snodo, con la scrittrice; il ponte, che si allunga
   dallo snodo fino al cielo; il cielo. Gli SVG non tengono le proporzioni, e il tratto, che non
   deve allargarsi con loro, ha lo spessore della figura. */
.nm-misura__filo {
	position: absolute;
	top: 0;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.nm-misura__filo--penna {
	left: 0;
	width: calc(var(--nm-f-snodo) * var(--nm-u));
}

.nm-misura__filo--ponte {
	left: calc(var(--nm-f-snodo) * var(--nm-u));
	width: calc(var(--nm-dopo-parole) + var(--nm-f-ponte) * var(--nm-uk-cielo) - var(--nm-f-snodo) * var(--nm-u));
}

.nm-misura__filo--cielo {
	left: calc(var(--nm-dopo-parole) + var(--nm-f-ponte) * var(--nm-uk-cielo));
	width: calc((var(--nm-f-cielo) - var(--nm-f-ponte)) * var(--nm-uk-cielo));
}

.nm-misura__filo-linea,
.nm-misura__filo-alone {
	fill: none;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.nm-misura__filo-linea {
	stroke: var(--nm-gold-100);
	stroke-width: calc(var(--nm-u) * 1.4);
}

.nm-misura__filo-alone {
	stroke: var(--nm-gold-200);
	stroke-width: calc(var(--nm-u) * 7);
	opacity: 0.4;
}

/* La punta della penna e le lucine: un bagliore d'oro tondo, a qualunque larghezza. */
.nm-misura__punta,
.nm-misura__lucina {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(closest-side, var(--nm-gold-100), color-mix(in srgb, var(--nm-gold-200) 75%, transparent) 35%, transparent);
}

.nm-misura__punta {
	top: calc((var(--y) - 16) * var(--nm-u));
	left: calc((var(--dx) - 16) * var(--nm-u));
	width: calc(var(--nm-u) * 32);
	height: calc(var(--nm-u) * 32);
	opacity: 0.9;
}

.nm-misura__lucina {
	top: calc((var(--y) - 18) * var(--nm-u));
	left: calc(var(--nm-dopo-parole) + var(--dx) * var(--nm-uk-cielo) - var(--nm-u) * 18);
	width: calc(var(--nm-u) * 36);
	height: calc(var(--nm-u) * 36);
	/* Le lucine respirano, ognuna col suo tempo: tutte insieme sarebbero un lampeggio. */
	animation: nm-misura-lucina var(--d, 3s) ease-in-out var(--r, 0s) infinite alternate;
}

/* La prima, dove il filo lascia la penna, sta con la scrittrice. */
.nm-misura__lucina--penna { left: calc((var(--dx) - 18) * var(--nm-u)); }

/* Il cuore della lucina, chiaro. */
.nm-misura__lucina::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 29%;
	height: 29%;
	margin: auto;
	border-radius: 50%;
	background: var(--nm-paper-50);
}

@keyframes nm-misura-lucina {
	from { opacity: 0.55; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.nm-misura__lucina { animation: none; }
}

/*
 * I passi: una fila dalla scrittrice fino a poco prima del bordo della finestra. Le parole sono
 * colonne affiancate, larghe fino al filetto della colonna dopo e alte quanto la piu' lunga: i
 * filetti sono tutti uguali, e finiscono dove finiscono le parole. Ogni oggetto sta sopra le sue
 * parole, dove lo mette la tela.
 */
.nm-misura__passi {
	position: absolute;
	top: calc(var(--nm-f-righe) * var(--nm-u));
	left: calc(var(--nm-destra) - var(--nm-f-fila) * var(--nm-uk-fila));
	display: flex;
	column-gap: calc(var(--nm-u) * 8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nm-misura__passo {
	display: flex;
	flex: 0 0 auto;
	width: calc(var(--le) * var(--nm-uk-fila) - var(--nm-u) * 8);
}

.nm-misura__passo:first-child { width: calc(var(--le) * var(--nm-uk-fila) - var(--nm-u) * 22); }

.nm-misura__oggetto {
	position: absolute;
	top: calc((var(--y) - var(--nm-f-righe)) * var(--nm-u));
	left: calc(var(--dx) * var(--nm-uk-fila) - var(--w) * var(--nm-u) / 2);
	z-index: 2;
	width: calc(var(--w) * var(--nm-u));
	height: auto;
	filter: drop-shadow(0 calc(var(--nm-u) * 13.5) calc(var(--nm-u) * 17) color-mix(in srgb, var(--nm-night-900) 42%, transparent));
}

/* Sotto ogni oggetto il numero e le parole; fra un passo e l'altro un filetto d'oro, come nella
   reference: prima di tutti tranne il primo. */
.nm-misura__etichetta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: calc(var(--nm-u) * 8.6);
	padding-left: calc(var(--nm-u) * 14);
	border-left: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-300) 55%, transparent);
}

.nm-misura__passo:first-child .nm-misura__etichetta {
	padding-left: 0;
	border-left: 0;
}

.nm-misura__numero {
	color: var(--nm-gold-300);
	font-family: var(--font-display);
	font-size: calc(var(--nm-u) * 26);
	font-weight: 600;
	line-height: 1;
}

.nm-misura__nome {
	color: var(--color-text);
	font-size: max(0.7rem, var(--nm-u) * 14);
	font-weight: 500;
	letter-spacing: 0.07em;
	line-height: 1.45;
	text-transform: uppercase;
}

/* Sotto le parole, la descrizione del passo: la seconda reference del committente (7 ottobre
   2026). Un filo piu' grande delle parole — piu' piccola era «troppo piccola», due volte, e la
   sera ancora «ingrandisci questi testi», con numero e nome —, e un filo piu' tenue. */
.nm-misura__descrizione {
	color: color-mix(in srgb, var(--color-text) 90%, transparent);
	font-size: clamp(0.96rem, var(--nm-u) * 16.4, 1.1rem);
	font-weight: 400;
	line-height: 1.45;
	text-wrap: pretty;
}

/* Sugli schermi bassi o stretti la colonna piu' lunga arrivava al fondo della finestra (misurato
   a 1366 x 768 e a 1180 x 820): li' il corpo minimo scende di poco. */
@media (min-width: 901px) and (max-height: 790px), (min-width: 901px) and (max-width: 1279px) {
	.nm-misura__descrizione {
		font-size: clamp(0.88rem, var(--nm-u) * 15.2, 1.1rem);
		line-height: 1.42;
	}
}

/* ---- le frasi scritte a mano ---- */

.nm-misura__mano {
	margin: 0;
	font-family: var(--nm-font-mano);
	font-weight: 400;
	line-height: 1.2;
}

.nm-misura__mano--hero {
	position: absolute;
	top: calc(var(--y) * var(--nm-u));
	left: calc(var(--nm-dopo-parole) + var(--dx) * var(--nm-uk-cielo));
	color: var(--nm-gold-200);
	font-size: calc(var(--nm-u) * 25.7);
	white-space: nowrap;
	transform: rotate(-13deg);
	transform-origin: left top;
}

/* ---- la sezione dell'atelier ---- */

/* Il bagliore del pulsante che brilla esce del 40% per lato: con un pulsante largo quanto il
   modulo, sul telefono usciva dallo schermo e la pagina scorreva di lato. `clip` e non
   `hidden`: non fa della sezione un riquadro che scorre, e il cielo `sticky` dentro resta fermo. */
.nm-misura__atelier { overflow-x: clip; }

.nm-misura__interno {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 41fr);
	column-gap: clamp(1.4rem, 4.4vw, 4.6rem);
	align-items: start;
	padding-bottom: clamp(2rem, 6vh, 4.5rem);
}

.nm-misura__racconto,
.nm-misura__scheda { color: var(--nm-ink-800); }

.nm-misura__atelier .nm-misura__occhiello {
	margin-bottom: 0.9rem;
	color: var(--nm-gold-ink);
	font-size: clamp(0.66rem, 0.86vw, 0.78rem);
}

.nm-misura__sezione-titolo {
	margin: 0 0 1.3rem;
	color: var(--nm-logo-blu);
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 2.7vw, 2.9rem);
	font-weight: 600;
	line-height: 1.08;
}

.nm-misura__prosa p {
	margin: 0 0 0.85rem;
	font-size: clamp(0.98rem, 1.15vw, 1.12rem);
	line-height: 1.55;
}

.nm-misura__prosa strong {
	color: var(--nm-logo-blu);
	font-weight: 600;
}

/* I progetti al mese e il prezzo: due blocchi divisi da un filetto d'oro. Il calendario che stava
   accanto ai progetti l'ha tolto il committente (8 ottobre 2026). */
/* Affiancati, mai uno sotto l'altro con il filetto appeso: se lo spazio manca va a capo il testo
   dei progetti («Lista d'attesa aperta» e' piu' lunga di «5 progetti al mese»). Sotto i 1280 px
   stanno uno sopra l'altro, senza filetto (qui sotto). */
.nm-misura__dati {
	display: flex;
	align-items: stretch;
	gap: 1.4rem clamp(1.4rem, 3vw, 3rem);
	margin: clamp(1.4rem, 4vh, 2.6rem) 0 0;
}

.nm-misura__dato {
	display: flex;
	flex: 0 1 auto;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	margin: 0;
	padding-right: clamp(1.4rem, 3vw, 3rem);
	border-right: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent);
	color: var(--nm-gold-ink);
}

.nm-misura__dato:last-child { padding-right: 0; border-right: 0; }

.nm-misura__dato-testo {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nm-misura__dato-sopra { font-size: 0.7rem; }
.nm-misura__dato-grande { font-size: clamp(0.92rem, 1.25vw, 1.15rem); line-height: 1.35; }

/* «progetti al mese» su una riga, sotto il numero: va a capo solo dove va a capo chi scrive. */
.nm-misura__dato-numero + .nm-misura__dato-grande { white-space: nowrap; }

.nm-misura__prezzo {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0;
}

@media (max-width: 1279px) {
	.nm-misura__dati { flex-direction: column; }
	.nm-misura__dato { padding-right: 0; border-right: 0; }
}

.nm-misura__prezzo-sopra { color: var(--nm-gold-ink); font-size: 0.68rem; }

/* Il prezzo e il numero dei progetti al mese, da solo, grande come lui (7 ottobre 2026). */
.nm-misura__prezzo-cifra,
.nm-misura__dato-numero {
	color: var(--nm-gold-graphic);
	font-family: var(--font-display);
	font-size: clamp(2.6rem, 4.4vw, 4.2rem);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
	text-transform: none;
}

/* Le cifre di Playfair sono antiche: 1, 0 e 5 cominciano all'altezza delle minuscole, molto sotto
   la cima della riga, e sembravano lontane dalle parole sopra («leggermente più in alto, vicino
   le label», 7 ottobre 2026). Salgono di un quarto del loro corpo. */
.nm-misura__prezzo-cifra { margin-top: -0.25em; }
.nm-misura__dato-numero { margin: -0.25em 0 0.15rem; }

/*
 * Il prezzo e il numero nell'oro di «L’atelier», con un filo d'oro grafico sul contorno delle
 * cifre, come «per te» nel titolo della libreria: scelto dal committente fra quattro prove, il 7
 * ottobre 2026. L'oro di «unico.» chiesto prima, pieno, sul rosa della sezione spariva (contrasto
 * 1,05:1). Dove il testo non si ritaglia resta l'oro grafico pieno.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nm-misura__prezzo-cifra,
	.nm-misura__dato-numero {
		background-image: var(--nm-oro-smalto);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-stroke: 1.2px var(--nm-gold-graphic);
	}
}

.nm-misura__prezzo-testo { font-size: clamp(0.92rem, 1.1vw, 1.05rem); line-height: 1.45; }

/* ---- il modulo: un vetro sul pastello ---- */

.nm-misura__scheda {
	position: relative;
	padding: clamp(1.4rem, 2.6vw, 2.5rem);
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-pastello-crema) 85%, transparent);
	border-radius: clamp(16px, 1.6vw, 24px);
	background: color-mix(in srgb, var(--nm-pastello-crema) 38%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow:
		0 30px 60px -42px color-mix(in srgb, var(--nm-night-900) 60%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--nm-gold-200) 22%, transparent);
	scroll-margin-top: calc(var(--header-height) + 1rem);
}

/* «Il modulo» nel testo accanto lo chiama (misura.js): sul computer il modulo si fa avanti —
   sale di 12 px e cresce del 5%, con l'ombra piu' lunga e un anello d'oro — e torna al suo posto
   con un piccolo rimbalzo, «come se dicesse "eccomi"» (7 ottobre 2026). Con «Riduci movimento»,
   solo l'anello d'oro che si accende e si spegne. */
@keyframes nm-misura-eccomi {
	30% {
		transform: translateY(-12px) scale(1.05);
		box-shadow:
			0 56px 90px -40px color-mix(in srgb, var(--nm-night-900) 72%, transparent),
			inset 0 0 0 1px color-mix(in srgb, var(--nm-gold-200) 45%, transparent),
			0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 70%, transparent),
			0 0 28px color-mix(in srgb, var(--nm-gold-300) 45%, transparent);
	}
	55% { transform: translateY(2px) scale(0.99); }
	75% { transform: translateY(-3px) scale(1.012); }
}

@keyframes nm-misura-eccomi-calmo {
	40% {
		box-shadow:
			0 30px 60px -42px color-mix(in srgb, var(--nm-night-900) 60%, transparent),
			inset 0 0 0 1px color-mix(in srgb, var(--nm-gold-200) 45%, transparent),
			0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 70%, transparent),
			0 0 28px color-mix(in srgb, var(--nm-gold-300) 45%, transparent);
	}
}

.nm-misura__scheda--eccomi { animation: nm-misura-eccomi 950ms var(--motion-ease); }

/* Il bagliore non e' movimento: la regola generale, che spegne ogni animazione, qui si piega. */
@media (prefers-reduced-motion: reduce) {
	.nm-misura__scheda--eccomi {
		animation-name: nm-misura-eccomi-calmo;
		animation-duration: 700ms !important;
	}
}

/* Il collegamento al modulo, nei testi della sezione (`[[…]]`). */
.nm-misura__al-modulo {
	color: var(--nm-logo-blu);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--nm-gold-graphic) 70%, transparent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-misura__al-modulo:hover,
.nm-misura__al-modulo:focus-visible { text-decoration-color: var(--nm-gold-graphic); }

.nm-misura__scheda-titolo {
	margin: 0 0 0.6rem;
	color: var(--nm-logo-blu);
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3vw, 2.9rem);
	font-weight: 600;
	line-height: 1.05;
}

.nm-misura__scheda-testo {
	margin: 0 0 1.2rem;
	font-size: clamp(0.92rem, 1.05vw, 1.02rem);
	line-height: 1.5;
}

.nm-misura__esito {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-graphic) 45%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--nm-pastello-crema) 75%, transparent);
	color: var(--nm-ink-900);
	font-size: 0.95rem;
	line-height: 1.5;
}

.nm-misura__modulo { margin: 0; }

.nm-misura__campo {
	position: relative;
	margin: 0 0 0.65rem;
}

.nm-misura__input {
	display: block;
	width: 100%;
	padding: 1.3rem 1rem 0.5rem;
	border: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-pastello-nebbia) 70%, transparent);
	border-radius: 10px;
	background: color-mix(in srgb, var(--nm-pastello-crema) 86%, transparent);
	color: var(--nm-ink-900);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	transition: border-color var(--motion-duration-ui) var(--motion-ease), box-shadow var(--motion-duration-ui) var(--motion-ease);
}

.nm-misura__input:focus {
	outline: none;
	border-color: var(--nm-gold-graphic);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-gold-200) 40%, transparent);
}

.nm-misura__input[aria-invalid] { border-color: var(--nm-gold-ink); }

/* L'etichetta sta nel campo, dove la reference ha la parola, e sale piccola appena si scrive:
   e' un'etichetta vera, non un segnaposto che sparisce. */
.nm-misura__etichetta-campo {
	position: absolute;
	left: 1rem;
	top: 0.95rem;
	color: color-mix(in srgb, var(--nm-ink-900) 70%, transparent);
	font-size: 0.86rem;
	line-height: 1.2;
	pointer-events: none;
	transform-origin: left top;
	transition: transform var(--motion-duration-ui) var(--motion-ease);
}

.nm-misura__input:focus + .nm-misura__etichetta-campo,
.nm-misura__input:not(:placeholder-shown) + .nm-misura__etichetta-campo { transform: translateY(-0.62rem) scale(0.78); }

.nm-misura__serve { color: var(--nm-gold-ink); }

.nm-misura__campo--scelta .nm-misura__input {
	padding: 0.95rem 2.8rem 0.95rem 1rem;
	-webkit-appearance: none;
	appearance: none;
	cursor: var(--nm-cursore-attivo);
}

.nm-misura__freccia {
	position: absolute;
	right: 1rem;
	top: 1.35rem;
	width: 0.9rem;
	color: var(--nm-ink-800);
	pointer-events: none;
}

.nm-misura__freccia svg { display: block; width: 100%; height: auto; }

.nm-misura__campo--lungo .nm-misura__input {
	min-height: 7.5rem;
	resize: vertical;
}

.nm-misura__consenso {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: color-mix(in srgb, var(--nm-ink-900) 78%, transparent);
	font-size: 0.8rem;
	line-height: 1.45;
}

.nm-misura__consenso input {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.1rem 0 0;
	accent-color: var(--nm-gold-500);
}

.nm-misura__consenso a { color: var(--nm-logo-blu); }

.nm-misura__errore {
	display: block;
	margin-top: 0.3rem;
	color: var(--nm-gold-ink);
	font-size: 0.76rem;
}

.nm-misura__errore:empty { display: none; }

.nm-misura__azione { margin: 1.1rem 0 0; }

/* Il pulsante largo quanto il modulo, come nella reference; la lingua resta quella del sito. */
.nm-misura__azione > .nm-magia { display: flex; width: 100%; }
.nm-misura__invia { width: 100%; justify-content: center; }

.nm-misura__nota {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 1.1rem 0 0;
	color: color-mix(in srgb, var(--nm-ink-900) 75%, transparent);
	font-size: 0.74rem;
	line-height: 1.5;
}

.nm-misura__nota-icona { flex: 0 0 auto; width: 1.4rem; color: var(--nm-ink-800); }
.nm-misura__nota-icona svg { display: block; width: 100%; height: auto; }

/* Il campo per i robot: fuori dallo schermo, non nascosto — un campo nascosto i robot lo
   saltano, uno fuori dallo schermo no. */
.nm-misura__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

/* ---- sotto i 900 px: la tela si scioglie in una colonna ---- */

@media (max-width: 900px) {
	.nm-misura__hero { padding-top: calc(var(--header-height) + var(--space-unit) * 2); }

	/* La hero scorre sul cielo fermo: le parole dei passi passano sulla foschia chiara in fondo
	   allo schermo. Qui il velo di notte copre tutta la hero, piu' fitto dove ci sono i passi. */
	.nm-misura__hero::before {
		inset: 0;
		height: auto;
		background: linear-gradient(to bottom,
			transparent 0%,
			color-mix(in srgb, var(--nm-night-800) 55%, transparent) 28%,
			color-mix(in srgb, var(--nm-night-800) 70%, transparent) 100%);
	}

	.nm-misura__tela {
		/* L'unita' della figura qui serve solo alle ombre degli oggetti. */
		--nm-u: calc(var(--container-width) / var(--nm-f-largo));

		height: auto;
	}

	.nm-misura__parole { position: static; width: auto; }
	.nm-misura__occhiello { margin-bottom: 0.8rem; font-size: 0.68rem; }
	.nm-misura__titolo { margin-bottom: 1rem; font-size: clamp(2.3rem, 9.4vw, 3.4rem); }
	.nm-misura__testo { max-width: none; margin-bottom: 1.4rem; font-size: calc(clamp(1.2rem, 2.24vw, 1.8rem) * var(--nm-d) * 1.15); }

	/* La figura scende quanto basta perche' la scrittrice, che le sta sopra, cominci sotto la
	   frase e finisca 0,75rem prima del primo passo: e' alta 1,19 volte la sua larghezza, e il
	   pulsante con il suo margine fa 3,5rem. */
	.nm-misura__figura {
		position: relative;
		inset: auto;
		height: auto;
		margin-top: max(clamp(2rem, 6vh, 3rem), min(38%, 9.5rem) * 1.19 - 3.5rem + 1.25rem);
	}

	/* Le persone e il filo sono la composizione della tela: in colonna non hanno dove stare. */
	.nm-misura__disegno,
	.nm-misura__filo,
	.nm-misura__punta,
	.nm-misura__lucina { display: none; }

	/* La scrittrice si': a destra, accanto al pulsante, con la scrivania appena sotto — come
	   nella reference del committente per il telefono (7 ottobre 2026). Sta sopra la figura,
	   appoggiata al suo bordo. */
	.nm-misura__disegno.nm-misura__disegno--penna {
		display: block;
		top: auto;
		right: 0;
		bottom: calc(100% + 0.75rem);
		left: auto;
		width: min(38%, 9.5rem);
	}

	.nm-misura__passi {
		position: static;
		display: grid;
		gap: 1.8rem;
	}

	.nm-misura__passo,
	.nm-misura__passo:first-child {
		display: grid;
		grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
		align-items: center;
		gap: 1.2rem;
		width: auto;
	}

	.nm-misura__oggetto { position: static; width: 100%; }

	.nm-misura__etichetta,
	.nm-misura__passo:first-child .nm-misura__etichetta {
		gap: 0.5rem;
		padding-left: 1rem;
		border-left: var(--nm-rule-width) solid color-mix(in srgb, var(--nm-gold-300) 55%, transparent);
	}

	.nm-misura__numero { font-size: 1.8rem; }
	.nm-misura__nome { font-size: 0.78rem; }
	.nm-misura__descrizione { font-size: 0.86rem; }

	.nm-misura__mano--hero {
		position: static;
		margin: 2.2rem 0 0;
		font-size: 1.7rem;
		text-align: center;
		white-space: normal;
		transform: rotate(-6deg);
		transform-origin: center;
	}

	.nm-misura__interno {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.6rem;
	}

}

/*
 * Sotto i 390 px «Torna alla home», il pulsante della testata in questa pagina, arriva sopra
 * l'occhiello «Atelier Noomray»: 4 px fra loro, e la fine della parola sotto l'angolo del
 * pulsante (misurato a 360 e a 375, il 17 ottobre 2026). «L’atelier», piu' corto, gli stava a
 * destra. Le parole scendono di 0,75rem; da 390 in su il pulsante sta a destra della parola, e
 * la pagina resta com'era.
 */
@media (max-width: 389px) {
	.nm-misura__hero { padding-top: calc(var(--header-height) + var(--space-unit) * 2 + 0.75rem); }
}