/* Tipografia, contenitori, stati di interazione. Tutto in token: nessun colore
   e nessuna misura scritti a mano. */

/* ---- contenitori ---- */

.nm-container {
	width: var(--container-width);
	margin-inline: auto;
}

/* ---- tipografia ---- */

h1, h2, h3, .nm-display {
	font-family: var(--font-display);
	color: var(--color-heading);
	font-weight: 500;
	margin: 0 0 calc(var(--space-unit) * 2);
	text-wrap: balance;
}

h1, .nm-display--hero {
	font-size: var(--scale-h1);
	line-height: 1.08;
	letter-spacing: -0.01em;
	font-weight: 400;
}
h2 { font-size: var(--scale-h2); line-height: 1.15; }
h3 { font-size: var(--scale-h3); line-height: 1.25; }

p { margin: 0 0 calc(var(--space-unit) * 2); }
p:last-child { margin-bottom: 0; }

.nm-lead {
	font-family: var(--font-display);
	font-style: italic;
	font-size: var(--scale-h3);
	line-height: 1.35;
	color: var(--color-accent);
}

/* Maiuscoletto spaziato: è il registro di menu, bottoni, etichette e titoli di
   sezione. Un solo posto per definirlo. */
.nm-caps {
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: var(--nm-tracking-caps);
	font-size: clamp(0.68rem, 1.05vw, 0.8rem);
	line-height: 1.4;
}

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

/*
 * L'oro non e' una tinta piatta: e' un gradiente.
 *
 * Misurato sulle lettere di «magico.» nel mockup, l'oro va dal chiaro in alto al piu'
 * profondo in basso, come oro battuto che prende la luce da sopra. Un colore unico lo
 * appiattisce e si vede.
 *
 * Le tre fermate sono i nostri token, non valori inventati, cosi' cambiando la scala
 * cambia anche il gradiente.
 */
:root {
	--nm-oro-lucente: linear-gradient(
		180deg,
		var(--nm-gold-100) 0%,
		var(--nm-gold-200) 46%,
		var(--nm-gold-300) 100%
	);

	/*
	 * L'oro smaltato, quello di «L’atelier»: bombato, chiaro in alto verso l'oro della luna,
	 * l'oro del tema nel mezzo e piu' profondo in basso. Sta anche su «per te», il titolo della
	 * libreria (6 ottobre 2026).
	 */
	--nm-oro-smalto: linear-gradient(
		180deg,
		color-mix(in srgb, var(--nm-gold-300) 50%, var(--nm-gold-100)) 0%,
		var(--nm-gold-300) 48%,
		color-mix(in srgb, var(--nm-gold-400) 88%, var(--nm-gold-ink)) 100%
	);

	/*
	 * Lo smalto blu di «Crea il tuo libro»: il blu del logo, con un filo di luce calda in alto e
	 * piu' profondo in basso. Sta anche su «Vai» e «Scrivici» in fondo alle vetrine (6 ottobre
	 * 2026).
	 */
	--nm-smalto-blu: linear-gradient(
		180deg,
		color-mix(in srgb, var(--nm-logo-blu) 82%, var(--nm-gold-300)) 0%,
		var(--nm-logo-blu) 48%,
		color-mix(in srgb, var(--nm-logo-blu) 62%, var(--nm-night-900)) 100%
	);
}

/*
 * Il ritaglio sul testo vuole il riempimento trasparente, e senza il supporto le lettere
 * sparirebbero: la regola sta dentro `@supports`, e chi non ce l'ha tiene il colore pieno.
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.nm-oro-lucente {
		background-image: var(--nm-oro-lucente);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

/* ---- collegamenti ---- */

a { color: var(--color-link); text-underline-offset: 0.22em; }
a:hover { text-decoration-thickness: 1px; }

/* Il focus si vede sempre, e usa l'oro del sistema: la sua visibilità non è
   negoziabile nemmeno quando disturba il disegno.
   Nessun border-radius qui dentro: dichiararlo cambierebbe la forma dell'elemento
   mentre è a fuoco, non quella del contorno. I browser il raggio dell'elemento lo
   seguono già da soli. */
:focus-visible {
	outline: 2px solid var(--nm-gold-200);
	outline-offset: 3px;
}

/*
 * Tranne dove il fuoco non è arrivato da chi guarda.
 *
 * Cambiando scena il router porta il fuoco sul titolo, perché chi usa uno screen reader
 * deve trovarsi all'inizio della pagina nuova e non dove stava prima. Ma un `tabindex="-1"`
 * da tastiera non si raggiunge: quel fuoco lo dà solo il programma, e il contorno che ne
 * segue non dice niente a nessuno — dice solo, a chi ha appena cliccato un link col mouse,
 * che il titolo è selezionato. Non lo è: è solo il posto da cui riparte la lettura.
 *
 * La regola del progetto — il fuoco si vede sempre — riguarda le cose su cui si può
 * arrivare: link, pulsanti, campi. Su un titolo che nessuno può raggiungere non c'è niente
 * da segnalare, e l'annuncio in `aria-live` lo dice già a chi deve saperlo.
 */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

/* ---- bottoni ---- */

/* Unico linguaggio di CTA del sito: filetto oro su fondo trasparente, mai pieno. */
.nm-button {
	display: inline-flex;
	align-items: center;
	/*
	 * Geometria presa dal dettaglio del riferimento, che e' a 2x: il bottone reale e'
	 * 219x51 px con maiuscole alte 10 e bordo di 2. In em del corpo, cosi' i rapporti
	 * reggono a qualunque dimensione:
	 *   altezza 3,67em · margini interni 2,16em · varco prima della stella 1,51em
	 *   stella 1,08em · bordo 0,14em · raggio ~6% dell'altezza.
	 */
	gap: 1.3em;
	padding: 1.1em 1.6em;
	/*
	 * Il bordo e' piu' spento del testo, non uguale. Misurato sul dettaglio del
	 * riferimento: bordo #826A4B, testo #BB9867, stella #D4AB6F. Il mio bordo stava a
	 * #D0A56F, molto piu' chiaro: e' questo che lo faceva leggere come una cornice
	 * accesa invece che come un filetto di metallo. Uso l'oro del bordo della luna,
	 * un gradino sotto quello del testo.
	 */
	border: 0.14em solid var(--nm-gold-400);
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--nm-gold-300);
	font-family: var(--font-body);
	/* Era 500, il maiuscoletto di servizio: il 6 ottobre 2026 il committente li ha voluti piu'
	   marcati, quanto «Menu» e le voci del menu. Montserrat e' variabile, il 700 c'e'. */
	font-weight: 700;
	font-size: clamp(0.66rem, 1.37vw, 0.8rem);
	letter-spacing: var(--nm-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	cursor: var(--nm-cursore-attivo);
	/* Serve al raggio che passa dentro, e a tenerlo dentro il raggio di curvatura. */
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		border-color var(--motion-duration-ui) var(--motion-ease),
		color var(--motion-duration-ui) var(--motion-ease),
		background-color var(--motion-duration-ui) var(--motion-ease),
		box-shadow var(--motion-duration-ui) var(--motion-ease);
}

/*
 * L'hover del bottone: tre gesti che il sito conosce gia', perche' "magico" non voglia
 * dire "diverso da tutto il resto".
 *
 * 1. Un raggio di luce attraversa il bottone una volta sola. E' lo stesso gesto che
 *    passa su "la tua storia." nella hero, qui ristretto a un lampo.
 * 2. La scintilla si accende e ruota di 45 gradi, cioe' esattamente da una punta
 *    all'altra: la stella ha quattro punte, e mezzo passo la fa scintillare.
 * 3. Un alone caldo dietro il filetto, come se il bordo fosse illuminato da cio' che il
 *    libro contiene.
 */
.nm-button > * { position: relative; z-index: 1; }

.nm-button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		104deg,
		transparent 34%,
		color-mix(in srgb, var(--nm-gold-100) 30%, transparent) 50%,
		transparent 66%
	);
	transform: translateX(-140%);
}

/*
 * Il ritorno e' istantaneo di proposito: la transizione sta solo sullo stato di hover.
 * Se stesse anche su quello a riposo, togliendo il puntatore la luce tornerebbe
 * indietro come un pendolo, e un raggio non fa marcia indietro.
 */
.nm-button:hover::after,
.nm-button:focus-visible::after {
	transform: translateX(140%);
	transition: transform 820ms var(--motion-ease);
}

.nm-button:hover,
.nm-button:focus-visible {
	border-color: var(--nm-gold-300);
	color: var(--nm-gold-200);
	background: color-mix(in srgb, var(--nm-gold-300) 8%, transparent);
	box-shadow: 0 0 1.9rem -0.5rem color-mix(in srgb, var(--nm-gold-300) 60%, transparent);
}

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

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

/* Su carta l'alone dorato sporca invece di illuminare: si scalda appena l'inchiostro. */
[data-scene-theme="cream"] .nm-button:hover,
[data-scene-theme="cream"] .nm-button:focus-visible {
	color: var(--nm-ink-900);
	box-shadow: 0 0 1.5rem -0.7rem color-mix(in srgb, var(--nm-gold-ink) 55%, transparent);
}

/* ---- filetti e stelline decorative ---- */

/*
 * Filetto con la stella.
 *
 * E' un solo SVG, non due gradienti piu' un'icona: la forma misurata sul dettaglio del
 * riferimento non e' una riga dritta ma un fuso — spessore 2 alle estremita', 4 al
 * centro — e i segmenti arrivano a toccare la stella, senza varco. Con i gradienti CSS
 * quella forma non si ottiene.
 *
 * Larghezza: nel riferimento il filetto occupa il 18,8% della pagina, non tutta la
 * colonna di testo. Era questo a farlo sembrare una riga lunghissima.
 */
.nm-rule {
	display: block;
	width: min(18.8vw, 270px);
	margin-block: calc(var(--space-unit) * 2);
	color: var(--nm-gold-300);
}

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

.nm-rule--corto { width: min(62%, 152px); margin-inline: auto; }

/* ---- scroll interno dei container designati ---- */

.nm-scroll {
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--nm-gold-400) transparent;
}

.nm-scroll::-webkit-scrollbar { width: 6px; }
.nm-scroll::-webkit-scrollbar-thumb {
	background: var(--nm-gold-400);
	border-radius: 3px;
}
.nm-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---- movimento ridotto ---- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: var(--nm-motion-duration-reduced) !important;
		scroll-behavior: auto !important;
	}
}

/* Stellina al centro del filetto, come nel riferimento. */
.nm-rule--corto { width: min(62%, 12rem); margin-inline: auto; }

/* La scintilla dopo il testo del bottone. */
.nm-button__spark {
	flex: 0 0 auto;
	display: block;
	width: 1.08em;
	color: var(--color-accent-gold);
	transition:
		color var(--motion-duration-ui) var(--motion-ease),
		transform 420ms var(--motion-ease),
		filter var(--motion-duration-ui) var(--motion-ease);
}

/* ---- il cursore ----

   La piuma del logotipo diventa il puntatore, ma solo dove un puntatore esiste davvero:
   `hover: hover` e `pointer: fine` insieme escludono il dito e il pennino grosso dei
   tablet, dove un cursore disegnato non si vedrebbe mai.

   Due varianti, e la differenza è quella che il sito usa già altrove: la scintilla dopo il
   testo delle CTA. Piuma ferma sul testo, piuma che si accende su quello che si può
   toccare — così «qui succede qualcosa» non è affidato al solo colore.

   Il punto attivo è 1 35, cioè la punta del pennino, misurata sul logotipo da
   docs/strumenti/genera-cursore.php. Quello che sta dopo la virgola non è decorazione: se
   l'immagine non carica, o è più grande di quanto il sistema accetti, il browser scarta
   tutta la dichiarazione e resta quello.

   Sono due token e non due dichiarazioni sparse perché `cursor: pointer` nel tema compare
   in nove punti, e nove punti da tenere allineati a mano sono nove punti che prima o poi
   non lo sono più. Fuori dal media query i token valgono `auto` e `pointer`: chi non ha un
   puntatore fine non scarica niente. */

:root {
	--nm-cursore: auto;
	--nm-cursore-attivo: pointer;
}

@media (hover: hover) and (pointer: fine) {
	:root {
		--nm-cursore: image-set(url("../img/cursore-piuma.png") 1x, url("../img/cursore-piuma@2x.png") 2x) 1 35, auto;
		--nm-cursore-attivo: image-set(url("../img/cursore-piuma-attivo.png") 1x, url("../img/cursore-piuma-attivo@2x.png") 2x) 1 35, pointer;
	}
}

body { cursor: var(--nm-cursore); }

a,
button,
summary,
label[for],
select,
[role="button"],
[role="tab"],
input[type="checkbox"],
input[type="radio"] { cursor: var(--nm-cursore-attivo); }

/* Dove si scrive resta il cursore di sistema: lì la forma dice dove cadrà la lettera, e
   una piuma non lo dice. */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
textarea { cursor: text; }

:disabled,
[aria-disabled="true"] { cursor: not-allowed; }