@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/font/inter.min.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/font/jetbrains-mono.min.woff2) format('woff2')}

/* ============================================================
   BASE — i nomi delle cose.
   Un file solo, primo su ogni pagina. Nessun altro foglio
   dichiara colori, misure o curve: qui si cambia una volta e
   cambia ovunque.

   NESSUN COLORE E' CAMBIATO rispetto a prima: sono gli stessi
   valori, con un nome al posto del numero.
   ============================================================ */

:root{

  /* ---------- le terne ----------
     Un colore scritto come tre numeri invece che come esadecimale.
     Serve perche' lo stesso colore compariva 43 volte a opacita'
     diverse - rgba(10,214,182,.5), .7, .22 - e nessuna di quelle
     seguiva il token: cambiare il turchese del marchio voleva dire
     modificare 43 righe a mano, e sbagliarne una.
     Da qui in avanti si scrive  rgba(var(--teal-rgb), .5)  e cambia
     tutto insieme. */
  --teal-rgb:10,214,182;
  --teal-su-rgb:63,227,198;
  --violet-rgb:107,22,207;
  --violet-su-rgb:155,92,240;
  --fondo-rgb:8,8,10;
  --sup-2-rgb:17,17,20;
  --sup-3-rgb:23,23,27;
  --testo-rgb:244,244,242;
  --avviso-rgb:229,160,60;
  --bianco-rgb:255,255,255;
  --nero-rgb:0,0,0;

  /* ---------- superfici ----------
     Quattro livelli invece di due improvvisati: fondo, la lastra
     appoggiata, quella sollevata, quella in primo piano. */
  --fondo:#08080A;
  --sup-1:#0E0E12;
  --sup-2:#111114;
  --sup-3:#17171B;

  /* La luce della stanza: erano due esadecimali scritti a mano
     dentro il gradiente del fondo. Sono decisioni, non numeri. */
  --luce-alta:#1A1426;
  --luce-bassa:#071A19;

  /* ---------- testo ---------- */
  --testo:#F4F4F2;
  --testo-soft:#96969D;
  /* Misurato il 25 settembre 2026: a #61616B questo grigio stava a 3,27
     di contrasto sul fondo del sito, e 2,96 dentro le schede - sotto il
     4,5 che serve a un testo piccolo. Lo usano le date del blog, i
     crediti del portfolio e le didascalie: informazione vera, non
     decorazione, e a 11 pixel era la prima cosa a sparire.
     #8B8B96 e' il minimo che passa sia sul fondo (5,94) sia sulle
     schede (5,38). Piu' scuro di cosi' non si torna. */
  --testo-tenue:#8B8B96;

  /* ---------- linee ----------
     La seconda era scritta a mano in ogni hover. */
  --linea:#232329;
  --linea-viva:#33333C;

  /* ---------- accenti, con gli stati ----------
     Turchese = interazione. Viola = struttura. Non invertirli. */
  --teal:#0AD6B6;
  --teal-su:#3FE3C6;          /* hover: sale di luce */
  --teal-giu:#08B89C;         /* premuto: rientra */
  --teal-spento:rgba(var(--teal-rgb),.38);

  --violet:#6B16CF;
  --violet-su:#9B5CF0;
  --violet-giu:#5A11B0;
  --violet-spento:rgba(var(--violet-rgb),.38);

  /* compatibilita' con i nomi vecchi, finche' i fogli non sono
     tutti migrati: stesso valore, nessun cambiamento a video */
  --violet-lo:var(--violet-su);
  --ink:var(--fondo);
  --sur:var(--sup-2);
  --sur2:var(--sup-3);
  --txt:var(--testo);
  --soft:var(--testo-soft);
  --rule:var(--linea);

  /* ---------- aloni ----------
     I bagliori al neon erano ventisette rgba() scritti a mano. */
  --alone-teal:rgba(var(--teal-rgb),.55);
  --alone-teal-largo:rgba(var(--teal-rgb),.22);
  --alone-violet:rgba(var(--violet-su-rgb),.55);
  --alone-violet-largo:rgba(var(--violet-su-rgb),.22);
  --velo-chiaro:rgba(var(--bianco-rgb),.06);
  --velo-vetro:rgba(var(--bianco-rgb),.08);

  /* ---------- avvisi ----------
     Vive solo nella pagina di prova, ma un colore senza nome
     e' un colore che nessuno sa dove trovare. */
  --avviso:#E5A03C;
  /* L'oro della spunta di verifica. Esisteva gia' dentro il
     gradiente di Instagram, scritto a mano. */
  --oro:#F9CE34;
  --oro-rgb:249,206,52;

  /* ---------- caratteri ---------- */
  --m:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* ---------- scala tipografica ----------
     Sei gradini. Prima erano almeno undici misure decise a occhio. */
  --t-mini:10.5px;                       /* etichette minuscole */
  --t-xs:clamp(11.5px,1.1vw,12.5px);     /* dati, tag */
  --t-s:clamp(13.5px,1.2vw,15px);        /* testo secondario */
  --t-m:clamp(16.5px,1.15vw,20px);       /* corpo */
  --t-l:clamp(19px,2.4vw,32px);          /* titoli di blocco */
  --t-xl:clamp(23px,5.4vw,68px);         /* apertura */

  /* ---------- spaziatura ----------
     Base quattro. Prima: 9, 11, 12, 14, 16 scelti a occhio. */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:72px;  --s9:112px;

  /* ---------- raggi ---------- */
  --r1:8px; --r2:11px; --r3:14px; --r4:16px; --r-tondo:999px;

  /* ---------- ombre ----------
     Tre livelli invece della stessa tripletta ricopiata ovunque. */
  --om-1:0 1px 0 var(--velo-chiaro) inset,
         0 12px 24px -18px rgba(var(--nero-rgb),.85);
  --om-2:0 1px 0 var(--velo-chiaro) inset,
         0 20px 40px -24px rgba(var(--nero-rgb),.92),
         0 3px 8px rgba(var(--nero-rgb),.4);
  --om-3:0 1px 0 var(--velo-vetro) inset,
         0 34px 64px -34px rgba(var(--nero-rgb),.95),
         0 6px 16px rgba(var(--nero-rgb),.5);

  /* ---------- larghezze ---------- */
  --max:1100px; --pad:24px;

  /* ============================================================
     MOVIMENTO
     Prima c'era UNA curva sola per cinquanta transizioni su
     cinquantadue, e diciannove durate scelte a caso. Un bottone
     premuto e una carta che arriva decelaravano identici: il
     cervello lo legge come una cosa sola che si ripete.
     ============================================================ */

  /* Gli arrivi: lenti, che si posano. */
  --curva-entra:cubic-bezier(.16,1,.3,1);

  /* Le reazioni al tocco: partono subito, si fermano nette. */
  --curva-secca:cubic-bezier(.3,0,.2,1);

  /* La molla. RICADUTA per chi non conosce linear(): un rimbalzo
     solo, ottenuto con una bezier che supera l'uno. */
  --curva-molla:cubic-bezier(.34,1.46,.64,1);

  /* Quattro durate, non diciannove. */
  --d1:.16s;   /* reazione: premuto, acceso */
  --d2:.3s;    /* hover, cambio di stato */
  --d3:.55s;   /* comparsa di un elemento */
  --d4:.9s;    /* scena: qualcosa che entra in campo */

  /* nome vecchio, stesso valore */
  --curva:var(--curva-entra);
}

/* La molla vera, dove il browser sa leggerla: una curva campionata
   da un sistema massa-molla, con il rimbalzo che si smorza. Gira
   sul compositore, quindi e' piu' fluida di qualsiasi molla
   calcolata in JavaScript. */
@supports (transition-timing-function:linear(0,1)){
  :root{
    --curva-molla:linear(
      0, .0088, .0344 2.3%, .1405 5.1%, .3183 8.5%, .5405 12.4%,
      .7719 16.5%, .9769 20.6%, 1.0526, 1.1043, 1.1316 25.3%,
      1.1313, 1.1119 29.1%, 1.0728 32.3%, 1.0114 36.4%,
      .9924 38.4%, .9836 40.6%, .9846 43.3%, .9964 47.7%,
      1.0035 51.9%, 1.0055 56.7%, .9991 68.2%, 1
    );
  }
}

@media(min-width:1500px){:root{--max:1320px; --pad:40px}}
@media(min-width:1900px){:root{--max:1520px}}

/* ---------- una scena generativa accanto a una frase --------------
   Non un riquadro con dentro una fotografia: un ALONE. Il fondo del
   sito e' quasi nero e la fusione avviene per SCHIARIMENTO, quindi le
   parti scure dell'immagine spariscono da sole e restano solo le
   luci. Il taglio a sfumare sul lato sinistro la fa nascere dal fondo
   invece che posarcisi sopra.

   La usano in due: la riga "Specializzata nel..." della home e la
   chiusa del portfolio. Prima era scritta due volte; adesso una.
   Il colore delle due immagini non e' un caso: turchese e viola sono
   gli stessi due del sito, cosi' l'immagine non sembra appoggiata.

   Compare SOLO con data-c, che il costruttore mette quando il file
   esiste davvero: senza, il posto in griglia resterebbe occupato da
   un buco trasparente e la frase resterebbe stretta a meta' pagina. */
.alone{
  display:none; position:relative;
  aspect-ratio:4/3; min-height:210px;
  background-size:cover; background-position:50% 50%;
  mix-blend-mode:screen;
  /* La trasparenza sta NELLA maschera, non in opacity. Motivo: le
     sezioni entrano in vista con un'animazione che porta opacity a 1
     e vince su qualunque valore scritto qui - l'immagine restava a
     piena forza e si vedeva lo spigolo del riquadro. L'alfa della
     maschera invece si moltiplica, e nessuno la tocca. */
  /* Il taglio: una sfumatura da sinistra, e un'ellisse che spegne
     anche il bordo alto, quello basso e quello destro. Senza
     l'ellisse abbastanza stretta si vedeva lo spigolo del riquadro:
     l'immagine sembrava incollata sulla pagina invece che nascerne. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 22%, #000 58%),
    radial-gradient(76% 80% at 60% 50%, rgba(0,0,0,.66) 30%, transparent 80%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 22%, #000 58%),
    radial-gradient(76% 80% at 60% 50%, rgba(0,0,0,.66) 30%, transparent 80%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.alone[data-c]{display:block}

@media(max-width:859px){
  /* Sul telefono non c'e' spazio accanto: passa DIETRO la frase,
     molto piu' tenue, e non ruba altezza. */
  /* IL RITAGLIO NON E' UN DETTAGLIO: E' QUELLO CHE TIENE LA PAGINA
     LARGA QUANTO LO SCHERMO.
     L'alone sborda apposta - il -18% a destra serve a non far vedere
     dove finisce - ma senza un contenitore che lo tagli quel debordo
     diventa larghezza vera della pagina: trentotto punti in piu' dello
     schermo, che sul telefono si sentono perche' la pagina si
     trascina di lato. Si taglia qui, e l'effetto resta identico. */
  .con-alone{position:relative; overflow:clip}
  .alone[data-c]{
    position:absolute; inset:-14% -18% -14% 20%;
    aspect-ratio:auto; min-height:0; z-index:0;
    -webkit-mask-image:radial-gradient(120% 100% at 70% 50%, rgba(0,0,0,.32) 30%, transparent 76%);
    mask-image:radial-gradient(120% 100% at 70% 50%, rgba(0,0,0,.32) 30%, transparent 76%);
  }
  .con-alone > :not(.alone){position:relative; z-index:1}
}

/* ------------------------------------------------------------------
   I LINK PRENDONO IL COLORE DA DOVE STANNO.
   Senza questa riga un <a> a cui nessuno ha detto niente esce col blu
   di sistema (#0000EE), che sul nero sta a 2,13 di contrasto - cioe'
   illeggibile. Oggi non si vedeva perche' nel blog il testo visibile
   sta dentro <b> e <i> che hanno un colore loro: bastava aggiungere
   una parola fuori da quei tag per ritrovarsi un link blu in pagina.
   Il colore dei link che devono spiccare lo decide ogni foglio, come
   ha sempre fatto; questa riga toglie solo il blu di riserva.
   ------------------------------------------------------------------ */
a{color:inherit}
/* Stessa storia per i pulsanti: il loro colore di riserva e' il nero,
   che su questo sito non si vede. Anche qui oggi non si notava perche'
   dentro i pulsanti il testo sta in <b> e <i> colorati; il primo che
   scrive una parola fuori da quei tag si trova un buco nero. */
button{color:inherit}