/* ============================================================================
   immilex-core.css — foglio condiviso ImmiLex. Fase 2, settembre 2026.
   Riusabile tale e quale su immilex.it: nessuna riga specifica per immilex.ch.

   Ordine dei blocchi: @font-face (arriva col Task B), token, componenti, guardie.

   LA FAMIGLIA STA SUI TOKEN, non solo su `body`. Vedi il blocco «LA FAMIGLIA»
   nella sezione 3: l'ereditarieta' da `body` non basta contro le venti
   dichiarazioni "DM Sans" a 0-1-0 del foglio esistente, e non basta contro
   l'`Arial` che la UA stylesheet di Chrome mette sui `<button>`.
   Nessun !important salvo l'unica rete dichiarata in fondo.
   Nessun html{font-size}. Nessun color-mix(). Nessun font-weight 600.

   PERCHE' I SELETTORI SONO RIPETUTI TRE VOLTE (.ilx-x.ilx-x.ilx-x)
   Il prefisso ilx- evita le collisioni di nome; non fa vincere le regole.
   Il foglio esistente del sito, misurato il 20/09/2026, aggancia la tipografia
   con selettori discendenti fino a specificita' 0-3-0: .nav-dropdown .nd-link
   .nd-tag, .hero .lede, .info-card h3, .legal-body p, .price-inc li, e altri.
   Una classe singola e' 0-1-0 e perderebbe a qualunque ordine di caricamento.
   Ripetere la classe porta il selettore a 0-3-0 senza toccare il DOM e senza
   !important: pareggia il caso peggiore, e a parita' vince questo foglio perche'
   e' caricato dopo (e' l'ultimo elemento che porta stile dentro <head>).
   L'alternativa era rimuovere le dichiarazioni dal foglio esistente, che pero'
   e' duplicato BYTE PER BYTE su 81 documenti piu' 6 blog piu' il sorgente:
   migliaia di modifiche per lo stesso effetto. Vedi A0-mappa-aggancio.md.

   Le classi di affordance (.ilx-cta, .ilx-back, .ilx-link, .ilx-card, .ilx-chev)
   NON sono ripetute: non competono con dichiarazioni esistenti sulle stesse
   proprieta', e dove lo fanno (font-size, letter-spacing) portano la ripetizione.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. @FONT-FACE
   Self-host obbligatorio, non preferibile. L'API di Google Fonts consegna solo
   `ccmp dnom frac liga locl numr` e rimuove tutto il resto, lnum e tnum inclusi
   (google/fonts issue #1335, aperta dal 2017). Le cifre di default di Alegreya
   Sans sono old-style PROPORZIONALI: dal CDN `CHF 4.500` uscirebbe con 3,4,5,7,9
   sotto la linea di base e larghezze da 344 a 528 unita', e
   `font-variant-numeric: lining-nums` non farebbe NIENTE, perche' la feature non
   sarebbe nel file. Questi woff2 sono sottoinsiemi costruiti dai TTF originali
   con lnum, tnum, pnum, onum, case, locl e kern tenute esplicitamente.

   Alegreya Sans e' STATICA (nessuna tabella fvar, verificato sul binario): una
   faccia per peso, mai un intervallo. I pesi esistenti sono 100,300,400,500,
   700,800,900 — IL 600 NON ESISTE. Serviti 300,400,500,700 piu' l'italico 400,
   che sono quelli misurati in uso: 300 su 22 regole, 400 su 12, 500 su 42, e il
   700 per i 1847 <strong>, che senza faccia cadrebbero sul 500. Le 4 regole a
   peso 600 cadono sul 500 per l'algoritmo di font-matching, ed e' esattamente
   cio' che il vincolo B.0.3 prescrive; oggi invece producono un grassetto
   SINTETICO, perche' DM Sans e' caricato solo a 300/400/500.

   Cormorant Garamond e' VARIABILE (asse wght 300..700, verificato su fvar),
   quindi qui `font-weight:300 700` e' una dichiarazione VERA, non falsa, ed e'
   il caso che il BRIEF metteva in guardia solo per i file statici. Va sotto il
   nome di famiglia GIA' IN USO, cosi' nessuna regola esistente va toccata.

   Peso per pagina latina: 128,5 KB (4 pesi sans + Cormorant + italico).
   --------------------------------------------------------------------------- */

/* ---- Alegreya Sans 300 ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/alegreya-300-latin.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-300-latinext.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-300-cyrillic.woff2) format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Alegreya Sans 400 ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/alegreya-400-latin.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-400-latinext.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-400-cyrillic.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Alegreya Sans 500 ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/alegreya-500-latin.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-500-latinext.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-500-cyrillic.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Alegreya Sans 700 ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/alegreya-700-latin.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-700-latinext.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-700-cyrillic.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Alegreya Sans italic 400, per i 936 <em> in prosa. L'italico e' un
       disegno vero e separato, non un'inclinazione: avanzamento medio 0,4095 em
       contro 0,4453 del tondo, l'8% piu' stretto. Sintetizzarlo si vede. ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/alegreya-400i-latin.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-400i-latinext.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-400i-cyrillic.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Lo stesso file italico dichiarato anche a 500, e il motivo va scritto.
       Alegreya Sans ha un solo taglio italico nel nostro sottoinsieme, il 400.
       Finche' i titoli erano Cormorant la cosa non si vedeva: il corsivo dei
       titoli veniva dal file variabile di Cormorant, che il 500 ce l'ha. Da
       quando i titoli di /ar/ e /hi/ passano al sans, i loro 68 <em> chiedono
       un corsivo a peso 500, e per un peso che la famiglia non dichiara Chrome
       non ripiega sulla faccia vicina: esce dalla famiglia. Misurato: 12 glifi
       latini di un <em> inglese su /ar/naturalisation/ e le cifre di «14 يومًا»
       finivano in Helvetica Neue.
       Dichiararlo e' meno sbagliato che perdere la famiglia: la forma e' quella
       giusta, solo un filo piu' leggera del peso chiesto. Il 300 e il 700
       italici NON sono dichiarati perche' non sono in uso da nessuna parte
       (misurato su otto pagine): se compariranno, e' il cancello font a dirlo,
       ed e' li' che va aggiunta la riga. ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/alegreya-400i-latin.woff2) format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-400i-latinext.woff2) format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
  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:"ImmiLex Sans";src:url(/fonts/alegreya-400i-cyrillic.woff2) format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Arabo e devanagari. Alegreya Sans ha ZERO glifi per entrambi, verificato
       sul cmap: senza queste facce /ar/ e /hi/ cadono su un font di sistema, ed
       e' cio' che succede OGGI (misurato: su /ar/ il testo e' Geeza Pro).
       Il file 600 di Plex e' mappato sul 500 della scala. ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-400-arabic.woff2) format("woff2");
  font-weight:400;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-600-arabic.woff2) format("woff2");
  font-weight:500;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-400-devanagari.woff2) format("woff2");
  font-weight:400;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-600-devanagari.woff2) format("woff2");
  font-weight:500;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}

/* ---- Gli stessi due file di Plex rimappati su 300 e 700, per ciascuno dei due
       alfabeti. NON e' ridondanza: Alegreya copre 300/400/500/700, Plex copriva
       solo 400 e 500, e per un peso che una famiglia non dichiara Chrome non
       ripiega sulla faccia vicina — esce dalla famiglia e prende un font di
       sistema. Misurato prima del fix: `.lede` su /ar/, che e' peso 300,
       rendeva 77 glifi in Arial; su /hi/ 3376 glifi finivano in Kohinoor
       Devanagari. Le URL sono le stesse: zero byte in piu' sulla rete. ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-400-arabic.woff2) format("woff2");
  font-weight:300;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-600-arabic.woff2) format("woff2");
  font-weight:700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-400-devanagari.woff2) format("woff2");
  font-weight:300;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-600-devanagari.woff2) format("woff2");
  font-weight:700;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}

/* ---- Il corsivo, per due alfabeti che il corsivo non ce l'hanno.
       I 936 <em> del sito lo chiedono lo stesso, e senza una faccia dichiarata
       corsiva Chrome esce dalla famiglia esattamente come faceva per il peso:
       misurato dopo aver chiuso il buco dei pesi, restavano 220 glifi in Geeza
       Pro su /ar/, tutti dentro gli <em> dei titoli, ed era l'ULTIMA causa di
       fallback rimasta. Si dichiara la faccia DRITTA come corsiva: e' la scelta
       giusta per arabo e devanagari, e toglie di mezzo anche l'obliquo
       sintetico, che su un alfabeto connesso e' un difetto e non un rimedio.
       Pesi separati, mai un intervallo: queste facce sono statiche. ---- */
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-400-arabic.woff2) format("woff2");
  font-weight:300;font-style:italic;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-400-arabic.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-600-arabic.woff2) format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-arabic-600-arabic.woff2) format("woff2");
  font-weight:700;font-style:italic;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
                U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-400-devanagari.woff2) format("woff2");
  font-weight:300;font-style:italic;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-400-devanagari.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-600-devanagari.woff2) format("woff2");
  font-weight:500;font-style:italic;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}
@font-face{font-family:"ImmiLex Sans";src:url(/fonts/plex-devanagari-600-devanagari.woff2) format("woff2");
  font-weight:700;font-style:italic;font-display:swap;
  unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,
                U+A830-A839,U+A8E0-A8FF,U+11B00-11B09;}


/* ---- Cormorant Garamond self-hostato, VARIABILE. Oggi il cirillico dei titoli
       arriva da Google; self-hostandolo arriva da qui, con gli stessi 220
       codepoint cirillici verificati sul binario. ---- */
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-var-latin.woff2) format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  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:"Cormorant Garamond";src:url(/fonts/cormorant-var-latinext.woff2) format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  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:"Cormorant Garamond";src:url(/fonts/cormorant-var-cyrillic.woff2) format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-var-i-latin.woff2) format("woff2");
  font-weight:300 700;font-style:italic;font-display:swap;
  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:"Cormorant Garamond";src:url(/fonts/cormorant-var-i-latinext.woff2) format("woff2");
  font-weight:300 700;font-style:italic;font-display:swap;
  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:"Cormorant Garamond";src:url(/fonts/cormorant-var-i-cyrillic.woff2) format("woff2");
  font-weight:300 700;font-style:italic;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}

/* ---- Faccia di fallback con metriche allineate. Le override vanno su una
       faccia dedicata che avvolge un font di sistema, non sulle facce reali: su
       quelle distorcerebbero il font vero. Senza questa, lo swap produce un
       salto visibile e l'hero e' l'elemento LCP.
       Derivate dai valori typo di Alegreya Sans LETTI SUL BINARIO il 20/09/2026:
       ascender 800, descender -200, line gap 200, upm 1000, USE_TYPO_METRICS
       attivo, interlinea naturale (800+200+200)/1000 = 1,200 em esatti.
       size-adjust = altezza x Alegreya 0,458 / altezza x Arial 0,528 = 86,7%.
       ascent 0,800/0,867 = 92%   descent 0,200/0,867 = 23%   gap 0,200/0,867 = 23%
       `line-gap-override: 0%` sarebbe SBAGLIATO: il gap vero e' 0,200 em, e
       azzerarlo compatta del 17% ogni elemento a line-height:normal fino allo
       swap. Attenzione all'ordine dei local(): su Windows risolve Segoe UI, su
       macOS Helvetica Neue, e l'86,7% e' derivato da Arial, cioe' dal terzo. ---- */
@font-face{
  font-family:"ImmiLex Fallback";
  src:local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust:86.7%; ascent-override:92%; descent-override:23%; line-gap-override:23%;
}

/* ---------------------------------------------------------------------------
   2. TOKEN
   Nessun valore di corpo, tracking o trasformazione di caso compare come
   letterale dentro una classe .ilx-*: passano tutti da una custom property.
   E' il meccanismo che rende il file riusabile su immilex.it.
   --------------------------------------------------------------------------- */
:root{

  /* --- Colore. Ridichiarazione di token GIA' nel repo, misurati il 20/09/2026.
         Nessuna tinta nuova: sono gli stessi valori di --ink/--navy e --gold,
         presenti su tutti e 87 i documenti. I colori che stesure precedenti del
         brief davano per buoni (#1B2A4A, #C0984C) hanno ZERO occorrenze. --- */
  --ilx-navy-rgb: 27 45 82;                            /* #1b2d52, = --navy e --ink */
  --ilx-gold:     #c9a46e;                             /* = --gold */
  --ilx-navy:     rgb(var(--ilx-navy-rgb));
  --ilx-rule:        rgb(var(--ilx-navy-rgb) / .28);   /* 1,73:1 su cream: decorativo */
  --ilx-rule-strong: rgb(var(--ilx-navy-rgb) / .55);   /* 3,27:1 su cream: affordance, SC 1.4.11 */

  /* --- Scala. Ricalcolata il 20/09/2026 sull'altezza x misurata di DM Sans
         (0,50125 em al corpo, non lo 0,528 presunto) e sull'altezza maiuscole
         0,7000 em, costante su tutto l'asse opsz. Sette token sans dalla
         formula, quattro Cormorant per scelta di disegno.
         Clamp tarati su 360px e 1280px, root 16px:
         B = (max_px - min_px)/9.2 e A = (min_px - B*3.6)/16. --- */
  --ilx-fs-display: clamp(2.25rem, 1.4674rem + 3.4783vw, 4.25rem);   /* 36→68  H1 hero, Cormorant */
  --ilx-fs-h2:      clamp(1.75rem, 1.4076rem + 1.5217vw, 2.625rem);  /* 28→42  titoli sezione, Cormorant */
  --ilx-fs-h3:      clamp(1.375rem, 1.2772rem + 0.4348vw, 1.625rem); /* 22→26  titoli card, Cormorant */
  /* --- 26px fissi, non piu' 30→44. Il censimento chiesto prima di toccarlo:
         .ilx-stat sta su 1079 elementi e su QUATTRO soli selettori, tutti
         dentro una card o una riga di lista — .price-amt (420), .il-sl-n (324),
         .doc-num (254), .fact-n (80). Un contesto diverso dalla card non
         esiste, quindi «il token nel contesto card» e' il token.
         A 1440px rendeva 44px, cioe' PIU' GRANDE del titolo di sezione
         (.content-ttl, 42px): un prezzo dentro una card era il testo piu'
         grande della sezione che lo conteneva. A 390px rendeva 30px accanto a
         un titolo di card da 17. E .il-sl-n ha `width:1.5rem`, 24px: a 44 la
         cifra usciva dal suo riquadro.
         Gli originali pre-Fase-2 erano 23,2→26,4 per .price-amt, 27,2→32 per
         .fact-n, 20→22,4 per .doc-num, 24 fissi per .il-sl-n: 26px sta dentro
         quella banda per tutti e quattro. Coincide col massimo di --ilx-fs-h3,
         che e' il punto: una cifra chiave e' grande come un titolo di card, e
         mai piu' del titolo di sezione. Sopra il pavimento di 16px. --- */
  --ilx-fs-stat:    1.625rem;    /* 26px  cifre chiave, Cormorant */
  --ilx-fs-lead:    clamp(1.25rem, 1.2011rem + 0.2174vw, 1.375rem);  /* 20→22  sottotitolo hero */
  --ilx-fs-body:    1.125rem;    /* 18px  prosa corrente */
  --ilx-fs-body-sm: 1.0625rem;   /* 17px  corpo card, liste dense */
  --ilx-fs-meta:    1rem;        /* 16px  «1 ora • Detratta in caso di mandato» — pavimento */
  --ilx-fs-legal:   1rem;        /* 16px  footer, privacy, impressum — pavimento */
  --ilx-fs-cta:     0.9375rem;   /* 15px MAIUSCOLO  «Guida completa», «Prenota» */
  --ilx-fs-caps:    0.875rem;    /* 14px MAIUSCOLO  «OBBLIGATORIA», «EU/EFTA», «NON-EU» */

  /* --- Interlinee. Mai clamp() sull'interlinea. --- */
  --ilx-lh-display: 1.06;
  --ilx-lh-h2:      1.15;
  --ilx-lh-h3:      1.25;
  --ilx-lh-lead:    1.5;
  --ilx-lh-body:    1.6;
  --ilx-lh-body-sm: 1.55;
  --ilx-lh-meta:    1.45;
  --ilx-lh-legal:   1.6;
  --ilx-lh-caps:    1.2;

  /* --- Tracking, indicizzato per corpo: 14px→0,10em  15px→0,08em
         16-19px→0,06em  ≥20px→0,04em. Sul minuscolo di corpo sempre 0. --- */
  --ilx-caps-tracking: .10em;
  --ilx-cta-tracking:  .08em;
  --ilx-head-tracking: 0;
  --ilx-caps-transform: uppercase;
  --ilx-caps-weight: 500;        /* 500, non 600: in Alegreya Sans il 600 non esiste */

  /* --- Famiglia. "ImmiLex Fallback" subito dopo la reale: e' la faccia con le
         metriche allineate, e va PRIMA dei font di sistema nudi o il salto allo
         swap torna. --- */
  --ilx-sans: "ImmiLex Sans","ImmiLex Fallback","Segoe UI","Helvetica Neue",Arial,sans-serif;

  /* --- La serif dei titoli. Non e' una famiglia nuova: e' la stessa stringa
         che il foglio esistente ripete su diciannove selettori, portata in una
         variabile perche' due lingue devono poterla ridichiarare. Vedi la
         guardia :lang(ar), :lang(hi) in fondo. --- */
  --ilx-serif: "Cormorant Garamond", serif;

  --ilx-ease: cubic-bezier(.2,.7,.2,1);
  --ilx-dur:  340ms;
}

/* ---------------------------------------------------------------------------
   3. COMPONENTI
   Selettori di elemento nudi ammessi: solo `body`, e `h1,h2,h3` per le due
   righe di C.8. Nient'altro. Ogni classe legge variabili, mai letterali.
   --------------------------------------------------------------------------- */

body{
  font-family: var(--ilx-sans);
  font-size:   var(--ilx-fs-body);
  font-variant-numeric: lining-nums;   /* Alegreya ha old-style per default: vedi B.3 */
}

/* LA FAMIGLIA, e perche' sta sui token e non solo su `body`.
   Fino al 20/09/2026 questo foglio dichiarava `font-family` solo su `body` e
   si affidava all'ereditarieta'. Non basta: il foglio esistente dichiara
   `font-family:"DM Sans",sans-serif` su venti selettori a 0-1-0, e una
   dichiarazione a 0-1-0 batte l'ereditarieta' sempre, qualunque sia l'ordine
   di caricamento. Risultato misurato su 105 URL prima del fix: 1780 elementi
   su 101 URL calcolavano ancora "DM Sans" — che dalla Fase 2 non e' piu'
   caricato da nessuna parte, quindi rendevano in Helvetica — e 43 elementi
   della home calcolavano `Arial` nudo, ereditato dalla UA stylesheet di Chrome
   attraverso i `<button class="pcard">` della root.
   Portavano tutti gia' la classe ilx-* giusta: mancava solo il pareggio di
   specificita', ed e' quello che queste righe fanno.

   Sui token di corpo va il sans, sui quattro token di titolo va la serif. Il
   controllo che lo autorizza e' una misura, non una deduzione: su 105 URL,
   nessun elemento con un token di titolo dichiarava sans (0 su 4014), mentre
   443 elementi con un token di CORPO dichiaravano Cormorant per disegno — gli
   h3 e gli h4 degli articoli, .price-val, .cs-lead. Per quelli c'e' la
   contro-classe .ilx-serif, sotto, come .ilx-gold per il Task F. */
.ilx-display.ilx-display.ilx-display { font-size: var(--ilx-fs-display); line-height: var(--ilx-lh-display); font-family: var(--ilx-serif); }
.ilx-h2.ilx-h2.ilx-h2      { font-size: var(--ilx-fs-h2);      line-height: var(--ilx-lh-h2);      font-family: var(--ilx-serif); }
.ilx-h3.ilx-h3.ilx-h3      { font-size: var(--ilx-fs-h3);      line-height: var(--ilx-lh-h3);      font-family: var(--ilx-serif); }
.ilx-lead.ilx-lead.ilx-lead    { font-size: var(--ilx-fs-lead);    line-height: var(--ilx-lh-lead);    font-family: var(--ilx-sans); }
.ilx-prose.ilx-prose.ilx-prose   { font-size: var(--ilx-fs-body);    line-height: var(--ilx-lh-body);    font-family: var(--ilx-sans); }
.ilx-body-sm.ilx-body-sm.ilx-body-sm { font-size: var(--ilx-fs-body-sm); line-height: var(--ilx-lh-body-sm); font-family: var(--ilx-sans); }
.ilx-meta.ilx-meta.ilx-meta    { font-size: var(--ilx-fs-meta);    line-height: var(--ilx-lh-meta);    font-family: var(--ilx-sans); }
.ilx-legal.ilx-legal.ilx-legal   { font-size: var(--ilx-fs-legal);   line-height: var(--ilx-lh-legal);   font-family: var(--ilx-sans); }
.ilx-stat.ilx-stat.ilx-stat    { font-size: var(--ilx-fs-stat);    font-family: var(--ilx-serif);
               font-variant-numeric: lining-nums tabular-nums; }

/* Contro-classe della famiglia, 0-4-0 come .ilx-gold. Serve ai 196 elementi
   sorgente che portano un token di CORPO e sono Cormorant per disegno: gli h3
   e gli h4 dentro .rel-card dei cinque articoli, .price-val, .cs-lead. Senza,
   le righe qui sopra li rovescerebbero in sans.
   La porta anche .ptitle, che un token non ce l'ha: li' non cambia niente
   fuori da ar/hi, ma la fa seguire --ilx-serif dove Cormorant non ha glifi.
   L'invariante che lo verifica e' in tools/gate_cormorant.py. */
.ilx-serif.ilx-serif.ilx-serif.ilx-serif{ font-family: var(--ilx-serif); }

/* Micro-etichette e CTA. Il caso e il tracking passano da variabili, cosi' le
   scritture senza caso li spengono ridichiarando la variabile, non duplicando
   la classe. */
.ilx-caps.ilx-caps.ilx-caps{
  font-size:      var(--ilx-fs-caps);
  font-family:    var(--ilx-sans);
  line-height:    var(--ilx-lh-caps);
  text-transform: var(--ilx-caps-transform);
  letter-spacing: var(--ilx-caps-tracking);
  font-weight:    var(--ilx-caps-weight);
}

/* Tracking ridotto per le etichette che stanno in una fila orizzontale densa,
   come le voci di una subnav: a 14px il tracking indicizzato vale .10em, che su
   nove voci in fila costa circa 90px di larghezza e li' non c'e'. .04em resta
   dentro l'intervallo che il C.4 prevede per i corpi >=20px, e su una fila di
   etichette brevi la leggibilita' non ne soffre.
   Ridichiara la variabile, non la proprieta': e' il meccanismo con cui questo
   foglio gestisce le eccezioni, e funziona anche contro i selettori a 0-3-0. */
.ilx-tight{
  --ilx-caps-tracking: .04em;
  --ilx-cta-tracking:  .04em;
}

/* Il marchio non prende mai il maiuscolo automatico: sotto lang="tr",
   `ImmiLex` in uppercase produce `İMMİLEX`. Vedi C.6. */
.ilx-brand{
  /* Ridichiara la VARIABILE, non la proprieta': .ilx-caps e' scritta a 0-3-0
     per battere il foglio esistente, quindi una `text-transform` a 0-1-0 qui
     perderebbe contro se stessa. Il valore della variabile invece si risolve
     sull'elemento e vince sempre. */
  --ilx-caps-transform: none;
  text-transform: none;
  /* Senza maiuscolo vale il pavimento del minuscolo, 16px, non i 14 del
     maiuscolo tracciato: altrimenti il marchio resterebbe sotto il pavimento. */
  --ilx-caps-tracking: 0;
  --ilx-cta-tracking:  0;
  --ilx-fs-caps: 1rem;
  --ilx-fs-cta:  1rem;
}

/* LA REGOLA DEL MAIUSCOLO, C.4. Maiuscolo solo se la stringa e' un'etichetta:
   massimo 2 parole, massimo 16 caratteri NELLA PIU' LUNGA delle dieci lingue,
   nessuna punteggiatura di frase, mai prosa.
   Misurato il 20/09/2026 su tutte e dieci le lingue, misurando ogni blocco
   lingua separatamente: 9 selettori portano prosa e non possono restare in
   maiuscolo. Il caso peggiore e' `.il-label`, che in inglese dice
   «Where is the person you want to hire based?», nove parole; e `.tl-tag`, che
   dice «Applicant + ImmiLex · 2–6 months», cioe' esattamente l'esempio che il
   C.4 porta come «mai maiuscolo».
   Non si toglie loro il token di corpo: si ridichiarano le variabili, che e' il
   meccanismo con cui questo foglio gestisce le eccezioni. Diventano minuscoli,
   senza tracking e al pavimento di 16px, come il C.4 prescrive. */
.ilx-nocaps{
  --ilx-caps-transform: none;
  --ilx-caps-tracking: 0;
  --ilx-cta-tracking:  0;
  --ilx-fs-caps: 1rem;
  --ilx-fs-cta:  1rem;
}

/* CTA: etichetta tracciata piu' filetto che si allunga. Sostituisce
   «Guida completa →». Il filetto E' il segnale di cliccabilita'. */
.ilx-cta.ilx-cta.ilx-cta{
  display:inline-flex; align-items:center; gap:.7em;
  flex-wrap:wrap; row-gap:.35rem;
  font-size:var(--ilx-fs-cta);
  font-family:var(--ilx-sans);
  letter-spacing:var(--ilx-cta-tracking);
  text-transform:var(--ilx-caps-transform);
  font-weight:500; line-height:1.2;              /* 500: il 600 non esiste in Alegreya */
  text-decoration:none;
  /* NIENTE `color` qui. Su questo sito una buona meta' dei CTA vive sul navy
     della navbar e del footer: imporre var(--ilx-navy) li rendeva
     navy-su-navy, contrasto 1,00, invisibili. Il colore resta quello che il
     foglio esistente gia' dava, che e' gia' giusto per il proprio fondo. */
  padding-block:.5rem;                           /* target ≥24px, SC 2.5.8 */
  transition:color var(--ilx-dur) var(--ilx-ease);
}
.ilx-cta::after{
  content:""; display:block; flex:0 0 auto;      /* senza questo si schiaccia a 320px */
  inline-size:2.75rem; block-size:1px;
  /* currentColor, non un navy fisso: il filetto deve restare visibile sia sul
     cream sia sul navy. Su chiaro vale navy al 55%, 3,27:1; su navy vale il
     colore chiaro dell'etichetta. In entrambi i casi supera il 3:1 di SC 1.4.11. */
  background:currentColor; opacity:.55;
  transform:scaleX(.55); transform-origin:left center;
  transition:transform var(--ilx-dur) var(--ilx-ease), background var(--ilx-dur);
}
.ilx-cta:hover::after,
.ilx-cta:focus-visible::after{ transform:scaleX(1); background:var(--ilx-gold); opacity:1; }
[dir="rtl"] .ilx-cta::after, :dir(rtl) .ilx-cta::after{ transform-origin:right center; }

/* Un CTA che ha gia' una cornice — fondo pieno o bordo — non ha bisogno del
   filetto: il filetto esiste per dire «questo si clicca» a un'etichetta di solo
   testo, e su un bottone lo direbbe due volte. Costa anche 44px di larghezza,
   che nella navbar a 320px mandavano il pulsante del menu fuori schermo. */
.ilx-cta.ilx-btn::after,
.ilx-back.ilx-btn::before{ content: none; }

/* Ritorno: lo stesso filetto, PRIMA dell'etichetta, e che rientra.
   L'inversione E' l'affordance, e si impara vedendo i due sulla stessa pagina. */
.ilx-back.ilx-back.ilx-back{
  display:inline-flex; align-items:center; gap:.7em;
  flex-wrap:wrap; row-gap:.35rem;
  font-size:var(--ilx-fs-cta);
  font-family:var(--ilx-sans);
  letter-spacing:var(--ilx-cta-tracking);
  text-transform:var(--ilx-caps-transform);
  font-weight:400; text-decoration:none;         /* nessun colore: vedi .ilx-cta */
  padding-block:.5rem;
  transition:color var(--ilx-dur) var(--ilx-ease);
}
.ilx-back::before{
  content:""; display:block; flex:0 0 auto;
  inline-size:2.75rem; block-size:1px; background:currentColor; opacity:.55;
  transform-origin:left center;
  transition:transform var(--ilx-dur) var(--ilx-ease);
}
.ilx-back:hover::before,
.ilx-back:focus-visible::before{ transform:scaleX(.45); }
[dir="rtl"] .ilx-back::before, :dir(rtl) .ilx-back::before{ transform-origin:right center; }

/* Link in prosa, footer, pagine legali */
.ilx-link{
  /* NIENTE `color`. La versione del BRIEF metteva `color:inherit`, che su
     questo sito rompe i link del footer: hanno un colore chiaro proprio,
     pensato per il fondo navy, e `inherit` li riportava al colore del
     contenitore rendendoli quasi invisibili (1,16:1 misurato su 130 link).
     Questa classe cambia solo il trattamento della sottolineatura. */
  text-decoration-line:underline;
  text-decoration-color:currentColor;   /* si adatta al fondo, come il filetto */
  text-decoration-thickness:1px;
  text-underline-offset:.28em;
  text-decoration-skip-ink:auto;
  transition:text-decoration-color var(--ilx-dur) var(--ilx-ease),
             text-underline-offset var(--ilx-dur) var(--ilx-ease);
}
.ilx-link:hover,
.ilx-link:focus-visible{ text-decoration-thickness:2px; text-underline-offset:.2em; }

/* Chevron disegnato, solo dove una direzione se la merita: il link esterno.
   DEVE essere inline-flex, o inline-size sullo pseudo non si applica e quello
   che si vede e' un puntino da 1px. */
.ilx-chev{ display:inline-flex; align-items:center; gap:.45em; }
.ilx-chev::after{
  content:""; display:block; flex:0 0 auto;
  inline-size:.34em; block-size:.34em;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg); opacity:.6;
  transition:transform var(--ilx-dur) var(--ilx-ease), opacity var(--ilx-dur);
}
.ilx-chev:hover::after,
.ilx-chev:focus-visible::after{ transform:translateX(.18em) rotate(45deg); opacity:1; }
[dir="rtl"] .ilx-chev::after, :dir(rtl) .ilx-chev::after{ transform:scaleX(-1) rotate(45deg); }
[dir="rtl"] .ilx-chev:hover::after,
[dir="rtl"] .ilx-chev:focus-visible::after{ transform:scaleX(-1) translateX(.18em) rotate(45deg); }

/* Card: filetto che si disegna. Nessuna modifica al DOM.
   E' uno scaleX su larghezza fissa, non un'animazione di inline-size:
   inline-size fa il reflow del link per 340ms, scaleX gira sul compositore. */
.ilx-card{ position:relative; }
.ilx-card::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0;
  block-size:2px; background:var(--ilx-gold);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--ilx-dur) var(--ilx-ease), opacity var(--ilx-dur) var(--ilx-ease);
  pointer-events:none;
}
[dir="rtl"] .ilx-card::after, :dir(rtl) .ilx-card::after{ transform-origin:right center; }
.ilx-card:hover::after{ transform:scaleX(1); }
/* il focus non e' solo tinta: navy e spessore maggiore. SC 1.4.11 e 2.4.11. */
.ilx-card:focus-within::after{ transform:scaleX(1); block-size:3px; background:var(--ilx-navy); }

@media (hover: none){
  .ilx-card::after{ transform:scaleX(1); opacity:.55; }
  .ilx-card:focus-within::after{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){ :root{ --ilx-dur:1ms; } }

/* TASK F · Contrasto dell'oro. Opzione 2, gia' scelta.
   L'oro reale del sito e' #c9a46e e su cream #f5f0e8 da' 2,05:1: non arriva ne'
   al 4,5:1 del testo normale ne' al 3:1 degli elementi di interfaccia, e nemmeno
   --gold-dk ci arriva (2,80:1). Su navy invece da' 5,84:1 e resta ovunque.
   Misurato a runtime il 20/09/2026 su ogni elemento con colore oro, risalendo al
   fondo effettivo: 10 selettori stanno su navy e restano, 15 su fondo chiaro.
   Di questi 15, l'accento negli heading resta oro per decisione esplicita —
   e' decorazione, non informazione, il titolo si legge per intero ed e' testo
   grande. Gli altri 14 passano a navy, che su cream da' 11,99:1.
   Ripetuta tre volte perche' deve battere .tl-tag.gold e .pill.pill-gold, 0-2-0.

   La classe si applica SOLO ai selettori che stanno sempre su fondo chiaro,
   e quali siano e' stato misurato, non dedotto: per ogni selettore candidato si
   e' contato quante istanze hanno un fondo chiaro e quante uno scuro, su otto
   pagine. Il controllo ha intercettato un errore vero: `.tl-circle span` e
   `.price-val` sono oro su fondo NAVY per disegno, e forzarli a navy li avrebbe
   resi navy-su-navy, contrasto 1,00, cioe' invisibili. Restano oro.
   I selettori che compaiono su entrambi i fondi non si toccano per selettore. */
.ilx-ink.ilx-ink.ilx-ink{ color: var(--ilx-navy); }

/* Contro-classe, 0-4-0, per i pochi elementi il cui selettore compare su
   ENTRAMBI i fondi: `.sec-lbl` e `.card-cat` stanno su cream dentro
   l'articolo e su navy dentro `.cta-block`, `.sb-cta`, `.lang-content` e
   `.article-card.featured`. Li' l'oro e' la scelta giusta e va ripristinato. */
.ilx-gold.ilx-gold.ilx-gold.ilx-gold{ color: var(--ilx-gold); }

/* C.7 · Larghezza di riga. Si applica SOLO agli articoli del blog, che oggi
   misurano fino a 91 caratteri per riga: fuori dall'intervallo leggibile di
   60-75. Le pagine di lingua e servizio non si toccano, e' una decisione gia'
   presa. Attenzione: `ch` e' l'avanzamento della cifra zero e in Alegreya le
   cifre di default sono proporzionali, quindi il valore calcolato va misurato
   in DevTools invece che dedotto dal numero in `ch`. Misurato dopo
   l'applicazione: vedi il ledger. */
.ilx-measure{ max-width: 68ch; }

/* NOME ACCESSIBILE, quando il testo visibile non basta piu'.
   21/09/2026, col raggruppamento della navbar desktop: il prefisso si stampa
   una volta e il testo visibile di ciascun link diventa una lettera sola.
   Per chi vede va benissimo, perche' il prefisso e' li' accanto. Per chi
   naviga con uno screen reader la lista dei link diventerebbe quattro voci
   chiamate L, B, C, G, che non si possono distinguere ne' cercare.
   Lo span qui sotto rimette il prefisso DENTRO ciascun link: il nome
   accessibile torna "Bewilligung L", il testo visibile resta «L».

   La ricetta e' quella a clip-path, e la scelta conta: `display:none` e
   `visibility:hidden` tolgono l'elemento all'albero di accessibilita' oltre
   che alla vista, cioe' fanno esattamente il contrario di quello che serve.
   `text-indent` negativo e `left:-9999px` funzionano ma rompono lo scorrimento
   orizzontale in RTL. Qui: fuori dal flusso, un pixel, ritagliato a zero,
   `white-space:nowrap` perche' un testo lungo in una scatola da 1px andrebbe
   a capo e alcuni screen reader lo leggerebbero spezzato.

   NON si usa per nascondere decorazione: per quella c'e' aria-hidden, che sta
   sul prefisso stampato una volta. Le due cose sono complementari — lo span
   aggiunge cio' che manca al nome, aria-hidden toglie cio' che lo sporcherebbe. */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Due protezioni, C.8.
   `unicode-bidi: isolate` non e' un dettaglio: U+2013 ha classe bidi ON, non
   ES, quindi la regola W4 non lo salva fra due numeri e su /ar/ `CHF 60–120`
   si visualizza `120–60`. L'ironia e' che un trattino ASCII non avrebbe il
   problema: e' proprio l'en-dash corretto a innescarlo. */
.ilx-range{
  white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  unicode-bidi: isolate;
  direction: ltr;
}

/* TASK H · Ritaraggio delle ancore. Dopo D ed E, perche' l'altezza reale della
   navbar si stabilizza solo allora.
   Misurata a runtime DOPO la scala nuova, su dieci lingue e due larghezze: il
   massimo e' **70,79px** su /ar/ a 390px, dove la guardia di interlinea araba
   alza la barra. Era 61,09 prima della Fase 2. Massimo arrotondato piu' 8px
   di margine = 79px, e si usa **80px** perche' e' il valore che l'offset JS
   gia' esistente usa da sempre (`scrollY-80`, in 93 file): cosi' la fonte di
   verita' resta una sola senza toccare il JavaScript.

   `scroll-padding-top` sull'elemento di scorrimento, MAI insieme a
   `scroll-margin-top` sui bersagli: si sommerebbero. Per questo il
   `#prenota{scroll-margin-top:60px}` degli 81 fogli inline e' stato rimosso.

   Si scrive su `:root` e non su `html` perche' A.2 ammette solo `body` e
   `h1,h2,h3` come selettori di elemento nudi. `:root` e' lo stesso elemento. */
:root{ scroll-padding-top: 80px; }

h1, h2, h3, .ilx-caps{ text-wrap: balance; }
h1, h2, h3{ overflow-wrap: break-word; }   /* NON "anywhere": altererebbe il min-content */

/* ---------------------------------------------------------------------------
   4. GUARDIE DI LINGUA E DIREZIONE
   Le classi leggono variabili; le lingue si gestiscono RIDICHIARANDO le
   variabili, non duplicando le classi. I selettori [data-lang] servono perche'
   i 6 file del blog tengono quattro lingue nello stesso DOM.
   --------------------------------------------------------------------------- */

/* Scritture senza caso: il maiuscolo e' un'operazione nulla, quindi non
   guadagnano l'altezza che giustifica i 14px e il loro pavimento e' 16px. */
:lang(ar), :lang(hi), [data-lang="ar"], [data-lang="hi"]{
  --ilx-caps-transform: none;
  --ilx-caps-tracking: 0;
  --ilx-cta-tracking:  0;
  --ilx-head-tracking: 0;
  --ilx-fs-caps: 1rem;
  --ilx-fs-cta:  1rem;
  --ilx-lh-caps: 1.5;
}
:lang(ar), [data-lang="ar"]{ line-height: 1.9; }
:lang(hi), [data-lang="hi"]{ line-height: 1.85; }

/* La serif non esiste, in queste due lingue. Cormorant Garamond non ha un solo
   glifo arabo o devanagari: verificato sul cmap, e verificato a runtime prima
   del fix, dove i titoli di /ar/ rendevano in Geeza Pro (1638 glifi su 8 URL) e
   quelli di /hi/ in Devanagari MT (1278 su 8). Dichiarare Cormorant li' non
   significava «titoli in Cormorant»: significava lasciare che il titolo lo
   scegliesse il sistema operativo, diverso su ogni macchina.
   Il token serif punta quindi al sans self-hostato, che per questi due alfabeti
   E' IBM Plex Sans Arabic e IBM Plex Sans Devanagari, gia' sottoinsiemati e
   gia' scaricati per il corpo del testo. Si ridichiara la VARIABILE, non la
   proprieta': e' lo stesso meccanismo con cui questo foglio gestisce ogni altra
   eccezione di lingua, e funziona anche contro i selettori a 0-3-0. */
:lang(ar), :lang(hi), [data-lang="ar"], [data-lang="hi"]{
  --ilx-serif: var(--ilx-sans);
}

/* Cirillico: il caso esiste, ma i capitali sono piu' compatti, e Й e Ё portano
   segni sopra l'altezza delle maiuscole. */
:lang(ru), [data-lang="ru"]{
  --ilx-caps-tracking: .12em;
  --ilx-lh-caps: 1.28;
}

/* Tedesco: parole lunghe negli heading. Funziona solo con lang="de" presente. */
:lang(de) h1, :lang(de) h2, :lang(de) h3,
[data-lang="de"] h1, [data-lang="de"] h2, [data-lang="de"] h3{ hyphens: auto; }

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3{ overflow-wrap: normal; }

:lang(ar) .ilx-link, :lang(hi) .ilx-link{ text-underline-offset:.42em; }

/* UNICA rete con !important, e serve contro il letter-spacing del foglio
   ESISTENTE, che le custom property non possono raggiungere. Selettore
   DISCENDENTE, non sull'antenato: letter-spacing e' ereditato, e una
   dichiarazione normale sul figlio batte sempre una !important sull'antenato.
   Sull'arabo il tracking separa visibilmente i tratti di collegamento fra
   lettere che restano legate: lo shaper sceglie le forme contestuali giuste,
   quindi chi verifica «le legature sono intatte» le trova intatte su una
   pagina che sembra sbriciolata. Il difetto e' la spaziatura, non la legatura.
   Sul devanagari rompe la shirorekha. */
:lang(ar) *, :lang(hi) *,
[data-lang="ar"] *, [data-lang="hi"] *{ letter-spacing: 0 !important; }


/* Navbar desktop: le voci, il testo di PRENOTA e il codice della lingua stanno
   sulla linea di base del wordmark ImmiLex (24/09/2026). Con align-items:center
   ogni riquadro era centrato, e siccome il wordmark e' in Cormorant a 22px e le
   voci in maiuscolo a 11px, le voci stavano 4,4px sopra la sua base (5 sul
   blog, 3,9 in arabo). Allineare sulla base vale per ogni font e ogni lingua,
   senza numeri da ritarare.
   - I riquadri di PRENOTA e del selettore si spostano: conta il testo. Il globo
     del selettore resta centrato nel suo riquadro.
   - padding-bottom delle voci 4px piu' corto: scese sulla base, sporgevano sotto
     e alzavano la barra di 4px. Cosi' la barra cambia di 1-2px, non di 4.
   - Soglia desktop a 1024px, sito e blog (25/09/2026). Era 900 sulle pagine e
     800 sul blog, e sotto i 1016px la barra scorreva e nascondeva l'ultima voce
     (fino a 49px a 1024, 243 sul blog a 800). Il padding laterale delle voci
     scende da .8rem (.75 sul blog) a .5rem: 16px fra una voce e l'altra, il
     testo resta com'e'. Con questo la lingua piu' lunga, il portoghese, sta
     tutta da 1015px; la soglia e' in ogni pagina, nella media query che nasconde
     .nav-burger, e in matchMedia() della tendina.
   - Il blog si riconosce da #subnav-inner, che esiste solo nei suoi documenti:
     le sue voci hanno .62rem di padding verticale dove le pagine ne hanno .58. */
@media (min-width: 1024px){
  .nav-inner, .subnav-inner, .nav-right, .lang-switcher, .lang-btn{ align-items: baseline; }
  .lang-btn svg{ align-self: center; }
  .subnav .sn-link{ padding-left: .5rem; padding-right: .5rem; padding-bottom: calc(.58rem - 4px); }
  nav:has(#subnav-inner) .subnav .sn-link{ padding-bottom: calc(.62rem - 4px); }
}

/* Tendina delle lingue in RTL (25/09/2026). Le pagine la ancorano con right:0 al
   selettore; in arabo il selettore sta a sinistra, e la tendina si apriva verso
   sinistra fuori dallo schermo: di 37px a 390, di 56 a 1024. In RTL la si ancora
   al bordo sinistro del selettore, e si apre verso destra. Le lingue LTR non
   cambiano. */
[dir="rtl"] .lang-menu{ right: auto; left: 0; }