/* FORZA MARCO — foglio di stile unico.
   ---------------------------------------------------------------------------
   Viene da src/app/globals.css + tokens.css del prototipo Next. La parte
   scritta a mano è passata di qui pressoché intatta: era già CSS semantico.
   Quello che nel prototipo erano utility di Tailwind sparse nel markup è
   diventato una classe con un nome, come sugli altri siti della casa.

   Nessun valore esadecimale fuori dai token qui in cima: se serve un colore
   nuovo, nasce lì. */

/* ============ TOKEN ============ */
:root {
  --brand-black: #111318;
  --brand-yellow: #FFD426;
  --brand-white: #F7F6F2;
  --brand-graphite: #30343B;

  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --ink: #111318;
  --muted: #4A4F58;
  --line: #E3E1D9;
  --line-strong: #C9C6BB;
  /* IL CONTORNO DI UN CAMPO NON E' UNA LINEA DECORATIVA. Una riga che separa
     due sezioni puo' essere tenue quanto vuole; il bordo di un campo e' il
     confine di un comando, e WCAG 1.4.11 gli chiede 3:1 contro cio' che ha
     intorno. Con --line-strong faceva 1.71:1 sul bianco del campo e --line
     1.31:1: il campo di ricerca, al sole, non aveva un bordo. Questo tono fa
     3.41:1 sul bianco e non scende sotto 3:1 su nessuna delle superfici del
     sito, tema scuro compreso, quindi non ha bisogno di un suo override. */
  --bordo-campo: #8F8B7D;
  --focus: #111318;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --header-h: 64px;
  --dur: .22s;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Il pacchetto dei token consegnati non include il margine laterale né il
     giallo del passaggio del mouse: ripresi dal prototipo. */
  --gutter: 20px;
  --brand-yellow-hover: #FFE15C;
  --line-black: #23262D;
  --ink-on-dark-nav: #D3D5D9;
  --ink-on-dark-soft: #C9CBD0;
  /* 13/11/2026: era #8D9198. Su NERO faceva 5.87:1 e andava bene, ma su
     GRAFITE faceva 3.95:1 — sotto i 4.5 di AA — e su grafite ci finisce, nella
     didascalia della scheda costi, a 13 px. Il calcolo del 12/11 quel numero
     ce l'aveva gia' e l'aveva archiviato come «solo testo grande» senza
     guardare l'elemento: li' grande non e'. Adesso 4.75:1 sul grafite e
     7.07:1 sul nero. Una soglia condizionale non e' un esito finche' non si
     guarda la condizione. */
  --ink-on-dark-faint: #9BA0A8;

  /* La carta di «La storia di Marco». Il racconto non e' testo del sito: e'
     una lettera, e una lettera ha un supporto. Piu' calda del fondo pagina,
     cosi' il foglio si stacca invece di sparirci dentro. */
  --paper: #FFFDF6;
  --paper-edge: #EAE4D2;
  --paper-ink: #23262D;

  /* Il nero del brand in componenti, per le ombre: cosi' le trasparenze
     nascono da un token come tutto il resto e non da un esadecimale sciolto
     in mezzo al foglio di stile. */
  --ombra-rgb: 17 19 24;

  /* Semantici, separati dal brand di proposito: un avviso non è mai giallo
     FORZA MARCO. */
  --info: #1D4ED8;
  --info-bg: #EAF0FF;
  --danger: #B42318;
  --success: #127A3E;

  color-scheme: light;
}

/* ── I TOKEN DEL BANNER DI CONSENSO ───────────────────────────────────────────────────
   consent-banner.js viene dalla House Library e si veste da se'. Qui si dichiarano solo
   i quattro token dove il default di casa non va bene su questo sito.

   Stanno su #ego-consent e non su :root apposta: valgono per quel componente e per
   niente altro, e chi legge vede subito a cosa servono. Il file di casa resta identico
   a quello degli altri dodici frontend.

   --brand e --brand-ink: l'accento di questo sito e' il giallo, e sul giallo il testo
     e' nero. Il bianco su giallo non si usa qui - non passa AA ed e' scritto fra le
     regole del progetto. Il default di casa e' azzurro con testo bianco.
   --font: il default e' Archivo, e questo sito serve Montserrat dal proprio dominio.
   --consent-link: il default e' l'azzurro EurekaGO, che su un pannello nero e giallo
     e' il colore di un'altra azienda.

   --consent-bg e --consent-fg NON si dichiarano: i default di casa (#0A0A0A e #F5F3EC)
   vanno gia' bene, e un valore ridichiarato uguale e' solo una cosa in piu' da tenere
   allineata quando casa la cambia.

   I valori non seguono il tema chiaro/scuro, ed e' giusto cosi': il banner e' un
   pannello che sta SOPRA la pagina, non dentro, ed e' scuro a ogni tema. Il file di
   casa non legge piu' nessun token di tema - prima usava --ink, che qui e' il colore
   del testo e col tema scuro si ribalta a quasi bianco; il difetto e' stato chiuso
   nella libreria, non con una toppa da questa parte. */
#ego-consent {
  --brand: #FFD426;
  --brand-ink: #111318;
  --font: "Montserrat", system-ui, sans-serif;
  --consent-link: #FFD426;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16181D; --surface: #1E2127; --ink: #F7F6F2; --muted: #B4B7BD;
    --line: #2C3038; --line-strong: #3F444D; --focus: #FFD426;
    --info: #8FB0FF; --info-bg: #1B2440; --danger: #FF8A80; --success: #6FD39B;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #16181D; --surface: #1E2127; --ink: #F7F6F2; --muted: #B4B7BD;
  --line: #2C3038; --line-strong: #3F444D; --focus: #FFD426;
  --info: #8FB0FF; --info-bg: #1B2440; --danger: #FF8A80; --success: #6FD39B;
  color-scheme: dark;
}

.on-dark {
  --muted: #B9BCC2; --line: #2A2E36; --surface: #1A1D23; --focus: #FFD426;
  --line-strong: #3A3F48;
  background: var(--brand-black);
  color: var(--brand-white);
}

.on-graphite {
  --muted: #CDD0D5; --line: #474C55; --surface: #3A3F47; --focus: #FFD426;
  --line-strong: #3A3F48;
  background: var(--brand-graphite);
  color: var(--brand-white);
}

/* ── Il fondo giallo ───────────────────────────────────────────────────────────────────
   Una sola fascia della home ce l'ha, ed e' quella degli Eventi: e' l'invito, ed e'
   dove il giallo dice la cosa giusta. Non Trasparenza, che di giallo ne ha gia' uno -
   la tessera «destinato a Marco» - e dove un fondo giallo se lo mangerebbe: il giallo
   li' significa una cosa precisa, e due gialli non significano niente.
   Mai testo bianco su giallo: su questo fondo si scrive in nero. */
.on-yellow {
  --muted: #4A4F58; --line: rgba(17, 19, 24, .16); --surface: var(--brand-white); --focus: #111318;
  --line-strong: rgba(17, 19, 24, .38);
  background: var(--brand-yellow);
  color: var(--brand-black);
}
/* Il filetto giallo della fascia evento sparirebbe sul giallo: diventa nero. */
.on-yellow .fm-evento { background: var(--brand-white); border-left-color: var(--brand-black); }
/* Il pulsante pieno di giallo, su giallo, non e' un pulsante. */
.on-yellow .btn-primary { background: var(--brand-black); color: var(--brand-white); }
.on-yellow .btn-primary:hover { background: #23262D; }
.on-yellow .fm-tlink { color: var(--brand-black); text-decoration-color: var(--brand-black); }
.on-yellow .fm-evento-tbc { background: var(--brand-black); color: var(--brand-white); border-color: transparent; }

/* ============ CARATTERE ============ */
/* Montserrat servito da questo dominio: nessuna richiesta parte verso Google
   dal browser di chi visita, quindi nessun dato di navigazione verso terzi.
   È anche il motivo per cui la CSP del .htaccess ha font-src 'self'.
   I file sono i sottoinsiemi latini estratti dalla build di next/font. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Montserrat;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Montserrat;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/montserrat-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* CAVEAT NON E' UN FONT DEL SITO: il font del sito e' Montserrat e resta
   Montserrat. Questa faccia serve a due righe sole della pagina «La storia di
   Marco» - l'apertura del racconto e la firma della madre in calce al foglio -
   e non e' usata da nessun'altra parte.

   Ospitata qui come Montserrat, per la stessa ragione: nessuna richiesta a
   Google dal browser di chi legge, e la CSP resta `font-src 'self'`.

   Solo il sottoinsieme latin, 73 KB. L'italiano, accenti compresi, sta tutto
   in U+0000-00FF; il unicode-range qui sotto fa il resto, perche' un carattere
   fuori dal blocco viene disegnato con Montserrat invece di far scaricare un
   secondo file. SIL OFL 1.1: fonts/LICENSE.md. */
@font-face {
  font-family: Caveat;
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--brand-black);
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

/* La barra di sistema (notch) sempre nera, come nel prototipo. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--brand-black);
}

body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; }
img { display: block; height: auto; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

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

/* ============ LAYOUT ============ */
.wrap {
  width: min(1200px, 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ============ TIPOGRAFIA ============ */
.display {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .92;
  margin: 0;
}

.h2 {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2rem, 6.4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}

.h3 {
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
}

.lead {
  font-size: clamp(1.05rem, 2.8vw, 1.25rem);
  line-height: 1.55;
  font-weight: 500;
  margin: 0;
}

.prose {
  max-width: 62ch;
  color: var(--muted);
}

.prose p { margin: 0; }
.prose p + p { margin-top: 1em; }

/* La sottolineatura gialla del payoff. */
.swoosh {
  position: relative;
  white-space: nowrap;
  display: inline-block;
}

.swoosh::after {
  content: "";
  position: absolute;
  left: 6%;
  right: -4%;
  bottom: -.16em;
  height: .17em;
  background: url("../brand/forza-marco-swoosh.svg") no-repeat center / 100% 100%;
}

/* ============ ACCESSIBILITÀ ============ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--brand-yellow);
  color: var(--brand-black);
  padding: 12px 16px;
  font-weight: 700;
  border-radius: var(--r-sm);
}

.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ============ PULSANTI ============ */
/* Nessun colore di bordo nella base: lo decide la variante. Due regole sulla
   stessa proprietà non si battono per ordine nel markup ma per ordine nel
   foglio, ed è esattamente l'errore che il prototipo aveva fatto. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  min-height: 52px;
  border: 2px solid;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  border-color: transparent;
  background: var(--brand-yellow);
  color: var(--brand-black);
}
.btn-primary:hover { background: var(--brand-yellow-hover); }

.btn-ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.btn-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

.btn-ink {
  border-color: transparent;
  background: var(--ink);
  color: var(--bg);
}
.btn-ink:hover { opacity: .88; }

.btn-sm {
  min-height: 42px;
  padding: 9px 16px;
  font-size: .88rem;
}

/* ── TUTTI I BOTTONI HANNO LA STESSA LARGHEZZA ──────────────────────────────────────
   Prima ogni bottone era largo quanto il suo testo: «Contattaci» 153 px, «Guarda gli
   eventi» 216, «Proponi un'iniziativa» 248. Lo stesso gesto — premere — aveva tre
   misure, e due sezioni una sotto l'altra sembravano composte da due mani diverse.
   Adesso misurano tutti 260 px: il piu' largo che il sito abbia oggi, piu' un po' d'aria.

   LA REGOLA E' SCRITTA ALL'INVERSO, E APPOSTA. Non elenca i bottoni che devono avere
   la misura: elenca i due posti dove NON vale. Cosi' un bottone nuovo la prende da
   solo, e se un giorno non deve prenderla tocca a qualcuno scriverlo. Un elenco di
   quelli inclusi copre solo cio' che esisteva il giorno in cui e' stato scritto: e' lo
   stesso difetto che la colonna di lettura aveva in questo file fino all'11/11/2026,
   e non vale la pena rifarlo trenta righe piu' su.

   SE UN'ETICHETTA SUPERA I 260 px, quel bottone diventa piu' largo degli altri e
   l'uniformita' si rompe in silenzio. La risposta giusta e' accorciare l'etichetta, non
   allargare la regola: un testo che non sta in una misura comoda di solito e' una
   frase, non un pulsante.

   LE DUE ECCEZIONI, e perche' non sono un'eccezione alla sostanza. Nell'hero i bottoni
   sono due in fila dentro una colonna di 488 px: a 260 ciascuno non ci starebbero e
   andrebbero a capo, cambiando una composizione che viene dal prototipo approvato.
   Nella barra fissa del telefono il bottone riempie gia' la barra con flex: 1, e una
   misura minima lo farebbe uscire di schermo sotto i 290 px. In tutti e due i casi i
   bottoni sono gia' uguali fra loro, che e' la cosa che si vede.

   Il bottone piccolo della testata resta fuori: e' una variante di misura, non lo
   stesso oggetto, e portarlo a 260 px romperebbe la riga della testata.

   SOTTO I 720 px PRENDONO LA RIGA INTERA. In una colonna stretta un bottone da 260 px
   lascia un vuoto a destra che sembra un errore di allineamento, e offre al dito un
   bersaglio piu' piccolo di quello che lo schermo potrebbe dargli. Il testo e' gia'
   centrato — .btn e' inline-flex con justify-content: center — quindi passare a
   width: 100% non sposta niente. min-width torna a 0 perche' su uno schermo da 280 px
   il minimo avrebbe la meglio sulla larghezza e la riga uscirebbe di pagina. */
.btn:not(.btn-sm) { min-width: 260px; }
.fm-hero-ctas .btn:not(.btn-sm),
.fm-mbar .btn:not(.btn-sm) { min-width: 0; }

@media (max-width: 719.98px) {
  .btn:not(.btn-sm) { width: 100%; min-width: 0; }
}

/* Sulle superfici scure il focus è giallo; su un pulsante giallo sparirebbe,
   quindi lì diventa bianco. */
.on-dark .btn-primary:focus-visible,
.on-graphite .btn-primary:focus-visible { outline-color: var(--brand-white); }

/* ============ HEADER ============ */
.fm-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  border-bottom: 1px solid var(--line-black);
}

.fm-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--header-h);
}

.fm-logo { display: inline-flex; align-items: center; border-radius: var(--r-sm); }
.fm-header .fm-logo-svg { display: block; height: 40px; width: auto; }

.fm-nav { display: none; }

.fm-nav a {
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-on-dark-nav);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.fm-nav a:hover { color: var(--brand-white); }
.fm-nav a[aria-current="page"] { color: var(--brand-yellow); }

.fm-header-cta { margin-left: auto; }

/* Sotto i 360 px resta la sola prima parola: su un telefono stretto la CTA e
   il bottone del menu devono stare sulla stessa riga. */
.fm-cta-resto { display: none; }
@media (min-width: 360px) { .fm-cta-resto { display: inline; } }

.fm-menu-apri {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.fm-burger { display: grid; gap: 5px; }
.fm-burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.fm-menu-apri[aria-expanded="true"] .fm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fm-menu-apri[aria-expanded="true"] .fm-burger span:nth-child(2) { opacity: 0; }
.fm-menu-apri[aria-expanded="true"] .fm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.fm-menu {
  border-top: 1px solid var(--line-black);
  padding: 8px var(--gutter) 16px;
}

.fm-menu nav { display: grid; }

.fm-menu a {
  padding: 14px 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-white);
  text-decoration: none;
  border-bottom: 1px solid var(--line-black);
}

@media (min-width: 1080px) {
  .fm-nav { display: flex; gap: 2px; margin-left: auto; }
  .fm-header-cta { margin-left: 8px; }
  .fm-menu-apri, .fm-menu { display: none; }
}

/* ============ FOOTER ============ */
.fm-footer {
  border-top: 1px solid var(--line-black);
  padding-top: 56px;
  padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}

/* IL PIEDE E' UNA COMPOSIZIONE CENTRATA, una colonna sola.
   Prima erano due: marchio a sinistra e navigazione a destra, alte diverse,
   e ogni volta che una delle due cambiava lunghezza si apriva un vuoto da
   qualche parte. Due colonne che devono restare alte uguali sono un difetto
   che torna: lo abbiamo chiuso tre volte in un giorno, in tre punti diversi.
   Una colonna centrata non ha un lato corto e un lato lungo, quindi non ha
   dove aprirsi. E il piede diventa simmetrico anche in fondo: prima il
   copyright stava a destra e la firma al centro, che erano due decisioni in
   disaccordo nello stesso blocco. */
.fm-footer-grid { display: grid; gap: 28px; justify-items: center; text-align: center; }
.fm-footer .fm-logo-svg { display: block; height: 52px; width: auto; }

.fm-payoff { margin: 14px 0 0; font-size: 1.05rem; font-style: italic; }

/* Chi gestisce il sito, sotto il payoff. Stessa misura e stesso grigio della
   riga legale in fondo, perche' e' la stessa voce: cambia solo il posto.

   NESSUNA LARGHEZZA MASSIMA. Ne aveva una, 46ch, ereditata da quando questa riga
   stava stretta in una colonna di piede larga meta' pagina. Da quando il piede e'
   centrato quella misura non protegge piu' niente e manda a capo una frase che ci
   starebbe comoda: novanta caratteri dentro milleduecento pixel. Una riga sola che
   va a capo quando lo schermo lo impone, non quando glielo impone una regola
   scritta per un'altra impaginazione. */
.fm-footer-gestione {
  margin: 18px auto 0;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}

.fm-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 28px;
  row-gap: 0;
}

.fm-footer-nav a {
  padding: 8px 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-on-dark-soft);
  text-decoration: none;
}

.fm-footer-nav a:hover { color: var(--brand-white); }

/* Due righe a tutta larghezza, non tre impilate: in alto il testo grigio, sotto il
   co-branding. Su schermo stretto tornano una sotto l'altra da sole. */
.fm-footer-note {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--line-black);
  padding-top: 20px;
  font-size: .8rem;
  color: var(--ink-on-dark-faint);
}
/* Una riga sola e centrata: il secondo span e il suo allineamento a destra
   servivano quando qui dentro ce ne stavano due. */
.fm-footer-legale { display: grid; gap: 4px; justify-items: center; }

/* Chi ha fatto il sito, e la misura e' la regola: Brand Playbook 19/0015 §D. Piu' piccola e
   piu' quieta di ogni link sopra di lei. Se su qualche schermo il nostro nome si vede piu' di
   cosi', e' sbagliato: questa pagina parla di Marco. */
/* L'ultima riga sta in mezzo alla pagina, non a sinistra sotto il resto: chiude il
   footer invece di pendere da una parte. */
.fm-footer-firma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: .02em;
  /* Bianco, non il grigio del testo secondario: a 10.5 px in #686B71 la riga non si
     leggeva, e una firma che non si legge non serve a niente (Jacopo, 11/11/2026).
     E' il bianco del brand, Warm White, non #FFF: il nero di questo footer non ha mai
     accanto un bianco puro, e il wordmark lo eredita con currentColor.
     Scritto e non ottenuto con l'opacita': l'opacita' si eredita e avrebbe spento anche
     il cuore, e un cuore rosso al 72% non e' il cuore rosso. */
  color: var(--brand-white);
}
/* Il cuore tiene il suo colore e non quello della riga: e' l'unica cosa colorata qui
   dentro, ed e' per Marco. Composto un filo piu' grande perche' a 10.5 px un'emoji
   sparisce fra le lettere. */
.fm-firma-cuore { font-size: 11.5px; line-height: 1; }
/* Il marchio prende l'altezza della riga, non una misura sua: cosi' resta sempre in
   proporzione al testo che lo precede, qualunque corpo abbia. */
.fm-firma-link { display: inline-flex; color: inherit; text-decoration: none; }
/* 1.6em e non l'altezza della riga: un wordmark alto quanto una minuscola non si legge,
   diventa una macchia. A questa misura sta sotto ogni altro elemento del footer e si
   riconosce. ~17 px di altezza, ~83 di larghezza. */
.fm-firma-mark { height: 1.6em; width: auto; display: block; }
/* Nessun richiamo al passaggio: cap. 12 vieta il cambio di colore su un link di testo, e
   l'opacita' qui non si puo' usare senza spegnere il cuore. Resta il cursore. */

@media (min-width: 860px) {
  .fm-footer { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
}

/* ============ TESTATA DELLE PAGINE INTERNE ============ */
.fm-testata { padding: clamp(48px, 8vw, 96px) 0 0; }

.fm-occhiello {
  margin: 0 0 12px;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.fm-testata-titolo { font-size: clamp(2.5rem, 8vw, 4rem); }
.fm-testata-sommario { margin-top: 20px; max-width: 760px; color: var(--muted); }

/* ============ SEZIONI ============ */
.fm-sezione { padding: clamp(32px, 5vw, 48px) 0 0; }
.fm-sezione:last-of-type { padding-bottom: clamp(48px, 8vw, 96px); }
.fm-sezione-titolo { margin-bottom: 12px; }

/* Le pagine a sezioni seguono la stessa regola: titolo della pagina e titoli di sezione
   per tutta la riga, centrati; tutto il resto in colonna centrata da 760 px. Tranne i
   testi legali, che il capitolo tiene interamente in colonna con i titoli a sinistra:
   una informativa si legge dall'alto in basso, non si guarda. */
.fm-testata-titolo, .fm-sezione-titolo { text-align: center; }
.fm-testata .fm-occhiello { text-align: center; }
.fm-testata-sommario { margin-inline: auto; }
/* NELLA COLONNA CI VA IL TESTO, NON TUTTO QUELLO CHE STA IN UNA SEZIONE.
   Il cap. 12 nomina tre cose: «Paragraphs, lists, callout». La colonna da 760 px esiste
   per una ragione precisa che il capitolo scrive: a tutta larghezza una riga su un
   monitor grande supera i 200 caratteri e l'occhio perde l'inizio della riga dopo. E'
   una misura di LETTURA.
   Fino all'11/11/2026 qui dentro c'erano anche .fm-coordinate, .fm-recapito e
   .fm-sezione-cta. Nessuna delle tre e' testo corrente: la prima e' una tabella di dati,
   la seconda un blocco di recapito, la terza una riga di pulsanti. A una tabella di
   coordinate bancarie la misura di lettura non serve - nessuno «legge» un IBAN riga
   dopo riga - e stringerla a 760 le toglieva spazio senza darle niente in cambio.
   La regola del capitolo non cambia e resta vera: era applicata a piu' cose di quelle
   che nomina. */
.fm-sezione .prose,
.fm-sezione .fm-punti,
.fm-sezione .fm-avviso { max-width: 760px; margin-inline: auto; }

/* LA RIGA DEI PULSANTI RESTA NELLA COLONNA, e non perche' sia testo - non lo e'. E'
   che la sua posizione e' definita RISPETTO al testo: il pulsante sta in basso a
   destra perche' quello e', dice il commento in parti.php, «il punto dove l'occhio
   arriva alla fine della lettura». Se la lettura finisce al bordo della colonna, quella
   e' la destra che conta.
   Provato liberandola, e si vedeva: in «Partecipa» il testo finiva a 980 px e il
   pulsante a 1200, duecentoventi piu' in la'. Il pulsante galleggiava fuori dal blocco
   che lo motiva - allineato al bordo di una sezione invece che alla fine della frase
   che dice di premerlo. */
.fm-sezione .fm-sezione-cta { max-width: 760px; margin-inline: auto; }

.pagina-privacy .fm-testata-titolo, .pagina-cookie .fm-testata-titolo,
.pagina-privacy .fm-testata .fm-occhiello, .pagina-cookie .fm-testata .fm-occhiello,
.pagina-privacy .fm-sezione-titolo, .pagina-cookie .fm-sezione-titolo { text-align: left; }
.pagina-privacy .fm-testata-titolo, .pagina-cookie .fm-testata-titolo,
.pagina-privacy .fm-testata .fm-occhiello, .pagina-cookie .fm-testata .fm-occhiello,
.pagina-privacy .fm-testata-sommario, .pagina-cookie .fm-testata-sommario,
.pagina-privacy .fm-sezione-titolo, .pagina-cookie .fm-sezione-titolo { max-width: 760px; margin-inline: auto; }

/* ── E ANCHE NEI BLOCCHI COSTRUITI A MANO ──────────────────────────────────────────────
   La regola qui sopra copre le pagine a sezioni. I blocchi scritti a mano - la home, il
   racconto e la galleria su «La storia di Marco», i costi su Trasparenza - non la
   vedevano, e il loro testo restava una colonna stretta appoggiata a sinistra con mezza
   pagina vuota a destra. Otto blocchi su tre pagine, fra cui il racconto della madre di
   Marco: la pagina che conta piu' di tutte.

   PERCHE' COSI' E NON UN ALTRO ELENCO DI CLASSI. La regola sopra elenca i nomi da
   centrare, e un elenco di nomi copre quello che esisteva il giorno in cui e' stato
   scritto: chi aggiunge un paragrafo con una classe nuova cade fuori dalla regola, e
   nessuno se ne accorge - il testo scivola a sinistra, e basta. E' successo tre volte
   in un giorno solo. Qui si fa il contrario: in colonna ci va tutto, e quello che deve
   correre per tutta la riga lo dichiara. Se un giorno manca una dichiarazione il difetto
   si vede subito, perche' una griglia schiacciata a 760 px non passa inosservata,
   mentre una riga di testo spostata a sinistra si'.

   LA SPECIFICITA' E' A ZERO, apposta, ed e' il motivo di :where(). Questa regola
   aggiunge la centratura dove manca e non tocca nessuna larghezza gia' decisa altrove:
   .prose resta 62ch, .fm-chiusura-testo resta 620 px. Cambia solo da che parte stanno
   nella pagina. */
:where(.fm-blocco, .fm-blocco-stretto) > :where(.wrap:not(.fm-griglia))
  > :where(:not(h1, h2, h3, h4, .display, .h2, .h3,
                .fm-blocco-testa, .fm-griglia, .fm-eventi, .fm-values, .fm-galleria,
                .fm-commit, .fm-conti, .fm-costi, .fm-symbol, .sr-only)) {
  max-width: 760px;
  margin-inline: auto;
}

/* ── Il modulo dei messaggi ────────────────────────────────────────────────────────────
   Sta in cima alla sua pagina e deve invitare: riquadro chiaro, campi larghi, un invito
   sopra invece di un titolo. La spiegazione viene dopo, perche' chi arriva qui ha gia'
   in testa il ricordo che vuole mandare. */
.fm-modulo-guscio {
  max-width: 760px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-yellow);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: clamp(22px, 4vw, 34px);
}
.fm-modulo-invito { margin: 0 0 22px; font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.fm-modulo { display: grid; gap: 18px; }
.fm-campo { display: grid; gap: 7px; }
.fm-campo label { font-size: .84rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fm-campo-opz { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
/* IL FONDO DEL CAMPO E' BIANCO FISSO, QUINDI ANCHE L'INCHIOSTRO DEVE ESSERLO.
   Con `color: var(--ink)` non lo era: `--ink` segue il tema, e col tema scuro
   del sistema diventa #F7F6F2, cioe' quasi bianco. Risultato: su un telefono
   in tema scuro chi scriveva un ricordo per Marco lo vedeva sparire mentre lo
   scriveva -- bianco su bianco -- e se ne accorgeva solo selezionando il testo.
   E' lo stesso difetto gia' chiuso nel banner dei cookie, qui rimasto perche'
   il fondo `#fff` e' scritto a mano e non viene dal tema.
   La regola: se il fondo non segue il tema, il testo sopra non puo' seguirlo.
   Il segnaposto era #8A8E96: 3.29:1 sul bianco, sotto i 4.5 di AA. Dal
   13/11/2026 e' #6F737C, 4.75:1, e resta comunque piu' chiaro dell'inchiostro
   (#111318, 18.58:1), quindi si distingue ancora da cio' che l'utente ha gia'
   scritto — che era la ragione per cui era chiaro. */
.fm-campo input, .fm-campo textarea {
  font: inherit;
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--bordo-campo);
  border-radius: var(--r-sm, 6px);
  background: #fff;
  color: var(--brand-black);
  caret-color: var(--brand-black);
}
.fm-campo textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.fm-campo input:focus-visible, .fm-campo textarea:focus-visible {
  outline: 3px solid var(--brand-yellow); outline-offset: 1px; border-color: var(--brand-black);
}
.fm-campo input::placeholder, .fm-campo textarea::placeholder { color: #6F737C; }

/* La spunta di consenso. Il quadratino sta a 22 px e non al suo default di 13:
   su un telefono un bersaglio da 13 px non si prende, e qui sbagliare mira vuol
   dire mandare il modulo senza la spunta e vedersi tornare un errore. Il
   bersaglio vero resta comunque la riga intera, che il <label for> rende
   cliccabile tutta. */
.fm-consenso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0 0 4px;
}
.fm-consenso input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand-black); }
.fm-consenso label { font-size: .9rem; line-height: 1.55; color: var(--muted); }
/* Il cap. 12 toglie la sottolineatura ai link che fanno da comando; questo sta
   dentro una frase da leggere, e li' la regola non arriva: un link in mezzo al
   testo si sottolinea, altrimenti non si vede che e' un link. */
.fm-consenso a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.fm-modulo-coda { display: grid; gap: 16px; }
.fm-modulo-nota { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }
@media (min-width: 720px) {
  .fm-modulo-coda { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
}

/* ── La galleria della storia ──────────────────────────────────────────────────────────
   Due comportamenti, un markup solo. Sul telefono e' una striscia che si scorre col
   pollice, una fotografia alla volta, con lo scroll-snap che la ferma al posto giusto:
   una griglia di francobolli su uno schermo da 390 px non si guarda, si indovina.
   Da 720 px in su diventa un mosaico: le verticali occupano due righe, e la fila si
   compone da sola qualunque sia il numero di fotografie. */
.fm-galleria {
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 320px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.fm-galleria-voce { scroll-snap-align: center; }
/* OGNI FOTOGRAFIA E' UNA STAMPA POSATA, non un riquadro in una griglia.
   Il bordo bianco e' il margine della carta fotografica: otto pixel di passe-partout
   e il colore della carta della lettera, che sta mezza pagina piu' su. L'ombra e'
   doppia -- una corta e stretta che tiene la stampa attaccata al piano, una lunga e
   diffusa che la stacca appena -- perche' un'ombra sola, qualunque sia, sembra un
   contorno e non un rilievo.

   NESSUNA ROTAZIONE, e non e' pigrizia. Due gradi farebbero sembrare le stampe
   appoggiate a caso su un tavolo, che era la prima idea. Ma in questo foglio di
   stile c'e' scritto, accanto alla firma di Antonella, che quella inclinazione e'
   l'unica del sito e che una seconda la trasformerebbe da gesto in stile. E' una
   regola di qualcun altro e non la rompo da solo: il tavolo lo fanno la carta,
   l'ombra e il sollevamento, che bastano.

   AL PASSAGGIO LA STAMPA SI ALZA invece di ingrandirsi. Prima l'immagine cresceva
   del 4% dentro un riquadro fermo: e' l'effetto di una vetrina, non di una mano.
   Alzare di tre pixel e approfondire l'ombra e' quello che succede quando infili
   un dito sotto una fotografia per prenderla. */
.fm-galleria-link {
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--paper-edge);
  background: var(--paper);
  padding: 8px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 1px 2px rgba(17, 19, 24, .07), 0 10px 24px -16px rgba(17, 19, 24, .45);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.fm-galleria-voce.alta .fm-galleria-link { aspect-ratio: 3 / 4; }
.fm-galleria-link img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 2px;
}
@media (hover: hover) {
  .fm-galleria-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(17, 19, 24, .09), 0 18px 34px -18px rgba(17, 19, 24, .55);
  }
}

/* LE STAMPE SI POSANO ENTRANDO IN VISTA, sfalsate di poco: e' qualcuno che le
   appoggia sul tavolo, non una pagina che si anima. Come sulla bacheca, la classe
   la mette lo script solo dopo aver visto che l'osservatore risponde davvero --
   altrimenti il caso peggiore sarebbe una galleria invisibile. */
.fm-galleria.fm-posa .fm-galleria-voce { opacity: 0; transform: translateY(12px); }
.fm-galleria.fm-posa .fm-galleria-voce.in-vista {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* LA STAMPA CHE E' IN MANO sparisce dal tavolo mentre la si guarda: senza, si
   vedrebbe la stessa fotografia in due posti, e il gesto di averla presa in mano
   non direbbe piu' niente. Torna quando si posa. */
.fm-galleria-voce.in-mano { opacity: 0; }

/* IL CLONE CHE VOLA. Il clic non apre una finestra: la stampa si stacca dal tavolo
   e viene avanti. Tecnicamente e' una copia della miniatura, messa esattamente
   sopra l'originale e poi portata al centro con una transizione sola. Si cancella
   da sola quando arriva. `pointer-events: none` perche' durante il volo non deve
   intercettare niente. */
.fm-stampa-in-volo {
  position: fixed;
  z-index: 80;
  margin: 0;
  pointer-events: none;
  border-radius: var(--r-sm);
  border: 1px solid var(--paper-edge);
  background: var(--paper);
  padding: 8px;
  box-shadow: 0 2px 6px rgba(17, 19, 24, .12), 0 30px 60px -24px rgba(17, 19, 24, .6);
  transition: top .34s var(--ease), left .34s var(--ease),
              width .34s var(--ease), height .34s var(--ease);
}
.fm-stampa-in-volo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 2px; }

/* IL MAZZO CHE SI INTRAVEDE SOTTO. Due fogli sfalsati dietro la fotografia in
   mano: e' l'unico modo per far capire, senza scriverlo, che ce ne sono altre
   sotto e che si puo' sfogliare. Sono due ombre e non due elementi -- nessun
   markup in piu', niente da tenere allineato.
   Ogni coppia disegna un foglio: la prima ombra la carta, la seconda il suo
   bordo di un pixel. Rientrano di un pixel (-1) cosi' il bordo si vede solo
   lungo lo scalino e non tutto attorno. */
.fm-lightbox-img {
  box-shadow:
     7px  7px 0 -1px var(--paper),  7px  7px 0 0 var(--paper-edge),
    14px 14px 0 -1px var(--paper), 14px 14px 0 0 var(--paper-edge),
    0 40px 80px -40px rgba(0, 0, 0, .8);
}

/* IL TRASCINAMENTO. Mentre il dito o il mouse spinge, la fotografia segue senza
   transizione -- una transizione qui farebbe sembrare il movimento in ritardo
   sulla mano. Al rilascio la transizione torna e la fotografia o scivola via o
   rimbalza al suo posto, e quel rimbalzo e' la risposta: non e' bastato. */
.fm-lightbox-img.in-trascino { transition: none; cursor: grabbing; }
.fm-lightbox-img.torna { transition: transform .3s var(--ease); }

.fm-lightbox-conta {
  margin: 14px 0 0;
  text-align: center;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink-on-dark-soft, #C9CCD2);
}
.fm-galleria-link:focus-visible { outline: 3px solid var(--brand-yellow); outline-offset: 3px; }
/* A TUTTA LARGHEZZA, come la galleria che commenta. La didascalia ereditava la
   misura di lettura dalla regola del capitolo 12, che vale per il testo corrente:
   questa non e' testo corrente, e' l'etichetta di un blocco a tutta riga. Stretta
   a 760 px sotto una galleria larga 1200 sembrava appartenere a qualcos'altro. */
.fm-galleria-nota { margin-top: 14px; max-width: none; text-align: center; }
/* I crediti: stessa misura della nota, un filo piu' quieti. */
.fm-galleria-crediti { margin-top: 6px; max-width: none; text-align: center; color: var(--muted); }

/* Da 720 px il mosaico. Non e' piu' una griglia: era `grid-auto-flow: row
   dense` con le verticali che occupavano due righe, e bastava un'altezza che
   non tornava per lasciare un vuoto - con sette fotografie ce n'era uno in
   basso a sinistra. Le colonne CSS impaginano come un muro a secco, senza
   buchi, e lasciano a ogni fotografia le sue proporzioni invece di ritagliarla
   dentro un rettangolo fisso: su una galleria di famiglia il ritaglio cieco
   taglia teste. Le frecce dell'ingrandimento seguono l'ordine del documento,
   che resta quello di content.php. */
@media (min-width: 720px) {
  .fm-galleria {
    display: block;
    columns: 2;
    column-gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }
  .fm-galleria-voce { break-inside: avoid; margin-bottom: 14px; }
  .fm-galleria-link { aspect-ratio: auto; height: auto; }
  .fm-galleria-link img { height: auto; }
}

@media (min-width: 1040px) {
  .fm-galleria { columns: 3; }
}

/* ── L'ingrandimento ───────────────────────────────────────────────────────────────────
   Un <dialog> vero: l'Esc lo chiude da solo, il fuoco ci resta dentro, e il browser
   sa gia' fare tutto questo meglio di qualunque finta finestra fatta di div. */
/* IL TELAIO HA UNA MISURA SUA, e qui c'e' il difetto che ha rotto la finestra.
   Prima l'altezza veniva solo dall'immagine: fra il clic e l'arrivo dei byte il
   <dialog> era alto zero, quindi si vedevano il velo scuro e i tre pulsanti
   appesi ai bordi dello schermo e nient'altro. Sembrava rotta perche' lo era.
   Adesso il telaio si regge da solo - altezza minima e immagine centrata - e
   l'immagine ci arriva dentro quando e' pronta. */
.fm-lightbox {
  width: min(96vw, 1280px);
  max-width: none;
  /* `fit-content` e non `auto`: un <dialog> modale e' posizionato con `inset: 0`,
     quindi con l'altezza automatica si stira per tutto lo schermo e la fotografia
     galleggia in mezzo al nero. Cosi' invece il telaio si stringe sullo scatto. */
  height: fit-content;
  min-height: 180px;
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--brand-black);
  color: var(--brand-white);
  overflow: hidden;
}
/* Il centraggio vale SOLO a finestra aperta. Un `display: flex` scritto sopra
   scavalca la regola del browser `dialog:not([open]) { display: none }`: il
   riquadro nero resterebbe in pagina sempre, chiuso e vuoto. */
.fm-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-lightbox::backdrop { background: rgba(10, 11, 14, .86); }
.fm-lightbox-img {
  display: block;
  max-width: 100%;
  /* Il tetto si misura sullo schermo e non sul telaio: il telaio e' `fit-content`,
     cioe' lo decide la fotografia, quindi un `max-height: 100%` girerebbe a vuoto
     e le verticali uscirebbero dal bordo. */
  max-height: 94vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Mentre l'immagine arriva il telaio non e' vuoto: porta il pittogramma appena
   accennato, cosi' chi ha aperto vede che sta succedendo qualcosa. */
.fm-lightbox-img:not([src]), .fm-lightbox-img[src=""] { opacity: 0; }
/* I pulsanti stanno sul telaio, non sullo schermo: il telaio si stringe sulla
   fotografia, quindi `fixed` li lascerebbe staccati negli angoli del display. */
.fm-lightbox-chiudi, .fm-lightbox-nav {
  position: absolute;
  border: 0;
  cursor: pointer;
  background: rgba(17, 19, 24, .72);
  color: var(--brand-white);
  /* Era `'Archivo', system-ui, sans-serif`: Archivo questo dominio non lo
     serve — nessun @font-face, nessun preload — quindi i tre glifi cadevano
     su system-ui e cambiavano forma da un sistema all'altro. Il font del sito
     e' --font, e questi sono i suoi simboli. (13/11/2026) */
  font: 700 26px/1 var(--font);
  width: 46px; height: 46px;
  border-radius: 999px;
  display: grid; place-items: center;
}
.fm-lightbox-chiudi { top: 10px; right: 10px; font-size: 30px; }
.fm-lightbox-nav { top: 50%; transform: translateY(-50%); }
.fm-lightbox-nav.prec { left: 10px; }
.fm-lightbox-nav.succ { right: 10px; }
.fm-lightbox-chiudi:hover, .fm-lightbox-nav:hover { background: var(--brand-yellow); color: var(--brand-black); }
.fm-lightbox-chiudi:focus-visible, .fm-lightbox-nav:focus-visible {
  outline: 3px solid var(--brand-yellow); outline-offset: 2px;
}
@media (max-width: 560px) {
  .fm-lightbox-nav { width: 40px; height: 40px; }
}

.fm-community-cta { margin: 24px 0 0; }

.fm-punti { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.fm-punti > li {
  display: flex;
  gap: 12px;
  max-width: 62ch;
  color: var(--muted);
}

.fm-punti > li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 4px;
  background: var(--brand-yellow);
  transform: skewX(-20deg);
  margin-top: .7em;
}

/* ============ LA BACHECA ============
   COLONNE E NON UNA GRIGLIA. I messaggi sono lunghi diversi: in una griglia un
   biglietto corto accanto a uno lungo lascia un buco, e a cinquanta biglietti i
   buchi sono la cosa che si vede. Le colonne CSS impilano senza vuoti, e sono
   l'unica impaginazione a mattoncini che non costa una riga di JavaScript.

   `break-inside: avoid` perche' un biglietto spezzato a meta' fra due colonne non
   e' piu' un biglietto.

   NIENTE CAVEAT QUI DENTRO. La grafia e' la firma di Antonella in fondo alla sua
   lettera, ed e' l'unica del sito: usarla per il nome di ogni messaggio la
   trasformerebbe da gesto in stile, che e' esattamente la regola scritta accanto a
   quella firma. I nomi stanno in Montserrat come tutto il resto. Un post-it non
   serve a dire che qualcuno ha scritto a mano: serve a dire che e' roba di
   qualcuno, e quello lo fa la carta.

   LA CARTA E' LA STESSA DELLA LETTERA (--paper, --paper-edge, --paper-ink), e non
   per risparmiare un colore: a meta' pagina c'e' il foglio di sua madre, qui ci
   sono i biglietti di chi gli vuole bene, e sono la stessa materia. */
/* IL MURO E' UNA GRIGLIA, non piu' colonne CSS.
   Fino al 12/11/2026 erano colonne, e la ragione era buona: i messaggi sono
   lunghi diversi, e le colonne incastrano un cartoncino alto accanto a uno
   basso senza lasciare buchi. Il prezzo erano otto formati diversi nella stessa
   schermata -- un muro di mattoni di misure tutte sue -- e un ordine di lettura
   che scende lungo una colonna invece di andare per righe, cioe' non quello in
   cui i messaggi sono arrivati.
   Adesso sono tutti uguali: stessa larghezza, stessa altezza, il testo tagliato
   dove serve e il resto in una finestra. Deciso da Jacopo il 12/11/2026. */
.fm-muro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px)  { .fm-muro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .fm-muro { grid-template-columns: repeat(3, 1fr); } }

/* TUTTE LE RIGHE ALTE UGUALE, e la classe la mette lo script.
   Senza JavaScript non si taglia niente: il pulsante Leggi tutto resterebbe
   nascosto e il testo mozzato senza un modo di aprirlo, che e' il difetto
   peggiore di tutti -- una pagina che sembra funzionare e tiene meta' di quello
   che la gente ha scritto fuori portata. Senza, i cartoncini crescono quanto
   serve e si leggono tutti. E' la stessa regola della comparsa e della
   ricerca. */
.fm-muro.fm-muro-pari { grid-auto-rows: 1fr; }

.fm-biglietto {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 1px 2px rgba(17, 19, 24, .05), 0 8px 20px -14px rgba(17, 19, 24, .35);
}

/* L'involucro esiste per spingere la firma in fondo: con i cartoncini alti
   uguale, su un messaggio corto avanza spazio, e lo spazio va fra il testo e la
   firma. Senza, la riga del nome resta a mezz'aria in mezzo al cartoncino. */
.fm-biglietto-corpo { display: flex; flex-direction: column; align-items: flex-start; }
.fm-muro-pari .fm-biglietto-corpo { flex: 1 1 auto; }

.fm-biglietto-testo {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  /* blockquote porta margini e rientri suoi: qui e' un testo, non una citazione
     rientrata. Le virgolette non si mettono: le parole sono gia' di chi firma. */
  padding: 0;
  border: 0;
  quotes: none;
  /* GLI A CAPO DI CHI SCRIVE RESTANO. In un messaggio personale andare a capo e'
     parte di quello che si dice: una riga sua per il saluto, uno stacco prima
     del ricordo. Senza questa riga l'HTML li mangia tutti, e otto paragrafi
     diventano un blocco solo. `pre-line` e non `pre-wrap`: gli a capo si
     tengono, gli spazi doppi no -- quelli sono battitura, non intenzione. */
  white-space: pre-line;
  /* Una parola lunghissima non deve sfondare il cartoncino: in una griglia a
     larghezza fissa uscirebbe dal bordo invece di allargare la colonna. */
  overflow-wrap: anywhere;
}

/* IL TAGLIO. Sette righe per tutti, e un'altezza FISSA e non massima: un
   messaggio di una riga deve occupare lo stesso spazio di uno di sette,
   altrimenti i cartoncini tornano diversi, che e' esattamente quello che si
   stava togliendo. Sette perche' sono le righe in cui un messaggio normale ci
   sta per intero: sotto si taglierebbero anche quelli che non ne hanno bisogno,
   sopra il muro torna a sembrare un elenco di lenzuoli. */
.fm-muro-pari .fm-biglietto-testo {
  --righe: 7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--righe);
  line-clamp: var(--righe);
  overflow: hidden;
  height: calc(var(--righe) * 1.65em);
}

/* IL PULSANTE E' TESTO SOTTOLINEATO, non un bottone: dentro un cartoncino di
   carta un rettangolo pieno peserebbe piu' del messaggio. Il giallo del brand
   sta nella sottolineatura, dove non deve reggere nessun testo sopra. */
.fm-biglietto-leggi {
  align-self: flex-start;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper-ink);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brand-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fm-biglietto-leggi:hover { text-decoration-color: var(--paper-ink); }
.fm-biglietto-leggi:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
/* `hidden` deve vincere sul resto: e' lo stato in cui il pulsante nasce, ed e'
   quello in cui resta su ogni cartoncino che non e' stato tagliato. */
.fm-biglietto-leggi[hidden] { display: none; }

.fm-biglietto-firma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--paper-edge);
}
.fm-biglietto-nome { font-weight: 800; font-size: .95rem; }

/* L'ULTIMA RIGA VA A CAPO SOTTO IL NOME, sempre: con l'etichetta davanti e'
   lunga, e affiancata al nome lo schiacciava a ogni cartoncino stretto. Una
   riga sua costa niente e si legge uguale con due parole o con dieci. */
.fm-biglietto-come {
  flex-basis: 100%;
  font-size: .85rem;
  line-height: 1.45;
}
/* L'etichetta e' piu' piccola e piu' chiara del valore: deve dire che cos'e'
   quella riga, non rubare l'occhio a quello che la persona ha scritto. */
.fm-biglietto-etichetta {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.fm-biglietto-valore { color: var(--paper-ink); }

/* ---- LA FINESTRA DEL MESSAGGIO INTERO ----
   Stessa carta del cartoncino da cui si apre: chi preme Leggi tutto deve avere
   l'impressione che il biglietto si sia ingrandito, non che si sia aperta
   un'altra cosa. L'ombra e' piu' profonda perche' adesso sta sopra un velo.
   Larghezza fermata a 680px: una riga lunga quanto lo schermo di un portatile
   si perde rientrando a capo, e qui si legge, non si scorre. */
.fm-lettura {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 24px 60px -20px rgba(17, 19, 24, .6);
}
/* `display: flex` solo da aperta: scavalca la regola del browser
   `dialog:not([open]) { display: none }`, che altrimenti perderebbe contro
   questa e lascerebbe la finestra in pagina sempre. E' la stessa trappola gia'
   annotata sulla lightbox. */
.fm-lettura[open] { display: flex; flex-direction: column; }
/* Anche sulla finestra, per il caso in cui il dito parta sulla firma o sul
   bordo: quello che si muove e' il testo, o niente. */
.fm-lettura { overscroll-behavior: contain; }
.fm-lettura::backdrop { background: rgba(10, 11, 14, .86); }

/* SCORRE IL TESTO, non la finestra: la firma resta ferma in fondo mentre si
   legge, cosi' chi ha scritto quelle parole e' sempre sotto gli occhi. */
.fm-lettura-testo {
  margin: 0;
  /* Poco sopra: la riga della croce fa gia' da aria in cima. */
  padding: 6px 32px 0;
  overflow-y: auto;
  border: 0;
  quotes: none;
  font-size: 1.02rem;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;

  /* IN UNA COLONNA FLESSIBILE un elemento non si restringe sotto il suo
     contenuto finche' non glielo si dice: `min-height` parte da `auto`, e con
     `auto` non c'e' niente da far scorrere perche' il riquadro cresce insieme
     al testo. Qui funzionava gia' perche' la regola dice che `overflow: auto`
     porta il minimo a zero da se', ma e' una regola che va saputa: scritta,
     non si rompe il giorno che qualcuno tocca l'overflow. */
  min-height: 0;

  /* LO SCORRIMENTO NON SCAPPA ALLA PAGINA SOTTO. Era il difetto vero, e si
     vedeva solo sul telefono: il dito partiva dentro al messaggio e portava
     via la pagina dietro invece del testo, quindi la finestra sembrava
     bloccata a meta' -- su quello di Alessandra, a meta' di una storia. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* La barra si vede, dove il sistema le barre le disegna. Sottile e nel
     grigio delle righe del sito: deve dire che c'e' altro, non prendersi un
     centimetro di carta. */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.fm-lettura-testo::-webkit-scrollbar { width: 6px; }
.fm-lettura-testo::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 3px;
}

/* LA SFUMATURA IN FONDO dice che il messaggio continua, e serve dove la barra
   non c'e': sul telefono il testo si interrompe su una riga intera, e subito
   sotto arrivano un filetto e un nome. Letto cosi' sembra finito -- ed e'
   esattamente quello che e' successo il 12/11/2026 a chi ha aperto il
   messaggio di Alessandra e ne ha visto meno della meta' credendo di averlo
   letto tutto.
   La classe la mette e la toglie lo script mentre si scorre: una sfumatura
   accesa su un testo finito prometterebbe un seguito che non c'e', che e' lo
   stesso errore al contrario. Dove `mask-image` non c'e' non si sfuma niente
   e resta la barra: nessuno perde il testo, che e' l'unica cosa che conta. */
.fm-lettura-ancora .fm-lettura-testo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), transparent);
}
/* Il fuoco ci arriva all'apertura, per posarci chi legge con la tastiera o con
   un lettore di schermo: non e' un comando, quindi non si disegna un contorno
   attorno a un paragrafo di testo. */
.fm-lettura-testo:focus { outline: none; }

.fm-lettura-firma {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 20px 32px 28px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-edge);
}

/* LA CROCE STA NELLA COLONNA, non sopra il testo.
   Stava in `position: absolute` sopra al testo, e ha funzionato finche' il
   testo non ha preso una maschera per la sfumatura in fondo. Una maschera fa
   dell'elemento un contesto di impilamento, e un contesto di impilamento si
   disegna insieme agli elementi posizionati, in ordine di documento: il testo
   viene dopo il pulsante nel markup, quindi gli finiva sopra. Da li' in poi il
   clic sulla croce arrivava al testo e la finestra non si chiudeva -- ma solo
   sui messaggi lunghi, cioe' quelli in cui la sfumatura si accende. E' il modo
   peggiore in cui un pulsante puo' rompersi: a intermittenza, e proprio sui
   messaggi che uno apre apposta per leggerli.
   Si rimetteva a posto con un z-index. Non si e' fatto: un pulsante che
   galleggia sopra un testo che scorre ha comunque le parole di qualcuno che gli
   passano sotto, e prima o poi qualcuno ci rimette una maschera. Adesso la
   croce e' una riga sua in cima alla colonna, il testo comincia sotto, e non
   c'e' piu' niente da impilare. */
.fm-lettura-chiudi {
  flex: none;
  align-self: flex-end;
  margin: 8px 8px 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--paper-ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.fm-lettura-chiudi:hover { background: var(--brand-yellow); }
.fm-lettura-chiudi:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 560px) {
  .fm-lettura-testo { padding: 6px 20px 0; }
  .fm-lettura-firma { margin: 18px 20px 22px; }
}

/* IL CAMPO DI RICERCA compare solo oltre la soglia, e solo con JavaScript: senza,
   un campo che non filtra e' un comando rotto, e un comando rotto e' peggio di un
   comando assente. Lo scopre lo script togliendo `hidden`. */
.fm-muro-cerca { margin-top: 20px; }
.fm-muro-cerca input {
  width: 100%;
  max-width: 420px;
  padding: 12px 16px;
  border: 1px solid var(--bordo-campo);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .95rem;
}
.fm-muro-vuoto-ricerca { margin: 14px 0 0; color: var(--muted); }

/* LA COMPARSA. I biglietti si posano entrando in vista, sfalsati di poco: e' la
   sola animazione del muro, ed e' voluto. Su cento biglietti qualunque effetto
   piu' vistoso diventa nausea, e questa pagina non e' un portfolio.
   Senza JavaScript non si posa niente e si vede tutto, che e' lo stato giusto:
   `fm-posa` la mette lo script solo dopo aver visto che l'osservatore esiste. */
.fm-muro.fm-posa .fm-biglietto { opacity: 0; transform: translateY(10px); }
.fm-muro.fm-posa .fm-biglietto.in-vista {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

/* Chi era gia' davanti agli occhi al caricamento non si posa e non transisce:
   nessuna attesa, nessun fotogramma trasparente. Lo marca lo script misurando
   la posizione PRIMA di accendere `fm-posa`. Valeva 2,7 secondi di LCP sulla
   bacheca, misurati il 13/11/2026. Vedi forza.js. */
.fm-muro.fm-posa .fm-biglietto.fm-subito { opacity: 1; transform: none; transition: none; }

/* L'ESCA DEL MODULO. Fuori dallo schermo e non `display: none`: parecchi robot
   saltano i campi nascosti in quel modo, e un'esca che si riconosce non e'
   un'esca. Chi usa la tastiera o un lettore di schermo non ci arriva lo stesso,
   grazie a tabindex="-1" e aria-hidden nel markup. */
.fm-esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============ AVVISO ============ */
/* Non è un dettaglio di stile: è la frase che impedisce a chi arriva di
   credere di aver donato. */
/* L'AZZURRO NON E' DI QUESTA MARCA. Il riquadro arrivava dal kit di casa con
   --info e --info-bg, cioe' un azzurro da avviso di sistema: su un sito che ha
   quattro colori -- nero, giallo, crema, grafite -- era l'unico elemento fuori
   palette, e si vedeva. Un avviso non ha bisogno di un colore suo per farsi
   leggere: ha bisogno di stare dove sta l'occhio e di avere un bordo che lo
   stacchi.
   Adesso e' identico al riquadro delle coordinate del bonifico: stessa cornice,
   stesso filo giallo a sinistra, stessa superficie. Due blocchi che hanno lo
   stesso peso nella pagina e adesso hanno anche la stessa faccia. */
.fm-avviso {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  padding: 18px 20px;
  max-width: 62ch;
}

.fm-avviso p { margin: 0; font-size: .92rem; }
.fm-avviso-titolo { font-weight: 800; margin-bottom: 6px !important; }

/* ============ SCHEDE ============ */
.fm-griglia { display: grid; gap: 20px; }
@media (min-width: 600px) { .fm-griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .fm-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fm-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.fm-card h3 { margin: 0; }
.fm-card p { margin: 0; color: var(--muted); font-size: .95rem; }

.fm-card-cta { margin-top: 8px !important; }

.fm-card-num {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--muted);
}

/* ============ PITTOGRAMMA ============ */
/* Senza una misura riempie il contenitore, come nel prototipo. Le tre taglie
   qui sotto sono gli unici usi che il sito ne fa: una classe con un nome
   invece di una larghezza scritta nel markup. */
.fm-symbol { display: block; height: auto; overflow: visible; width: 100%; }
.fm-symbol .fm-ray { fill: var(--sym, var(--brand-yellow)); }

.fm-sym-sm { width: 56px; }
.fm-sym-md { width: clamp(80px, 14vw, 120px); margin-inline: auto; }
.fm-sym-lg { width: clamp(96px, 18vw, 148px); margin-inline: auto; }

/* I raggi arrivano dall'alto e convergono, una volta sola. Con
   prefers-reduced-motion l'animazione è azzerata dalla regola più in alto. */
.fm-symbol--converge .fm-ray {
  animation: fm-converge .95s var(--ease) both;
  animation-delay: calc(var(--i) * 55ms + .1s);
}

@keyframes fm-converge {
  from { transform: translateY(-38px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ============ HERO ============ */
.fm-hero { position: relative; }
.fm-hero-grid { display: grid; }

.fm-hero-media {
  position: relative;
  aspect-ratio: 1 / 1.02;
  max-height: 64vh;
  width: 100%;
  overflow: hidden;
  background: #1a1a1a;
}

/* La sfumatura verso il nero fa nascere il titolo dall'immagine, su mobile. */
.fm-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 19, 24, 0) 45%, var(--brand-black) 100%);
  pointer-events: none;
}

.fm-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il bianco e nero lo mette il sito, non il file: l'originale a colori resta
     quello consegnato dalla famiglia, e tornare indietro costa una riga. Il
     giallo del brand deve restare l'unico colore della pagina. */
  filter: grayscale(1) contrast(1.04);
  /* Il volto sta al centro-destra dello scatto: inquadrando lì, il taglio
     verticale del telefono e quello alto del desktop non lo perdono. */
  object-position: 58% 38%;
}

/* Sul telefono il pittogramma arriva di fianco al viso di Marco: lì va bene,
   i raggi che convergono verso di lui sono il senso del simbolo. Più grande
   gli starebbe addosso, quindi resta contenuto. */
.fm-hero-symbol {
  position: absolute;
  z-index: 2;
  width: 46%;
  right: -12%;
  bottom: 3%;
  pointer-events: none;
}

.fm-hero-copy {
  position: relative;
  z-index: 4;
  padding: 0 0 56px;
  margin-top: -56px;
}

.fm-hero-kicker {
  margin: 0 0 14px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-on-dark-soft);
}

.fm-hero-titolo { font-size: clamp(2.9rem, 13.5vw, 6.2rem); }
.fm-hero-sommario { margin-top: 28px; max-width: 30ch; color: #E4E4E1; }
.fm-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.fm-hero-ctas .btn { flex: 1 1 200px; }

/* L etichetta della foto di prova. */
.fm-hero-demo {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  border-radius: 3px;
  border: 1px solid #3a3e46;
  background: rgba(17, 19, 24, .82);
  padding: 6px 10px;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.3;
  color: #D6D7DA;
}

@media (min-width: 960px) {
  .fm-hero-grid {
    grid-template-columns: 1.02fr 1fr;
    min-height: min(780px, calc(100svh - var(--header-h)));
  }
  .fm-hero-media {
    order: 2;
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
  }
  .fm-hero-media::after { background: none; }
  /* Il taglio bianco inclinato fra testo e immagine. */
  .fm-hero-media::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: -6px;
    top: -2%;
    bottom: -2%;
    width: 14px;
    background: var(--brand-white);
    transform: skewX(-5deg);
    transform-origin: top left;
  }
  /* In alto a destra il pittogramma finirebbe sul viso di Marco: da quando
     l'hero è un ritratto e non più un'illustrazione astratta, sta in basso,
     sulle braccia. */
  .fm-hero-symbol { width: 46%; right: -16%; top: auto; bottom: 3%; }
  .fm-hero-copy {
    order: 1;
    margin: 0;
    align-self: center;
    padding: 72px 48px 72px max(var(--gutter), calc((100vw - 1200px) / 2));
  }
  .fm-hero-titolo { font-size: clamp(3.4rem, 5.4vw, 5rem); }
  .fm-hero-ctas .btn { flex: none; }
}

/* ============ BLOCCHI DELLA HOME ============ */
/* Lo stacco fra una sezione e l'altra. Era clamp(64px, 10vw, 120px): a schermo largo
   faceva una fascia vuota di 120 px fra la fine di una sezione e il titolo della
   successiva, e in scorrimento si leggeva come un'attesa. */
.fm-blocco { padding: clamp(44px, 6vw, 76px) 0; }
.fm-blocco-stretto { padding: clamp(36px, 5vw, 60px) 0; }
/* Regola di casa, Brand Playbook cap. 12 §Text sections on static sites, decisa da
   Jacopo il 25/10/2026 ed estesa a ogni sito LOGOS: il titolo corre per tutta la riga,
   centrato; il testo sta in una colonna centrata da 760 px, allineato a sinistra dentro.
   La sezione resta a tutta larghezza - quello che si stringe e' solo il blocco di
   lettura. E' la stessa decisione che su STOA' si riassume in «tutta larghezza, niente
   banda vuota a destra». Sotto i 760 px la colonna e' tutta la riga e non cambia nulla. */
.fm-blocco-testa { margin-bottom: 32px; }
.fm-blocco-testa h2 { text-align: center; }
.fm-blocco-testa .lead { margin: 14px auto 0; max-width: 760px; color: var(--muted); }
.on-dark .fm-blocco-testa .lead { color: var(--ink-on-dark-soft); }

/* ============ ELENCO DEI VALORI ============ */
.fm-values { border-top: 2px solid var(--ink); margin: 0; padding: 0; list-style: none; }
.on-dark .fm-values { border-top-color: var(--brand-white); }

.fm-values > li {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.fm-values dt, .fm-values-k { font-weight: 800; margin: 0; }
.fm-values dd, .fm-values-v { margin: 0; color: var(--muted); font-size: .95rem; }

/* ============ IMPEGNI ============ */
.fm-commit { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fm-commit > li { display: flex; gap: 12px; }

.fm-commit > li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 4px;
  background: var(--brand-yellow);
  transform: skewX(-20deg);
  margin-top: .7em;
}

/* ============ ORBITA DELLA COMMUNITY ============ */
.fm-orbit {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.fm-orbit::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px dashed var(--line-strong);
  border-radius: 50%;
}

.fm-orbit > li {
  position: absolute;
  left: calc(50% + 38% * cos(var(--a)));
  top: calc(50% + 38% * sin(var(--a)));
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid #363A44;
  background: #1E2128;
  color: var(--brand-white);
  padding: 7px 12px;
  font-size: .78rem;
  font-weight: 700;
}

@media (min-width: 480px) {
  .fm-orbit > li { font-size: .88rem; padding: 8px 14px; }
}

/* Il centro non è una pillola: azzera tutto e si piazza al centro. */
.fm-orbit > li.fm-orbit-core { all: unset; position: absolute; inset: 31%; }

/* ============ LINK DI TESTO SOTTOLINEATO DI GIALLO ============ */
.fm-tlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  border-bottom: 3px solid var(--brand-yellow);
  padding-bottom: 2px;
}

.fm-tlink:hover { border-bottom-color: currentColor; }

/* ============ TABELLA DEI COSTI ============ */
.fm-costi { width: 100%; border-collapse: collapse; margin-top: 24px; }

.fm-costi th, .fm-costi td {
  text-align: left;
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.fm-costi thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom-width: 2px;
  border-bottom-color: var(--ink);
}

.fm-costi .fm-importo {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
}

/* LE DUE RIGHE SOTTO OGNI VOCE -- il calcolo e il perche' -- ERANO IN
   GRASSETTO, e nessuno le aveva scritte cosi': stanno dentro un `<th>`, e un
   `th` e' bold di suo in ogni browser. Il peso lo ereditavano dalla cella.
   Il risultato era una pagina in cui tre righe su quattro gridavano insieme,
   e l'occhio non sapeva piu' qual era il titolo della voce.
   `font-weight: 400` glielo toglie. Resta grassetto solo quello che deve
   reggere la lettura veloce: il nome della voce e l'importo a destra. */
.fm-costi .fm-base {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
}
/* La prima delle due e' il CALCOLO, e si legge come un inciso: in corsivo si
   distingue dal perche' che la segue senza aggiungere un altro colore. */
.fm-costi .fm-base-calcolo { font-style: italic; }
.fm-costi tfoot td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 800; }
.fm-costi tfoot .fm-riga-obiettivo td { font-size: 1.1rem; }

/* ============ BARRA CTA MOBILE ============ */
.fm-mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: flex;
  gap: 10px;
  background: var(--brand-black);
  border-top: 1px solid #2A2E36;
  padding: 10px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 10px);
  color: var(--brand-white);
  --focus: var(--brand-yellow);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}

.fm-mbar[data-visible="true"] { transform: none; }
.fm-mbar .btn { flex: 1; }

@media (min-width: 1080px) { .fm-mbar { display: none; } }

/* ============ PEZZI DELLA HOME ============ */
/* auto e non 0: questa shorthand ha la meglio sulla colonna di lettura, e senza auto il
   link resterebbe a sinistra sotto una prosa centrata. */
.fm-link-dopo { margin: 28px auto 0; }

/* IL LINK DOPO LE SCHEDE EVENTO STA A DESTRA, sul bordo dei riquadri bianchi.
   Gli altri .fm-link-dopo seguono della prosa dentro la colonna di lettura e
   restano dove sono: li' "a destra" vorrebbe dire staccarli dalla frase che li
   motiva. Qui invece il link segue una lista a tutta larghezza, e centrato
   galleggiava fra due bordi a cui non era allineato.
   Il selettore e' il fratello adiacente e non una classe nuova: vale da solo
   ovunque un link segua l'elenco degli eventi, e non c'e' una seconda lista da
   ricordarsi di marcare. Sotto gli 860 px torna a sinistra come tutto il resto:
   in una colonna stretta "a destra" non significa niente. */
@media (min-width: 860px) {
  .fm-eventi + .fm-link-dopo { max-width: none; text-align: right; }
}
.fm-values-dopo { margin-top: 48px; }

.fm-voci {
  margin-top: 28px;
  font-size: .9rem;
  color: var(--ink-on-dark-faint);
}

.fm-voci strong { display: block; color: var(--brand-white); }

.fm-attesa-testo { margin: 10px auto 20px; max-width: 620px; }
.fm-values-def { display: block; margin-top: 4px; font-size: .85rem; }

/* ── I conti della Trasparenza ──────────────────────────────────────────────────────────
   Quattro riquadri, e il colore porta il significato invece di decorarlo: giallo per
   quello che arriva a Marco, chiaro per quello che entra, scuro e bordato per quello che
   esce. Un lettore capisce la gerarchia prima di leggere le etichette. */
.fm-conti {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.fm-conto {
  display: grid;
  gap: 8px;
  padding: 20px 22px 22px;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.fm-conto-k { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* Gli interi grandi, i centesimi piccoli: i centesimi non servono a leggere la cifra,
   servono a dire che questa e' una contabilita' e non una stima. */
.fm-conto-n { margin: 0; display: flex; align-items: baseline; gap: 1px; }
.fm-conto-int { font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.fm-conto-dec { font-size: .95rem; font-weight: 700; }
.fm-conto-eur { margin-left: 6px; font-size: 1rem; font-weight: 700; }
.fm-conto-attesa { font-size: 1rem; font-style: italic; color: var(--muted); }

/* Il disclaimer sta accanto al numero, non sotto il titolo: e' una nota, e una nota
   che interrompe la lettura della cifra non e' una nota, e' un ostacolo. */
.fm-conto-def { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }

/* Su fondo scuro --surface e' un grigio (#3A3F47): le due tessere dei soldi che entrano
   restavano grigio su grigio, cioe' il contrario di quello che questa sezione deve fare.
   Qui il valore si scrive, non si eredita: bianco caldo e numeri neri. */
.fm-conto-donated, .fm-conto-collected { background: var(--brand-white); color: var(--brand-black); }
.fm-conto-donated .fm-conto-def, .fm-conto-collected .fm-conto-def { color: #4A4F58; }

.fm-conto-toMarco { background: var(--brand-yellow); color: var(--brand-black); }
.fm-conto-toMarco .fm-conto-def { color: #4A4F58; }

.fm-conto-costs { background: transparent; border: 1px solid rgba(247,246,242,.22); color: var(--brand-white); }
.fm-conto-costs .fm-conto-def { color: var(--ink-on-dark-faint); }

@media (min-width: 900px) {
  /* QUI C'ERA UNA PROMESSA CHE IL CODICE NON MANTENEVA: un commento diceva che a
     schermo largo la nota passa a destra del numero, e la regola sotto dichiarava una
     colonna sola, che non sposta niente. Chi passava dopo leggeva il commento e credeva
     la cosa gestita.

     E NON ERA UNA SVISTA DI SCRITTURA: dietro c'e' una richiesta di Jacopo, mai
     realizzata - la nota a destra del numero su desktop, e un tooltip al tocco sul
     telefono. Lo scopo delle due cose e' lo stesso: che la nota non interrompa la
     lettura della cifra. Oggi la nota sta sotto il numero a ogni larghezza, e nessuna
     delle due meta' e' stata costruita.

     PERCHE' LA META' DESKTOP NON SI PUO' FARE COSI' COM'E'. Misurato l'11/11/2026: le
     tessere stanno in una griglia auto-fit da 250 px minimo, e a 1009 px di finestra
     una tessera e' larga 306 px con la nota a 262. Accanto a «43.200,00 €» per la nota
     resterebbero ottanta pixel. A destra non ci sta a nessuna larghezza che QUESTA
     griglia produca: per farcela stare servono tessere piu' larghe, cioe' meno tessere
     per riga, che e' una scelta visiva sulla sezione e la prende Jacopo, non il CSS.

     La meta' mobile invece e' fattibile: il kit adesso ha JavaScript (site/assets/forza.js
     porta la dialog della galleria e il modulo dei messaggi), quindi un tooltip che si
     apre al tocco non costa un file in piu'. Non e' stato fatto perche' meta' richiesta
     senza l'altra meta' cambia il senso della richiesta, e quella decisione e' sua.

     Finche' non decide, la regola qui sotto non promette niente: tiene solo le tessere
     allineate in alto. */
  .fm-conto { align-content: start; }
  .fm-conto-def { margin-top: 2px; }
}

.fm-impegni-titolo { margin-top: 36px; }
.fm-impegni { margin-top: 16px; }

.fm-chiusura { text-align: center; }
.fm-chiusura-titolo { font-size: clamp(2.6rem, 10vw, 5.4rem); margin-top: 28px; }
.fm-chiusura-testo { margin: 18px auto 0; max-width: 620px; }
.fm-chiusura-cta { margin-top: 32px; }

/* ============ STATO PROVVISORIO DEI CONTENUTI ============ */
/* Una pagina che aspetta dati veri lo dice, invece di mostrare un vuoto che
   sembra un guasto. */
.fm-attesa {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  margin-top: 24px;
}

.fm-attesa .fm-symbol { width: 56px; margin: 0 auto 14px; --sym: var(--line-strong); }

/* ============ PAGINA «LA STORIA DI MARCO» ============ */
.fm-storia-hero { padding: clamp(64px, 10vw, 96px) 0; }
.fm-storia-stretto { max-width: 56ch; }
.fm-storia-kicker { margin: 0 0 14px; font-size: .95rem; font-weight: 600; color: var(--ink-on-dark-nav); }
.fm-storia-titolo { font-size: clamp(2.6rem, 10vw, 4.5rem); }
.fm-storia-lead { margin-top: 28px; color: var(--brand-white); }

/* ── Il foglio ──────────────────────────────────────────────────────────────
   Il racconto si legge, non si scorre: misura stretta e corpo un po' piu'
   grande del resto del sito. Dal 12/11/2026 ha anche un supporto, perche' e'
   una lettera: carta chiara sul crema della pagina, ombra bassa, margini
   larghi come quelli che si lasciano scrivendo a mano.

   Il tono non e' piatto: due gradienti molto ampi, uno per angolo, fanno
   cadere la luce sul foglio come succede a un foglio vero. Nessuna trama
   ripetuta, e di proposito: la prima versione aveva una grana a puntini da
   7 px, e a schermo si vedeva la griglia - sembrava carta millimetrata. Una
   texture finta che si nota e' peggio di nessuna texture. */
.fm-racconto-sezione { padding-bottom: clamp(40px, 7vw, 72px); }

.fm-foglio {
  position: relative;
  max-width: 64ch;
  margin-inline: auto;
  padding: clamp(30px, 6vw, 76px) clamp(24px, 5vw, 68px) clamp(28px, 4vw, 52px);
  border-radius: 3px;
  background-color: var(--paper);
  background-image:
    radial-gradient(120% 80% at 16% 0%, rgb(var(--ombra-rgb) / .022), transparent 62%),
    radial-gradient(100% 70% at 100% 100%, rgb(var(--ombra-rgb) / .03), transparent 58%);
  box-shadow:
    0 1px 2px rgb(var(--ombra-rgb) / .05),
    0 10px 24px -14px rgb(var(--ombra-rgb) / .2),
    0 28px 56px -38px rgb(var(--ombra-rgb) / .26);
}

/* Il bordo: un filo chiaro in cima e uno appena scuro tutt'intorno. E' quello
   che si vede davvero di un foglio appoggiato su un piano. */
.fm-foglio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 var(--surface),
    inset 0 0 0 1px var(--paper-edge);
}

.fm-racconto { font-size: 1.05rem; line-height: 1.78; color: var(--paper-ink); }
.fm-racconto-primo { font-weight: 400; }

/* L'APERTURA A MANO NON C'E' PIU': dentro la lettera il font e' uno solo.
   La prima frase di Antonella era in Caveat, a 2.1rem, staccata come l'attacco
   di una lettera. Era un bel gesto e costava troppo: su una pagina dove il
   punto e' che quelle sono parole SUE, due caratteri diversi dentro lo stesso
   documento fanno sembrare la prima frase un titolo scritto da noi e il resto
   il testo. Deciso da Jacopo il 12/11/2026, guardando la pagina.

   La mano resta in un punto solo, la firma, dove non e' testo da leggere ma
   un nome: e' li' che fa il suo lavoro senza costare una riga di leggibilita'.
   Il <span> dell'apertura e la funzione che spezzava il capoverso sono spariti
   con la regola: markup senza stile e' solo una cosa in piu' da spiegare. */

/* La firma in calce. L'inclinazione e' l'unica di tutto il sito: una seconda
   la trasformerebbe in uno stile, e questa deve restare un gesto. */
.fm-firma {
  margin-top: clamp(30px, 5vw, 48px);
  padding-top: clamp(18px, 3vw, 26px);
  border-top: 1px solid var(--paper-edge);
}
.fm-firma-nome {
  margin: 0;
  font-family: Caveat, Montserrat, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3rem);
  line-height: 1;
  color: var(--brand-graphite);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}
.fm-firma-ruolo { margin: 10px 0 0; font-size: .9rem; color: var(--muted); }

/* Le parole della famiglia sono citate, non scritte da noi: il filetto giallo
   lo dice senza doverlo spiegare due volte. */
.fm-attribuzione {
  margin: clamp(22px, 4vw, 34px) auto 0;
  max-width: 64ch;
  border-left: 2px solid var(--brand-yellow);
  padding-left: 16px;
  font-size: .88rem;
  color: var(--muted);
}

.fm-nota-obiettivo { margin-top: 20px; max-width: 62ch; font-size: .95rem; color: var(--muted); }
.fm-governance-titolo { margin-top: 44px; margin-bottom: 14px; text-align: center; }
.fm-chiusura-prose { margin-inline: auto; margin-top: 28px; }

@media (max-width: 599px) {
  /* Su schermo stretto la tabella diventa un elenco: due colonne di cui una
     con tre righe di testo si riducono altrimenti a una colonna di sillabe. */
  .fm-costi, .fm-costi tbody, .fm-costi tfoot, .fm-costi tr, .fm-costi th, .fm-costi td { display: block; }
  .fm-costi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fm-costi tr { border-bottom: 1px solid var(--line); padding: 16px 0; }
  .fm-costi th, .fm-costi td { border: 0; padding: 0; }
  .fm-costi .fm-importo { text-align: left; margin-top: 10px; font-size: 1.15rem; }
  .fm-costi tfoot tr { border-bottom: 0; border-top: 2px solid var(--ink); }
}

/* ============ 404 ============ */
/* ── La 404 ───────────────────────────────────────────────────────
   Impianto della famiglia 3 del Brand Playbook cap. 18, che la famiglia 6 — i siti
   dei clienti — richiama: fondo scuro, marchio accanto alla cifra, filo nel colore
   del cliente, titolo, una riga, due pulsanti. Niente fotografia: l'unica
   autorizzata e' il ritratto di Marco, e una pagina di errore non e' il suo posto. */
.fm-404 { padding: clamp(56px, 9vw, 104px) 0; }
.fm-404-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }

.fm-404-marca { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 22px); }
.fm-404-sym { width: clamp(64px, 11vw, 104px); height: auto; color: var(--brand-yellow); flex: none; }
.fm-404-cifra {
  /* Qui c'era `font-family: var(--font-display, inherit)`. --font-display non
     e' dichiarato da nessuna parte, quindi la riga cadeva sempre su `inherit`,
     che e' gia' quello che un font-family non dichiarato fa da solo: una riga
     che non faceva niente e prometteva un carattere che il sito non ha.
     Se un giorno si adotta un carattere da display (MASTER.md #2, punto
     ancora aperto), questa cifra e' il primo posto dove dovrebbe comparire.
     (13/11/2026) */
  font-weight: 900; font-style: italic; letter-spacing: -.04em; line-height: .82;
  font-size: clamp(5.5rem, 17vw, 11rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--ink-on-dark-faint);
}

/* Il filo nel colore del cliente: separa il titolo dal testo, e non e' un bordo
   di tabella — e' corto apposta, come nella famiglia 3. */
.fm-404-filo { width: 72px; height: 3px; background: var(--brand-yellow); margin: 20px 0 0; }

.fm-404-occhiello { margin: 0; }
.fm-404-titolo { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-top: 12px; }
.fm-404-testo { margin-top: 18px; max-width: 46ch; }
.fm-404-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

@media (min-width: 860px) {
  .fm-404-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .fm-404-marca { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.fm-sezione-ultima { padding-bottom: clamp(48px, 8vw, 96px); }

/* ============ RECAPITO ============ */
/* Un indirizzo a cui scrivere non è una riga di testo come le altre: è la cosa
   per cui qualcuno è arrivato su questa pagina. Sta in un riquadro, col nome
   e il ruolo di chi risponde — scrivere a una persona che si sa chi è non è
   la stessa cosa che scrivere a una casella. */
/* Niente max-width proprio, come .fm-coordinate: sono i due riquadri di dati di
   questo sito e devono comportarsi uguale. Finche' ce l'aveva, liberarlo dalla
   colonna non lo allargava - lo lasciava a 62ch SENZA centratura, cioe' stretto e
   appoggiato a sinistra con mezza sezione vuota a destra. Misurato: 657 px di
   riquadro e 543 di niente, su Contatti e su Organizza. */
.fm-recapito {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 24px;
}

/* L'intestazione del riquadro delle coordinate: dice per che cosa vale quel conto.
   Non e' un titolo di sezione - sta dentro il riquadro - quindi non prende il
   trattamento dei titoli: e' una riga di etichetta, come i <dt> che ha sotto, ma piena
   e nel colore del testo invece che smorzata. */
.fm-coordinate-titolo {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 800;
  color: var(--ink);
}
/* Il pulsante sotto la nota, dentro il riquadro: chi ha appena letto dove
   arrivano i soldi ha il pulsante sotto gli occhi, non in fondo alla pagina. */
/* ── I DUE PULSANTI DEL RIQUADRO: META' E META' ────────────────────────────────────
   Griglia a due colonne uguali, non flex: con 1fr 1fr le due meta' restano identiche
   qualunque cosa ci sia scritto dentro, mentre flex le fa larghe quanto il testo.
   Jacopo le ha chieste uguali, e «uguali» deve restare vero anche il giorno che
   un'etichetta cambia.

   min-width: 0 e width: 100% servono a disinnescare la regola «tutti i bottoni larghi
   almeno 260px» qui sotto: dentro una meta' di riquadro quella regola fa traboccare la
   riga sul telefono. Fuori di qui resta valida e non si tocca.

   La nota del pulsante spento e' posizionata rispetto a QUESTA riga, non rispetto al
   pulsante: su uno schermo stretto una mezza colonna e' troppo poco per una frase, e
   larga quanto tutto il riquadro si legge. Per questo il position: relative sta qui. */
.fm-coordinate-azione {
  margin: 18px 0 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fm-coordinate-azione > * { min-width: 0; }
.fm-coordinate-azione .btn { min-width: 0; width: 100%; }
.fm-dona-spenta { display: block; }

/* IL PULSANTE SPENTO non e' giallo e non si solleva al passaggio del mouse: deve
   leggersi come non disponibile prima ancora che qualcuno provi a premerlo. Il cursore
   lo conferma. I colori non vengono dai ruoli del tema -- la nota si vedrebbe chiara su
   chiaro col tema scuro -- ma da due valori propri, come fa il banner del consenso. */
.fm-btn-spento[aria-disabled="true"] {
  color: var(--muted);
  border-color: var(--line-strong);
  background: transparent;
  cursor: not-allowed;
}
.fm-btn-spento[aria-disabled="true"]:hover { transform: none; background: transparent; }

.fm-dona-nota {
  --nota-bg: #111318;
  --nota-fg: #F7F6F2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 3;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--nota-bg);
  color: var(--nota-fg);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.fm-dona-spenta:hover .fm-dona-nota,
.fm-dona-spenta:focus-within .fm-dona-nota { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .fm-dona-nota { transition: none; }
}
.fm-coordinate-nota {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  line-height: 1.55;
  color: var(--muted);
}

.fm-recapito p { margin: 0; }
.fm-recapito-chi { font-size: .95rem; color: var(--muted); }
.fm-recapito-chi strong { color: var(--ink); }
.fm-recapito-mail { margin-top: 14px !important; font-size: 1.1rem; }
.fm-recapito-tel { margin-top: 10px !important; font-size: 1.1rem; }
.fm-recapito-nota { margin-top: 16px !important; font-size: .9rem; color: var(--muted); }

/* ============ EVENTI ============ */
/* Fasce a tutta larghezza, una sotto l'altra. La griglia a due colonne che c'era prima
   lasciava l'ultima riga spaiata con tre eventi e mezza pagina vuota con uno: si leggeva
   come disordine anche a contenuto ordinato. */
.fm-eventi { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }

.fm-evento {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-yellow);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 24px 26px;
}

/* Dentro la fascia, due colonne: quando e dove a sinistra, il racconto a destra. Cosi'
   una fascia larga non resta vuota e le date restano incolonnate fra un evento e l'altro. */
.fm-evento-lato { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.fm-evento-corpo { min-width: 0; }
.fm-evento-dove { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; }

@media (min-width: 760px) {
  .fm-evento { grid-template-columns: minmax(180px, 230px) minmax(0, 1fr); gap: 30px; align-items: start; }
}

.fm-evento-cat {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

/* «Da confermare» non è una sfumatura di stile: è la differenza fra una data
   su cui qualcuno prende un treno e una che può ancora cambiare. Si vede. */
.fm-evento-tbc {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  background: color-mix(in srgb, var(--brand-yellow) 55%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
}

.fm-evento-titolo { margin-bottom: 10px; }

.fm-evento-quando {
  margin: 0 0 12px;
  font-size: .95rem;
  color: var(--muted);
}

.fm-evento-quando strong { color: var(--ink); }
.fm-evento-testo { margin: 0; max-width: 62ch; color: var(--muted); font-size: .95rem; }
.fm-evento-dettagli { margin-top: 14px; }
.fm-evento-dettagli > li { font-size: .9rem; }

.fm-eventi-coda {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.fm-eventi-coda .lead { max-width: 760px; color: var(--muted); margin-bottom: 20px; }

/* Le CTA di fine sezione vanno in basso a destra, dove l'occhio arriva finita la lettura.
   Sotto gli 860 px tornano a sinistra: in una colonna stretta «a destra» non vuol dire nulla. */
.fm-sezione-cta { margin: 26px 0 0; }
@media (min-width: 860px) {
  .fm-sezione-cta { display: flex; justify-content: flex-end; }
  .fm-eventi-coda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
  .fm-eventi-coda .lead { margin-bottom: 0; }
}

/* Le coordinate del bonifico: un blocco che si legge e si copia, non un paragrafo. */
.fm-coordinate { margin-top: 20px; border: 1px solid var(--line); border-left: 4px solid var(--brand-yellow);
  border-radius: var(--r-md); background: var(--surface); padding: 20px 22px; }
.fm-coordinate dl { display: grid; gap: 10px; margin: 0; }
.fm-coordinate dt { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fm-coordinate dd { margin: 2px 0 0; font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.fm-coordinate dd.manca { font-weight: 400; font-style: italic; color: var(--muted); }

/* IL FAC-SIMILE STA IN SECONDO PIANO, NON NASCOSTO. Jacopo ha chiesto «un colore a
   basso contrasto»: qui è reso come «in secondo piano rispetto a un dato vero», non
   come «al limite della leggibilità». Su una pagina di raccolta fondi un numero falso
   e poco visibile è la peggiore delle due cose - si legge male e sembra vero lo stesso -
   e la DoD di casa chiede comunque WCAG AA.
   Quindi: --muted (#4A4F58 su bianco = 8,2:1, molto sopra la soglia di 4,5) e peso
   normale, contro il nero in grassetto dei dati veri. La differenza si vede subito.
   A impedire davvero lo scambio è l'etichetta accanto, non il colore. */
.fm-coordinate dd.facsimile { font-weight: 400; color: var(--muted); }
/* L'ETICHETTA NON E' ROSSA, E LA RAGIONE NON E' VISIVA. Il playbook del cliente, in
   19/0015 §E, dice degli stati evento: «Five colours that mean five things, and the
   only place a red is allowed on this brand.» Il rosso #B42318 e' lo stato «Annullato»
   e nient'altro. La riga dopo lo spiega sul giallo: «Yellow means one state, not
   "important": a second yellow badge on a card would make both meaningless.»
   Un secondo rosso che significa «dato non vero» fa al rosso esattamente quello. Nessuno
   confonderebbe un IBAN con un evento annullato: il guaio e' che la regola smette di
   essere vera, e chi legge il playbook dopo non sa piu' se il rosso significa qualcosa o
   e' solo enfasi.
   Il lavoro lo fa la tipografia, che era gia' quella: maiuscoletto, grassetto, spaziato.
   In nero pieno l'etichetta e' piu' scura del numero che accompagna - ed e' giusto,
   perche' l'avvertimento conta piu' del numero finto. */
.fm-facsimile {
  display: block;
  margin-top: 4px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
@media (min-width: 720px) {
  .fm-coordinate dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
}

@media (min-width: 860px) {
  /* niente piu' due colonne: le fasce stanno in colonna singola a ogni misura */
  /* Il primo evento è il prossimo che succede: prende tutta la riga. */
  .fm-eventi > .fm-evento:first-child { grid-column: 1 / -1; }
}