@charset "utf-8";
/* jeuxcryptonft.com — foglio di stile.

   Il sito è **scuro per difetto**, e la scelta è misurata. I concorrenti
   francofoni del settore — Cointribune, CoinAcademy, Cryptonaute, ActuFinance,
   Cryptoast — hanno tutti il fondo chiaro: aperti il 30 ottobre 2026 a 1280 px,
   scrivono il corpo del testo fra 14 e 18 px e nessuno usa un carattere con
   grazie. Un sito scuro, in quel campo, è l'unico. Chi ha il sistema impostato
   sul chiaro riceve comunque il tema chiaro, curato alla pari.

   **I due marchi stanno tutti e due sul fondo della pagina, senza piastra.**
   Il logo del sito arrivava come JPEG su bianco ed è stato scontornato: il
   bianco è fondo, non inchiostro, e il conto che lo toglie deve anche
   **smescolare** il colore osservato, altrimenti i bordi restano slavati e il
   logotipo si legge come un contorno cavo. Misurato sul ritaglio pulito, il
   lettering dà 3,24:1 nel punto peggiore sul fondo notte contro **2,65:1 su
   bianco**: la piastra bianca era l'opzione peggiore delle tre, non la più
   sicura. Il disco al centro della stella resta aperto — è spazio vuoto, non
   inchiostro — mentre le crocette e i puntini dei gamepad restano bianchi,
   perché quelli sono segni.

     logo del sito   su notte #0e1016  3,24:1 nel punto peggiore, 5,18:1 medio
                     su carta #fbfaf8  2,65:1 nel punto peggiore
     Upland          su bianco  1,22:1 sul lettering giallo — illeggibile
                     su notte  12,6:1 — e il lama bianco porta la figura

   Resta un solo punto in cui i due temi si comportano in modo diverso, ed è
   Upland: il suo marchio è giallo su trasparente, disegnato per il buio, e nel
   tema chiaro prende un campo scuro suo. Il logo del sito non ne ha mai uno.

   Il carattere è diverso da quello del gemello italiano: Archivo per i titoli
   e Bitter per il testo, al posto di Space Grotesk e Literata. Il corpo è a
   18 px su 68 caratteri: resta sopra la fascia del settore, che è lo scarto
   che si vede al primo sguardo, ma meno del gemello perché su fondo scuro lo
   stesso corpo si legge più grande.

   Il linguaggio delle forme è l'altro scarto: spigoli vivi invece dei 10 px
   arrotondati, filetti disegnati sulle schede invece di ombre — che su fondo
   scuro non si vedono comunque — e un'apertura a sommario invece del mosaico. */

/* ------------------------------------------------------------------ font */
@font-face {
  font-family: 'Bitter';
  src: url('/font/bitter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitter';
  src: url('/font/bitter-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/font/archivo-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/font/archivo-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ----------------------------------------------------------------- token */
/* I valori qui sono quelli del **tema scuro**, che è il difetto. Il tema
   chiaro li ridefinisce più in basso, sotto `prefers-color-scheme: light`.
   Non c'è nessun campo di marchio: i due logotipi sono PNG trasparenti e
   stanno sul fondo della pagina. */
:root {
  --profondo: #0b0d12;        /* il testo scuro che sta SOPRA gli accenti chiari */
  --profondo-2: #06080c;
  --acqua: #5fd0f5;           /* ciano del logo, variante che regge sul fondo — 10,7:1 */
  --acqua-piena: #8fe0ff;
  --acqua-chiara: #10293a;
  --terra: #ff6fb8;           /* magenta del logo — 7,4:1 */
  --terra-scura: #ff8ac4;
  --ambra: #ffb43d;           /* ambra dell'emblema, e il giallo di Upland — 10,7:1 */
  --ambra-scura: #ffc45e;
  --verde: #4ade80;           /* variazione positiva — 10,9:1 */

  --carta: #0e1016;
  --carta-2: #15181f;
  --scheda-fondo: #13161d;
  --inchiostro: #e7e5ee;      /* non bianco pieno: su fondo scuro sfarfalla */
  --tenue: #a9a5b8;           /* 7,9:1 */
  --riga: #272b36;

  --serif: 'Bitter', Charter, 'Iowan Old Style', Georgia, serif;
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t12: .75rem;  --t13: .8125rem; --t14: .875rem; --t15: .9375rem;
  --t16: 1rem;    --t17: 1.0625rem; --t18: 1.125rem; --t19: 1.1875rem;
  --t20: 1.25rem;
  --t24: 1.5rem;  --t28: 1.75rem;  --t34: 2.125rem; --t42: 2.625rem;

  --largo: 1240px;
  --r: 2px;                   /* spigoli vivi: il gemello italiano ne ha 10 */
  --ombra: none;              /* su fondo scuro un'ombra non si vede: filetti */

  --pagefind-ui-primary: #5fd0f5; --pagefind-ui-text: #e7e5ee;
  --pagefind-ui-background: #15181f; --pagefind-ui-border: #272b36;
  --pagefind-ui-font: 'Bitter', Georgia, serif; --pagefind-ui-border-radius: 2px;
}

/* --------------------------------------------------------------- di base */
/* Misurato il 30 ottobre 2026 sui siti dello stesso settore — eGamers,
   BlockchainGamer, PlayToEarn, NFT Now, NFT Evening, DappRadar — aprendo i loro
   fogli di stile e leggendo il corpo del testo reso a 1280 px:

     eGamers            13 px   170 caratteri per riga
     BlockchainGamer    14 px    50
     PlayToEarn         16 px   105
     NFT Now            16 px   105
     NFT Evening        12 px    39
     DappRadar          14 px    51

   Nessuno di loro usa un carattere con grazie per il testo: sono tutti Inter,
   Roboto, system-ui o simili. Il corpo di questo sito è a 19 px su 66
   caratteri, con Literata: è lo scarto che si vede al primo sguardo, e il
   motivo per cui non si tocca.

   Metà di loro ha il fondo scuro, che in questo settore è la convenzione: qui
   il fondo è chiaro per scelta, ma il tema scuro è curato alla pari e non è un
   ripiego. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 var(--t18)/1.72 var(--serif);
  font-synthesis-weight: none;
}

/* `text-wrap: balance` evita la parola orfana in fondo ai titoli, che su titoli
   lunghi come quelli di questo sito capita di continuo. `scroll-margin-top` fa
   sì che il sommario, saltando a un titolo, non lo incolli al bordo in alto. */
h1, h2, h3, h4 {
  font-family: var(--sans); line-height: 1.18; margin: 0 0 .5em;
  font-weight: 600; letter-spacing: -.018em;
  text-wrap: balance; scroll-margin-top: 1.4em;
}
h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, var(--t42)); letter-spacing: -.02em; }
h2 { font-size: var(--t28); }
h3 { font-size: var(--t20); }
/* `pretty` lascia al browser il compito di evitare le righe finali orfane.
   Dove non è supportato non succede niente. */
p { margin: 0 0 1.1em; text-wrap: pretty; }

/* Questi articoli sono pieni di cifre messe a confronto — volumi, prezzi
   minimi, percentuali di calo. Le cifre a larghezza fissa si incolonnano e si
   confrontano a occhio, che è il motivo per cui esistono. */
.testo, .scheda, table, time, .chip { font-variant-numeric: tabular-nums; }

::selection { background: var(--terra); color: var(--profondo); }
a { color: var(--acqua); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--acqua-piena); }
img { max-width: 100%; height: auto; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--riga); margin: 2em 0; }

:focus-visible { outline: 3px solid var(--acqua); outline-offset: 2px; border-radius: 3px; }

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--acqua); color: var(--profondo); padding: .7em 1.1em; font-family: var(--sans);
}
.salta:focus { left: 0; }

.involucro { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 20px; }

/* --------------------------------------------------- impaginazione a due */
.impaginato { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 1060px) {
  .impaginato { grid-template-columns: minmax(0, 1fr) 302px; gap: 52px; }
  .impaginato__laterale { position: sticky; top: 20px; }
}

/* -------------------------------------------------------------- testata */
/* Il gemello italiano ha il logotipo al centro di una testata scura dentro un
   sito chiaro. Qui la testata è scura come tutto il resto, il logotipo sta a
   sinistra **scontornato, direttamente sul fondo**, e le categorie stanno
   sulla stessa riga. */
.testata {
  background: var(--carta);
  color: var(--inchiostro);
  border-bottom: 1px solid var(--riga);
  position: relative;
}
/* il filetto sotto la testata riprende le tre tinte del logotipo, nell'ordine
   in cui le porta: magenta, ciano, ambra */
.testata::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(to right,
    var(--terra) 0 34%, var(--acqua) 34% 68%, var(--ambra) 68% 100%);
}
.testata__riga { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 13px; padding-bottom: 13px; }
.marchio { display: flex; align-items: center; gap: 16px; text-decoration: none;
  color: inherit; margin-right: auto; }
.marchio img { height: 28px; width: auto; display: block; }
.marchio__claim { font-family: var(--sans); font-size: var(--t13); color: var(--tenue);
  max-width: 34ch; line-height: 1.4;
  border-left: 1px solid var(--riga); padding-left: 16px; }
@media (max-width: 680px) { .marchio__claim { display: none; } }

.menu-bottone {
  display: none; align-items: center; gap: 8px; background: none;
  border: 1px solid var(--riga); color: var(--inchiostro); font-family: var(--sans);
  font-size: var(--t14); padding: .5em .8em; border-radius: var(--r); cursor: pointer;
}
.menu-bottone__barre { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-bottone__barre span { display: block; width: 16px; height: 2px; background: currentColor; }
.menu-bottone em { font-style: normal; }

.navigazione ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.navigazione a {
  display: block; padding: .42em .72em; border-radius: var(--r); text-decoration: none;
  color: var(--inchiostro); font-family: var(--sans); font-size: var(--t14);
  font-weight: 500; white-space: nowrap; letter-spacing: .005em;
}
.navigazione a:hover { background: var(--carta-2); color: var(--acqua); }
.navigazione a[aria-current] { color: var(--terra); box-shadow: inset 0 -2px 0 var(--terra); border-radius: 0; }
.navigazione__cerca a { box-shadow: inset 0 0 0 1px var(--riga); }

@media (max-width: 1000px) {
  .menu-bottone { display: inline-flex; }
  .navigazione { display: none; flex-basis: 100%; }
  .navigazione.aperta { display: block; }
  .navigazione ul { flex-direction: column; gap: 1px; padding-bottom: 10px; }
  .navigazione a { padding: .6em .7em; }
}

/* ------------------------------------------------------------- sezioni */
main { padding: 34px 0 60px; }
.sezione { margin: 0 0 46px; }
.sezione__titolo { font-size: var(--t24); margin-bottom: .3em; }
.sezione__titolo--secondo { margin-top: 1.6em; }
.sezione__nota { color: var(--tenue); font-size: var(--t16); max-width: 62ch; margin-bottom: 1.3em; }
.sezione__azione { margin-top: 1.4em; }
.sezione--chiusura { text-align: center; padding-top: 10px; }

/* ---------------------------------------------------- apertura a sommario

   Il gemello italiano apre con un mosaico — un riquadro grande e due piccoli —
   e sotto un carosello orizzontale. Qui l'apertura è un **sommario**: un pezzo
   in testa e accanto un elenco numerato con le miniature quadrate. È la pagina
   dei contenuti di una rivista, e su un archivio di verifiche dice meglio che
   cosa c'è dentro.

   Il velo (`.riquadro::after`) resta la parte che conta: le copertine sono
   schermate, qualcuna su fondo chiaro, e il titolo è bianco. È calcato in
   basso e trasparente in alto. **Non si schiarisce nel tema chiaro**, per la
   stessa ragione per cui non si schiarisce la piastra dei marchi. */

.apertura { margin: 0 0 40px; }

.sommario-apertura { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .sommario-apertura { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 26px; }
  /* Il pezzo in testa ha un rapporto fisso 16:10 e l'elenco accanto è più
     alto: lasciandoli liberi resta un buco sotto la copertina, che è la prima
     cosa che si vede aprendo la home. Qui la copertina si allunga fino
     all'altezza dell'elenco — `aspect-ratio: auto` serve, perché altrimenti il
     rapporto vince sull'altezza della riga. */
  .sommario-apertura > .riquadro { aspect-ratio: auto; height: 100%; min-height: 340px; }
}

.riquadro {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border-radius: var(--r); background: #0b0d12;
  aspect-ratio: 16 / 10; text-decoration: none; isolation: isolate;
  box-shadow: 0 0 0 1px var(--riga);
}
.riquadro > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.riquadro__marchio { width: auto; height: auto; max-width: 58%; max-height: 38%;
  margin: auto; object-fit: contain; inset: 0; }
.riquadro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(6,8,12,.97) 0%, rgba(6,8,12,.95) 42%,
    rgba(6,8,12,.72) 60%, rgba(6,8,12,.18) 82%, rgba(6,8,12,0) 100%);
}
.riquadro__testo { position: relative; z-index: 1; display: block;
  padding: 18px 20px 19px; color: #fff; }
.riquadro__titolo { margin: 9px 0 7px; color: #fff; font-size: var(--t28);
  line-height: 1.17; letter-spacing: -.015em; text-wrap: balance; }
.riquadro__estratto { display: block; color: #cdc9da; font-size: var(--t15);
  line-height: 1.5; max-width: 54ch; }
.riquadro__meta { display: block; font-family: var(--sans); font-size: var(--t13); color: #cdc9da; }
.riquadro .chips { gap: 6px; }
.riquadro .chip { background: rgba(255,255,255,.13); color: #fff; border-color: transparent; }
@media (max-width: 899px) { .riquadro__titolo { font-size: var(--t24); } }

@media (hover: hover) {
  .riquadro:hover > img { transform: scale(1.035); }
  .riquadro:hover .riquadro__titolo { text-decoration: underline; text-underline-offset: 3px; }
}
.riquadro:focus-visible { outline: 3px solid var(--acqua); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .riquadro > img { transition: none; }
  .riquadro:hover > img { transform: none; }
}

/* l'elenco numerato accanto al pezzo in testa */
.sommario-apertura__lista { list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--riga);
  box-shadow: 0 0 0 1px var(--riga); border-radius: var(--r); overflow: hidden; }
.sommario-apertura__lista > li { background: var(--carta); }
.sommario-apertura__lista a {
  display: grid; grid-template-columns: 2.3rem 64px minmax(0, 1fr);
  align-items: center; gap: 14px; padding: 11px 14px 11px 10px;
  text-decoration: none; color: inherit;
}
.sommario-apertura__lista a:hover { background: var(--carta-2); }
.sommario-apertura__lista a:hover .voce__titolo { color: var(--acqua); }
.voce__num { font-family: var(--sans); font-size: var(--t18); font-weight: 700;
  color: var(--riga); text-align: right; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.sommario-apertura__lista a:hover .voce__num { color: var(--terra); }
.voce__figura { display: block; width: 64px; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--r); background: #0b0d12; box-shadow: 0 0 0 1px var(--riga); }
.voce__figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.voce__figura--marchio { display: grid; place-items: center; padding: 8px; }
.voce__figura--marchio img { width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; }
.voce__testo { min-width: 0; }
.voce__titolo { display: block; font-family: var(--sans); font-weight: 600;
  font-size: var(--t15); line-height: 1.27; letter-spacing: -.008em; margin-bottom: 3px; }
.voce__meta { display: block; font-family: var(--sans); font-size: var(--t12); color: var(--tenue); }
@media (max-width: 480px) {
  .sommario-apertura__lista a { grid-template-columns: 1.8rem 52px minmax(0, 1fr); gap: 11px; }
  .voce__figura { width: 52px; }
}

.inquadramento {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  border-left: 3px solid var(--terra);
  padding: 2px 0 2px 24px; margin: 0 0 42px;
  font-size: var(--t20); line-height: 1.6;
}
.inquadramento p { margin: 0; flex: 1 1 24ch; max-width: 56ch; }
.inquadramento__logo { flex: 0 0 auto; width: 188px; height: auto; }
@media (max-width: 560px) {
  .inquadramento { gap: 20px; font-size: var(--t18); }
  .inquadramento__logo { width: 142px; }
}

.fascia {
  background: var(--carta-2); box-shadow: 0 0 0 1px var(--riga); border: 0;
  border-radius: var(--r); padding: 30px 26px; margin: 0 0 46px;
}
.fascia .sezione__titolo { margin-top: 0; }

.presentazione { margin: 0 0 34px; max-width: 68ch; font-size: var(--t17); }
.presentazione__tile { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.2em; }

/* ------------------------------------------------------------- griglie */
/* Le schede del gemello italiano hanno il filo colorato a sinistra, gli
   spigoli arrotondati e un'ombra. Qui il filetto è disegnato tutto attorno con
   `box-shadow: 0 0 0 1px`, che è anche il modo di non lasciare in vista una
   casella colorata quando la riga è incompleta; gli spigoli sono vivi; e
   l'ombra non c'è, perché su fondo scuro non si vedrebbe. Il colore della
   piattaforma passa dal filo di sinistra a una barra sottile in testa. */
.griglia { display: grid; gap: 22px; }
.griglia--terzi { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); }

.scheda {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--scheda-fondo); border: 0; box-shadow: 0 0 0 1px var(--riga);
  border-radius: var(--r); padding: 15px 17px 14px;
  transition: box-shadow .15s, transform .15s;
}
.scheda::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--acqua); border-radius: var(--r) var(--r) 0 0; z-index: 1;
}
.scheda:hover { box-shadow: 0 0 0 1px var(--acqua); transform: translateY(-2px); }
.scheda[data-piattaforma="Le secteur"]::before      { background: var(--terra); }
.scheda[data-piattaforma="Collectionnables"]::before { background: var(--ambra); }
.scheda[data-piattaforma="Alien Worlds"]::before    { background: #4ade80; }
.scheda[data-piattaforma="The Sandbox"]::before     { background: var(--acqua); }
.scheda[data-piattaforma="Upland"]::before          { background: #65c9d6; }
.scheda[data-piattaforma="Axie Infinity"]::before   { background: #a98cf0; }
.scheda[data-piattaforma="Decentraland"]::before    { background: #ff8a5c; }
.scheda[data-piattaforma="Autres jeux"]::before     { background: var(--tenue); }
.scheda__testo { display: flex; flex-direction: column; flex: 1; }
.scheda h3 { font-size: var(--t17); margin: .45em 0 .3em; line-height: 1.26; }

/* la copertina esce dai margini della scheda, così tocca i filetti */
.scheda__figura { display: block; margin: -15px -17px 13px; overflow: hidden;
  border-radius: var(--r) var(--r) 0 0; background: #0b0d12; }
.scheda__figura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Dove la schermata non c'è ci va il logotipo del sito, scontornato, sul
   campo dei pannelli, con l'etichetta sotto. */
.scheda__figura--marchio { position: relative; display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: var(--carta-2); padding: 14px 18px 30px; }
.scheda__figura--marchio img { width: auto; height: auto;
  max-height: 46%; max-width: 76%; aspect-ratio: auto; object-fit: contain; }
.scheda__figura--marchio span { position: absolute; left: 14px; right: 14px; bottom: 9px;
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; letter-spacing: .04em;
  color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheda h3 a { text-decoration: none; color: var(--inchiostro); }
.scheda h3 a:hover { color: var(--acqua); text-decoration: underline; }
.scheda__estratto { color: var(--tenue); font-size: var(--t15); margin: 0 0 .5em; }
.scheda__meta { font-family: var(--sans); font-size: var(--t12); color: var(--tenue); margin: auto 0 0; }

/* --------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.chip {
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; letter-spacing: .02em;
  padding: .2em .55em; border-radius: var(--r); border: 1px solid var(--riga);
  color: var(--tenue); background: var(--carta-2); white-space: nowrap;
  text-transform: uppercase; font-size: var(--t12); letter-spacing: .05em;
}
.chip--piattaforma { border-color: #1c5063; background: var(--acqua-chiara); color: #a9e2ec; }
.chip--valido   { border-color: #2a5636; background: #14301f; color: #8fd5a4; }
.chip--superato { border-color: #5c4b22; background: #322a16; color: #dcc07e; }
.chip--cronaca  { border-color: #3a3448; background: #1e1b28; color: #b6aec6; }
.chip--data { background: none; border: 0; padding-left: 0; }

/* -------------------------------------------------------------- ingressi */
.ingressi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.ingresso {
  display: block; text-decoration: none; color: inherit; background: var(--carta-2);
  box-shadow: 0 0 0 1px var(--riga); border: 0; border-radius: var(--r);
  padding: 19px 20px 17px; transition: box-shadow .15s, transform .15s;
}
.ingresso:hover { box-shadow: 0 0 0 1px var(--acqua); transform: translateY(-2px); }
.ingresso b { display: block; font-family: var(--sans); font-size: var(--t17);
  margin-bottom: .35em; line-height: 1.3; }
.ingresso span { display: block; color: var(--tenue); font-size: var(--t15); }
.ingresso i { display: block; margin-top: .7em; font-style: normal; font-family: var(--sans);
  font-size: var(--t12); color: var(--acqua); font-weight: 600; }

/* ----------------------------------------------------------------- tile */
.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile {
  display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none;
  background: var(--carta-2); box-shadow: 0 0 0 1px var(--riga); border: 0;
  border-radius: var(--r); padding: .55em .85em; color: var(--inchiostro);
  font-family: var(--sans); font-size: var(--t14);
}
.tile:hover { box-shadow: 0 0 0 1px var(--acqua); color: var(--acqua); }
.tile i { font-style: normal; font-size: var(--t12); color: var(--tenue); }
.tile--piccola { font-size: var(--t13); padding: .42em .72em; }

/* ------------------------------------------------- richiami affiliazione */
.richiami { display: grid; gap: 16px; }
@media (max-width: 1059px) {
  .richiami { grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); margin-top: 10px; }
}
.richiamo {
  background: var(--carta-2); border: 0; box-shadow: 0 0 0 1px var(--riga);
  border-radius: var(--r); padding: 16px 16px 14px;
  border-top: 3px solid var(--terra);
}
.richiamo--upland { border-top-color: var(--ambra); }

/* Il marchio di Upland è giallo su trasparente: disegnato per fondo scuro.
   Misurato, su bianco dà 1,19:1 — invisibile — e sul campo scuro 15,5:1.
   La piastra usa quindi lo stesso campo della testata, e il tema scuro non lo
   schiarisce. */
.richiamo__piastra {
  display: grid; place-items: center; height: 104px; margin: 0 0 10px;
  background: transparent; border: 0;
  border-radius: var(--r); padding: 6px 10px; overflow: hidden;
}.richiamo__logo { display: block; width: auto; height: auto;
  max-height: 84px; max-width: 100%; object-fit: contain; }

/* ripiego, se i file dei marchi non ci sono */
.richiamo__piastra--targa { grid-auto-flow: column; gap: 12px; height: auto; padding: 14px; }
.richiamo__targa {
  width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--terra); color: var(--profondo);
  font-family: var(--sans); font-weight: 800; font-size: var(--t15); letter-spacing: .02em;
}
.richiamo--upland .richiamo__targa { background: var(--ambra); color: var(--profondo); }
.richiamo__nome { font-size: var(--t17); line-height: 1.2; color: var(--inchiostro); }
.richiamo__testo { min-width: 0; }
.richiamo__nota { font-family: var(--sans); font-size: var(--t13); color: var(--tenue); margin: .3em 0 .5em; }
.richiamo__codice { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 .6em; }
.richiamo__codice code {
  font-size: var(--t16); font-weight: 700; letter-spacing: .06em;
  background: #1d2230; border: 1px dashed var(--ambra);
  padding: .26em .5em; border-radius: var(--r); color: var(--ambra-scura);
}
.richiamo__linkforte { font-family: var(--sans); font-size: var(--t14); font-weight: 700; word-break: break-all; }
.richiamo__copia {
  font-family: var(--sans); font-size: var(--t12); font-weight: 600; cursor: pointer;
  background: var(--acqua); color: var(--profondo); border: 0; border-radius: var(--r); padding: .4em .7em;
}
.richiamo__copia:hover { background: var(--acqua-piena); }
.richiamo__copia[data-fatto] { background: var(--terra-scura); }
.richiamo__dettaglio { font-size: var(--t13); color: var(--tenue); margin: 0 0 .7em; line-height: 1.5; }
.richiamo__link { font-family: var(--sans); font-size: var(--t13); font-weight: 600; }
.richiami__nota { font-family: var(--sans); font-size: var(--t12); color: var(--tenue); line-height: 1.5; margin: 0; }

/* ------------------------------------------------------------- articolo */
.articolo { max-width: 72ch; }
.articolo h1 { margin-bottom: .3em; }
.articolo__sommario { font-size: var(--t20); color: var(--tenue); line-height: 1.5; margin-bottom: .9em; }
.articolo__firma { font-family: var(--sans); font-size: var(--t14); color: var(--tenue); margin-bottom: 1.6em; }

.briciole ul { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0 0 1em; padding: 0;
  font-family: var(--sans); font-size: var(--t13); }
.briciole li + li::before { content: '›'; margin-right: .4em; color: var(--tenue); }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a:hover { color: var(--acqua); text-decoration: underline; }

.avviso-data {
  background: var(--carta-2); border-left: 3px solid #4a4558;
  padding: 14px 18px; margin: 0 0 1.8em; border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t15); color: #b4afc2; line-height: 1.55;
}

.sommario {
  background: var(--carta-2); border: 0; box-shadow: 0 0 0 1px var(--riga);
  border-radius: var(--r); padding: 17px 21px; margin: 0 0 2em;
}
.sommario b { display: block; font-family: var(--sans); font-size: var(--t13); text-transform: uppercase;
  letter-spacing: .08em; color: var(--tenue); margin-bottom: .7em; }
.sommario ol { margin: 0; padding-left: 1.3em; }
.sommario li { margin-bottom: .34em; font-size: var(--t16); }
.sommario a { text-decoration: none; }
.sommario a:hover { text-decoration: underline; }

.testo { font-size: var(--t18); }
.testo h2 { font-size: var(--t28); margin-top: 1.7em; }
.testo h3 { font-size: var(--t24); margin-top: 1.6em; }
.testo h4 { font-size: var(--t20); margin-top: 1.4em; }
.testo h2 strong, .testo h3 strong, .testo h4 strong { font-weight: inherit; }
.testo ul, .testo ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.testo li { margin-bottom: .42em; }
.testo blockquote {
  margin: 1.8em 0; padding: 18px 22px;
  background: #fffdf2; border: 1px solid #e8e3c4; border-left: 4px solid var(--terra);
  border-radius: 0 var(--r) var(--r) 0; font-size: var(--t17);
}
.testo blockquote p:last-child { margin-bottom: 0; }
.testo table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: var(--t15); }
.testo th, .testo td { border: 1px solid var(--riga); padding: .6em .7em; text-align: left; vertical-align: top; }
.testo th { background: var(--carta-2); font-weight: 650; }

.schermata { margin: 1.9em 0; }
.schermata img { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--riga); background: #fff; }
.schermata .zoom { display: block; }
.schermata figcaption { margin-top: .62em; font-family: var(--sans); font-size: var(--t14);
  line-height: 1.5; color: var(--tenue); }
.schermata figcaption b { color: var(--inchiostro); font-weight: 600; }
.schermata.alignleft, .schermata.alignright { max-width: 320px; }
@media (min-width: 760px) {
  .schermata.alignleft { float: left; margin: .4em 1.8em 1.2em 0; }
  .schermata.alignright { float: right; margin: .4em 0 1.2em 1.8em; }
}

.etichette { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 1.5em 0 0;
  padding-top: 1.1em; border-top: 1px solid var(--riga); font-family: var(--sans); }
.etichette b { font-size: var(--t12); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.etichette div { display: flex; flex-wrap: wrap; gap: 7px; }
.etichette a { font-size: var(--t13); background: var(--carta-2); border: 1px solid var(--riga);
  border-radius: 999px; padding: .22em .7em; text-decoration: none; color: var(--tenue); }
.etichette a:hover { border-color: var(--acqua); color: var(--acqua); }

.scorri { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 2.4em 0 0; }
.scorri a { display: block; padding: 14px 16px; border: 1px solid var(--riga); border-radius: var(--r);
  text-decoration: none; color: var(--inchiostro); background: #fff; }
.scorri a:hover { border-color: var(--acqua); }
.scorri i { display: block; font-style: normal; font-family: var(--sans); font-size: var(--t12);
  color: var(--tenue); margin-bottom: .3em; }
.scorri b { font-weight: 600; font-size: var(--t16); line-height: 1.3; }
.scorri__succ { text-align: right; }

/* -------------------------------------------------------------- archivio */
.archivio__testa { margin-bottom: 30px; max-width: 72ch; }
.archivio__descrizione { color: var(--tenue); font-size: var(--t18); margin: 0; }

.filtri { background: var(--carta-2); border: 1px solid var(--riga); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 26px; font-family: var(--sans); }
.filtri__riga { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.filtri__riga > b { font-size: var(--t12); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); min-width: 7.5em; }
.filtri__riga > div { display: flex; flex-wrap: wrap; gap: 6px; }
.filtri button { font-family: inherit; font-size: var(--t13); cursor: pointer;
  background: #fff; border: 1px solid var(--riga); border-radius: 999px; padding: .3em .8em; color: var(--inchiostro); }
.filtri button:hover { border-color: var(--acqua); }
.filtri button[aria-pressed="true"] { background: var(--profondo); border-color: var(--profondo); color: #fff; }
.filtri__esito { margin: 4px 0 0; font-size: var(--t13); color: var(--tenue); }
.filtri__azzera { margin-left: 6px; }

.righe { list-style: none; margin: 0; padding: 0; }
.riga { display: flex; gap: 18px; padding: 15px 0; border-top: 1px solid var(--riga); }
.riga:last-child { border-bottom: 1px solid var(--riga); }
.riga__anno { flex: 0 0 3.4em; font-family: var(--sans); font-size: var(--t14); color: var(--tenue); padding-top: .15em; }
.riga__corpo { min-width: 0; }
.riga__corpo > a { font-size: var(--t18); text-decoration: none; color: var(--inchiostro); font-weight: 600; }
.riga__corpo > a:hover { color: var(--acqua); text-decoration: underline; }
.riga__sintesi { display: block; color: var(--tenue); font-size: var(--t15); margin: .2em 0 .45em; }
.riga[hidden] { display: none; }

/* -------------------------------------------------------------- bottoni */
.bottone {
  display: inline-block; font-family: var(--sans); font-size: var(--t15); font-weight: 600;
  background: var(--acqua); color: var(--profondo); text-decoration: none; cursor: pointer;
  border: 1px solid var(--acqua); border-radius: var(--r); padding: .6em 1.1em;
  font-weight: 600;
}
.bottone:hover { background: var(--acqua-piena); border-color: var(--acqua-piena); color: var(--profondo); }
.bottone--chiaro { background: transparent; color: var(--inchiostro); border-color: var(--riga); }
.bottone--chiaro:hover { background: var(--carta-2); color: var(--acqua); border-color: var(--acqua); }

/* ----------------------------------------------------------- segnaposto */
.segnaposto {
  background: #ffe95c; color: #4a3b00; font-family: var(--sans); font-size: .92em;
  font-weight: 700; padding: .1em .4em; border-radius: 4px; box-decoration-break: clone;
}

/* ------------------------------------------------------------------ pie */
.pie { background: var(--carta-2); color: #c7c3d2; margin-top: 50px; padding: 44px 0 0;
  font-family: var(--sans); font-size: var(--t15); }
.pie a { color: #eceaf3; }
.pie h2 { font-family: var(--sans); font-size: var(--t13); text-transform: uppercase;
  letter-spacing: .09em; color: #8f8b9e; margin: 0 0 .9em; }
.pie__griglia { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-bottom: 36px; }
.pie__blocco--largo { grid-column: span 2; max-width: 46ch; }
@media (max-width: 680px) { .pie__blocco--largo { grid-column: span 1; } }
.pie__logo { display: block; width: 210px; height: auto; margin: 0 0 18px; }
.pie__elenco { list-style: none; margin: 0; padding: 0; }
.pie__elenco li { margin-bottom: .45em; display: flex; gap: .5em; align-items: baseline; }
.pie__elenco span { font-size: var(--t12); color: #7d788d; }
.pie__contatto, .pie__codice { font-size: var(--t14); }
.pie__codice code { background: #1d2230; padding: .16em .45em; border-radius: var(--r); color: #ffd27a; }
.pie__consenso { background: none; border: 0; color: #eceaf3; font: inherit; cursor: pointer;
  padding: 0; text-decoration: underline; }
.pie__riga { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--riga); padding-top: 16px; padding-bottom: 20px; font-size: var(--t13); color: #8f8b9e; }
.pie__riga p { margin: 0; }

/* -------------------------------------------------------------- consenso */
.consenso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--carta-2); border-top: 2px solid var(--terra);
  box-shadow: 0 -8px 30px rgba(0,0,0,.45); }
.consenso__corpo { max-width: var(--largo); margin: 0 auto; padding: 18px 20px;
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.consenso p { margin: 0; font-size: var(--t15); max-width: 66ch; }
.consenso__azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* ----------------------------------------------------------- tema chiaro */
/* Il difetto di questo sito è scuro. Qui sotto c'è la versione per chi ha il
   sistema impostato sul chiaro, curata alla pari e controllata pagina per
   pagina, non lasciata al caso.

   Il logo del sito non compare qui sotto, ed è voluto: è un PNG trasparente e
   sta sul fondo in tutti e due i temi. Upland invece, che su bianco dà 1,22:1
   sul lettering, qui prende la sua piastra scura — è l'unico punto in cui i
   due temi si comportano in modo diverso, e il motivo è una misura. */
@media (prefers-color-scheme: light) {
  :root {
    --carta: #fbfaf8; --carta-2: #f1eff3; --scheda-fondo: #ffffff;
    --inchiostro: #15131c; --tenue: #5b5668;
    --riga: #e2dee4;
    --acqua: #0a7ba6;        /* 4,67:1 sulla carta */
    --acqua-piena: #065a7c;
    --acqua-chiara: #ddf1fa;
    --terra: #cf0070;        /* 5,04:1 */
    --terra-scura: #9e0055;
    --ambra: #ffb43d;
    --ambra-scura: #8f5c00;  /* 5,36:1 — la variante che regge il testo */
    --verde: #0f7a46;        /* 5,17:1 */
    --profondo: #ffffff;     /* il testo che sta sopra gli accenti, qui chiaro */
    --profondo-2: #ffffff;
    --ombra: 0 1px 2px rgba(20,18,31,.06), 0 8px 24px -14px rgba(20,18,31,.30);

    --pagefind-ui-primary: #0a7ba6; --pagefind-ui-text: #15131c;
    --pagefind-ui-background: #fff; --pagefind-ui-border: #e2dee4;
  }
  .testata { background: var(--carta); color: var(--inchiostro); border-bottom-color: var(--riga); }
  .testata .marchio__claim { color: var(--tenue); border-left-color: var(--riga); }
  .testata .navigazione a { color: var(--inchiostro); }
  .testata .navigazione a:hover { background: var(--carta-2); color: var(--acqua); }
  .testata .menu-bottone { color: var(--inchiostro); border-color: var(--riga); }

  /* Upland è giallo su trasparente: su carta sparisce, e qui prende il campo scuro */
  .richiamo__piastra { background: #0b0d12; border-color: #0b0d12; }

  .pie { background: #0e1016; color: #c7c3d2; }
  .pie a { color: #eceaf3; }
  .pie h2 { color: #8f8b9e; }
  .pie__elenco span { color: #7d788d; }
  .pie__codice code { background: #1d2230; color: #ffd27a; }
  .pie__riga { border-top-color: #272b36; color: #8f8b9e; }
  .pie__consenso { color: #eceaf3; }

  .chip--valido   { background: #e6f4ea; border-color: #b9d9c3; color: #1d6b38; }
  .chip--superato { background: #f7efdc; border-color: #e2d3b0; color: #7a5a16; }
  .chip--cronaca  { background: #eef1f4; border-color: #cfd6dc; color: #4a5a68; }
  .chip--piattaforma { background: var(--acqua-chiara); border-color: #b4d3d8; color: #07586e; }
  .richiamo__codice code { background: var(--carta-2); color: var(--profondo-2); }
  .avviso-data { color: #46525d; border-left-color: #b6bec6; }
  .testo blockquote { background: var(--carta-2); border-color: var(--riga); }
}

/* ------------------------------------------------------------- stampa */
@media print {
  .testata, .pie, .richiami, .consenso, .filtri, .scorri, .sommario { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .impaginato { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* ------------------------------------------------- tabella dei gettoni

   Due colonne di percentuali che vanno lette a coppie, quindi si distinguono
   per colore e non solo per segno. Il verde e il rosso non bastano da soli —
   il segno resta scritto — perché chi non distingue i due colori deve poter
   leggere la stessa cosa. */

.tabella-avvolta { overflow-x: auto; margin: 1.6em 0; }

.gettoni { width: 100%; border-collapse: collapse; font-size: var(--t15); }
.gettoni caption {
  caption-side: bottom; margin-top: .8em; text-align: left;
  font-family: var(--sans); font-size: var(--t13); color: var(--tenue); line-height: 1.5;
}
.gettoni th, .gettoni td { border-bottom: 1px solid var(--riga); padding: .62em .7em; }
.gettoni thead th {
  font-family: var(--sans); font-size: var(--t13); text-transform: uppercase;
  letter-spacing: .04em; color: var(--tenue); border-bottom: 2px solid var(--riga);
  white-space: nowrap; font-weight: 600;
}
.gettoni tbody th {
  text-align: left; font-weight: 400; white-space: nowrap;
}
.gettoni tbody th b { font-family: var(--sans); font-weight: 650; letter-spacing: .01em; }
.gettoni tbody th span { display: block; font-size: var(--t13); color: var(--tenue); }
.gettoni .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gettoni .anno { color: var(--tenue); font-size: var(--t13); }
.gettoni tbody tr:hover { background: var(--carta-2); }

.var { font-family: var(--sans); font-weight: 600; }
.var--su { color: var(--verde); }
.var--giu { color: var(--terra-scura); }
.nd { color: var(--tenue); font-style: italic; }

.fonte-dati {
  margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--riga);
  font-family: var(--sans); font-size: var(--t13); color: var(--tenue);
}