/* Nuova linea di design (prova): editoriale, molto spazio, tipografia grande,
   etichette "da indice" in carattere mono, un solo accento (il gradiente di Nia) usato come evidenziatore. */
:root {
  --nd-bg: #F7F8FA;
  --nd-ink: #0B1B33;
  --nd-ink2: #46536A;
  --nd-muted: #7A8597;
  --nd-line: #DCE1E9;
  --nd-band: #0B1B33;
  --nd-band-ink: #F2F5FA;
  --nd-accent: #2F6FDE;
  --nd-grad: linear-gradient(100deg, #F06139, #D43998 35%, #8B1EBA 65%, #1E42BA);
  --nd-display: 'DM Serif Display', 'DM Serif Text', Georgia, serif;
  --nd-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nd-bg: #0A1322; --nd-ink: #EEF2F8; --nd-ink2: #B3BFD1; --nd-muted: #7F8CA2; --nd-line: #1F2C44;
    --nd-band: #F2F5FA; --nd-band-ink: #0B1B33; --nd-accent: #7FB8FF;
  }
}
:root[data-theme="dark"] {
  --nd-bg: #0A1322; --nd-ink: #EEF2F8; --nd-ink2: #B3BFD1; --nd-muted: #7F8CA2; --nd-line: #1F2C44;
  --nd-band: #F2F5FA; --nd-band-ink: #0B1B33; --nd-accent: #7FB8FF;
}

/* Etichette da indice */
.nd-label { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 .72rem/1 var(--nd-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nd-muted); }
.nd-label span { color: var(--nd-ink); }

/* 01 · Il problema */

/* La frase che definisce CEnTRO */

.nd-kicker { margin: 0; font: 500 .8rem/1 var(--nd-mono); letter-spacing: .3em; text-transform: uppercase; opacity: .7; }

.nd-mark { background-image: var(--nd-grad); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% .11em; padding-bottom: .04em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.6,0,.2,1) .35s; }
.nd-mark + .nd-mark{ transition-delay: 1.05s; }
 html:not(.js) .nd-mark { background-size: 100% .11em; }

/* 02 · Come funziona */

/* 03 · Una settimana: un percorso che si accende scorrendo */

/* Per chi */

/* Comparsa allo scorrimento */
html.js [data-nd] { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
html.js [data-nd].in { opacity: 1; transform: none; }

/* Etichetta "prova" nella barra */

@media (prefers-reduced-motion: reduce) {
  html.js [data-nd], .nd-mark{ transition: none; }
}