/* ============================================================
   Carta: grana e vignettatura
   ============================================================
   La grana è una tessera 192x192 sintetizzata sulla statistica misurata nel
   riferimento (deviazione 3,96 livelli, energia quasi tutta a 1-2 px).
   La vignettatura è un gradiente separato: così non si ripete con la grana e
   resta legata alla dimensione della superficie, non a quella della tessera. */

.nm-paper {
	position: relative;
	background-color: var(--nm-paper-100);
	isolation: isolate;
}

.nm-paper::before,
.nm-paper::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.nm-paper::before {
	background: radial-gradient(125% 105% at 50% 38%, transparent 42%, var(--nm-paper-300) 128%);
	mix-blend-mode: multiply;
	opacity: 0.8;
}

.nm-paper::after {
	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);
}

/*
 * Su una scena di carta la grana copre tutta la pagina, non una striscia.
 *
 * Prima la carta stava solo dietro le card: si vedeva il salto di materia fra quella
 * fascia e il resto, e le costellazioni del cielo venivano tagliate di netto proprio sul
 * suo bordo — una mezza costellazione nell'area dell'header. Portandola sul fondo dello
 * stage la pagina è di un materiale solo, e il cielo, che sta sopra, resta intero.
 *
 * Solo sul crema: la grana su una scena notturna sarebbe carta dove non c'è carta.
 */
/*
 * Il cielo non è una campitura.
 *
 * Accanto alla home, che è una fotografia, un blu pieno si legge come superficie
 * stampata. Il cielo vero non è piatto: misurato su una zona pulita dell'artwork, la sua
 * luminanza sta fra 7,8 e 12,1 — poco più di due livelli — ma quei due livelli sono tutta
 * la differenza. Qui si rimettono in due strati: una nebulosità larga, e la grana
 * sintetizzata sulla statistica misurata (docs/strumenti/genera-grana-cielo.php).
 *
 * Tutti e due in `screen`, cioè additivi: su un fondo quasi nero si può solo aggiungere
 * luce, e infatti un cielo è fatto di pulviscolo chiaro, non di macchie scure.
 */
/*
 * Il cielo delle pagine che non sono la Home: l'artwork della Home con il primo piano tolto.
 *
 * `cover` e ancorato in basso: la foschia calda deve restare in fondo alla finestra a
 * qualunque proporzione, perche' e' quella a dare il peso alla scena. Ancorandolo al centro,
 * su una finestra bassa la foschia usciva sotto e restava solo il blu.
 */
.nm-stage__cielo {
	position: absolute;
	inset: 0;
	background-image: url("../img/cielo.webp");
	background-size: cover;
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

/* In Home c'e' gia' l'artwork vero, e questo lo coprirebbe. Sulle scene di carta il cielo
   non c'entra niente. */
body.nm-scena-home-hero .nm-stage__cielo,
[data-scene-theme="cream"] .nm-stage__cielo { display: none; }

/*
 * Dove c'e' il cielo fotografico, la costellazione disegnata sparisce.
 *
 * Il cielo le sue stelle ce le ha gia', e due cieli sovrapposti non fanno un cielo piu'
 * ricco: fanno un disegno appoggiato su una fotografia. Le linee che uniscono le stelle
 * passavano per giunta sopra il pulsante e sopra i tips, e si leggevano come graffi.
 *
 * In Home resta: li' sotto c'e' l'artwork, e la costellazione e' parte di quella scena.
 */
html:not([data-scene-theme="cream"]) body:not(.nm-scena-home-hero) .nm-constellation { display: none; }

[data-scene-theme="dark"] .nm-stage__paint { isolation: isolate; }

[data-scene-theme="dark"] .nm-stage__paint::before,
[data-scene-theme="dark"] .nm-stage__paint::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}

/*
 * La vignettatura scurisce i bordi invece di schiarire il centro.
 *
 * Prima era additiva, e il risultato è che tutta la pagina si alzava di parecchi livelli:
 * il fondo diventava più chiaro del colore del tema, e ogni cosa dipinta con quel colore —
 * i veli, gli scrim — si leggeva come un rettangolo scuro appoggiato sopra. Scurendo i
 * bordi invece, il centro resta esattamente il colore che deve essere.
 */
[data-scene-theme="dark"] .nm-stage__paint::before {
	background: radial-gradient(125% 100% at 50% 42%, transparent 34%, var(--nm-night-900) 118%);
	mix-blend-mode: multiply;
	opacity: 0.85;
}

/* La grana: si vede, come si vede quella della carta. È la differenza fra un cielo e una
   campitura, e a occhio la si nota solo quando manca. */
[data-scene-theme="dark"] .nm-stage__paint::after {
	background-image: url("../img/sky-grain.webp");
	background-size: var(--nm-grain-size) var(--nm-grain-size);
	opacity: 0.16;
}

[data-scene-theme="cream"] .nm-stage__paint { isolation: isolate; }

[data-scene-theme="cream"] .nm-stage__paint::before,
[data-scene-theme="cream"] .nm-stage__paint::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

[data-scene-theme="cream"] .nm-stage__paint::before {
	background: radial-gradient(125% 105% at 50% 38%, transparent 42%, var(--nm-paper-300) 128%);
	mix-blend-mode: multiply;
	opacity: 0.8;
}

[data-scene-theme="cream"] .nm-stage__paint::after {
	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);
}


/* ============================================================
   Cielo: costellazioni e polvere dorata
   ============================================================
   La massa statica è disegnata; solo poche stelle sono animate, e lo sono in CSS.
   Niente canvas e niente requestAnimationFrame: il browser sospende da solo le
   animazioni CSS a scheda nascosta, quindi non serve tenere la contabilità di
   visibilitychange, che è codice in più e superficie di bug in più. */

.nm-sky {
	position: absolute;
	inset: 0;
	color: var(--nm-gold-300);
	pointer-events: none;
}

/*
 * Sulle scene di carta si spegne quello che è notte.
 *
 * Luna, costellazioni e stelle sono oggetti del cielo: su un fondo di carta non hanno
 * significato, e non avrebbero nemmeno contrasto — misurato, l'oro in luce sul crema sta a
 * 1,01, cioè è lì e non si vede. La polvere invece resta, ma cambia natura: da pulviscolo
 * che sale diventa pagliuzza dentro la carta.
 */
[data-scene-theme="cream"] .nm-constellation,
[data-scene-theme="cream"] .nm-luna,
[data-scene-theme="cream"] .nm-raggio,
[data-scene-theme="cream"] .nm-star { display: none; }

/*
 * Le costellazioni sono quelle dell'artwork, non un disegno che gli somiglia.
 *
 * Ridisegnarle con la stessa grammatica non bastava: i fili veri non collegano i punti che
 * collegherebbe un tracciato regolare, e la differenza si vede a colpo d'occhio — da una
 * parte luce, dall'altra un diagramma. Il bagliore, il raggio delle stelle e lo spessore
 * variabile dei fili sono gia' dentro l'immagine: qui non si aggiunge niente, si colloca.
 */
.nm-constellation {
	position: absolute;
	width: var(--w, 20%);
	left: var(--x, 50%);
	top: var(--y, 20%);
	opacity: var(--o, 0.5);
	transform: var(--specchio, none);
	filter: blur(var(--lontano, 0px));
}

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

@keyframes nm-pulse {
	from { opacity: 0.45; }
	to   { opacity: 1; }
}

/*
 * Le stelle piu' luminose hanno il raggio a croce, come nella fotografia della home: e'
 * quello che distingue una stella da un punto. Due filetti incrociati, non un'immagine —
 * a questa dimensione un asset sarebbe sprecato.
 */
.nm-star--marcata {
	box-shadow:
		0 0 calc(var(--s) * 1.8) color-mix(in srgb, var(--nm-gold-100) 90%, transparent),
		0 0 calc(var(--s) * 5) color-mix(in srgb, var(--nm-gold-300) 50%, transparent);
}

.nm-star--marcata::before,
.nm-star--marcata::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: linear-gradient(to right, transparent, var(--nm-gold-100), transparent);
	opacity: 0.75;
}

.nm-star--marcata::before {
	width: calc(var(--s) * 7);
	height: 1px;
	transform: translate(-50%, -50%);
}

.nm-star--marcata::after {
	width: 1px;
	height: calc(var(--s) * 7);
	transform: translate(-50%, -50%);
	background: linear-gradient(to bottom, transparent, var(--nm-gold-100), transparent);
}

.nm-star {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: var(--nm-gold-100);
	opacity: var(--o);
	box-shadow: 0 0 calc(var(--s) * 2.6) color-mix(in srgb, var(--nm-gold-100) 45%, transparent);
	animation: nm-twinkle var(--d) var(--motion-ease) var(--delay) infinite alternate;
}

@keyframes nm-twinkle {
	from { opacity: calc(var(--o) * 0.3); transform: scale(0.8); }
	to   { opacity: var(--o); transform: scale(1); }
}

/* Densità ridotta su schermi piccoli, come chiede il §3 del brief. */
@media (max-width: 640px) {
	.nm-star:nth-child(n + 13) { display: none; }
	.nm-constellation:nth-of-type(n + 3) { display: none; }
}

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

/* ============================================================
   Logo
   ============================================================
   Non è un'immagine: è testo in Playfair Display con la seconda "o" in oro e la
   piuma disegnata in SVG che ne esce. Scala perfettamente, resta selezionabile e
   gli screen reader leggono il nome. */

.nm-logo {
	display: inline-flex;
	flex-direction: column;
	gap: 0.2em;
	text-decoration: none;
	color: var(--color-heading);
}

.nm-logo__marchio {
	position: relative;
	display: block;
	/* Larghezza del marchio: il logotipo del riferimento occupa il 16,9% della pagina,
	   ma l'immagine fornita comprende anche la piuma e quindi e' piu' alta. Il tetto
	   tiene l'header compatto senza rimpicciolire troppo la parola. */
	width: clamp(118px, 11vw, 168px);
}

/*
 * Due varianti sovrapposte: quella non attiva esce dal flusso con display:none, cosi'
 * non occupa spazio e non va nemmeno decodificata.
 */
.nm-logo__img { display: block; width: 100%; height: auto; }
.nm-logo__img--chiaro { display: none; }

[data-scene-theme="cream"] .nm-logo__img--scuro { display: none; }
[data-scene-theme="cream"] .nm-logo__img--chiaro { display: block; }

.nm-logo__payoff {
	font-family: var(--font-body);
	font-weight: 400;
	/* Corpo misurato: ~12 px su pagina 1024 = 1,22% della larghezza. */
	font-size: clamp(0.55rem, 1.22vw, 0.78rem);
	letter-spacing: var(--nm-tracking-payoff);
	text-transform: uppercase;
	color: var(--nm-gold-500);
	line-height: 1.55;
}

/* Su carta l'oro quasi spento del payoff sparirebbe: li' serve inchiostro. */
[data-scene-theme="cream"] .nm-logo__payoff { color: var(--nm-gold-ink); }

/* ============================================================
   Header
   ============================================================ */

/*
 * Tre colonne, non tre blocchi in fila.
 *
 * Con `space-between` le voci finivano al centro dello spazio avanzato fra logo e CTA,
 * che non e' il centro dell'header: il logo e' largo, le azioni no, e lo scarto si vede.
 * Le due colonne laterali sono `1fr` e quindi identiche, cosi' la colonna di mezzo cade
 * esattamente in mezzo. Se un giorno una delle due crescesse oltre la sua meta', la
 * griglia sposterebbe il centro invece di far sovrapporre le cose.
 *
 * Le colonne sono dichiarate una per una perche' senza menu assegnato la fascia ha due
 * figli soli, e le azioni devono restare comunque a destra.
 */
.nm-header {
	/* Il peso delle voci del menu, di «Menu» e di «L’atelier», accanto a «Menu» o nel pannello
	   del telefono: lo stesso, l'ha chiesto il committente. Era 600; il 6 ottobre 2026 «piu'
	   alto», con quello dei pulsanti. */
	--nm-nav-peso: 700;
	position: relative;
	/* Sopra il velo del menu aperto (21), che sta sopra il piede (20): aperto il menu, la
	   testata e' l'unica cosa accesa. */
	z-index: 22;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: calc(var(--space-unit) * 3);
	width: var(--container-width);
	margin-inline: auto;
	min-height: var(--header-height);
	padding-block: calc(var(--space-unit) * 1.2);
}

.nm-header > .nm-logo { grid-column: 1; justify-self: start; }
.nm-header .nm-nav { grid-column: 2; justify-self: center; display: flex; min-width: 0; }

/* Interruttore e CTA sono la stessa zona dell'header, non due estremi: stanno vicini,
   con un varco molto piu' stretto di quello che separa le tre colonne. */
.nm-header__azioni {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: calc(var(--space-unit) * 2);
}

.nm-header--compact { min-height: var(--nm-header-height-compact); }

/*
 * «L’atelier», accanto a «Menu»: il bottone d'oro (`.nm-button--oro`, piu' giu'), un po' piu'
 * piccolo, su una riga. Sotto i 900 px sta sotto «Menu» (piu' giu').
 */
.nm-header__cta {
	padding: 0.85em 1.3em;
	font-size: clamp(0.62rem, 0.78vw, 0.72rem);
	font-weight: var(--nm-nav-peso);
	white-space: nowrap;
}

/*
 * Il velo del menu aperto.
 *
 * «Quando si apre il menu bisogna dare focus al menu», ha chiesto il committente: la
 * pagina si spegne — la notte al 64% e una sfocatura, come il pannello sul telefono — e
 * dall'alto, dove stanno le voci, scende un chiarore d'oro. Resta accesa la testata, che
 * sta sopra. Copre anche il piede e la chat. Sul telefono il velo e' il pannello, e
 * questo non c'e'.
 *
 * Lo apre menu.js scrivendo `data-nm-menu="aperto"` sulla radice; chiudendo la scritta
 * diventa «chiude» finche' il velo non e' sparito, perche' fino ad allora la testata
 * resta nei colori della notte (piu' sotto).
 */
.nm-menu-velo {
	position: fixed;
	inset: 0;
	z-index: 21;
	pointer-events: none;
	background:
		radial-gradient(ellipse 56% 34% at 50% 0%,
			color-mix(in srgb, var(--nm-gold-300) 22%, transparent) 0%,
			color-mix(in srgb, var(--nm-gold-400) 8%, transparent) 55%,
			transparent 100%),
		color-mix(in srgb, var(--nm-night-900) 64%, transparent);
	-webkit-backdrop-filter: blur(9px) saturate(0.82);
	backdrop-filter: blur(9px) saturate(0.82);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 420ms var(--motion-ease),
		visibility 0s linear 420ms;
}

[data-nm-menu="aperto"] .nm-menu-velo {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 460ms var(--motion-ease),
		visibility 0s linear 0s;
}

/* Sulla carta il velo e' piu' pieno: la notte al 64% sulla carta chiara e' un grigio, non
   una notte — la stessa cosa che si era vista con il pannello sul telefono. */
[data-scene-theme="cream"] .nm-menu-velo {
	background:
		radial-gradient(ellipse 56% 34% at 50% 0%,
			color-mix(in srgb, var(--nm-gold-300) 22%, transparent) 0%,
			color-mix(in srgb, var(--nm-gold-400) 8%, transparent) 55%,
			transparent 100%),
		color-mix(in srgb, var(--nm-night-900) 88%, transparent);
}

@media (max-width: 900px) {
	.nm-menu-velo { display: none; }
}

/*
 * La cornice attorno al menu aperto.
 *
 * Non e' una fascia sull'header: avvolge le sole voci, con un filetto d'oro e appena un
 * velo di champagne. La prima versione era una banda scura a tutta larghezza, e faceva
 * quello che doveva fare — le voci si leggevano — ma sembrava un fondale calato sopra la
 * fotografia.
 *
 * Quello che rende leggibile qui non e' il buio, e' la sfocatura: dietro le voci passano
 * le polaroid, e un dettaglio nitido sotto una lettera compete con la lettera. Sfocato
 * diventa una macchia morbida, e le parole tornano davanti. Senza `backdrop-filter` resta
 * il velo, che da solo e' poco: e' un ripiego, non la soluzione.
 *
 * Sta sulla barra e non sull'header perche' la misura deve venirle dalle voci: l'header
 * cambia altezza fra la Home e le altre pagine, la fila di voci no.
 */
.nm-nav {
	position: relative;
}

.nm-nav::before,
.nm-nav__list::before {
	content: "";
	position: absolute;
	inset: -0.72em -1.5em;
	z-index: -1;
	pointer-events: none;
	/* Lo stesso raggio del pulsante, dal suo token: se cambia lui cambia anche questa. */
	border-radius: var(--radius-button);
	border: 1px solid color-mix(in srgb, var(--nm-gold-300) 34%, transparent);
	background: color-mix(in srgb, var(--nm-ink-200) 3%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(0.86);
	backdrop-filter: blur(14px) saturate(0.86);
	box-shadow:
		0 0 18px color-mix(in srgb, var(--nm-gold-300) 12%, transparent),
		inset 0 0 22px color-mix(in srgb, var(--nm-gold-200) 7%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: scale(0.97);
	transition:
		opacity 380ms var(--motion-ease),
		transform 380ms var(--motion-ease),
		visibility 0s linear 380ms;
}

/*
 * Il filetto non e' fermo: una luce lo percorre, la stessa del bottone. E' il «magico» del
 * bordo, e costa un elemento in piu' perche' il bordo del riquadro sopra e' gia' occupato.
 */
.nm-nav::after,
.nm-nav__list::after {
	content: "";
	position: absolute;
	inset: -0.72em -1.5em;
	z-index: -1;
	pointer-events: none;
	padding: 1px;
	/* Lo stesso raggio del pulsante, dal suo token: se cambia lui cambia anche questa. */
	border-radius: var(--radius-button);
	background: linear-gradient(100deg,
		transparent 30%,
		color-mix(in srgb, var(--nm-gold-200) 70%, transparent) 44%,
		var(--nm-gold-100) 50%,
		color-mix(in srgb, var(--nm-gold-200) 70%, transparent) 56%,
		transparent 70%);
	background-size: 320% 100%;
	background-repeat: no-repeat;
	-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;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 380ms var(--motion-ease),
		visibility 0s linear 380ms;
	animation: nm-magia-corsa 3.8s linear infinite;
}

.nm-nav[data-open="true"]::before,
.nm-nav[data-open="true"]::after,
.nm-nav[data-open="true"] .nm-nav__list::before,
.nm-nav[data-open="true"] .nm-nav__list::after {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 460ms var(--motion-ease),
		transform 460ms var(--motion-ease),
		visibility 0s linear;
}

/*
 * La magia del menu aperto: le stesse cose di «Crea il tuo libro», attorno alle voci.
 * Un alone d'oro che respira dietro la cornice — piu' largo di lei, sfocato, fuori tempo
 * con il filo che la percorre — e otto faville che si staccano e salgono, in punti fissi
 * scritti nel markup. Partono quando il menu si apre: chiuso, non gira niente.
 */
/* L'alone sta sotto la cornice; faville e comete sopra, dove la sfocatura della cornice
   non le ammorbidisce. Sono due scatole per questo. */
.nm-nav__magia,
.nm-nav__alone {
	position: absolute;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 380ms var(--motion-ease),
		visibility 0s linear 380ms;
}

.nm-nav[data-open="true"] .nm-nav__magia,
.nm-nav[data-open="true"] .nm-nav__alone {
	opacity: 1;
	visibility: visible;
	transition:
		opacity 520ms var(--motion-ease),
		visibility 0s linear 0s;
}

/* La scatola delle faville e delle comete e' la cornice: le comete ne fanno il giro. */
.nm-nav__magia {
	inset: -0.72em -1.5em;
	z-index: 1;
}

.nm-nav__alone {
	inset: -4.2rem -5rem;
	z-index: -2;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--nm-gold-200) 52%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 24%, transparent) 40%,
		color-mix(in srgb, var(--nm-gold-400) 8%, transparent) 62%,
		transparent 78%
	);
	filter: blur(22px);
}

.nm-nav[data-open="true"] .nm-nav__alone {
	animation: nm-magia-respiro 5.6s var(--motion-ease) -1.3s infinite alternate;
}

/* Le comete girano solo a menu aperto: chiuso, non gira niente. */
.nm-nav:not([data-open="true"]) .nm-nav__magia .nm-magia__cometa { animation: none; }

.nm-nav__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s, 12px);
	color: var(--nm-gold-100);
	opacity: 0;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--nm-gold-100) 60%, transparent));
}

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

.nm-nav[data-open="true"] .nm-nav__favilla {
	animation: nm-magia-favilla var(--d, 3.8s) var(--motion-ease) var(--r, 0s) infinite;
}

@media (prefers-reduced-motion: reduce) {
	.nm-nav::before,
	.nm-nav::after,
	.nm-nav__list::before,
	.nm-nav__list::after {
		transform: none;
		transition: opacity 150ms linear, visibility 0s linear 150ms;
	}

	.nm-nav::after,
	.nm-nav__list::after { animation: none; }

	.nm-menu-velo,
	[data-nm-menu="aperto"] .nm-menu-velo { transition: opacity 150ms linear, visibility 0s linear 150ms; }

	/* Ferme, l'alone resta acceso e le faville restano puntini d'oro. Le comete, ferme,
	   sarebbero un punto in un angolo: non ci sono. */
	.nm-nav[data-open="true"] .nm-nav__alone,
	.nm-nav[data-open="true"] .nm-nav__favilla { animation: none; }

	.nm-nav[data-open="true"] .nm-nav__favilla { opacity: 0.6; }

	.nm-nav__magia .nm-magia__cometa { display: none; }
}

/* Sopra i 900 px la cornice sta sulla barra: quella attorno alla lista non serve. */
@media (min-width: 901px) {
	.nm-nav__list::before,
	.nm-nav__list::after { display: none; }
}

.nm-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(0.9rem, 2.2vw, 2.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Le voci entrano una alla volta da destra verso sinistra — cioe' a partire da quella
 * piu' vicina alla parola MENU, che e' quella che le ha chiamate — e se ne vanno al
 * contrario, dalla prima all'ultima.
 *
 * Il ritardo di ciascuna si calcola dal suo indice, che il JavaScript scrive una volta
 * sola come --nm-i (e --nm-n sul contenitore). Cosi' la cascata vale per qualunque
 * numero di voci decida l'amministratore, senza regole nth-child da tenere aggiornate.
 *
 * Una voce spezzata su due righe romperebbe l'allineamento dell'header e farebbe
 * crescere la fascia: prima si stringe la spaziatura, poi semmai si va a capo.
 */
.nm-nav__list li {
	--nm-ritardo: calc(var(--nm-i, 0) * 45ms);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transform: translateX(0.6rem);
	transition:
		opacity 260ms var(--motion-ease) var(--nm-ritardo),
		transform 260ms var(--motion-ease) var(--nm-ritardo),
		visibility 0s linear calc(var(--nm-ritardo) + 260ms);
}

.nm-nav[data-open="true"] .nm-nav__list li {
	--nm-ritardo: calc((var(--nm-n, 1) - 1 - var(--nm-i, 0)) * 70ms);
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 380ms var(--motion-ease) var(--nm-ritardo),
		transform 380ms var(--motion-ease) var(--nm-ritardo),
		/* La visibilita' torna subito, senza ritardo: chi apre da tastiera deve poter
		   tabulare sulle voci mentre stanno ancora comparendo. */
		visibility 0s linear 0s;
}

.nm-nav__list a {
	color: var(--nm-ink-100);
	/* Piu' marcate del maiuscoletto di servizio (500): «font-weight delle voci menu piu'
	   alto», ha chiesto il committente. Montserrat e' variabile, il 600 c'e'. */
	font-weight: var(--nm-nav-peso);
	text-decoration: none;
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-nav__list a:hover,
.nm-nav__list .current-menu-item > a { color: var(--nm-gold-200); }

/* Sulla carta, senza JavaScript, le voci stanno sempre nella testata: inchiostro. */
[data-scene-theme="cream"] .nm-nav__list a { color: var(--nm-ink-900); }

/*
 * Il menu aperto e' sempre notte, anche sulla carta: il velo sotto la testata e' scuro,
 * e un logotipo a inchiostro o una voce a inchiostro ci sparirebbero sopra. La testata
 * passa ai colori della notte finche' il velo c'e' — `data-nm-menu` sulla radice, che
 * resta anche mentre il velo sfuma — e torna alla carta quando se n'e' andato. E' la
 * stessa regola del pannello sul telefono, che era gia' notte da sempre.
 */
[data-nm-menu] .nm-nav__list a { color: var(--nm-ink-100); }

[data-nm-menu][data-scene-theme="cream"] .nm-logo__img--scuro { display: block; }
[data-nm-menu][data-scene-theme="cream"] .nm-logo__img--chiaro { display: none; }
[data-nm-menu][data-scene-theme="cream"] .nm-logo { color: var(--nm-ink-100); }
[data-nm-menu][data-scene-theme="cream"] .nm-logo__payoff { color: var(--nm-gold-500); }

/*
 * A menu aperto le voci prendono il gradiente dorato, come il titolo, e una luce ci passa
 * sopra — la stessa corsa del filetto di «Crea il tuo libro», una voce dopo l'altra.
 *
 * Il passaggio del puntatore non puo' piu' essere un cambio di `color`: con il riempimento
 * trasparente quel colore non si vede. Cambia invece il gradiente, che sale verso il chiaro
 * — stesso gesto, meccanismo diverso — e la luce si ferma.
 *
 * La cornice e le voci non hanno piu' una versione per la carta: aperto, il menu e' notte
 * dappertutto (sopra).
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	[data-nm-menu] .nm-nav__list a {
		background-image:
			linear-gradient(100deg,
				transparent 40%,
				color-mix(in srgb, var(--nm-gold-100) 92%, transparent) 50%,
				transparent 60%),
			var(--nm-oro-lucente);
		background-size: 300% 100%, 100% 100%;
		background-repeat: no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: nm-magia-corsa 4.6s linear calc(var(--nm-i, 0) * 0.4s) infinite;
	}

	[data-nm-menu] .nm-nav__list a:hover,
	[data-nm-menu] .nm-nav__list .current-menu-item > a {
		background-image: linear-gradient(180deg, var(--nm-gold-100) 0%, var(--nm-gold-100) 40%, var(--nm-gold-200) 100%);
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	[data-nm-menu] .nm-nav__list a { animation: none; }
}

/*
 * L'interruttore del menu: la parola e, accanto, l'hamburger — chiesto dal committente il
 * 1° ottobre 2026 — senza riquadro: un secondo bottone col bordo farebbe concorrenza a
 * «Crea il tuo libro». Stesso registro delle voci di menu, perche' del menu fa parte.
 *
 * Lo stato aperto non si affida solo al colore: sotto la parola resta tirato un filetto,
 * che si disegna da sinistra verso destra come la cascata delle voci, e l'hamburger
 * diventa la croce.
 */
.nm-header__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.85em;
	padding: 0.4em 0;
	border: 0;
	background: transparent;
	color: var(--nm-ink-100);
	font-weight: var(--nm-nav-peso);
	white-space: nowrap;
	cursor: var(--nm-cursore-attivo);
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-header__toggle-parola { position: relative; }

.nm-header__toggle-parola::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.4em);
	height: var(--nm-rule-width);
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--motion-duration-ui) var(--motion-ease);
}

.nm-header__toggle:hover,
.nm-header__toggle:focus-visible,
.nm-header__toggle[aria-expanded="true"] { color: var(--nm-gold-200); }

.nm-header__toggle:hover .nm-header__toggle-parola::after,
.nm-header__toggle:focus-visible .nm-header__toggle-parola::after,
.nm-header__toggle[aria-expanded="true"] .nm-header__toggle-parola::after { transform: scaleX(1); }

[data-scene-theme="cream"] .nm-header__toggle { color: var(--nm-ink-900); }

/* Sulla carta, aperto il menu, la testata e' notte: l'interruttore torna d'oro. */
[data-nm-menu][data-scene-theme="cream"] .nm-header__toggle { color: var(--nm-gold-200); }

/*
 * L'hamburger: tre linee sottili come il filetto, quella di mezzo piu' corta — al
 * passaggio del puntatore si allunga anche lei. Aperto il menu, la linea di mezzo si
 * spegne e le altre due ruotano fino a incrociarsi: la croce che chiude. Linee e non un
 * SVG perche' devono muoversi una per una.
 */
.nm-header__toggle-icona {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 1.7em;
	height: 1.1em;
}

.nm-header__toggle-linea {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	margin-top: -0.75px;
	border-radius: 1px;
	background: currentColor;
	transform-origin: center;
	transition:
		transform 380ms var(--motion-ease),
		opacity 240ms var(--motion-ease),
		width 320ms var(--motion-ease);
}

.nm-header__toggle-linea:nth-child(1) { top: 0.75px; }
.nm-header__toggle-linea:nth-child(2) { top: 50%; width: 62%; }
.nm-header__toggle-linea:nth-child(3) { top: calc(100% - 0.75px); }

.nm-header__toggle:hover .nm-header__toggle-linea:nth-child(2),
.nm-header__toggle:focus-visible .nm-header__toggle-linea:nth-child(2) { width: 100%; }

.nm-header__toggle[aria-expanded="true"] .nm-header__toggle-linea:nth-child(1) {
	transform: translateY(calc(0.55em - 0.75px)) rotate(45deg);
}

.nm-header__toggle[aria-expanded="true"] .nm-header__toggle-linea:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.2);
}

.nm-header__toggle[aria-expanded="true"] .nm-header__toggle-linea:nth-child(3) {
	transform: translateY(calc(-0.55em + 0.75px)) rotate(-45deg);
}

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

@media (max-width: 900px) {
	/* Il pannello esce dal flusso, quindi la colonna di mezzo non serve piu'. */
	.nm-header { grid-template-columns: 1fr auto; }

	/*
	 * «L’atelier» sotto «Menu», allineato a destra con l'hamburger: fuori dal pannello, come
	 * nella reference del committente del 6 ottobre 2026 — dal 3 ottobre stava in fondo al
	 * menu aperto. Attaccato al riquadro dell'interruttore, che e' alto 48 per il dito: lo
	 * spazio fra i due lo fa gia' lui.
	 */
	.nm-header__azioni {
		grid-column: 2;
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
	}

	/*
	 * Il pannello copre lo schermo, e per farlo deve smettere di essere una voce di
	 * griglia.
	 *
	 * `position: fixed` da solo non bastava: `justify-self: center`, che serve alla fila
	 * di voci dentro l'header, per una scatola fuori dal flusso vuol dire un'altra cosa —
	 * la larghezza torna a essere quella del contenuto e la scatola si centra fra i due
	 * `inset`. Misurato: pannello largo 272 px, spostato a 165 dal bordo, con le voci
	 * tagliate a destra e la pagina che si vedeva sotto. Da qui `justify-self: stretch`,
	 * che è la riga che rimette il pannello a coprire davvero.
	 *
	 * Il selettore ricalca `.nm-header .nm-nav` perché è quello che porta l'allineamento:
	 * a specificità più bassa non lo si scavalca.
	 */
	.nm-header .nm-nav {
		position: fixed;
		inset: 0;
		z-index: 1;
		justify-self: stretch;
		align-self: stretch;
		width: auto;
		/* Una colonna sola, larga quanto la cornice delle voci, e al centro. */
		display: grid;
		grid-template-columns: max-content;
		justify-content: center;
		align-content: center;
		gap: calc(var(--space-unit) * 5);
		/* In alto lo spazio della testa, che resta visibile sopra il pannello; sotto
		   quello della barra di sistema del telefono. */
		padding:
			calc(var(--nm-header-height-compact) + env(safe-area-inset-top)) 6vw
			calc(var(--space-unit) * 4 + env(safe-area-inset-bottom));
		/*
		 * Non una tinta piena ma il fondo che si intravede, come nella cornice del menu
		 * sul desktop: la notte al 66% e la sfocatura. Quello che rende leggibile non e'
		 * il buio, e' la sfocatura — l'artwork sotto diventa una macchia morbida e le
		 * parole tornano davanti.
		 */
		background: color-mix(in srgb, var(--nm-night-900) 66%, transparent);
		-webkit-backdrop-filter: blur(20px) saturate(0.88);
		backdrop-filter: blur(20px) saturate(0.88);
		/* Con molte voci il pannello scorre da sé, e lo scorrimento non passa alla pagina
		   sotto: è la differenza fra un pannello e un velo. Di lato no: l'alone largo del
		   pulsante esce dallo schermo, e il pannello scorreva di 127 px verso destra. */
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--motion-duration-scene) var(--motion-ease),
		            visibility var(--motion-duration-scene) var(--motion-ease);
	}

	.nm-header .nm-nav[data-open="true"] { opacity: 1; visibility: visible; }

	.nm-nav__list {
		flex-direction: column;
		gap: calc(var(--space-unit) * 3);
		text-align: center;
	}

	/* In colonna lo scostamento orizzontale non avrebbe senso: le voci salgono. */
	.nm-nav__list li { transform: translateY(0.6rem); }

	/*
	 * Una voce è alta 48 px perché è un bersaglio da dito, non da mouse: sotto i 44 il
	 * dito prende quella accanto. Il testo resta della sua misura — è il riquadro
	 * cliccabile a crescere, e lo fa con il padding, che è l'unico modo perché cresca
	 * anche l'area sensibile e non solo lo spazio attorno.
	 */
	.nm-nav__list a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		padding: 0 0.6em;
		color: var(--nm-ink-100);
		font-size: 1.1rem;
	}

	/*
	 * Il pannello è sempre notte, anche quando la scena sotto è carta — le voci e la
	 * cornice lo sanno gia' (sopra, `data-nm-menu`). Sulla carta il pannello e' piu' pieno:
	 * la notte al 66% sulla carta chiara era un grigio, non una notte.
	 */
	[data-scene-theme="cream"] .nm-header .nm-nav { background: color-mix(in srgb, var(--nm-night-900) 92%, transparent); }

	/*
	 * La magia, sul telefono: il menu e' un pannello a tutto schermo, e le faville si
	 * spargono attorno alla colonna delle voci con le loro coordinate da telefono; l'alone
	 * sta dietro la colonna, al centro.
	 */
	.nm-nav__magia { inset: 0; }
	.nm-nav__alone { inset: 26% 6%; }
	.nm-nav__favilla { left: var(--mx); top: var(--my); }

	/* Qui la cornice e' quella della colonna, non del pannello: le comete, che girano
	   attorno al contenitore, girerebbero attorno allo schermo. */
	.nm-nav__magia .nm-magia__cometa { display: none; }

	/*
	 * Il pannello è notte anche quando la scena sotto è carta, quindi l'invito dentro il
	 * pannello è oro anche lì. Senza questa riga, sulle pagine chiare valeva
	 * `[data-scene-theme="cream"] .nm-button`, che porta il testo all'inchiostro scuro: oro
	 * su carta è vietato, ma qui di carta non ce n'è — c'era solo un inchiostro quasi nero
	 * su un fondo quasi nero.
	 */
}

/* Con il movimento ridotto la cascata non ha senso: le voci ci sono o non ci sono.
   Si azzera la transizione, non solo la durata, cosi' sparisce anche lo scaglionamento —
   che e' fatto di ritardi, e i ritardi la regola generale non li tocca. */
@media (prefers-reduced-motion: reduce) {
	.nm-nav__list li,
	.nm-nav[data-open="true"] .nm-nav__list li {
		transform: none;
		transition: none;
	}
}

/* Senza JavaScript l'interruttore non potrebbe aprire niente: si toglie di mezzo e le
   voci restano dove sono, visibili e raggiungibili. */
.no-js .nm-header__toggle { display: none; }

.no-js .nm-nav__list li {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: none;
}

@media (max-width: 900px) {
	.no-js .nm-header .nm-nav {
		position: static;
		justify-self: center;
		padding: 0;
		background: transparent;
		opacity: 1;
		visibility: visible;
	}

}

/* ============================================================
   Footer
   ============================================================ */

.nm-footer {
	position: relative;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 3);
	width: var(--container-width);
	margin-inline: auto;
	min-height: var(--nm-footer-height);
	padding-block: calc(var(--space-unit) * 1.5);
	font-size: clamp(0.66rem, 0.92vw, 0.78rem);
	letter-spacing: 0.04em;
	/*
	 * Piena opacita', non piu' smorzata.
	 *
	 * Il crema al 72% sopra il champagne della hero dava 1,03 di contrasto: illeggibile.
	 * A piena opacita' l'ombra necessaria sotto scende dal 70% al 57%, cioe' meno velo
	 * sull'artwork — che e' esattamente il compromesso giusto.
	 */
	color: var(--color-text);
}

.nm-footer a {
	color: var(--color-text);
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	transition: color var(--motion-duration-ui) var(--motion-ease);
}

.nm-footer a:hover { color: var(--color-accent); }

.nm-footer__sep { opacity: 0.4; }

/* ---- i profili social ----

   Una fila di simboli in fondo, allineata con il resto del piede e con lo stesso colore
   spento: non sono l'invito principale del sito, sono il modo di ritrovarlo altrove.

   Il riquadro cliccabile è più grande del simbolo, e non è generosità: un'icona di 18 px
   presa col dito è un'icona che si sbaglia. Il simbolo resta della sua misura, cresce il
   riquadro — che è l'unico modo perché cresca anche l'area sensibile. */

.nm-social {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	/*
	 * Il margine negativo non è un trucco per far entrare le icone: è quello che impedisce
	 * a un bersaglio da 34 px di alzare il piede da 63 a 76. Il riquadro cliccabile resta
	 * di 34 — quello serve al dito e al puntatore — ma nel conto dell'altezza della riga
	 * pesa quanto il testo che gli sta accanto, che è come deve essere: il piede è alto
	 * uguale su tutte le pagine, ed è una misura che è già stata chiesta una volta.
	 */
	margin: -8px 0;
	padding: 0;
	list-style: none;
}

.nm-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--color-text-muted);
	text-decoration: none;
	border-radius: 50%;
	transition:
		color var(--motion-duration-ui) var(--motion-ease),
		background-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-social__link:hover,
.nm-social__link:focus-visible {
	color: var(--color-accent);
	background: color-mix(in srgb, var(--nm-gold-300) 12%, transparent);
}

.nm-social__segno { display: block; width: 19px; }
.nm-social__segno svg { display: block; width: 100%; height: auto; }

/* Microstelle attorno al logotipo, come nel riferimento. */
.nm-logo__stella {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s);
	color: var(--nm-gold-100);
	opacity: var(--o);
	pointer-events: none;
	animation: nm-pulse calc(4s + var(--s) * 0.4s) ease-in-out infinite alternate;
}

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

/*
 * Lo scintillio della costellazione.
 *
 * Un alone additivo sopra ogni stella già dipinta: `screen` somma la luce invece di
 * coprirla, quindi il raggio a croce sotto continua a vedersi e non viene spento da un
 * disco opaco. Il diametro è in percentuale del riquadro, così scala con la costellazione
 * e resta proporzionato anche sulla copia piccola.
 */
.nm-constellation__scintilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: calc(var(--f, 1) * 4.4%);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(
		circle,
		color-mix(in srgb, #FFF6E2 calc(var(--f, 1) * 62%), transparent) 0%,
		color-mix(in srgb, var(--nm-gold-200) calc(var(--f, 1) * 24%), transparent) 34%,
		transparent 66%
	);
	animation: nm-scintilla var(--d, 3s) ease-in-out var(--r, 0s) infinite alternate;
}

@keyframes nm-scintilla {
	from { opacity: 0.12; transform: translate(-50%, -50%) scale(0.72); }
	to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
	.nm-constellation__scintilla { animation: none; opacity: 0.5; }
}

/* ---- la luna e il chiarore ---- */

/*
 * La falce dell'artwork, non un disegno che le somiglia. Sta in alto a destra ma sotto la
 * fascia dell'header: il cielo può passare dietro il titolo, mai dietro i comandi.
 */
.nm-luna {
	position: absolute;
	left: 80%;
	top: 19%;
	width: 6.4%;
	max-width: 132px;
}

.nm-luna img { display: block; width: 100%; height: auto; }
/* L'alone è fermo. La luna non pulsa: sta. Il cielo intorno si muove abbastanza — la
   polvere che sale, le stelle che scintillano — e una luce in più che respira, su un
   oggetto così riconoscibile, si nota come un effetto invece che come una presenza. */
.nm-luna__alone {
	position: absolute;
	inset: -90%;
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: screen;
	background: radial-gradient(
		circle,
		color-mix(in srgb, var(--nm-gold-100) 20%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 8%, transparent) 34%,
		transparent 64%
	);
	opacity: 0.82;
}

/*
 * Sul telefono la luna si tira indietro.
 *
 * Non è mai stata davanti — sta nello stage, che ha z-index 0 contro l'1 della pagina — ma
 * su una colonna larga quanto lo schermo il testo le passa sopra invece che accanto, e una
 * falce accesa dietro una riga di prosa si legge come una cosa davanti. Sul computer il
 * problema non esiste: lì c'è un margine destro dove la luna sta per conto suo.
 *
 * Si sposta verso il bordo e si spegne di metà: resta il cielo, non resta l'oggetto. Con
 * lei si spegne l'alone, che è quello che dava fastidio davvero — `mix-blend-mode: screen`
 * schiarisce quello che ha dietro, e quello che aveva dietro era il fondo su cui il testo
 * deve staccare.
 */
@media (max-width: 900px) {
	.nm-luna {
		left: 84%;
		opacity: 0.55;
	}

	.nm-luna__alone { opacity: 0.45; }
}

/*
 * Il chiarore che scende dalla luna.
 *
 * Largo e molto sfocato di proposito: un raggio netto sarebbe un faro, e un faro dentro un
 * cielo notturno si legge come un errore. Questo è la luce che una luna lascia cadere —
 * si nota se la cerchi, e se non la cerchi fa solo sembrare il cielo meno piatto.
 */
.nm-raggio {
	position: absolute;
	right: 4%;
	top: -6%;
	width: 46%;
	height: 118%;
	pointer-events: none;
	mix-blend-mode: screen;
	background: linear-gradient(
		196deg,
		color-mix(in srgb, var(--nm-gold-100) 11%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-200) 5%, transparent) 34%,
		transparent 66%
	);
	filter: blur(34px);
	animation: nm-raggio 16s ease-in-out infinite alternate;
}

@keyframes nm-raggio {
	from { opacity: 0.45; transform: translateX(1.5%); }
	to   { opacity: 0.9;  transform: translateX(-1.5%); }
}

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

/* ============================================================
   La gallery del libro
   ============================================================
   Le lastre sono tutte nel markup. Finché il JavaScript non le ha marcate — data-nm-vivo
   sulla gallery — si vedono tutte, una sotto l'altra: è la pagina senza JavaScript, ed è
   un elenco di immagini, che per un elenco di immagini va benissimo. */

.nm-galleria {
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 1.4vh, 0.9rem);
	min-height: 0;
	width: 100%;
}

.nm-galleria__lastre {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	border-radius: var(--radius-media);
	overflow: hidden;
}

.nm-galleria__lastra { margin: 0; }

/*
 * Tutte le immagini occupano lo stesso rettangolo, qualunque sia la risoluzione con cui
 * sono state caricate: `cover` riempie il riquadro e taglia il resto, mentre `contain` —
 * che c'era prima — lascia due bande diverse per ogni proporzione, e passando da una
 * miniatura all'altra la foto cambiava misura. Il taglio si vede solo qui: la lente apre
 * l'immagine intera.
 */
.nm-galleria__immagine {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nm-galleria--sola,
.nm-galleria--vuota {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	margin: 0;
	border-radius: var(--radius-media);
	overflow: hidden;
}

.nm-galleria--vuota {
	border: var(--nm-rule-width) solid var(--color-border);
	color: color-mix(in srgb, var(--nm-gold-400) 55%, transparent);
}

.nm-galleria__segno svg { width: clamp(48px, 6vw, 88px); height: auto; }

/* Con il JavaScript acceso, una lastra alla volta. Le altre restano nel riquadro ma
   trasparenti: così l'altezza non salta passando da un'immagine verticale a una
   orizzontale, e il dissolvere è un cambio di opacità e non un rimontaggio. */
/*
 * Anche la lastra attiva è assoluta, non relativa.
 *
 * Con la lastra attiva in flusso il riquadro prendeva l'altezza da lei, e lei dalla
 * propria proporzione: misurate, la prima immagine era alta 365 px e la seconda 480, così
 * passando da una miniatura all'altra la foto cambiava misura. Fuori dal flusso stanno
 * tutte, e l'altezza la decide il riquadro — che ce l'ha dal flex della colonna, cioè
 * dalla scena. Da lì `height: 100%` sull'immagine è una misura vera, e con `cover` tutte
 * le foto occupano lo stesso rettangolo qualunque sia la loro risoluzione.
 */
.nm-galleria[data-nm-vivo] .nm-galleria__lastra {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--motion-duration-ui) var(--motion-ease);
}

.nm-galleria[data-nm-vivo] .nm-galleria__lastra[data-nm-attivo] { opacity: 1; }

/*
 * Senza JavaScript le frecce e la lente non fanno niente: non si mostrano. Le miniature
 * restano, perché quelle sono collegamenti veri al file dell'immagine — l'elenco continua
 * a funzionare, semplicemente in una forma più povera.
 */
.no-js .nm-galleria__freccia,
.no-js .nm-galleria__lente { display: none; }

/* Stessa ragione per i caroselli: senza JavaScript le slide si vedono tutte, una sotto
   l'altra, e frecce e puntini non avrebbero niente da far girare. */
.no-js .nm-carosello__comandi { display: none; }

/* ---- i comandi sopra l'immagine ---- */

.nm-galleria__freccia,
.nm-galleria__lente {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 0;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--nm-night-900) 55%, transparent);
	color: var(--nm-gold-200);
	cursor: var(--nm-cursore-attivo);
	opacity: 0;
	transition:
		opacity var(--motion-duration-ui) var(--motion-ease),
		border-color var(--motion-duration-ui) var(--motion-ease),
		color var(--motion-duration-ui) var(--motion-ease);
}

.nm-galleria__freccia {
	top: 50%;
	width: clamp(34px, 2.6vw, 44px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}

.nm-galleria__freccia--prima { left: clamp(0.4rem, 1vw, 0.9rem); }
.nm-galleria__freccia--dopo  { right: clamp(0.4rem, 1vw, 0.9rem); }

.nm-galleria__lente {
	right: clamp(0.4rem, 1vw, 0.9rem);
	top: clamp(0.4rem, 1vw, 0.9rem);
	width: clamp(30px, 2.2vw, 38px);
	aspect-ratio: 1;
}

.nm-galleria__lente-segno svg { width: 54%; height: auto; }

/*
 * I comandi compaiono quando servono: al passaggio del puntatore, e sempre quando il fuoco
 * è dentro la gallery. La seconda condizione non è un dettaglio — un pulsante che si
 * raggiunge con Tab ma resta invisibile è peggio di un pulsante che non c'è.
 */
.nm-galleria:hover .nm-galleria__freccia,
.nm-galleria:hover .nm-galleria__lente,
.nm-galleria:focus-within .nm-galleria__freccia,
.nm-galleria:focus-within .nm-galleria__lente { opacity: 1; }

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

/* ---- le miniature ---- */

.nm-galleria__miniature {
	flex: 0 0 auto;
	display: flex;
	gap: clamp(0.35rem, 0.8vw, 0.6rem);
	margin: 0;
	padding: 0 0 0.3rem;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
}

.nm-galleria__miniatura { flex: 0 0 auto; }

.nm-galleria__scelta {
	display: block;
	width: clamp(48px, 5vw, 72px);
	aspect-ratio: 1;
	border: var(--nm-rule-width) solid transparent;
	border-radius: var(--radius-media);
	overflow: hidden;
	opacity: 0.55;
	transition:
		opacity var(--motion-duration-ui) var(--motion-ease),
		border-color var(--motion-duration-ui) var(--motion-ease);
}

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

.nm-galleria__scelta:hover { opacity: 0.85; }

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

/* ============================================================
   La lente: l'immagine in grande
   ============================================================ */

.nm-lente {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.nm-lente::backdrop { background: color-mix(in srgb, var(--nm-night-900) 92%, transparent); }

.nm-lente__quadro {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: clamp(2.4rem, 6vh, 4rem) clamp(2.6rem, 7vw, 6rem);
}

.nm-lente__lastra {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transition: opacity var(--motion-duration-ui) var(--motion-ease);
}

.nm-lente__lastra[data-nm-attivo] { opacity: 1; }

.nm-lente__immagine {
	display: block;
	max-width: 100%;
	max-height: calc(100dvh - clamp(4.8rem, 12vh, 8rem));
	width: auto;
	height: auto;
	border-radius: var(--radius-media);
}

.nm-lente__freccia,
.nm-lente__chiudi {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(38px, 3vw, 52px);
	aspect-ratio: 1;
	padding: 0;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: 50%;
	background: color-mix(in srgb, var(--nm-night-900) 60%, transparent);
	color: var(--nm-gold-200);
	font-size: clamp(1rem, 1.4vw, 1.3rem);
	cursor: var(--nm-cursore-attivo);
	transition:
		border-color var(--motion-duration-ui) var(--motion-ease),
		color var(--motion-duration-ui) var(--motion-ease);
}

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

.nm-lente__freccia { top: 50%; transform: translateY(-50%); }
.nm-lente__freccia--prima { left: clamp(0.6rem, 2vw, 1.6rem); }
.nm-lente__freccia--dopo  { right: clamp(0.6rem, 2vw, 1.6rem); }

.nm-lente__chiudi {
	right: clamp(0.6rem, 2vw, 1.6rem);
	top: clamp(0.6rem, 2vh, 1.4rem);
	font-size: clamp(1.3rem, 1.8vw, 1.7rem);
}

.nm-lente__conto {
	position: absolute;
	left: 50%;
	bottom: clamp(0.7rem, 2.4vh, 1.6rem);
	transform: translateX(-50%);
	margin: 0;
	color: var(--nm-gold-400);
	font-size: clamp(0.6rem, 0.78vw, 0.72rem);
}

/* ============================================================
   I caroselli: recensioni e video
   ============================================================
   Un solo linguaggio per due contenuti diversi. Le slide, come le lastre, sono tutte nel
   markup: senza JavaScript si vedono tutte in colonna, che per un elenco di recensioni o
   di video è la forma giusta. */

.nm-recensioni__pista,
.nm-ugc__pista {
	display: flex;
	flex-direction: column;
	gap: clamp(0.7rem, 1.8vh, 1.2rem);
}

[data-nm-vivo] .nm-recensioni__pista,
[data-nm-vivo] .nm-ugc__pista { display: grid; }

[data-nm-vivo] [data-nm-slide] {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion-duration-ui) var(--motion-ease);
}

[data-nm-vivo] [data-nm-slide][data-nm-attivo] {
	opacity: 1;
	pointer-events: auto;
}

.nm-carosello__comandi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 1.2vw, 0.9rem);
	margin-top: clamp(0.6rem, 1.6vh, 1rem);
}

.nm-carosello__freccia {
	display: grid;
	place-items: center;
	width: clamp(30px, 2.2vw, 38px);
	aspect-ratio: 1;
	padding: 0;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--nm-gold-300);
	cursor: var(--nm-cursore-attivo);
	transition:
		border-color var(--motion-duration-ui) var(--motion-ease),
		color var(--motion-duration-ui) var(--motion-ease);
}

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

.nm-carosello__punti {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Il punto è piccolo, ma l'area che si clicca no: il pulsante misura quanto il polpastrello
   e il tondo lo si disegna dentro. */
.nm-carosello__punto {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: var(--nm-cursore-attivo);
}

.nm-carosello__punto::before {
	content: "";
	width: 6px;
	height: 6px;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: 50%;
	transition:
		background-color var(--motion-duration-ui) var(--motion-ease),
		border-color var(--motion-duration-ui) var(--motion-ease);
}

.nm-carosello__punto:hover::before { border-color: var(--nm-gold-300); }

.nm-carosello__punto[aria-current="true"]::before {
	border-color: var(--color-accent-gold);
	background: var(--color-accent-gold);
}

/* ============================================================
   Le recensioni
   ============================================================ */

.nm-recensione {
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 1.3vh, 0.8rem);
	padding: clamp(0.9rem, 2.2vh, 1.4rem) clamp(1rem, 2vw, 1.6rem);
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-card);
	background: color-mix(in srgb, var(--color-bg) 45%, transparent);
}

.nm-recensione__voto {
	display: flex;
	gap: 0.16em;
	margin: 0;
	color: color-mix(in srgb, var(--nm-gold-400) 40%, transparent);
}

.nm-recensione__stella svg { width: clamp(11px, 1vw, 14px); height: auto; }

/*
 * La stella dell'icona è disegnata a filo — <g fill="none" stroke="currentColor"> — e a
 * quella misura un contorno vuoto non si legge come un voto: si legge come cinque stelle
 * spente. Quelle prese si riempiono. La regola colpisce il path e non il gruppo perché
 * una dichiarazione CSS su un elemento vince sull'attributo di presentazione che eredita
 * dal padre.
 */
.nm-recensione__stella--piena { color: var(--color-accent-gold); }
.nm-recensione__stella--piena svg path { fill: currentColor; }

.nm-recensione__testo {
	margin: 0;
	color: var(--color-text);
	font-family: var(--font-display);
	font-size: clamp(0.94rem, 1.25vw, 1.15rem);
	font-style: italic;
	line-height: 1.6;
}

.nm-recensione__testo p { margin: 0; }

.nm-recensione__firma {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.nm-recensione__ritratto {
	flex: 0 0 auto;
	width: clamp(30px, 2.6vw, 40px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

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

.nm-recensione__chi {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.nm-recensione__nome {
	color: var(--color-heading);
	font-size: clamp(0.78rem, 0.98vw, 0.9rem);
}

.nm-recensione__dettaglio {
	color: var(--color-text-muted);
	font-size: clamp(0.66rem, 0.84vw, 0.76rem);
}

/* ============================================================
   I video dei clienti
   ============================================================ */

/* Due affiancati: è l'unico caso in cui la pista è una griglia orizzontale, e non ha
   comandi perché non c'è niente da far girare. */
.nm-ugc[data-nm-modo="affiancati"] .nm-ugc__pista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(0.5rem, 1.2vw, 0.9rem);
}

.nm-ugc__video {
	position: relative;
	aspect-ratio: 16 / 9;
	border: var(--nm-rule-width) solid var(--color-border);
	border-radius: var(--radius-media);
	background: color-mix(in srgb, var(--nm-night-900) 60%, transparent);
	overflow: hidden;
}

.nm-ugc__player,
.nm-ugc__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

@media (max-width: 640px) {
	.nm-ugc[data-nm-modo="affiancati"] .nm-ugc__pista { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.nm-galleria[data-nm-vivo] .nm-galleria__lastra,
	.nm-lente__lastra,
	[data-nm-vivo] [data-nm-slide] { transition: none; }
}

/* ============================================================
   Il bottone che brilla da solo
   ============================================================
   È il pulsante della hero, e uno solo per pagina: la prima cosa che si può fare su
   questo sito, e l'unica CTA che non aspetta il puntatore per farsi notare. Tutto il
   resto del linguaggio resta quello di sempre — filetto oro, mai pieno — perché «magico»
   non deve voler dire «diverso da tutto il resto».

   Tre gesti insieme, che il sito conosce già: il filo di luce che gira attorno al bordo,
   lo stesso delle card; un alone che respira, come quello della hero; e le faville, che
   sono le stelle del cielo portate qui. Uno solo dei tre sarebbe un effetto; tre insieme
   sono un oggetto che vive. */

.nm-magia {
	position: relative;
	display: inline-flex;
}

/*
 * Il ditino che tocca: dice che una cosa si tocca — o, col mouse, che basta passarci sopra o
 * cliccarla. Nato su «E adesso?» in Chi siamo (scenes.css, dove ha il suo posto), il 7 ottobre
 * 2026 il committente l'ha voluto anche su «Crea il tuo libro» nella Home e su «Entra
 * nell'atelier». Solo il bordo, mai pieno, e piccolo. Arriva, preme, e dove preme si allarga un
 * cerchio; poi se ne va, e ricomincia. Con «Riduci movimento» sta fermo, senza cerchio.
 */
.nm-tocco {
	position: absolute;
	color: var(--nm-gold-100);
	filter:
		drop-shadow(0 0 0.04em var(--nm-night-900))
		drop-shadow(0 0 0.14em color-mix(in srgb, var(--nm-night-900) 70%, transparent));
	pointer-events: none;
	animation: nm-tocco 2.8s var(--motion-ease) infinite;
}

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

/* Il cerchio, sotto la punta del dito (20, 4,4 su 48). */
.nm-tocco::before {
	content: "";
	position: absolute;
	left: 41.7%;
	top: 9.2%;
	width: 70%;
	aspect-ratio: 1;
	border: max(1.5px, 0.03em) solid var(--nm-gold-200);
	border-radius: 50%;
	translate: -50% -50%;
	opacity: 0;
	animation: nm-tocco-cerchio 2.8s var(--motion-ease) infinite;
}

@keyframes nm-tocco {
	0%, 28%  { transform: translate(-0.12em, 0.16em); opacity: 0; }
	40%      { transform: translate(0, 0) scale(1); opacity: 1; }
	48%      { transform: translate(0.02em, -0.03em) scale(0.9); opacity: 1; }
	56%      { transform: translate(0, 0) scale(1); opacity: 1; }
	84%      { transform: translate(0, 0); opacity: 1; }
	100%     { transform: translate(-0.12em, 0.16em); opacity: 0; }
}

@keyframes nm-tocco-cerchio {
	0%, 46%  { transform: scale(0.2); opacity: 0; }
	50%      { transform: scale(0.45); opacity: 0.9; }
	76%, 100% { transform: scale(1.5); opacity: 0; }
}

/*
 * Sul pulsante (button.php, `ditino`): la punta del dito preme verso destra, sotto le parole,
 * con la mano che arriva da in basso a destra. Ruota attorno alla punta, che resta sul punto.
 * Quando il pulsante ha aperto il suo pannello — il ventaglio di «Crea il tuo libro» — non
 * c'e'; richiuso, torna, e il gesto riparte da capo.
 */
.nm-tocco--bottone {
	--nm-tocco-w: clamp(1.7rem, 2.1vw, 2.2rem);

	left: 80%;
	top: 64%;
	z-index: 3;
	width: var(--nm-tocco-w);
	margin: calc(var(--nm-tocco-w) * -0.092) 0 0 calc(var(--nm-tocco-w) * -0.417);
	font-size: var(--nm-tocco-w);
	transform-origin: 41.7% 9.2%;
	rotate: -14deg;
}

.nm-magia:has(> [aria-expanded="true"]) > .nm-tocco { display: none; }

/*
 * Il ditino che sul telefono dice di scorrere: fa il gesto — si appoggia, sale, si alza —
 * finche' la pagina e' in cima. Scendendo se ne va — un suggerimento che resta dopo essere stato
 * capito diventa un ingombro —, risalendo in cima torna, e il gesto riparte da capo. Che la
 * pagina e' scesa lo dice la testata (`data-nm-scorsa`, menu.js). Nato in «Chi siamo»; dal 17
 * ottobre 2026 anche in Home, «per far capire che deve scrollare» (il committente). Il posto, la
 * misura (`--nm-dito-w`) e l'ombra li decide la pagina.
 */
.nm-dito-scorri {
	width: var(--nm-dito-w, 2rem);
	color: var(--nm-gold-100);
	pointer-events: none;
	opacity: 0;
	animation: nm-scorri-dito 2.4s var(--motion-ease) 0.8s infinite;
}

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

@keyframes nm-scorri-dito {
	0%       { transform: translateY(0.7rem); opacity: 0; }
	14%      { transform: translateY(0.7rem) scale(1); opacity: 1; }
	24%      { transform: translateY(0.7rem) scale(0.93); opacity: 1; }
	64%      { transform: translateY(-0.75rem) scale(0.93); opacity: 1; }
	80%      { transform: translateY(-1.05rem) scale(1); opacity: 0; }
	100%     { transform: translateY(0.7rem); opacity: 0; }
}

.nm-header[data-nm-scorsa] ~ .nm-main .nm-dito-scorri { display: none; }

/* Senza JavaScript nessuno lo manderebbe via: resterebbe li' per sempre. */
.no-js .nm-dito-scorri { display: none; }

/* Con «Riduci movimento» resta, fermo: dice lo stesso che sotto c'e' dell'altro. */
@media (prefers-reduced-motion: reduce) {
	.nm-dito-scorri {
		opacity: 1;
		animation: none;
	}
}

/*
 * L'alone dietro. Sta sul contenitore e non sul bottone perché deve poter uscire dai suoi
 * bordi, e il bottone tiene dentro tutto quello che ha (gli serve per il raggio che lo
 * attraversa al passaggio del puntatore).
 */
.nm-magia::before {
	content: "";
	position: absolute;
	inset: -46% -14%;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--nm-gold-200) 58%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 30%, transparent) 38%,
		color-mix(in srgb, var(--nm-gold-400) 12%, transparent) 62%,
		transparent 82%
	);
	filter: blur(16px);
	animation: nm-magia-respiro 4.6s var(--motion-ease) infinite alternate;
}

/*
 * Il secondo alone, piu' largo e fuori fase.
 *
 * Uno solo respira come un battito regolare, e un battito regolare si riconosce. Due che
 * non vanno a tempo fanno una luce che non si riesce a prevedere — che e' quello che
 * distingue una cosa viva da una cosa animata.
 */
.nm-magia::after {
	content: "";
	position: absolute;
	inset: -95% -40%;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--nm-gold-200) 26%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 10%, transparent) 46%,
		transparent 78%
	);
	filter: blur(30px);
	animation: nm-magia-respiro 7.3s var(--motion-ease) -2.6s infinite alternate;
}

/*
 * La cometa che gira attorno al bottone.
 *
 * E' la cosa che mancava perche' il bottone sembrasse vivo e non solo acceso: una luce che
 * fa il giro lascia l'impressione che qualcosa stia succedendo adesso, mentre un alone che
 * respira dice soltanto che l'oggetto e' importante.
 *
 * I fotogrammi passano per i quattro angoli invece di usare `offset-path`: quello vorrebbe
 * un tracciato in coordinate assolute, e la larghezza del bottone dipende dalla parola che
 * ci sta scritta. Cosi' invece segue il rettangolo qualunque misura abbia.
 *
 * La scia dietro la cometa e' fatta di ombre concentriche sempre piu' larghe e piu' tenui:
 * non e' una scia vera, ma alla velocita' a cui va nessuno lo distingue.
 */
.nm-magia__cometa {
	position: absolute;
	z-index: 3;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	pointer-events: none;
	background: var(--nm-gold-100);
	box-shadow:
		0 0 4px 1px color-mix(in srgb, var(--nm-gold-100) 90%, transparent),
		0 0 12px 3px color-mix(in srgb, var(--nm-gold-200) 60%, transparent),
		0 0 26px 8px color-mix(in srgb, var(--nm-gold-300) 34%, transparent);
	animation: nm-magia-cometa 5.2s linear infinite;
}

/* La seconda parte dal lato opposto: il giro non ha mai un lato spento. */
.nm-magia__cometa--seconda {
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	opacity: 0.7;
	animation-duration: 7.6s;
	animation-delay: -3.8s;
}

@keyframes nm-magia-cometa {
	0%   { left: 0;    top: 0; }
	25%  { left: 100%; top: 0; }
	50%  { left: 100%; top: 100%; }
	75%  { left: 0;    top: 100%; }
	100% { left: 0;    top: 0; }
}

.nm-magia__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	width: var(--s, 12px);
	pointer-events: none;
	color: var(--nm-gold-100);
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: nm-magia-favilla var(--d, 3.6s) var(--motion-ease) var(--r, 0s) infinite;
}

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

/*
 * Il filo che gira, sempre.
 *
 * È lo stesso della card — conica che ruota, corona ottenuta mascherando il riquadro con
 * se stesso — con due differenze volute: gira più piano, perché quello della card è la
 * ricompensa di un gesto mentre questo vive lì tutto il tempo, e il settore acceso è più
 * corto, così passa invece di illuminare di continuo.
 *
 * L'angolo `--nm-giro` è registrato con @property in scenes.css, dove lo usa la card: una
 * custom property senza tipo dichiarato non si anima, resterebbe testo. Registrarlo due
 * volte non si può, e la registrazione vale per tutto il documento — dove @property non
 * c'è, il filo compare fermo, e il bottone resta comunque un bottone acceso.
 */
.nm-button--magia::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	padding: 0.16em;
	border-radius: inherit;
	pointer-events: none;
	/*
	 * La luce che percorre il filetto.
	 *
	 * Prima era un settore di conic-gradient che girava animando `--nm-giro`, e per
	 * animare una custom property serve `@property`: Safari ce l'ha solo dalla 16.4, e
	 * dove manca l'angolo non si anima affatto — il filo restava fermo, cioe' la magia
	 * spariva proprio dove non si poteva vedere che era sparita.
	 *
	 * Qui si muove `background-position`, che si anima da sempre e dappertutto. La banda
	 * di luce e' larga un quinto della corsa: passa, non illumina di continuo.
	 */
	background: linear-gradient(100deg,
		color-mix(in srgb, var(--nm-gold-400) 40%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-300) 75%, transparent) 38%,
		var(--nm-gold-100) 47%,
		#FFFFFA 50%,
		var(--nm-gold-100) 53%,
		color-mix(in srgb, var(--nm-gold-300) 75%, transparent) 62%,
		color-mix(in srgb, var(--nm-gold-400) 40%, transparent) 100%);
	background-size: 320% 100%;
	/* Il filo non e' piu' solo colorato: emette. */
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nm-gold-200) 70%, transparent));
	background-repeat: no-repeat;
	/* Il ritaglio ad anello: il pieno meno il contenuto, cioe' resta solo la cornice. */
	-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 3.4s linear infinite;
}

/*
 * Il luccichio sulle lettere.
 *
 * `background-clip: text` vuole il prefisso per Safari, e vuole anche che il colore del
 * testo sia trasparente: senza, il testo copre il proprio riflesso. Il fondo sotto resta
 * l'oro del bottone, quindi se il ritaglio non fosse supportato le lettere restano oro e
 * non spariscono.
 */
.nm-button--magia .nm-button__testo {
	background-image: linear-gradient(100deg,
		var(--nm-gold-300) 38%,
		var(--nm-gold-100) 50%,
		var(--nm-gold-300) 62%);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: nm-magia-corsa 3.4s linear infinite;
}

@keyframes nm-magia-corsa {
	from { background-position: 160% 0; }
	to   { background-position: -60% 0; }
}


/* La scintilla dopo il testo pulsa piano con il resto, invece di aspettare il puntatore. */
.nm-button--magia .nm-button__spark {
	animation: nm-magia-stella 4.6s var(--motion-ease) infinite alternate;
}

@keyframes nm-magia-respiro {
	from { opacity: 0.34; transform: scale(0.88); }
	to   { opacity: 1;    transform: scale(1.12); }
}

/*
 * La favilla nasce, brilla e se ne va, e poi sta zitta per la metà del suo tempo: è
 * l'attesa che la fa leggere come una scintilla e non come una lucina che lampeggia.
 */
/*
 * La favilla nasce, sale e si spegne, e poi tace per meta' del suo tempo.
 *
 * La salita e' la differenza: prima si accendevano sul posto, e una luce che pulsa ferma
 * si legge come una lucina. Una che si stacca e sale si legge come una scintilla.
 */
@keyframes nm-magia-favilla {
	0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.2) rotate(0deg); }
	10%  { opacity: 1;   transform: translate(-50%, -70%) scale(1.4) rotate(35deg); }
	26%  { opacity: 0.6; transform: translate(-50%, -110%) scale(0.95) rotate(70deg); }
	44%  { opacity: 0;   transform: translate(-50%, -160%) scale(0.4) rotate(104deg); }
	100% { opacity: 0;   transform: translate(-50%, -160%) scale(0.2) rotate(104deg); }
}

@keyframes nm-magia-stella {
	from { color: var(--nm-gold-300); filter: none; }
	to   { color: var(--nm-gold-100); filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--nm-gold-100) 60%, transparent)); }
}

/*
 * Il bottone blu: «Crea il tuo libro» in Home e «Scopri i libri» nelle vetrine.
 *
 * Il fondo e' il blu del logo, con un filo di luce calda in alto e piu' profondo in basso,
 * come uno smalto (`--nm-smalto-blu`, in base.css). Chiesto dal committente il 1° ottobre 2026 — ed e' l'unica eccezione al
 * «mai un bottone pieno» di CLAUDE.md, scritta li'. Il resto resta com'era: filetto d'oro,
 * maiuscoletto, stella, la magia attorno.
 *
 * Il blu e' scelto sul fondo misurato dietro il pulsante della Home: un azzurro grigio di
 * nebbia, luminanza 40-115. Il blu del logo sta a 34: piu' profondo del cielo, se ne stacca.
 *
 * Sta sopra gli aloni della magia (z-index 1): il secondo alone, quello largo, viene dopo
 * il bottone nel documento e gli passava sopra — finche' il bottone era trasparente non
 * si vedeva, sul blu lo slavava. Faville e comete restano sopra di lui (2 e 3).
 *
 * Al passaggio il fondo resta blu: il velo d'oro dell'hover diventa un'ombra interna, che
 * si accende con la stessa transizione del resto invece di cancellare il blu.
 */
.nm-button--blu {
	z-index: 1;
	background: var(--nm-smalto-blu);
}

.nm-button--blu:hover,
.nm-button--blu:focus-visible {
	background: var(--nm-smalto-blu);
	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 carta l'oro acceso sporca invece di illuminare: resta il filo, senza alone. */
[data-scene-theme="cream"] .nm-magia::before { display: none; }
[data-scene-theme="cream"] .nm-magia__favilla { color: var(--nm-gold-ink); }

/*
 * Il bottone che brilla, sulla carta: il filo e le lettere negli ori d'inchiostro — l'oro
 * acceso su crema e' bianco — con la luce che passa in oro grafico. Stesso gesto della
 * Home, con i colori della carta: e' il pulsante della scheda del libro.
 */
[data-scene-theme="cream"] .nm-button--magia::before {
	background-image: linear-gradient(100deg,
		color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent) 0%,
		var(--nm-gold-graphic) 38%,
		var(--nm-gold-200) 47%,
		var(--nm-gold-100) 50%,
		var(--nm-gold-200) 53%,
		var(--nm-gold-graphic) 62%,
		color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent) 100%);
	filter: none;
}

[data-scene-theme="cream"] .nm-button--magia .nm-button__testo {
	background-image: linear-gradient(100deg,
		var(--nm-gold-ink) 38%,
		var(--nm-gold-graphic) 50%,
		var(--nm-gold-ink) 62%);
}

[data-scene-theme="cream"] .nm-button--magia .nm-button__spark { animation-name: nm-magia-stella-carta; }

@keyframes nm-magia-stella-carta {
	from { color: var(--nm-gold-ink); filter: none; }
	to   { color: var(--nm-gold-graphic); filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--nm-gold-200) 70%, transparent)); }
}

/*
 * Il bottone d'oro: «L’atelier» nella testata, e dal 7 ottobre 2026 «Acquista su Amazon» nella
 * barra della scheda del libro.
 *
 * Il fondo e' l'oro del tema, scritta e stella il blu del logo: chiesto dal committente il 6
 * ottobre 2026, ed e' la seconda eccezione al «mai un bottone pieno» di CLAUDE.md, scritta
 * li'. Il blu sull'oro sta a 9,5:1. E' lo stesso sulla notte e sulla carta, e sul velo del
 * menu aperto: porta i suoi colori, non li prende dalla scena. Il selettore ha due classi
 * per scavalcare `[data-scene-theme="cream"] .nm-button`, che ne ha due anche lei e sta
 * prima.
 *
 * Bombato come «Crea il tuo libro», l'ha chiesto il committente lo stesso giorno: lo stesso
 * smalto (`--nm-oro-smalto`, in base.css), piu' chiaro in alto verso l'oro della luna e piu'
 * profondo in basso, e l'oro del tema nel mezzo. Il filetto e' un gradino sotto, come un
 * bordo di metallo.
 *
 * Al passaggio l'oro resta quello scelto: passano il raggio di luce e l'alone, e la stella
 * ruota, come in ogni bottone del sito. Sta sopra gli aloni della magia per la ragione del
 * bottone blu: sul pieno, il secondo alone lo slaverebbe.
 */
.nm-button.nm-button--oro {
	z-index: 1;
	border-color: var(--nm-gold-400);
	background: var(--nm-oro-smalto);
	color: var(--nm-logo-blu);
}

.nm-button.nm-button--oro:hover,
.nm-button.nm-button--oro:focus-visible {
	border-color: var(--nm-gold-400);
	background: var(--nm-oro-smalto);
	color: var(--nm-logo-blu);
	box-shadow:
		inset 0 0 0 100vmax color-mix(in srgb, var(--nm-gold-100) 10%, transparent),
		0 0 1.9rem -0.5rem color-mix(in srgb, var(--nm-gold-300) 60%, transparent);
}

/* La stella resta blu anche dove il bottone brilla: la sua pulsazione d'oro, sull'oro, non
   si vedrebbe. */
.nm-button.nm-button--oro .nm-button__spark,
.nm-button.nm-button--oro:hover .nm-button__spark,
.nm-button.nm-button--oro:focus-visible .nm-button__spark {
	color: var(--nm-logo-blu);
	filter: none;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.nm-magia::before,
	.nm-magia::after,
	.nm-magia__cometa,
	.nm-magia__favilla,
	.nm-button--magia::before,
	.nm-button--magia .nm-button__spark { animation: none; }

	/* Ferme, le faville non si vedono: senza movimento restano cinque puntini d'oro. */
	.nm-magia__favilla { opacity: 0.6; }
}

/* ============================================================
   Il prezzo che brilla
   ============================================================

   «39,90 €» com'e' scritto nella scheda del libro, con la magia di «Crea il tuo libro»
   ridotta a quello che sta bene su una cifra: la luce che passa sulle lettere e quattro
   faville che si staccano e salgono. Niente filo, niente cometa — girano attorno a un
   pulsante, e un prezzo non si preme — e sul cielo un alone piccolo che respira. Sta
   nella scheda del catalogo e nella pagina del libro, sopra il pulsante.

   Le lettere sono il fondo ritagliato dal testo (`background-clip: text`): sotto un colore
   pieno, cosi' le cifre ci sono sempre, e sopra una banda di luce che passa e se ne va —
   la stessa corsa del filetto del bottone. Il colore di ripiego e' quello delle lettere,
   nel caso il ritaglio manchi.

   Le stesse regole vestono le cifre del countdown dei popup (`nm-conto`, in scenes.css):
   e' la stessa magia su un numero piu' grande, e si scrive una volta. */

.nm-prezzo {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	/* Dentro una colonna flex — la scheda — resta largo quanto la cifra: le faville stanno
	   attorno alle cifre, non in fondo alla scheda. */
	align-self: flex-start;
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.35vw, 1.3rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--nm-gold-300);
}

/* L'alone dietro, sul cielo: piccolo, e respira fuori tempo con quello del bottone. */
.nm-prezzo::before {
	content: "";
	position: absolute;
	inset: -55% -22%;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		color-mix(in srgb, var(--nm-gold-300) 30%, transparent) 0%,
		color-mix(in srgb, var(--nm-gold-400) 12%, transparent) 50%,
		transparent 78%
	);
	filter: blur(10px);
	animation: nm-magia-respiro 5.4s var(--motion-ease) -1.7s infinite alternate;
}

.nm-prezzo__testo,
.nm-conto__cifre {
	position: relative;
	z-index: 1;
	background-color: var(--nm-gold-300);
	background-image: linear-gradient(100deg,
		transparent 38%,
		var(--nm-gold-100) 50%,
		transparent 62%);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: nm-magia-corsa 5.2s linear infinite;
}

.nm-prezzo__favilla,
.nm-conto__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	width: var(--s, 12px);
	pointer-events: none;
	color: var(--nm-gold-100);
	opacity: 0;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--nm-gold-100) 60%, transparent));
	animation: nm-magia-favilla var(--d, 3.8s) var(--motion-ease) var(--r, 0s) infinite;
}

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

/* Sulla carta: niente alone — l'oro acceso su crema sporca — e tutto negli ori
   d'inchiostro, con la luce che passa in oro grafico. Come il bottone della scheda. */
[data-scene-theme="cream"] .nm-prezzo { color: var(--nm-gold-ink); }
[data-scene-theme="cream"] .nm-prezzo::before { display: none; }

[data-scene-theme="cream"] .nm-prezzo__testo,
[data-scene-theme="cream"] .nm-conto__cifre {
	background-color: var(--nm-gold-ink);
	/* Il picco e' piu' chiaro dell'oro grafico, ma non l'oro acceso: al passaggio la cifra
	   si illumina, non sparisce nella carta. */
	background-image: linear-gradient(100deg,
		transparent 38%,
		color-mix(in srgb, var(--nm-gold-graphic) 55%, var(--nm-gold-200)) 50%,
		transparent 62%);
}

[data-scene-theme="cream"] .nm-prezzo__favilla,
[data-scene-theme="cream"] .nm-conto__favilla {
	color: var(--nm-gold-graphic);
	filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--nm-gold-200) 80%, transparent));
}

@media (prefers-reduced-motion: reduce) {
	.nm-prezzo::before,
	.nm-prezzo__testo,
	.nm-prezzo__favilla,
	.nm-conto__cifre,
	.nm-conto__favilla { animation: none; }

	/* Ferme, le faville restano puntini d'oro accanto alle cifre. */
	.nm-prezzo__favilla,
	.nm-conto__favilla { opacity: 0.6; }
}

/* ============================================================
   Guscio mobile
   ============================================================

   Sotto i 900 px il sito smette di essere una pagina stretta e diventa un'applicazione:
   una fascia in alto che non se ne va, un pannello che copre, e bersagli che si prendono
   col pollice. Le regole di scena stanno in scenes.css; qui c'è solo il guscio.

   Niente barra fissa in fondo: con quattro destinazioni raddoppierebbe il menu e si
   mangerebbe sessanta pixel su ogni schermata, che su un telefono sono il prezzo di due
   righe di testo. */

@media (max-width: 900px) {
	/*
	 * La testa resta.
	 *
	 * Su Chi siamo la pagina è alta 2439 px: senza fascia persistente, dopo due schermate
	 * non c'è più né il marchio né una via d'uscita che non sia risalire tutto.
	 *
	 * `z-index` più alto del footer, che ne ha 20: la fascia contiene il pannello, e un
	 * pannello che passa sotto il footer è un pannello con una striscia di pagina in
	 * fondo.
	 *
	 * A tutta larghezza, con i margini portati dentro come padding: una banda che finisce
	 * al 91% dello schermo lascia due strisce dove il contenuto scorre scoperto.
	 */
	.nm-header {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 30;
		width: 100%;
		min-height: var(--nm-header-height-compact);
		padding-inline: calc((100% - var(--container-width)) / 2);
		/*
		 * Il respiro sopra il marchio. Sul telefono la fascia comincia dal bordo dello
		 * schermo, e il logotipo ci finiva appiccicato: `env(safe-area-inset-top)` scansa
		 * la tacca ma non regala aria, perché su un telefono senza tacca vale zero. Lo
		 * spazio va chiesto, e si chiede qui.
		 */
		padding-top: calc(env(safe-area-inset-top) + var(--space-unit) * 2.4);
	}

	/*
	 * Sotto i 601 px la barra di WordPress smette di essere fissa e scorre via con la
	 * pagina: agganciare la fascia alla sua altezza lascerebbe per sempre un varco alto
	 * quanto una barra che non c'è più.
	 */
	@media (max-width: 600px) {
		.nm-header { top: 0; }
	}

	/*
	 * Sul telefono la barra diventa un pannello a tutto schermo, e la riga di notte che
	 * sta dietro le voci sul desktop non ha piu' senso: si stenderebbe attraverso il
	 * pannello. Il pannello ha gia' il suo fondo.
	 */
	/*
	 * Sul telefono la barra e' un pannello a tutto schermo: la cornice non puo' stargli
	 * attorno, starebbe attorno allo schermo. Passa alla lista, che e' la colonna di voci
	 * — stessa ricetta, altro bersaglio.
	 */
	.nm-nav::before,
	.nm-nav::after { display: none; }

	.nm-nav__list {
		position: relative;
		padding: calc(var(--space-unit) * 2.4) calc(var(--space-unit) * 3);
	}

	.nm-nav__list::before,
	.nm-nav__list::after { inset: 0; }

	/*
	 * La fascia ha un fondo solo quando la pagina scorre (`data-nm-scorsa`, da menu.js): un
	 * decimo di colore e la sfocatura, che staccano dal marchio le righe che gli passano
	 * sotto. Ferma in cima non ha niente. Il committente non voleva la velina («in alto
	 * nell'header non voglio eventuale velina»), il 6 ottobre 2026 ha tolto la sfocatura che
	 * c'era sempre («da mobile no effetto blurrato in header») e poi l'ha voluta solo
	 * scorrendo: «header blurrato solo quando si scrolla».
	 *
	 * Sta su uno pseudo-elemento e non sull'header: `backdrop-filter` su un elemento lo rende
	 * il riferimento di tutti i suoi discendenti in `position: fixed`, e il pannello del menu
	 * e' uno di quelli. Il bordo di sotto sfuma invece di tagliare: e' lo stesso accorgimento
	 * della striscia dei loghi.
	 *
	 * Scende un poco oltre la testata, e sfuma solo dopo: «L’atelier» sta in fondo alla
	 * testata, e con la sfumatura dentro la testata la sfocatura finiva a meta' del pulsante
	 * («blurrato fino a sotto il pulsante l'atelier», 7 ottobre 2026).
	 */
	.nm-header::before {
		content: '';
		position: absolute;
		inset: 0 0 -1.6rem;
		z-index: -1;
		background: color-mix(in srgb, var(--color-bg) 10%, transparent);
		backdrop-filter: blur(14px) saturate(118%);
		-webkit-backdrop-filter: blur(14px) saturate(118%);
		-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent 100%);
		mask-image: linear-gradient(to bottom, #000 calc(100% - 2rem), transparent 100%);
		/* Sulle vetrine la carta che sale la copre: scorrimento.js scrive quanto. */
		clip-path: inset(0 0 var(--nm-coperto, 0px) 0);
		opacity: 0;
		transition: opacity var(--motion-duration-ui) var(--motion-ease);
	}

	.nm-header[data-nm-scorsa]::before { opacity: 1; }

	/* Marchio e interruttore stanno sopra il pannello: il primo perché si continui a
	   sapere dove si è, il secondo perché si possa chiudere. */
	.nm-header > .nm-logo,
	.nm-header__azioni { position: relative; z-index: 2; }

	/*
	 * Aperto il pannello, la testa è sopra una scena notte qualunque sia la scena sotto:
	 * sulle pagine chiare logotipo e interruttore passano alla tavolozza della notte, se
	 * no sul pannello blu sparirebbero tutti e due. La commutazione sta fuori da qui, su
	 * `data-nm-menu`, perché dal 1° ottobre 2026 vale anche sul desktop, dove il menu
	 * aperto ha il suo velo.
	 */

	/* Il payoff sotto il logotipo va a capo due volte e raddoppia l'altezza della fascia
	   per dire una cosa che la Home dice già in grande. */
	.nm-header--compact .nm-logo__payoff { display: none; }

	.nm-logo { max-width: 52vw; }

	/*
	 * L'interruttore: bersaglio da 48, non da 29.
	 *
	 * Misurato prima: 43x29 px, sotto i 44 che sono il minimo per un dito. Il riquadro
	 * cresce con il padding, perché è il padding a far crescere anche l'area sensibile.
	 */
	.nm-header__toggle {
		justify-content: center;
		min-width: 48px;
		min-height: 48px;
		padding: 0 0.2em;
	}

	/* Aperto il pannello la parola resta e l'hamburger diventa la croce: la fascia non
	   cambia larghezza, e la croce si prende con il dito come tutto il resto. */

	/*
	 * Il piede su una riga, come nella reference del committente del 6 ottobre 2026: a
	 * sinistra il nome, a destra le due policy — e dal 7 ottobre «Contatti», che apre il
	 * popup dei contatti. I social sul telefono non ci sono, come nella reference, e con
	 * loro i punti che separavano le voci; prima il piede andava a capo tre volte e arrivava
	 * a 150 px. Sotto lascia passare la barra di sistema.
	 *
	 * Sul telefono le quattro voci si spartiscono la riga (`space-between`): con «Contatti» in
	 * piu' e la distanza fissa la riga era piu' larga dello schermo, e a 360 px il nome usciva a
	 * sinistra, «© 2026» tagliato (il committente, 7 ottobre 2026). Sotto i 355 px non ci stanno
	 * comunque: il nome va su una riga sua, e i collegamenti sotto. Sul tablet c'e' posto: il
	 * nome a sinistra, i collegamenti insieme a destra.
	 */
	.nm-footer {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: calc(var(--space-unit) * 3);
		padding-bottom: calc(var(--space-unit) * 1.5 + env(safe-area-inset-bottom));
	}

	.nm-footer > * { white-space: nowrap; }
	.nm-footer > :first-child { margin-right: auto; }

	@media (max-width: 600px) {
		.nm-footer {
			justify-content: space-between;
			gap: calc(var(--space-unit) * 1.2);
		}

		.nm-footer > :first-child { margin-right: 0; }
	}

	/* Con la classe del piede davanti: `.nm-footer a`, piu' giu', rimetterebbe i social. */
	.nm-footer .nm-footer__sep,
	.nm-footer .nm-social { display: none; }

	@media (max-width: 354px) {
		.nm-footer {
			flex-wrap: wrap;
			justify-content: center;
			row-gap: 0;
		}

		.nm-footer > :first-child {
			flex-basis: 100%;
			text-align: center;
		}
	}

	/*
	 * I collegamenti del piede erano alti diciotto pixel. Quaranta è il minimo perché il dito
	 * prenda quello che vuole; il testo resta della sua misura, cresce solo il riquadro.
	 */
	.nm-footer a {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
	}
}

/*
 * Il tocco.
 *
 * Il rettangolo grigio che Android e iOS disegnano sopra ogni cosa toccata non è il
 * linguaggio di questo sito: al suo posto ogni bersaglio ha il suo stato premuto, che si
 * vede subito e usa i colori del tema. Si toglie solo dove un puntatore fine non c'è: sul
 * desktop non compare comunque, e la regola non serve.
 */
@media (hover: none) {
	a, button, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

	.nm-nav__list a:active,
	.nm-button:active { opacity: 0.72; }
}

/*
 * La galleria su mobile ha bisogno di una proporzione.
 *
 * In colonna sul desktop l'altezza gliela dava il `flex: 1 1 auto` dentro una colonna alta
 * quanto la scena. Liberata l'altezza della pagina, quella spinta non c'è più e il riquadro
 * si accartoccia sul contenuto: misurato 58 px, cioè la sola icona del libro. Una
 * proporzione 4:5 è quella di un libro in piedi, ed è la stessa per la lastra, per
 * l'immagine sola e per il riquadro vuoto — così le tre disposizioni restano indistinguibili
 * in altezza, che è il motivo per cui esistono.
 */
@media (max-width: 900px) {
	.nm-galleria__lastre,
	.nm-galleria--sola,
	.nm-galleria--vuota {
		flex: 0 0 auto;
		aspect-ratio: 4 / 5;
		width: 100%;
	}
}
/* ---- i comandi della scheda libro, da dito ----

   Misurati durante la navigazione del 7 settembre: lente 30, frecce del carosello 30,
   punti 22. E, cosa peggiore della misura, le frecce della gallery e la lente si vedevano
   solo al passaggio del puntatore — su un telefono quel momento non esiste, quindi la lente
   non c'era proprio e le foto non si potevano ingrandire.

   Dove non c'è un puntatore i comandi si vedono e basta: `hover: none` è la condizione
   giusta, perché parla del dispositivo e non della larghezza — un tablet grande ha le
   stesse dita di un telefono piccolo. */

@media (hover: none) {
	.nm-galleria__freccia,
	.nm-galleria__lente { opacity: 1; }
}

@media (max-width: 900px) {
	.nm-galleria__freccia,
	.nm-galleria__lente,
	.nm-carosello__freccia { width: 44px; }

	/* Il tondo resta di sei pixel: a crescere è il pulsante che gli sta attorno. Il varco
	   si stringe perché cinque punti da quaranta, con il varco di prima, farebbero una fila
	   più larga della colonna. */
	.nm-carosello__punto { width: 40px; height: 40px; }
	.nm-carosello__punti { gap: 0.1rem; }
}

/* ============================================================
   La scelta: due strade, come in un videogioco
   ============================================================

   Il pulsante della Home non porta più dritto al catalogo: apre questa. È l'idea del
   grafico, annotata a mano sul mockup accanto alle due voci — «che si aprono a ventaglio o
   a discesa dal pulsante che si illumina».

   Tutto il resto discende da quella frase: le carte non compaiono al centro dello schermo,
   nascono dal punto dove sta il pulsante e si aprono ruotando. Il punto lo misura il
   JavaScript al momento del clic e lo passa in due custom property — misurarlo prima non
   servirebbe, perché la pagina scorre e la finestra cambia misura. */

/* ---- il ventaglio: due strade accanto al pulsante ----

   Prima era un pannello a schermo intero. Per due sole opzioni e' un gesto sproporzionato:
   copre la pagina, pretende una trappola del fuoco e una via d'uscita, e per dire «compili o
   ricevi» chiede all'utente di uscire dalla scena. Adesso e' un ventaglio che si apre a
   fianco, come due carte sfilate dal mazzo, e la hero resta dov'e'.

   L'ancora e' il contenitore del pulsante, non la pagina: il ventaglio sta accanto a lui per
   posizionamento, non per misura presa al momento del clic — cosi' non si scolla quando la
   finestra cambia. */

.nm-scelta-ancora {
	position: relative;
	display: inline-block;
}

.nm-ventaglio {
	position: absolute;
	left: calc(100% + 0.85rem);
	top: 50%;
	z-index: 6;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	/*
	 * Il punto da cui il ventaglio si apre e' il bordo del pulsante, a meta' altezza: e' da li'
	 * che le carte devono sembrare uscire. La traslazione verticale sta qui e non nelle carte
	 * perche' e' del gruppo — le carte hanno gia' la loro rotazione.
	 */
	transform: translateY(-50%);
	pointer-events: none;
}

.nm-ventaglio[data-nm-aperto="true"] { pointer-events: auto; }

/*
 * La carta.
 *
 * `--nm-i` e' l'indice: da li' vengono il ritardo e il verso della rotazione, cosi' le due si
 * aprono a ventaglio invece che insieme. Chiusa, la carta e' schiacciata contro il pulsante e
 * ruotata a zero: da quel punto si apre.
 */
.nm-ventaglio__carta {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 13.5rem;
	max-width: 17rem;
	padding: 0.62rem 0.9rem;
	border-radius: var(--radius-button);
	text-decoration: none;
	color: var(--color-text);
	/*
	 * Il blu del logo, pieno. Dal 1° ottobre 2026 era un vetro dello stesso blu al 55%,
	 * sfocato — il committente le voleva «meno evidenti, per lasciare risalto al pulsante» —,
	 * ma la nebbia rosata dietro le sbiadiva verso destra: il 6 ottobre ha chiesto colore
	 * pieno, «non con dissolvenza».
	 */
	background: var(--nm-logo-blu);
	transform-origin: left center;
	opacity: 0;
	transform: translateX(-1.6rem) scale(0.82) rotate(0deg);
	transition:
		transform 420ms cubic-bezier(0.16, 0.9, 0.24, 1) calc(var(--nm-i) * 70ms),
		opacity 260ms var(--motion-ease) calc(var(--nm-i) * 70ms),
		background-color 240ms var(--motion-ease),
		box-shadow 240ms var(--motion-ease);
}

.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta {
	opacity: 1;
	/* La prima sale e si inclina all'insu', la seconda scende: e' il ventaglio. */
	transform: translateX(0) rotate(calc((var(--nm-i) - 0.5) * 5deg));
}

/*
 * Il ventaglio che si apre a sinistra: per un'ancora vicina al bordo destro della finestra —
 * «E adesso?» in «Chi siamo». Lo stesso gesto allo specchio: le carte escono dal bordo sinistro
 * dell'ancora, ruotano dal loro lato destro e si aprono nell'altro verso. Solo dove il
 * ventaglio si apre di lato: sotto i 900 px si apre sotto, per tutti.
 */
@media (min-width: 901px) {
	.nm-scelta-ancora--sinistra .nm-ventaglio {
		left: auto;
		right: calc(100% + 0.85rem);
		align-items: flex-end;
	}

	/* Un ponte invisibile sullo spazio fra le carte e l'ancora: aperto al passaggio del
	   puntatore, il ventaglio resta aperto anche mentre lo si attraversa. */
	.nm-scelta-ancora--sinistra .nm-ventaglio::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 0.85rem;
	}

	.nm-scelta-ancora--sinistra .nm-ventaglio__carta {
		transform-origin: right center;
		transform: translateX(1.6rem) scale(0.82) rotate(0deg);
	}

	.nm-scelta-ancora--sinistra .nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta {
		transform: translateX(0) rotate(calc((0.5 - var(--nm-i)) * 5deg));
	}

	.nm-scelta-ancora--sinistra .nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:hover,
	.nm-scelta-ancora--sinistra .nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:focus {
		transform: translateX(-0.22rem) rotate(calc((0.5 - var(--nm-i)) * 5deg)) scale(1.03);
	}
}

/*
 * Il filetto, con la luce che lo percorre: la stessa lingua del pulsante da cui nasce.
 *
 * L'oro del tema pieno, non sfumato: il committente il 6 ottobre 2026 ha chiesto filetto,
 * nome e segno nell'oro del tema al 100%. Prima il filetto passava dal 34% al 70%, e sul
 * vetro blu si leggeva spento. La luce che corre resta, piu' chiara dell'oro.
 */
.nm-ventaglio__cornice {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	/* Un pixel e mezzo: il committente l'ha voluto mezzo pixel piu' spesso (6 ottobre 2026). */
	padding: 1.5px;
	background: linear-gradient(100deg,
		var(--nm-gold-300) 0%,
		var(--nm-gold-300) 40%,
		var(--nm-gold-100) 50%,
		var(--nm-gold-300) 60%,
		var(--nm-gold-300) 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;
}

/*
 * La carta sotto il cursore.
 *
 * `:focus` e non `:focus-visible`: il fuoco qui lo mette il codice aprendo il ventaglio, e su
 * un fuoco dato via codice `:focus-visible` non scatta — la carta appena scelta resterebbe
 * spenta, cioe' l'opposto. Qui il fuoco e' la selezione, non un ripiego per chi naviga da
 * tastiera.
 */
.nm-ventaglio__carta:hover,
.nm-ventaglio__carta:focus {
	outline: none;
	/* Scelta, la carta si scalda: lo stesso blu con un filo d'oro, pieno anche lui. */
	background: color-mix(in srgb, var(--nm-logo-blu) 84%, var(--nm-gold-300));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nm-gold-300) 42%, transparent),
		0 14px 34px -16px color-mix(in srgb, var(--nm-gold-300) 46%, transparent);
}

.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:hover,
.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:focus {
	transform: translateX(0.22rem) rotate(calc((var(--nm-i) - 0.5) * 5deg)) scale(1.03);
}

.nm-ventaglio__icona {
	flex: 0 0 auto;
	display: block;
	width: 1.55rem;
	color: var(--nm-gold-300);
	transition: transform 280ms var(--motion-ease), color 240ms var(--motion-ease);
}

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

/* Al passaggio il segno si fa avanti di un soffio, e resta del suo colore: il committente
   non lo vuole cambiare. */
.nm-ventaglio__carta:hover .nm-ventaglio__icona,
.nm-ventaglio__carta:focus .nm-ventaglio__icona { transform: scale(1.09); }

.nm-ventaglio__testo {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.nm-ventaglio__nome {
	font-family: var(--font-display);
	font-size: clamp(0.95rem, 1.1vw, 1.08rem);
	font-weight: 700;
	color: var(--nm-gold-300);
	line-height: 1.2;
}

.nm-ventaglio__riga {
	font-size: 0.78rem;
	line-height: 1.4;
	color: var(--color-text-muted);
}

/*
 * Il ventaglio sulla carta: in «Chi siamo» il pulsante apre le stesse due strade, e le carte
 * della notte — vetro scuro, scritte crema — sulla carta erano due contorni con dentro
 * niente. Qui sono fogli: carta piu' chiara, filetto d'oro grafico, nome nel blu del logo,
 * segno in oro grafico. La cornice che gira resta, negli ori della carta.
 */
[data-scene-theme="cream"] .nm-ventaglio__carta {
	color: var(--nm-ink-800);
	background: var(--nm-ink-50);
	box-shadow: 0 10px 30px -14px rgb(20 25 38 / 0.28);
}

[data-scene-theme="cream"] .nm-ventaglio__cornice {
	background-image: linear-gradient(100deg,
		color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent) 0%,
		var(--nm-gold-graphic) 40%,
		var(--nm-gold-200) 50%,
		var(--nm-gold-graphic) 60%,
		color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent) 100%);
}

/* Scritte dorate, le ha volute il committente: l'oro d'inchiostro, che e' l'oro fatto per la
   carta. E il segno non cambia al passaggio: sulla carta l'oro acceso in cui si accendeva
   e' quasi bianco, e sembrava spegnersi. */
[data-scene-theme="cream"] .nm-ventaglio__icona,
[data-scene-theme="cream"] .nm-ventaglio__carta:hover .nm-ventaglio__icona,
[data-scene-theme="cream"] .nm-ventaglio__carta:focus .nm-ventaglio__icona { color: var(--nm-gold-graphic); transform: none; }
[data-scene-theme="cream"] .nm-ventaglio__nome { color: var(--nm-gold-ink); }
[data-scene-theme="cream"] .nm-ventaglio__riga { color: color-mix(in srgb, var(--nm-gold-ink) 80%, transparent); }

[data-scene-theme="cream"] .nm-ventaglio__carta:hover,
[data-scene-theme="cream"] .nm-ventaglio__carta:focus {
	background: color-mix(in srgb, var(--nm-gold-300) 18%, var(--nm-ink-50));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nm-gold-graphic) 55%, transparent),
		0 14px 34px -16px color-mix(in srgb, var(--nm-gold-ink) 40%, transparent);
}

/* Le faville dormono finche' la carta non e' scelta: accese sempre sarebbero decorazione. */
.nm-ventaglio__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--s, 10px);
	pointer-events: none;
	color: var(--nm-gold-100);
	opacity: 0;
	transform: translate(-50%, -50%);
}

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

.nm-ventaglio__carta:hover .nm-ventaglio__favilla,
.nm-ventaglio__carta:focus .nm-ventaglio__favilla {
	animation: nm-magia-favilla var(--d, 3.6s) var(--motion-ease) var(--r, 0s) infinite;
}

/*
 * Sotto una certa larghezza «accanto» non esiste: il pulsante e' quasi largo quanto la
 * colonna, e il ventaglio finirebbe fuori dallo schermo. Li' si apre sotto, e le carte si
 * allargano quanto il pulsante invece di restare due cartoncini stretti.
 */
@media (max-width: 900px) {
	.nm-scelta-ancora { display: block; }

	.nm-ventaglio {
		left: 0;
		right: 0;
		top: calc(100% + 0.6rem);
		transform: none;
	}

	.nm-ventaglio__carta {
		min-width: 0;
		max-width: none;
		transform: translateY(-0.7rem) scale(0.94);
	}

	.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta {
		transform: translateY(0) rotate(0deg);
	}

	.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:hover,
	.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:focus {
		transform: translateY(0) rotate(0deg) scale(1.02);
	}
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Niente ventaglio e niente faville: resta la dissolvenza. Chi ha chiesto di non far
	 * muovere le cose vuole scegliere, non vedere un'apertura.
	 */
	.nm-ventaglio__carta {
		transform: none;
		transition: opacity 150ms linear;
	}

	.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta,
	.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:hover,
	.nm-ventaglio[data-nm-aperto="true"] .nm-ventaglio__carta:focus { transform: none; }

	.nm-ventaglio__cornice,
	.nm-ventaglio__favilla { animation: none; }
}

/* ============================================================
   La chat: la nuvoletta dorata e il pannello
   ============================================================
   In basso a destra, su tutte le pagine, sopra tutto tranne il menu del telefono. Il
   pulsante e' un disco d'oro con la nuvoletta, un alone che respira e quattro faville
   che salgono — la stessa magia del pulsante «Crea il tuo libro». Il pannello e' di notte
   qualunque sia la pagina: una chat e' una finestra su un altro posto, e la notte e' il
   posto di Noomray. Si apre e si chiude con una dissolvenza; lo dice `data-nm-aperto`
   sul contenitore, e senza JavaScript lo dice l'ancora (`:target`). */

.nm-chat {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 18;
	transition: opacity 380ms var(--motion-ease), visibility 0s linear 0s;
	display: flex;
	/* Il pulsante viene prima nel documento e sta in basso: il pannello si apre sopra. */
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 0.9rem;
	pointer-events: none;
}

/*
 * Aperto il menu, la chat se ne va: sta fuori dalla pagina — sopra tutto, per poter
 * essere aperta da ovunque — e il velo del menu non la puo' coprire. Torna quando il velo
 * se n'e' andato.
 */
[data-nm-menu] .nm-chat {
	opacity: 0;
	visibility: hidden;
	transition: opacity 280ms var(--motion-ease), visibility 0s linear 280ms;
}

.nm-chat > * { pointer-events: auto; }

/* ---- il pulsante ---- */

.nm-chat__pulsante {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--nm-chat-pulsante);
	aspect-ratio: 1;
	border-radius: 50%;
	text-decoration: none;
	cursor: var(--nm-cursore-attivo);
	transition: transform 320ms var(--motion-ease);
}

.nm-chat__pulsante:hover,
.nm-chat__pulsante:focus-visible { transform: scale(1.06); }
.nm-chat__pulsante:focus-visible { outline: 2px solid var(--nm-gold-300); outline-offset: 6px; }

/* Il disco: oro con un verso della luce, come le monete dei passi. Sopra, la nuvoletta in
   inchiostro di notte. */
.nm-chat__disco {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	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 4px 14px -4px rgb(2 6 14 / 0.5),
		0 0 0 1px color-mix(in srgb, var(--nm-gold-100) 55%, transparent),
		0 0 22px color-mix(in srgb, var(--nm-gold-300) 55%, transparent);
	color: var(--nm-night-800);
}

.nm-chat__disco svg { display: block; width: 52%; height: auto; }

/* L'alone che respira dietro il disco. */
.nm-chat__alone {
	position: absolute;
	inset: -34%;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--nm-gold-200) 46%, transparent) 0%, transparent 66%);
	animation: nm-chat-respiro 3.2s ease-in-out infinite alternate;
	pointer-events: none;
}

@keyframes nm-chat-respiro {
	from { opacity: 0.45; transform: scale(0.88); }
	to   { opacity: 1;    transform: scale(1.1); }
}

/* Le faville: le stesse del pulsante che brilla, con la stessa animazione. */
.nm-chat__favilla {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	width: var(--s, 12px);
	pointer-events: none;
	color: var(--nm-gold-100);
	opacity: 0;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 0 4px color-mix(in srgb, var(--nm-gold-200) 80%, transparent));
	animation: nm-magia-favilla var(--d, 3.6s) var(--motion-ease) var(--r, 0s) infinite;
}

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

/* Sulla carta le faville crema sparirebbero: oro grafico, e l'alone piu' tenue. */
[data-scene-theme="cream"] .nm-chat__favilla { color: var(--nm-gold-graphic); filter: none; }
[data-scene-theme="cream"] .nm-chat__alone { opacity: 0.6; }

/* ---- il pannello ---- */

/*
 * Il pannello e' di carta: lo stesso foglio del blog e della scheda del libro — il fondo
 * `--nm-carta-fondo` con la sua grana — per volere del committente. Il testo e' inchiostro,
 * il titolo nel blu del logo, cio' che si tocca in oro d'inchiostro: la lingua della carta.
 */
.nm-chat__pannello {
	--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);
	--color-border: color-mix(in srgb, var(--nm-gold-graphic) 40%, transparent);
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(24rem, calc(100vw - 2rem));
	max-height: min(70svh, 40rem);
	border: 1.5px solid var(--nm-ink-50);
	border-radius: var(--radius-card);
	background: var(--nm-carta-fondo);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--nm-paper-300) 52%, transparent),
		0 30px 80px -24px rgb(2 6 14 / 0.55);
	color: var(--nm-ink-800);
	color-scheme: light;
	overflow: hidden;
	isolation: isolate;
	/* Chiuso: trasparente e non c'e'. Aperto: appare con una dissolvenza e sale di poco. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 260ms var(--motion-ease),
		transform 260ms var(--motion-ease),
		visibility 0s linear 260ms;
}

/* La grana della carta, sotto tutto. */
.nm-chat__pannello::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	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);
	pointer-events: none;
}

.nm-chat[data-nm-aperto] .nm-chat__pannello,
.no-js .nm-chat__pannello:target {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 300ms var(--motion-ease),
		transform 300ms var(--motion-ease),
		visibility 0s linear 0s;
}

.nm-chat__testa {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.9rem 0.9rem 0.9rem 1.1rem;
	border-bottom: var(--nm-rule-width) solid var(--color-border);
}

.nm-chat__marchio { display: block; width: 1.5rem; color: var(--nm-gold-graphic); }
.nm-chat__marchio svg { display: block; width: 100%; height: auto; }

.nm-chat__titolo {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--nm-logo-blu);
}

.nm-chat__chiudi {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	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);
	transition: border-color var(--motion-duration-ui) var(--motion-ease), background-color var(--motion-duration-ui) var(--motion-ease);
}

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

/* Il filo della conversazione: scorre dentro di se' se e' lungo. */
.nm-chat__filo {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	min-height: 0;
	padding: 1rem 1rem 1.1rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--nm-gold-400) transparent;
}

/* Le nuvolette di Noomray: a sinistra, con l'angolo in basso a sinistra vivo, un foglio
   appena piu' chiaro con l'orlo che hanno le schede sulla carta. */
.nm-chat__nuvola {
	align-self: flex-start;
	max-width: 88%;
	margin: 0;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--nm-ink-50);
	border-radius: var(--radius-card) var(--radius-card) var(--radius-card) 4px;
	background: color-mix(in srgb, var(--nm-ink-50) 62%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--nm-paper-300) 52%, transparent);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--nm-ink-800);
}

.nm-chat__nuvola--inviato { border-color: color-mix(in srgb, var(--nm-gold-graphic) 62%, transparent); color: var(--nm-logo-blu); }
.nm-chat__nuvola--errore { border-color: color-mix(in srgb, var(--nm-gold-graphic) 62%, transparent); color: var(--nm-gold-ink); }

/* Il modulo: i campi uno sotto l'altro, come si scrive in una chat. */
.nm-chat__modulo {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin-top: 0.3rem;
}

.nm-chat__campo {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.nm-chat__etichetta {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: var(--nm-tracking-caps);
	text-transform: uppercase;
	color: var(--nm-gold-ink);
}

.nm-chat__testo {
	width: 100%;
	padding: 0.7rem 0.85rem;
	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-ink-900);
	font-family: var(--font-body);
	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-chat__testo::placeholder { color: color-mix(in srgb, var(--nm-gold-ink) 60%, transparent); }

.nm-chat__testo:focus {
	outline: none;
	border-color: var(--nm-gold-graphic);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nm-gold-300) 30%, transparent);
}

.nm-chat__testo[aria-invalid="true"] { border-color: var(--nm-gold-ink); }

textarea.nm-chat__testo { resize: vertical; min-height: 4.6rem; }

.nm-chat__consenso {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: color-mix(in srgb, var(--nm-ink-800) 84%, transparent);
	cursor: var(--nm-cursore-attivo);
}

.nm-chat__consenso input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; accent-color: var(--nm-gold-graphic); }
.nm-chat__consenso a { color: var(--nm-gold-ink); text-decoration: underline; text-underline-offset: 0.2em; }

.nm-chat__errore { font-size: 0.74rem; color: var(--nm-gold-ink); }
.nm-chat__errore:empty { display: none; }

/* Il campo per i robot: fuori dallo schermo, non nascosto — un campo nascosto i robot
   lo saltano, uno fuori dallo schermo no. */
.nm-chat__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }

.nm-chat__azione { margin: 0.2rem 0 0; }

/* «Invia»: il pulsante del tema nella lingua della carta — filetto d'oro, scritta in oro
   d'inchiostro, al passaggio si accende il fondo. Il selettore porta il tema della carta
   perche' la regola generale del pulsante sulla carta (`[data-scene-theme="cream"]
   .nm-button`, inchiostro scuro) vincerebbe: e la scritta blu il committente non la vuole. */
.nm-chat__invia,
[data-scene-theme="cream"] .nm-chat__invia { width: 100%; justify-content: center; border-color: var(--nm-gold-graphic); color: var(--nm-gold-ink); }
[data-scene-theme="cream"] .nm-chat__invia:hover,
[data-scene-theme="cream"] .nm-chat__invia:focus-visible { color: var(--nm-gold-ink); background: color-mix(in srgb, var(--nm-gold-300) 22%, transparent); box-shadow: none; }
.nm-chat__invia:disabled { opacity: 0.6; cursor: default; }

/* Sul telefono il pannello e' un foglio che sale dal basso, largo quanto lo schermo. */
@media (max-width: 640px) {
	.nm-chat { right: 0; bottom: 0; left: 0; align-items: flex-end; padding: 0 max(0.9rem, env(safe-area-inset-right)) max(0.9rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-left)); }
	.nm-chat__pannello { width: 100%; max-height: min(78svh, 40rem); }
}

@media (prefers-reduced-motion: reduce) {
	.nm-chat__alone,
	.nm-chat__favilla { animation: none; }
	.nm-chat__favilla { opacity: 0.6; }
	.nm-chat__pannello { transition: opacity 150ms var(--motion-ease), visibility 0s linear 150ms; transform: none; }
}