/* ==========================================================================
   bilatogiulio.it — foglio di stile unico
   --------------------------------------------------------------------------
   Direzione visiva: LA TARGA DI IDENTIFICAZIONE.

   La pagina e' costruita come la targa dati fissata a un quadro elettrico:
   campi dichiarati, valori incisi, nessun aggettivo. Una targa non persuade,
   certifica — ed e' quello che deve fare questa pagina davanti a chi sta
   confrontando il profilo con qualcos'altro che ha gia' in mano.

   Disciplina che tiene insieme tutto: il metallo non si vede quasi mai.
   Niente texture metalliche, niente rivetti in rilievo, niente ombre dure.
   Restano tre cose sole: la griglia dei campi, il filetto a capello,
   l'incisione.

   Parentela con anticocircoloviamontegrappa.it: e' la stessa mano, non lo
   stesso marchio. La' fondo scuro e gradiente indaco->viola; qui fondo
   chiaro e un indaco anodizzato sempre pieno, mai sfumato. I ruoli
   tipografici sono invertiti: la' il graziato titola, qui incide il bastone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root{
  /* superfici — i rapporti di contrasto in fondo a ogni riga sono misurati,
     non stimati, secondo la formula WCAG 2.1 */
  --field:#dcd8ce;        /* fondo pagina: carta-alluminio caldo            */
  --plate:#eeece6;        /* superficie della placca, piu' chiara del fondo */
  --plate-2:#e5e2da;      /* campo incassato: input, righe alternate        */

  /* inchiostro — tutti tarati sul fondo pagina, che e' il piu' scuro dei due */
  --ink:#171520;          /* 12.7:1 su --field — titoli e testo corrente    */
  --ink-2:#55505f;        /*  5.5:1 su --field — testo di servizio          */
  --ink-3:#605a6a;        /*  4.7:1 su --field — etichette di campo         */

  /* accento unico: indaco anodizzato. Parente dell'indaco ACVM (#4721d5),
     abbassato di luminanza perche' qui deve reggere su fondo chiaro.

     L'accento fa DUE lavori diversi e percio' sono due token: riempie
     superfici (--anodized) e disegna testo e filetti (--accent-ink). Sul
     fondo chiaro coincidono; sul fondo scuro devono andare in direzioni
     opposte — la superficie resta profonda, l'inchiostro si schiarisce. */
  --anodized:#2e18a6;     /*  8.2:1 su --field                              */
  --anodized-deep:#24127f;/* pressione e stati attivi                       */
  --accent-ink:#2e18a6;   /* testo e filetti accentati                      */
  --accent-ink-strong:#24127f;
  --on-anod:#eeece6;      /*  9.9:1 sull'anodizzato                         */
  --on-anod-2:#b9aeea;    /*  5.7:1 sull'anodizzato — etichette             */

  /* filetti — l'unico modo in cui questa pagina disegna una linea */
  --hairline:rgba(23,21,32,0.18);
  --hairline-strong:rgba(23,21,32,0.34);
  --hairline-light:rgba(238,236,230,0.28);

  /* l'incisione: un pixel di luce sotto la lettera scavata nel metallo */
  --engraving:0 1px 0 rgba(255,255,255,0.62);
  --plate-shadow:0 18px 44px -34px rgba(23,21,32,0.55);
  --drawer-shadow:0 20px 40px -30px rgba(23,21,32,0.7);
  --scheme:light;

  /* tipografia */
  --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* misure */
  --maxw:1120px;
  --gutter:24px;
  --header-h:60px;
  --field-label:186px;    /* larghezza della colonna ETICHETTA nei blocchi dati */

  /* movimento — mai ease-in su interfaccia: ritarda l'inizio del movimento
     e fa sembrare lenta anche una transizione breve */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
  --t-press:120ms;
  --t-quick:160ms;
  --t-ui:220ms;
  --t-drawer:300ms;
}

/* --------------------------------------------------------------------------
   1b. La targa al buio
   --------------------------------------------------------------------------
   Una targa di alluminio non cambia colore, ma la stessa targa vista di notte
   e' un altro oggetto: metallo anodizzato scuro con l'incisione che prende la
   luce invece di perderla.

   Il buio qui resta CALDO (#1b1915), non violaceo. Il nero di ACVM e' #0d0a1a,
   freddo e tendente al viola: se prendessimo quella strada i due siti
   tornerebbero a somigliarsi proprio dove li abbiamo distinti.

   Tre blocchi, in quest'ordine, perche' la scelta manuale deve poter vincere
   in tutte e due le direzioni:
     1. la preferenza di sistema, ma solo se l'utente non ha scelto "chiaro";
     2. la scelta esplicita di scuro;
     3. la scelta esplicita di chiaro, che riporta ai valori di partenza.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --field:#1b1915;
    --plate:#26231d;
    --plate-2:#201e18;

    --ink:#ece8dd;        /* 13.9:1 su --field */
    --ink-2:#b2ab9c;      /*  7.7:1 su --field */
    --ink-3:#97907f;      /*  5.6:1 su --field */

    --anodized:#251291;   /* piu' profondo che sul chiaro: su fondo scuro lo
                             stesso indaco sembra piu' acceso di quanto sia */
    --anodized-deep:#3a22c4;
    --accent-ink:#a99cf5; /*  8.0:1 su --field — l'inchiostro si schiarisce */
    --accent-ink-strong:#c7bdff;

    --hairline:rgba(236,232,221,0.16);
    --hairline-strong:rgba(236,232,221,0.30);

    /* Al buio l'incisione non si finge: un rilievo chiaro sotto una lettera
       chiara sarebbe materiale imitato, il difetto piu' riconoscibile di una
       pagina fatta a macchina. Qui si spegne. */
    --engraving:none;
    --plate-shadow:0 18px 44px -30px rgba(0,0,0,0.75);
    --drawer-shadow:0 20px 40px -26px rgba(0,0,0,0.85);
    --scheme:dark;
  }
}

:root[data-theme="dark"]{
  --field:#1b1915;
  --plate:#26231d;
  --plate-2:#201e18;

  --ink:#ece8dd;
  --ink-2:#b2ab9c;
  --ink-3:#97907f;

  --anodized:#251291;
  --anodized-deep:#3a22c4;
  --accent-ink:#a99cf5;
  --accent-ink-strong:#c7bdff;

  --hairline:rgba(236,232,221,0.16);
  --hairline-strong:rgba(236,232,221,0.30);

  --engraving:none;
  --plate-shadow:0 18px 44px -30px rgba(0,0,0,0.75);
  --drawer-shadow:0 20px 40px -26px rgba(0,0,0,0.85);
  --scheme:dark;
}

/* Le superfici che non disegniamo noi — barra di scorrimento, cursore di
   inserimento, controlli nativi — devono sapere com'e' la pagina. */
:root{color-scheme:var(--scheme);}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*{box-sizing:border-box; margin:0; padding:0;}

html{
  scroll-behavior:smooth;
  /* la testata e' fissa: gli ancoraggi non devono finirci sotto */
  scroll-padding-top:calc(var(--header-h) + 20px);
  -webkit-text-size-adjust:100%;
}

body{
  background:var(--field);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* nessun overflow orizzontale, a nessuna larghezza */
  overflow-x:hidden;
}

img{max-width:100%; display:block; height:auto;}
a{color:inherit;}
button,input,textarea{font:inherit; color:inherit;}

/* Le superfici del browser portano il progetto anche dove non disegniamo noi. */
::selection{background:var(--anodized); color:var(--plate);}
input,textarea{caret-color:var(--accent-ink);}
*{scrollbar-color:var(--ink-3) var(--field);}

/* --------------------------------------------------------------------------
   3. Fuoco — un anello solo, sempre visibile, mai rimosso
   -------------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
  border-radius:2px;
}
.on-anodized :focus-visible{outline-color:var(--on-anod);}

/* Il salto al contenuto si nasconde verso l'ALTO, non a sinistra.
   Con left:-9999px sarebbe il body, che ha overflow-x:hidden, a doverlo
   ritagliare: una visibilita' affidata a una proprieta' che sta su un altro
   elemento e che un giorno qualcuno toglie. Verso l'alto si nasconde da solo. */
.skip-link{
  position:absolute; left:0; top:-100px; z-index:100;
  background:var(--anodized); color:var(--on-anod);
  padding:12px 18px; text-decoration:none;
  font-family:var(--sans); font-size:14px; font-weight:600;
  transition:top var(--t-quick) var(--ease-out);
}
.skip-link:focus{top:0;}

.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   4. Impalcatura
   -------------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:clamp(64px, 9vw, 116px);}
.section + .section{padding-top:0;}

/* Dopo le azioni del primo schermo lo stacco e' piu' corto: con la misura
   piena restava un vuoto che sembrava un errore di caricamento, non una
   pausa voluta. */
.masthead + .section{padding-top:clamp(38px, 5vw, 66px);}

/* --------------------------------------------------------------------------
   5. Tipografia
   --------------------------------------------------------------------------
   Incide il bastone, legge il graziato. Archivo e' un carattere a larghezza
   variabile: l'asse wdth serve a far respirare le maiuscole come sulle targhe
   vere, dove le lettere sono allargate perche' l'incisione non le chiuda.
   -------------------------------------------------------------------------- */

/* Incisione: l'unica ombra della pagina, un pixel di luce sotto la lettera,
   come il bordo vivo lasciato dalla fresa. Non e' un effetto "letterpress":
   non c'e' ombra scura, solo il colpo di luce. */
.engraved{text-shadow:var(--engraving);}

.plate-name{
  font-family:var(--sans);
  font-weight:700;
  font-stretch:118%;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.94;
  font-size:clamp(2.3rem, 7.4vw, 4.9rem);
  color:var(--ink);
  text-wrap:balance;
}

.section-title{
  font-family:var(--sans);
  font-weight:600;
  font-stretch:112%;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:clamp(1.05rem, 1.9vw, 1.25rem);
  line-height:1.2;
  color:var(--ink);
}

.lede{
  font-size:clamp(1.08rem, 1.7vw, 1.3rem);
  line-height:1.5;
  color:var(--ink-2);
  max-width:62ch;
  text-wrap:pretty;
}

.copy{max-width:68ch;}
.copy p + p{margin-top:1em;}
.copy a{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:0.18em;
  text-decoration-thickness:1px;
  transition:color var(--t-quick) var(--ease-out);
}
.copy a:hover{color:var(--accent-ink-strong); text-decoration-thickness:2px;}

/* Il numero come oggetto fisico: cifre a passo fisso, incise, a posizione
   costante lungo la colonna — non annegate dentro la frase. */
.stamp{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-stretch:108%;
  letter-spacing:0.02em;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   6. La placca
   --------------------------------------------------------------------------
   L'oggetto portante di tutta la pagina. Un bordo, una superficie appena piu'
   chiara del fondo, quattro viti agli angoli. L'elevazione e' dichiarata una
   volta sola: bordo + un'ombra con scostamento e sfocatura vera (mai un alone
   centrato, che non e' profondita' ma decorazione).
   -------------------------------------------------------------------------- */
.plate{
  position:relative;
  background:var(--plate);
  border:1px solid var(--hairline-strong);
  box-shadow:var(--plate-shadow);
  padding:clamp(26px, 4.4vw, 54px);
}

/* Le viti agli angoli. Sono geometria, non illustrazione: due cerchi
   concentrici e un taglio. Decorative, quindi invisibili agli screen reader. */
.screw{
  position:absolute;
  width:13px; height:13px;
  color:var(--hairline-strong);
  opacity:0;
  animation:screw-in 460ms var(--ease-out) forwards;
}
.screw--tl{top:12px; left:12px;}
.screw--tr{top:12px; right:12px;  animation-delay:70ms;}
.screw--bl{bottom:12px; left:12px; animation-delay:140ms;}
.screw--br{bottom:12px; right:12px; animation-delay:210ms;}

@keyframes screw-in{
  from{opacity:0; transform:rotate(-38deg);}
  to  {opacity:1; transform:rotate(0);}
}

.plate--anodized{
  background:var(--anodized);
  border-color:rgba(238,236,230,0.22);
  color:var(--on-anod);
}
.plate--anodized .screw{color:var(--hairline-light);}

/* --------------------------------------------------------------------------
   7. Il blocco dati — ETICHETTA / VALORE
   --------------------------------------------------------------------------
   La riga di campo e' l'unita' di misura di questo sito. Torna nella targa,
   negli ambiti, nel percorso, nelle certificazioni e nei contatti: e' cosi'
   che una pagina resta riconoscibile anche togliendo tutto il contenuto.
   -------------------------------------------------------------------------- */
.fields{
  margin:0;
  border-top:1px solid var(--hairline);
}
.plate--anodized .fields{border-top-color:var(--hairline-light);}

.field{
  display:grid;
  grid-template-columns:var(--field-label) 1fr;
  gap:8px 28px;
  align-items:baseline;
  padding-block:16px;
  border-bottom:1px solid var(--hairline);
}
.plate--anodized .field{border-bottom-color:var(--hairline-light);}

.field-label{
  font-family:var(--sans);
  font-size:0.7rem;
  font-weight:600;
  font-stretch:106%;
  text-transform:uppercase;
  letter-spacing:0.13em;
  color:var(--ink-3);
  /* il filetto di richiamo: l'etichetta punta al proprio valore, come la
     didascalia di una tavola punta all'oggetto che nomina */
  position:relative;
}
.plate--anodized .field-label{color:var(--on-anod-2);}

.field-value{
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  min-width:0;
}
.plate--anodized .field-value{color:var(--on-anod);}

/* Un valore di campo che porta altrove. Si dichiara con il colore
   dell'accento e una sottolineatura sottile: dentro un blocco dati fatto
   di testo inciso, il collegamento deve distinguersi senza gridare. */
.field-link{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:0.18em;
  text-decoration-thickness:1px;
  transition:text-decoration-thickness var(--t-quick) var(--ease-out);
}
.field-link:hover{text-decoration-thickness:2px;}

.field-value .note{
  display:block;
  margin-top:5px;
  font-size:0.92rem;
  color:var(--ink-2);
}
.plate--anodized .field-value .note{color:var(--on-anod-2);}

/* --------------------------------------------------------------------------
   8. Testata
   --------------------------------------------------------------------------
   Fissa, con fondo pieno. Nessun backdrop-filter: quel filtro crea un blocco
   contenitore per i discendenti position:fixed, e il pannello del menu mobile
   che ci sta dentro collasserebbe ad altezza zero. Costato ore su ACVM.
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header-h);
  background:var(--field);
  border-bottom:1px solid var(--hairline);
}
.site-header .wrap{
  height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

.brand{
  font-family:var(--sans);
  font-weight:700;
  font-stretch:112%;
  text-transform:uppercase;
  letter-spacing:0.11em;
  font-size:0.82rem;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
}

.site-nav ul{display:flex; gap:26px; list-style:none;}
.site-nav a{
  font-family:var(--sans);
  font-size:0.78rem;
  font-weight:500;
  letter-spacing:0.09em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-2);
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:color var(--t-quick) var(--ease-out),
             border-color var(--t-quick) var(--ease-out);
}
.site-nav a:hover{color:var(--ink); border-bottom-color:var(--accent-ink);}

/* Il selettore chiaro/scuro. Non un sole e una luna: un disco mezzo inciso,
   la stessa geometria delle viti, con lo stesso spessore di tratto. Ruota di
   mezzo giro quando cambia stato, cosi' il movimento dice cosa e' successo. */
.theme-toggle{
  width:42px; height:42px;
  flex:none;
  background:transparent;
  border:1px solid var(--hairline-strong);
  color:var(--ink);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--t-quick) var(--ease-out),
             border-color var(--t-quick) var(--ease-out);
}
.theme-toggle:hover{background:var(--plate); border-color:var(--ink-3);}
.theme-toggle svg{
  width:19px; height:19px;
  transition:transform var(--t-ui) var(--ease-out);
}
:root[data-theme="dark"] .theme-toggle svg{transform:rotate(180deg);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle svg{transform:rotate(180deg);}
}
.theme-toggle .disco{fill:none; stroke:currentColor; stroke-width:1.3;}
.theme-toggle .meta{fill:currentColor; stroke:none;}

.header-tools{display:flex; align-items:center; gap:10px;}
.header-right{display:flex; align-items:center; gap:clamp(16px, 2.4vw, 30px);}

.nav-toggle{
  display:none;
  width:42px; height:42px;
  background:transparent; border:1px solid var(--hairline-strong);
  color:var(--ink); cursor:pointer;
  align-items:center; justify-content:center;
  transition:background var(--t-quick) var(--ease-out);
}
.nav-toggle:hover{background:var(--plate);}
.nav-toggle svg{width:20px; height:20px; stroke:currentColor; stroke-width:1.6; fill:none;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* --------------------------------------------------------------------------
   9. Primo schermo — la targa
   -------------------------------------------------------------------------- */
.masthead{
  padding-top:calc(var(--header-h) + clamp(26px, 3.4vw, 46px));
  padding-bottom:clamp(30px, 3.6vw, 44px);
}

.masthead-plate{padding-block:clamp(28px, 3.6vw, 44px);}

/* Il nome prende tutta la larghezza della placca, come l'intestazione di una
   targa vera. Qualifica e riferimento stanno sulla riga sotto, ai due
   estremi: e' li' che una targa mette il dato di esercizio. */
.masthead-head{padding-bottom:clamp(22px, 2.8vw, 32px);}

.masthead-sub{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(18px, 3vw, 48px);
  margin-top:16px;
}

.masthead-role{
  font-size:clamp(1.02rem, 1.4vw, 1.16rem);
  line-height:1.45;
  color:var(--ink-2);
  max-width:48ch;
}

/* Il riferimento della targa: dove su una targa vera stanno matricola e anno.
   Qui porta il dato che nessun altro puo' avere: da quando e' in attivita'. */
.masthead-stamps{
  display:flex;
  gap:clamp(24px, 3.4vw, 46px);
  flex:none;
}

.masthead-ref{
  font-family:var(--sans);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-align:right;
  line-height:1.8;
  white-space:nowrap;
  flex:none;
}
.masthead-ref b{display:block; font-size:1.55rem; font-weight:700; letter-spacing:0.02em; color:var(--ink);}

/* Le azioni stanno FUORI dalla placca, sotto il bordo inferiore: sono l'unica
   cosa non incisa della pagina, e per questo l'unica che sembra premibile. */
.masthead-actions{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(22px, 3vw, 30px);
}

/* --------------------------------------------------------------------------
   10. Bottoni
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans);
  font-size:0.82rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:15px 26px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--t-quick) var(--ease-out),
             color var(--t-quick) var(--ease-out),
             border-color var(--t-quick) var(--ease-out),
             transform var(--t-press) var(--ease-out);
}
.btn:active{transform:translateY(1px);}

.btn-primary{background:var(--anodized); color:var(--on-anod);}
.btn-primary:hover{background:var(--anodized-deep);}

.btn-ghost{border-color:var(--hairline-strong); color:var(--ink);}
.btn-ghost:hover{background:var(--plate); border-color:var(--ink-3);}

.on-anodized .btn-primary{background:var(--on-anod); color:var(--anodized);}
.on-anodized .btn-primary:hover{background:#fff;}

.btn[disabled]{opacity:0.55; cursor:not-allowed; transform:none;}

/* --------------------------------------------------------------------------
   11. Intestazione di sezione
   --------------------------------------------------------------------------
   Il titolo e il suo filetto stanno sulla stessa riga: il filetto corre fino
   al bordo e chiude la riga, come la linea di un cartiglio.
   -------------------------------------------------------------------------- */
.section-head{
  display:flex; align-items:baseline; gap:20px;
  margin-bottom:clamp(26px, 3.4vw, 40px);
}
.section-head::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--hairline-strong);
}
.on-anodized .section-head::after{background:var(--hairline-light);}
.on-anodized .section-title{color:var(--on-anod);}

/* --------------------------------------------------------------------------
   12. Gli ambiti — il campo anodizzato
   --------------------------------------------------------------------------
   L'unica regione della pagina in cui il colore prende tutto. E' qui perche'
   l'ampiezza dei mestieri e' il messaggio: se una cosa sola deve restare
   impressa dopo aver chiuso la pagina, e' questo elenco.

   Tutte le voci alla stessa scala tipografica, nessuna sopra le altre.
   -------------------------------------------------------------------------- */
.trades{padding-block:clamp(48px, 6.5vw, 84px);}

/* Il testo di servizio su fondo colorato non diventa grigio: si tinge
   dell'accento su cui appoggia, altrimenti sembra spento. */
.on-anodized .lede{color:var(--on-anod-2); max-width:58ch;}

.trade-list{
  margin-top:clamp(26px, 3.4vw, 38px);
  border-top:1px solid var(--hairline-light);
}

.trade{
  display:grid;
  grid-template-columns:minmax(0, 260px) minmax(0, 1fr);
  gap:10px 36px;
  padding-block:22px;
  border-bottom:1px solid var(--hairline-light);
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.trades .fields{border-top-color:var(--hairline-light);}

.trade-name{
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  font-stretch:108%;
  text-transform:uppercase;
  letter-spacing:0.07em;
  line-height:1.35;
  color:var(--on-anod);
}

/* Ogni mestiere e' un indirizzo raggiungibile: il titolo stesso porta alla
   propria ancora, cosi' si manda a qualcuno la scheda che gli interessa
   invece dell'intera pagina. Nessun segno finche' non serve: il
   collegamento si dichiara al passaggio del puntatore e al fuoco. */
.trade-link{
  color:inherit;
  text-decoration:none;
  text-underline-offset:0.22em;
  text-decoration-thickness:1px;
  transition:text-decoration-color var(--t-quick) var(--ease-out);
}
.trade-link:hover{text-decoration:underline; text-decoration-color:var(--on-anod-2);}

.trade-body{color:var(--on-anod); min-width:0;}
/* La misura di lettura si ferma qui: senza tetto, su schermo largo la riga
   arriva a ottanta caratteri e l'occhio perde il capo della riga successiva. */
.trade-body p{font-size:1rem; line-height:1.55; max-width:68ch;}

.trade-tools{
  margin-top:10px;
  font-family:var(--sans);
  font-size:0.78rem;
  line-height:1.65;
  letter-spacing:0.02em;
  color:var(--on-anod-2);
}

/* --------------------------------------------------------------------------
   13. Il percorso
   --------------------------------------------------------------------------
   Non una timeline a pallini: una pila di righe di campo, dove gli anni
   stanno a posizione fissa nella colonna sinistra e si leggono in colonna.
   -------------------------------------------------------------------------- */
.roles{border-top:1px solid var(--hairline-strong);}

.role{
  display:grid;
  grid-template-columns:var(--field-label) minmax(0, 1fr);
  gap:10px 28px;
  padding-block:26px;
  border-bottom:1px solid var(--hairline);
}

.role-years{
  font-family:var(--sans);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-stretch:106%;
  font-size:1.05rem;
  letter-spacing:0.02em;
  color:var(--ink);
  white-space:nowrap;
}
.role-years .to{color:var(--ink-3); padding-inline:2px;}
.role-years .now{color:var(--accent-ink);}

.role-title{
  font-family:var(--sans);
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:0.01em;
  line-height:1.35;
  color:var(--ink);
}
.role-where{
  font-size:0.94rem;
  color:var(--ink-2);
  margin-top:3px;
}
.role-body{margin-top:12px; font-size:0.98rem; line-height:1.55; color:var(--ink-2); max-width:62ch;}

/* Il blocco dei tirocini: stessa griglia, corpo minore, per dire che sono
   un'altra cosa senza inventare un componente nuovo. */
.internships{margin-top:30px; border-top:1px solid var(--hairline);}
/* Un filetto solo fra il percorso e i tirocini: il blocco interno porta gia'
   il suo bordo superiore, e sommato a quello del contenitore e all'ultimo
   bordo inferiore del percorso disegnava tre righe a venticinque pixel. */
.internships .roles{border-top:0;}
.internships .role{padding-block:16px;}
.internships .role-title{font-size:0.94rem;}
.internships .role-years{font-size:0.94rem;}

/* L'etichetta di una placca secondaria: dice cosa c'e' scritto sotto senza
   aprire una sezione nuova. Stessa grafia delle etichette di campo, cosi'
   non introduce un livello tipografico in piu'. */
.plate-label{
  font-family:var(--sans);
  font-size:0.74rem;
  font-weight:600;
  font-stretch:106%;
  text-transform:uppercase;
  letter-spacing:0.13em;
  color:var(--ink-3);
  margin-top:clamp(30px, 4vw, 44px);
  margin-bottom:12px;
}

/* --------------------------------------------------------------------------
   14. Chi sono, con il ritratto
   --------------------------------------------------------------------------
   Il ritratto e' facoltativo: senza il file, la colonna sparisce e il testo
   occupa tutta la larghezza senza lasciare un buco. Si accende togliendo
   l'attributo hidden a .portrait in index.html.
   -------------------------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(26px, 4vw, 52px);
  align-items:start;
}
.about-grid:has(.portrait:not([hidden])){
  grid-template-columns:minmax(0, 240px) minmax(0, 1fr);
}

.portrait{
  background:var(--plate);
  border:1px solid var(--hairline-strong);
  padding:10px;
}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.portrait figcaption{
  font-family:var(--sans);
  font-size:0.74rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding-top:10px;
  text-align:center;
}

/* --------------------------------------------------------------------------
   15. L'attivita' — il rimando ad ACVM
   -------------------------------------------------------------------------- */
.venture{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:clamp(22px, 3vw, 44px);
  align-items:center;
}
.venture p{color:var(--ink-2); max-width:58ch;}
.venture strong{color:var(--ink); font-weight:600;}

/* --------------------------------------------------------------------------
   16. Contatti e modulo
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr);
  gap:clamp(28px, 4vw, 58px);
  align-items:start;
}

/* Il testo d'apertura dei contatti ha bisogno del suo stacco: senza, la
   prima etichetta dell'elenco si appoggia all'ultima riga del paragrafo. */
.contact-grid .lede{margin-bottom:clamp(24px, 3vw, 34px);}

.contact-list{list-style:none;}
.contact-list li + li{margin-top:18px;}
.contact-list .k{
  display:block;
  font-family:var(--sans);
  font-size:0.74rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--on-anod-2);
  margin-bottom:4px;
}
/* il punto fra telefono e WhatsApp: separa due modi di raggiungere lo
   stesso numero, non due dati diversi */
.contact-list .sep{color:var(--on-anod-2); padding-inline:6px;}

.contact-list a,.contact-list span{color:var(--on-anod); text-decoration:none; font-size:1.02rem;}
.contact-list a{
  text-decoration:underline;
  text-underline-offset:0.2em;
  text-decoration-thickness:1px;
  transition:text-decoration-thickness var(--t-quick) var(--ease-out);
}
.contact-list a:hover{text-decoration-thickness:2px;}

.form-row{margin-bottom:20px;}
.form-row label{
  display:block;
  font-family:var(--sans);
  font-size:0.7rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase;
  color:var(--on-anod-2);
  margin-bottom:7px;
}
.form-row input,
.form-row textarea{
  width:100%;
  background:rgba(238,236,230,0.09);
  border:1px solid rgba(238,236,230,0.3);
  color:var(--on-anod);
  padding:13px 15px;
  font-family:var(--serif);
  font-size:1rem;
  transition:border-color var(--t-quick) var(--ease-out),
             background var(--t-quick) var(--ease-out);
}
.form-row textarea{min-height:148px; resize:vertical;}
.form-row input::placeholder,
.form-row textarea::placeholder{color:rgba(185,174,234,0.75);}
.form-row input:hover,
.form-row textarea:hover{border-color:rgba(238,236,230,0.5);}
.form-row input:focus,
.form-row textarea:focus{background:rgba(238,236,230,0.14); border-color:var(--on-anod);}

.form-row input[aria-invalid="true"],
.form-row textarea[aria-invalid="true"]{border-color:#ffb3a7;}

.form-error{
  display:block;
  font-family:var(--sans);
  font-size:0.78rem;
  color:#ffc9bf;
  margin-top:6px;
}

.consent{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
  margin-bottom:22px;
}
.consent input{
  width:19px; height:19px;
  margin-top:3px;
  accent-color:var(--on-anod);
  flex:none;
}
.consent label{
  font-family:var(--serif);
  font-size:0.9rem;
  line-height:1.5;
  letter-spacing:0;
  text-transform:none;
  color:var(--on-anod-2);
  margin:0;
}
.consent a{color:var(--on-anod); text-underline-offset:0.2em;}

/* La trappola per i bot: invisibile a chi guarda e a chi ascolta, ma
   raggiungibile dai compilatori automatici. Non usa display:none perche'
   parecchi bot lo riconoscono e saltano il campo, e non usa left:-9999px
   perche' quello dipende dal ritaglio del body per restare fuori vista. */
.trap{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%);
}
/* Il contenitore la ritaglia gia', ma senza questo il campo misura 215px e
   risulta "fuori schermo" a ogni controllo di overflow: un falso allarme che
   qualcuno un giorno rincorrerebbe. */
.trap input{width:1px;}

.form-feedback{
  margin-top:18px;
  font-size:0.95rem;
  line-height:1.5;
  padding:14px 16px;
  border:1px solid rgba(238,236,230,0.32);
  background:rgba(238,236,230,0.1);
  color:var(--on-anod);
}
.form-feedback[data-state="error"]{border-color:#ffb3a7; color:#ffdcd5;}
.form-feedback:empty{display:none;}

/* --------------------------------------------------------------------------
   17. Piede
   -------------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--hairline-strong);
  padding-block:32px 40px;
  margin-top:clamp(56px, 7vw, 92px);
}
/* La data di aggiornamento. Non e' un vezzo: questa pagina ha dei
   "fino a oggi" dentro, e senza una data chi la legge fra due anni non puo'
   sapere se sta guardando una cosa viva. */
.footer-updated{margin-top:5px;}

.site-footer .wrap{
  display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:baseline; justify-content:space-between;
}
.site-footer p,.site-footer a{
  font-family:var(--sans);
  font-size:0.76rem;
  letter-spacing:0.02em;
  color:var(--ink-3);
}
.site-footer a{
  text-decoration:none;
  border-bottom:1px solid var(--hairline);
  transition:color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out);
}
.site-footer a:hover{color:var(--ink); border-bottom-color:var(--accent-ink);}
.footer-links{display:flex; flex-wrap:wrap; gap:20px;}

/* --------------------------------------------------------------------------
   18. Pagine di testo (privacy)
   -------------------------------------------------------------------------- */
.legal{padding-top:calc(var(--header-h) + 56px); padding-bottom:72px;}
.legal h1{
  font-family:var(--sans); font-weight:700; font-stretch:112%;
  text-transform:uppercase; letter-spacing:0.04em;
  font-size:clamp(1.7rem, 4vw, 2.5rem);
  line-height:1.1; margin-bottom:20px;
}
.legal h2{
  font-family:var(--sans); font-weight:600; font-stretch:108%;
  text-transform:uppercase; letter-spacing:0.09em;
  font-size:0.95rem;
  margin-top:40px; margin-bottom:12px;
  padding-top:16px; border-top:1px solid var(--hairline);
}
.legal p,.legal li{max-width:70ch; color:var(--ink-2);}
.legal p + p{margin-top:0.9em;}
.legal ul{margin:0.7em 0 0 1.2em;}
.legal li + li{margin-top:0.4em;}
.legal a{color:var(--accent-ink); text-underline-offset:0.18em;}

.notice{
  border:1px solid var(--hairline-strong);
  background:var(--plate);
  padding:18px 20px;
  margin-bottom:34px;
  font-size:0.95rem;
  color:var(--ink-2);
  max-width:70ch;
}
.notice strong{color:var(--ink);}

/* --------------------------------------------------------------------------
   19. Movimento firmato
   --------------------------------------------------------------------------
   Un momento solo, all'ingresso: le viti si avvitano e i filetti della targa
   si tirano da sinistra a destra, una volta. Poi la pagina sta ferma.

   Regola non negoziabile: il CONTENUTO e' visibile per impostazione
   predefinita. Qui si muovono soltanto i filetti, che sono decorazione: se
   l'animazione non parte, non manca niente di leggibile.
   -------------------------------------------------------------------------- */
.masthead-plate .field{
  /* il filetto e' disegnato da uno pseudo-elemento cosi' da poterlo animare
     senza toccare il bordo che regge la griglia */
  position:relative;
  border-bottom-color:transparent;
}
.masthead-plate .field::after{
  content:'';
  position:absolute; left:0; right:0; bottom:-1px;
  height:1px;
  background:var(--hairline);
  transform:scaleX(0);
  transform-origin:left center;
  animation:rule-draw 620ms var(--ease-out) forwards;
}
.masthead-plate .field:nth-child(1)::after{animation-delay:120ms;}
.masthead-plate .field:nth-child(2)::after{animation-delay:200ms;}
.masthead-plate .field:nth-child(3)::after{animation-delay:280ms;}
.masthead-plate .field:nth-child(4)::after{animation-delay:360ms;}

@keyframes rule-draw{to{transform:scaleX(1);}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  /* gli stati finali restano quelli giusti, senza il percorso per arrivarci */
  .screw{opacity:1; transform:none;}
  .masthead-plate .field::after{transform:scaleX(1);}
}

/* --------------------------------------------------------------------------
   20. Adattamento
   -------------------------------------------------------------------------- */
@media (max-width: 900px){
  :root{--field-label:150px;}

  .masthead-sub{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .masthead-ref{text-align:left;}
  .masthead-ref b{font-size:1.4rem;}
  .masthead-stamps{gap:clamp(28px, 7vw, 46px);}

  .contact-grid{grid-template-columns:minmax(0, 1fr);}
  .venture{grid-template-columns:minmax(0, 1fr); align-items:start;}
  .about-grid:has(.portrait:not([hidden])){grid-template-columns:minmax(0, 200px) minmax(0, 1fr);}
}

@media (max-width: 720px){
  :root{--gutter:18px;}

  body{font-size:16px;}

  /* Su schermo stretto le due colonne del campo si impilano: l'etichetta
     resta sopra il proprio valore, che e' come si legge una targa tenuta in
     mano invece che appesa. */
  .field,.role,.trade{grid-template-columns:minmax(0, 1fr); gap:6px;}
  .role{padding-block:22px;}
  .trade{gap:8px;}

  .about-grid,
  .about-grid:has(.portrait:not([hidden])){grid-template-columns:minmax(0, 1fr);}
  .portrait{max-width:230px;}

  /* Menu: pannello a tendina sotto la testata.
     ------------------------------------------------------------------
     Due regole, imparate rompendo le cose:

     1. Il pannello NON sta dentro un elemento con backdrop-filter. Quel
        filtro crea un blocco contenitore per i discendenti position:fixed,
        e il pannello collasserebbe ad altezza zero. Qui la testata ha un
        fondo pieno, nessun filtro.

     2. La visibilita' NON dipende da una transizione. Aperto vuol dire
        display:block, e basta: l'entrata e' un'animazione separata che
        puo' anche non partire mai — se il browser la salta, o la scheda
        e' in secondo piano e il motore congela le animazioni, il pannello
        e' comunque li', alla sua altezza, navigabile.
     ------------------------------------------------------------------ */
  .nav-toggle{display:inline-flex;}

  .site-nav{
    display:none;
    position:fixed;
    top:var(--header-h); left:0; right:0;
    background:var(--field);
    border-bottom:1px solid var(--hairline-strong);
    box-shadow:var(--drawer-shadow);
    padding:10px var(--gutter) 22px;
  }
  .site-nav[data-open]{
    display:block;
    animation:nav-drop var(--t-drawer) var(--ease-drawer);
  }

  @keyframes nav-drop{
    from{opacity:0; transform:translateY(-10px);}
    to  {opacity:1; transform:translateY(0);}
  }
  .site-nav ul{flex-direction:column; gap:0;}
  .site-nav li + li{border-top:1px solid var(--hairline);}
  .site-nav a{display:block; padding:15px 2px; font-size:0.86rem;}
  .site-nav a:hover{border-bottom-color:transparent;}
}

@media (max-width: 420px){
  .masthead-actions .btn{flex:1 1 100%; justify-content:center;}
}

/* Schermi larghi: la placca non si allarga oltre la misura di lettura, ma il
   blocco dati puo' respirare. */
@media (min-width: 1200px){
  :root{--field-label:206px;}
}

/* --------------------------------------------------------------------------
   21. Stampa
   --------------------------------------------------------------------------
   Una pagina che e' una targa dati deve poter finire su un foglio: e' il
   formato in cui qualcuno la portera' in una riunione.
   -------------------------------------------------------------------------- */
@media print{
  /* I tre selettori servono tutti: una media query non aggiunge specificita',
     e :root[data-theme="dark"] pesa piu' di :root. Con il solo :root, chi
     stampa avendo scelto il tema scuro si porterebbe a casa un foglio nero. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"]{
    --field:#fff; --plate:#fff; --plate-2:#fff;
    --ink:#111; --ink-2:#444; --ink-3:#555;
    --anodized:#1a1a1a; --accent-ink:#1a1a1a; --accent-ink-strong:#000;
    --hairline:rgba(0,0,0,0.25); --hairline-strong:rgba(0,0,0,0.4);
    --engraving:none;
    --plate-shadow:none; --drawer-shadow:none;
    --scheme:light;
  }
  .site-header,.nav-toggle,.theme-toggle,.masthead-actions,.contact-form,.screw{display:none !important;}
  body{font-size:11pt; background:#fff;}
  .masthead{padding-top:0;}
  .plate{box-shadow:none; border-color:#999;}
  .plate--anodized{background:#fff; color:#111; border-color:#999;}
  .plate--anodized .trade-name,.plate--anodized .trade-body,
  .plate--anodized .field-value,.on-anodized .section-title{color:#111;}
  .plate--anodized .field-label,.trade-tools{color:#444;}
  .section{padding-block:18px;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9pt; color:#555;}
}