/* ============================================================================
   PORTFOLIO DI MICHELE — styles.css
   ----------------------------------------------------------------------------
   Idea guida: "brace di legno". La sfumatura richiesta (arancione -> arancione
   scuro) e' trattata come una fonte di luce, non come una decorazione: da' il
   colore al titolo, al bordo delle schede e all'alone che segue il puntatore.
   Tutto il resto della tavolozza (carbone e sabbia) e' costruito sullo stesso
   sottotono caldo, cosi' nulla stona con l'arancione.

   Indice:
     0.  Font           — @font-face dei tre caratteri, serviti dal sito
     1.  Token          — variabili di colore, font, spazi, raggi
     2.  Temi           — scuro (default) e chiaro
     3.  Base           — reset minimo, tipografia, focus
     4.  Sfondo         — alone arancione fisso
     5.  Barra in alto  — nav flottante + interruttore tema
     6.  Hero
     7.  Schede
     8.  Footer
     9.  Desktop        — nav completa; 9b: copertina a due colonne
     10. Animazioni     — entrata allo scroll + prefers-reduced-motion
   ============================================================================ */


/* ============================================================================
   0. FONT
   I tre caratteri stanno nella cartella fonts/ e non arrivano piu' da Google
   Fonts. Motivo: privacy. Caricarli da fonts.googleapis.com mandava a Google
   l'indirizzo IP di ogni visitatore senza consenso (un tribunale tedesco l'ha
   sanzionato nel 2022), e il sito aveva bisogno di un'informativa solo per
   quello. Serviti da qui, nessuna richiesta esce dal dominio; in piu' la CSP
   di _headers puo' restare su 'self'.

   Da dove vengono: i file .woff2 che Google Fonts serviva a Chrome per la
   stessa richiesta di prima (Bricolage Grotesque opsz 12..96 pesi 600/800,
   Instrument Sans 400/500/600, Space Mono 400/700), scaricati e rinominati.
   Licenza SIL Open Font License: si possono ridistribuire liberamente.

   Due alfabeti per carattere, come faceva Google:
     latin      -> tutto l'italiano, accenti compresi
     latin-ext  -> lettere dell'Europa dell'est e simboli rari; il browser lo
                   scarica solo se in pagina compare uno di quei caratteri,
                   grazie a unicode-range. Di solito non parte mai.

   Bricolage Grotesque e Instrument Sans sono font VARIABILI: un file solo
   copre tutti i pesi, per questo font-weight e' un intervallo ("600 800")
   e non un valore. Bricolage porta anche l'asse ottico "opsz" che i fogli
   pilotano con font-variation-settings.

   font-display: swap -> finche' il font non e' arrivato si vede il carattere
   di riserva dichiarato nei token, invece di un testo invisibile.

   Se un giorno serve un peso nuovo (es. Instrument Sans 700) non basta
   scriverlo nel CSS: va riscaricato il file da Google Fonts con quel peso.
   ============================================================================ */

/* Gli unicode-range sono copiati identici da quelli di Google: in ogni
   coppia il blocco latin-ext viene prima, come nel CSS originale. */

/* --- Bricolage Grotesque: titoli ----------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Instrument Sans: testo corrente ------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Space Mono: etichette, tag, dati. Non e' variabile: un file per peso. */
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/space-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================================
   1. TOKEN
   Valori che non cambiano mai, indipendenti dal tema.
   ============================================================================ */

:root {

  /* --- La brace: dal piu' chiaro al piu' spento -------------------------- */
  --ember-100: #FFC177;   /* punta di fiamma, per i colpi di luce */
  --ember-200: #FF8A2B;   /* arancione pieno, colore guida */
  --ember-300: #EF5F0C;   /* arancione bruciato */
  --ember-400: #B93B04;   /* arancione scuro, fine della sfumatura */
  --ember-500: #7A2503;   /* brace quasi spenta, solo per ombre e bordi */

  /* --- Sfumatura riutilizzata in piu' punti (titolo, logo, bordi) -------- */
  --grad-ember: linear-gradient(168deg,
      var(--ember-100) 4%,
      var(--ember-200) 34%,
      var(--ember-300) 62%,
      var(--ember-400) 92%);

  /* --- Caratteri --------------------------------------------------------- */
  --font-display: "Bricolage Grotesque", Georgia, serif;   /* titoli */
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Misure ------------------------------------------------------------
     --pad e' il margine laterale di tutta la pagina: cresce con la finestra,
     cosi' non serve gestire i bordi sezione per sezione. */
  --pad: clamp(1.25rem, 5vw, 5rem);
  /* Larghezza massima del contenuto. Alta di proposito: su desktop la pagina
     deve occupare quasi tutto lo schermo, non una colonna centrale stretta.
     E' solo un tetto, quindi sotto i 112rem non ha alcun effetto. */
  --maxw: 112rem;
  --radius-card: clamp(26px, 4vw, 36px);      /* bordi molto arrotondati */
  --radius-pill: 999px;

  /* Curva di accelerazione unica per tutto il sito: parte decisa e frena
     dolcemente. Usarla ovunque tiene insieme la "personalita'" dei movimenti. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================================
   2. TEMI
   Le variabili semantiche (--bg, --text, ...) sono le uniche usate nel resto
   del foglio: cambiando questi due blocchi si cambia tutto il sito.
   ============================================================================ */

/* --- Tema scuro: default ---------------------------------------------- */
[data-theme="dark"] {
  --bg: #120D0A;              /* carbone con sottotono bruno, non nero neutro */
  --surface: #1A1310;
  --surface-2: #241A15;
  --text: #F7EFE7;            /* sabbia chiara */
  --text-dim: #C5B2A4;
  --text-mute: #8A7566;
  --line: rgba(255, 138, 43, 0.16);
  --line-strong: rgba(255, 138, 43, 0.34);
  --line-hot: rgba(255, 138, 43, 0.62);       /* bordo della scheda in hover */
  --glass: rgba(26, 19, 16, 0.72);            /* fondo della barra sfocata */
  --glow-a: rgba(255, 138, 43, 0.26);         /* alone sotto il puntatore */
  --glow-b: rgba(185, 59, 4, 0.10);
  --halo-a: rgba(239, 95, 12, 0.30);          /* alone fisso di sfondo */
  --halo-b: rgba(185, 59, 4, 0.24);
  --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9);
  --accent-text: var(--ember-200);            /* arancione leggibile sul fondo */
}

/* --- Tema chiaro: pesca calda, non bianco freddo ----------------------- */
[data-theme="light"] {
  --bg: #FFF6EE;
  --surface: #FFFFFF;
  --surface-2: #FFF9F4;
  --text: #22150E;
  --text-dim: #6B5346;
  --text-mute: #9C8375;
  --line: rgba(185, 59, 4, 0.16);
  --line-strong: rgba(185, 59, 4, 0.30);
  --line-hot: rgba(185, 59, 4, 0.55);
  --glass: rgba(255, 246, 238, 0.78);
  --glow-a: rgba(255, 138, 43, 0.22);
  --glow-b: rgba(255, 193, 119, 0.14);
  --halo-a: rgba(255, 138, 43, 0.30);
  --halo-b: rgba(255, 193, 119, 0.34);
  --shadow: 0 22px 50px -26px rgba(122, 37, 3, 0.32);
  /* sul chiaro l'arancione pieno perde contrasto: si scende di due gradini */
  --accent-text: var(--ember-400);
}

/* Il cambio tema e' animato, ma solo mentre <html> ha la classe .theme-anim
   (aggiunta da script.js al click). Senza questo accorgimento anche il primo
   caricamento verrebbe animato, con un fastidioso dissolvenza iniziale. */
.theme-anim,
.theme-anim body,
.theme-anim .card-inner,
.theme-anim .nav {
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease);
}


/* ============================================================================
   3. BASE
   ============================================================================ */

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

html {
  -webkit-text-size-adjust: 100%;   /* niente ingrandimenti automatici su iOS */
  scroll-behavior: smooth;          /* le ancore della nav scorrono, non saltano */
  scroll-padding-top: 6rem;         /* ... e non finiscono sotto la barra sticky */
}

body {
  margin: 0;
  min-height: 100svh;               /* svh: tiene conto della barra del browser mobile */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: hidden;               /* l'alone di sfondo sborda: qui lo si taglia */
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

/* Anello di focus visibile solo per chi naviga da tastiera. Non va rimosso:
   e' l'unico modo per capire dove ci si trova senza mouse. */
:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Salta-contenuti: fuori schermo finche' non riceve il focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 100;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--ember-300);
  color: #120D0A;
  font: 600 0.875rem/1 var(--font-body);
}
.skip-link:focus { left: 1rem; }


/* ============================================================================
   4. SFONDO
   Un solo alone, in alto. E' l'unico elemento puramente decorativo della
   pagina: tutto il resto del colore nasce dai contenuti.
   ============================================================================ */

.ember-field {
  position: fixed;
  inset: -30vh -20vw auto -20vw;   /* sborda dai lati e dall'alto */
  height: 92vh;
  z-index: 0;
  pointer-events: none;            /* non deve intercettare i click */
  background:
    radial-gradient(45% 55% at 22% 34%, var(--halo-a), transparent 68%),
    radial-gradient(38% 46% at 70% 16%, var(--halo-b), transparent 70%);
  filter: blur(30px);
}


/* ============================================================================
   5. BARRA IN ALTO
   Pillola flottante con sfondo sfocato, appoggiata sopra al contenuto.
   ============================================================================ */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: clamp(0.75rem, 2vw, 1.25rem) var(--pad);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--glass);
  /* -webkit- serve ancora a Safari, che non supporta la proprieta' senza prefisso */
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow);
}

/* --- Logo -------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.15rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 11px;
  background: var(--grad-ember);
  color: #120D0A;                  /* fisso: deve restare leggibile sull'arancione */
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 800;
}

.brand-text {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* --- Ancore ------------------------------------------------------------ */

.nav-links {
  display: none;                   /* nascoste su mobile, riattivate piu' sotto */
  margin-left: auto;
  gap: 0.25rem;
}

.nav-links a {
  display: block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  color: var(--text-dim);
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav-links a:hover {
  color: var(--text);
  background: var(--line);
}

/* --- Voce in evidenza: Certificati -------------------------------------- */

/* I certificati non sono una quarta categoria: sono documenti, e la voce deve
   staccarsi dalle altre tre invece di allinearsi. Rettangolo stondato pieno
   sulla sfumatura della brace, con testo scuro fisso — sull'arancione deve
   restare leggibile in tutti e due i temi.

   Il selettore lavora sulla CLASSE .nav-cert, messa sul link Certificati di
   ogni pagina. Fino all'ottobre 2026 lavorava sull'indirizzo
   (a[href$="certificati/index.html"]), ma Netlify alla pubblicazione
   riscrive i link in forma breve ("/certificati/") e il selettore non
   trovava piu' niente: il badge spariva su tutte le pagine tranne quella dei
   certificati, l'unica che aveva gia' la classe. Mai piu' selettori sugli
   indirizzi: online non sono quelli scritti nei file.

   La specificita' e' pari a quella di .nav-links a:hover, ma questa regola sta
   piu' in basso nel foglio: e' quella che vince. L'hover della voce ha percio'
   una regola sua, qui sotto. */
.nav-links a.nav-cert {
  border-radius: 12px;                   /* rettangolo stondato, non pillola */
  background: var(--grad-ember);
  color: #120D0A;
  font-weight: 600;
  box-shadow: 0 8px 20px -12px var(--ember-400);
  transition: color 0.25s var(--ease), box-shadow 0.3s var(--ease),
              filter 0.3s var(--ease);
}

.nav-links a.nav-cert:hover {
  color: #120D0A;                        /* annulla il grigio dell'hover base */
  background: var(--grad-ember);
  box-shadow: 0 12px 24px -12px var(--ember-300);
  filter: brightness(1.08);
}

/* --- Interruttore tema -------------------------------------------------- */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;               /* spinge il bottone a destra su mobile... */
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              transform 0.35s var(--ease);
}

.theme-toggle:hover {
  color: var(--accent-text);
  border-color: var(--line-strong);
  transform: rotate(-18deg);       /* micro-reazione, coerente con "accendere" */
}

.theme-toggle svg { width: 1.05rem; height: 1.05rem; }

/* Si mostra l'icona di cio' che si otterrebbe premendo:
   tema scuro attivo -> icona sole (passa al chiaro), e viceversa. */
[data-theme="dark"] .icon-moon,
[data-theme="light"] .icon-sun { display: none; }


/* --- Barra stretta: sopravvive solo il badge --------------------------- */

/* Sotto i 56rem le ancore spariscono (vedi .nav-links, display:none), ma questa
   deve restare: e' l'unica voce della barra che porta a un contenuto che non si
   raggiunge da nessun'altra parte della copertina.

   ORDINE NEL FOGLIO: questo blocco deve stare DOPO .theme-toggle, non prima.
   Ha la stessa specificita' della regola base (una classe), quindi a decidere e'
   la posizione: messo sopra, il margin-left:auto del bottone sopravviverebbe e
   si sommerebbe a quello dell'elenco. Due margini automatici nello stesso flex
   si spartiscono lo spazio libero a meta', e il badge finisce in mezzo alla
   barra invece che a destra. E' esattamente il motivo per cui non funzionava.

   Le altre tre voci si spengono a livello di <a>, cosi' non serve :has() per
   risalire dal link alla sua riga; le <li> escono dal layout con
   display:contents e il gap dell'elenco va a zero, altrimenti tre righe vuote
   lascerebbero spazi prima del bottone.

   Risultato, da sinistra a destra: logo, spazio elastico, badge, bottone del
   tema. Il badge resta appoggiato al bordo destro a qualunque larghezza. */
@media (max-width: 55.999rem) {
  /* Tre elementi in una barra stretta: lo spazio tra loro si riduce, cosi' su
     un telefono da 320px il badge non spinge fuori il bottone del tema. */
  .nav { gap: 0.5rem; }

  .nav-links {
    display: flex;
    gap: 0;
    margin-left: auto;        /* l'unica spinta a destra: dev'essere questa */
    justify-content: flex-end;
  }

  .nav-links li { display: contents; }

  .nav-links a { display: none; }

  .nav-links a.nav-cert {
    display: block;
    padding: 0.45rem 0.85rem;
    font-size: 0.8125rem;     /* la barra e' stretta: il testo cala */
  }

  /* Niente margine automatico qui: il bottone si limita a stare accanto al
     badge, che e' gia' stato spinto a destra dall'elenco. */
  .theme-toggle { margin-left: 0.4rem; }
}


/* ============================================================================
   6. HERO
   ============================================================================ */

main {
  position: relative;
  z-index: 1;                      /* sopra .ember-field */
}

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 9vw, 7rem) var(--pad) clamp(3rem, 8vw, 6rem);
}

/* (Qui c'erano .hero-greet, .spark e @keyframes pulse: la riga di saluto col
   puntino pulsante sopra il titolo, tolta nell'ottobre 2026. Il titolo ora
   apre l'hero da solo.) */

/* Titolo: la sfumatura richiesta viene ritagliata dentro il testo. */
.hero-title {
  font-size: clamp(3rem, 11.5vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 96;   /* asse ottico del font variabile */
  background: var(--grad-ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Sul fondo chiaro la punta di fiamma (#FFC177) perde contrasto: la sfumatura
   parte due gradini piu' in basso e finisce sulla brace spenta. Vale anche per
   i numeri delle righe di copertina (.card-num, sezione 7), che usano la stessa
   sfumatura ritagliata nel testo. */
[data-theme="light"] .hero-title,
[data-theme="light"] .card-num {
  background: linear-gradient(168deg,
      var(--ember-200) 4%,
      var(--ember-300) 38%,
      var(--ember-400) 68%,
      var(--ember-500) 96%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-sub {
  max-width: 38ch;                /* riga corta = piu' facile da leggere */
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--text-dim);
  text-wrap: pretty;                /* evita parole isolate a fine paragrafo */
}

/* Rimando alla pagina con tutti i progetti filtrabili. Volutamente un link di
   testo e non un bottone: le tre schede restano l'invito principale, questa e'
   la scorciatoia per chi sa gia' cosa cerca. Niente freccia: l'invito e'
   scritto in chiaro nel testo, "(clicca qui)", e in hover cambia solo colore. */
/* display flex (non inline-flex) + width fit-content: i link sono due, ai
   filtri e a Chi sono, e devono stare uno sotto l'altro senza che l'area
   cliccabile si allarghi a tutta la riga. */
.hero-cerca {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-mono);
  font-size: clamp(0.8125rem, 0.79rem + 0.15vw, 0.9375rem);
  color: var(--text-mute);
  transition: color 0.28s var(--ease);
}

.hero-cerca:hover { color: var(--accent-text); }

/* Il secondo link (Chi sono) si attacca al primo: devono leggersi come due
   righe dello stesso testo andato a capo, non come due blocchi separati.
   Tre classi di specificita' apposta: deve vincere anche sul margin-top della
   copertina su telefono (.copertina .hero-cerca, sezione 9c), che sta piu'
   in basso nel foglio. */
.copertina .hero-cerca + .hero-cerca { margin-top: 0.35em; }


/* ============================================================================
   7. SCHEDE
   Ogni scheda e' fatta di tre strati:
     .card       -> cornice esterna: raggio, sollevamento, ombra
     .card-glow  -> alone che segue il puntatore
     .card-inner -> superficie opaca con il bordo e il contenuto
   Questi tre servono a TUTTE le schede del sito (copertina, progetti,
   certificati). Le regole da ".sezioni .card" in giu' riguardano invece le
   sole tre righe della copertina.
   ============================================================================ */

.sezioni {
  display: grid;
  /* Una colonna a ogni larghezza: le tre aree sono righe impilate, non piu'
     tre schede affiancate. Su schermo largo e' la copertina (sezione 9b) a
     mettere l'intero elenco nella colonna di destra. */
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.card {
  position: relative;
  display: flex;
  isolation: isolate;               /* tiene l'alone dentro il contesto della scheda */
  min-height: clamp(17rem, 34vw, 24rem);
  border-radius: var(--radius-card);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.card-inner {
  position: relative;
  z-index: 2;                       /* sopra .card-glow */
  display: flex;
  flex: 1;                          /* riempie l'altezza della cornice */
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  /* Bordo vero, non un riempimento che spunta da sotto: con le colonne 1fr le
     larghezze sono frazionarie e il lato destro finiva su mezzo pixel, sparendo.
     Un border disegna comunque tutti e quattro i lati. */
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 60%, var(--bg));
  transition: border-color 0.5s var(--ease);
}

/* Alone che insegue il puntatore. Le coordinate --mx/--my sono scritte da
   script.js a ogni pointermove; qui c'e' solo il valore di riposo.

   Sta SOPRA .card-inner (z-index 3 contro 2): la superficie della scheda e'
   opaca, quindi un alone sottostante non si vedrebbe. Gli strati di colore
   hanno opacita' bassa e pointer-events:none, cosi' il testo resta leggibile
   e i click passano al link. */
.card-glow {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  inset: 0;
  border-radius: var(--radius-card);
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
      var(--glow-a),
      var(--glow-b) 42%,
      transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

/* In hover il bordo si accende: resta uniforme, cambia solo intensita'. */
.card:hover .card-inner { border-color: var(--line-hot); }

.card:hover .card-glow { opacity: 1; }

/* --- Le tre righe della copertina ---------------------------------------
   Da qui in giu' tutto e' limitato a .sezioni, cioe' alla home: le schede dei
   progetti e dei certificati hanno .card e .card-inner in comune ma un
   contenuto loro, e non devono ereditare questa griglia. */

/* Una riga e' alta quanto il suo contenuto: l'altezza minima di .card serviva
   alle schede verticali e qui lascerebbe un vuoto sotto il testo. */
.sezioni .card { min-height: 0; }

/* Tre colonne: numero | testi | freccia. Le due esterne sono larghe quanto
   serve (auto), quella centrale prende il resto. Il numero e la freccia
   occupano tutte e tre le righe e restano centrati in verticale, cosi' la
   riga regge anche quando la descrizione va a capo su un telefono. */
.sezioni .card-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num titolo vai"
    "num desc   vai"
    "num meta   vai";
  align-items: center;
  column-gap: clamp(1rem, 3vw, 1.75rem);
  row-gap: 0.2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Numero d'ordine: stessa sfumatura del titolo, ritagliata nel testo. Per il
   tema chiaro vedi la regola condivisa con .hero-title nella sezione 6. */
.card-num {
  grid-area: num;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
  background: var(--grad-ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.card-title {
  grid-area: titolo;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 40;
  color: var(--text);
}

.card-desc {
  grid-area: desc;
  font-size: 0.95rem;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* Conteggio dei progetti della categoria. Scritto a mano nell'HTML, come
   .page-meta: va aggiornato insieme a quello. */
.card-meta {
  grid-area: meta;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Freccia dentro un cerchio: prende il posto del vecchio "Clicca per aprire".
   A riposo e' solo un contorno; in hover si riempie con la sfumatura, ed e'
   il segnale che la riga e' un link. Testo scuro fisso sull'arancione, come
   sul badge dei certificati. */
.card-vai {
  grid-area: vai;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  /* Di serie una sfumatura parte dal bordo interno (padding-box) e sotto al
     bordo si ripete da capo: in hover, col bordo trasparente, lungo il cerchio
     spuntavano falcetti del colore opposto. Con border-box la sfumatura
     copre anche il pixel del bordo ed e' una sola. */
  background-origin: border-box;
  color: var(--text);
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
              border-color 0.4s var(--ease);
}

/* La freccia e' un SVG disegnato su una tela quadrata simmetrica: place-items
   la centra davvero, cosa che con un carattere non succede (il glifo sta
   sulla linea di base, non a meta' altezza). */
.card-vai svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* background-image e non la forma breve "background": quella azzererebbe
   anche background-origin, riportando i falcetti lungo il bordo. */
.card:hover .card-vai {
  background-image: var(--grad-ember);
  border-color: transparent;
  color: #120D0A;
}

/* Una riga larga che si solleva sembra staccarsi dall'elenco: qui la scheda
   avanza verso destra, nella direzione della freccia. Il sollevamento resta
   alle schede verticali delle altre pagine. (La stessa regola e' ripetuta con
   .is-in nella sezione 10, per lo stesso motivo spiegato li'.) */
.sezioni .card:hover { transform: translateX(8px); }


/* ============================================================================
   8. FOOTER
   ============================================================================ */

.site-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* La riga in alto deve essere lunga esattamente quanto la pillola della barra.
     Quella e' larga "finestra meno i due margini laterali", con un tetto a
     --maxw: qui si ripete la stessa misura, e l'imbottitura laterale scende a
     un valore piccolo come quello della barra. Senza width:100% il footer, in
     una colonna flex con margini automatici, si restringerebbe al contenuto. */
  width: 100%;
  max-width: min(var(--maxw), calc(100% - 2 * var(--pad)));
  margin: clamp(4rem, 12vw, 9rem) auto 0;
  padding: 1.75rem 0.85rem 2.5rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  /* Su desktop 0.75rem risultava quasi illeggibile: si parte da 0.875rem e si
     sale fino a 1rem sugli schermi grandi. */
  font-size: clamp(0.875rem, 0.82rem + 0.22vw, 1rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Il nome e' un link alla pagina Chi sono (ottobre 2026), ma deve restare
   identico a prima: colore e peso sono questi, e la regola base sugli <a>
   gia' toglie la sottolineatura. Nessun effetto in hover, per scelta. */
.foot-name { color: var(--text); font-weight: 700; }


/* ============================================================================
   9. DESKTOP
   Da 56rem (~896px) in su: nav completa.
   ============================================================================ */

@media (min-width: 56rem) {

  /* Le ancore compaiono e il toggle perde il margine automatico, altrimenti
     resterebbero due spinte a destra in conflitto. */
  .nav-links { display: flex; }
  .theme-toggle { margin-left: 0.25rem; }

  .site-foot { margin-top: clamp(6rem, 14vw, 11rem); }
}


/* ============================================================================
   9b. COPERTINA SU SCHERMO LARGO
   Da 64rem in su la copertina cambia impianto: il testo va a sinistra e le tre
   righe a destra, impilate, dentro una schermata sola. I contenuti sono pochi, quindi
   non ha senso farli scorrere: si vede tutto insieme.

   Tutte le regole sono legate a body.copertina, che esiste solo nella home.
   Le pagine di categoria condividono questo foglio ma hanno un impianto
   diverso — titolo in alto e griglia sotto — e devono restarne fuori.

   La seconda condizione (altezza minima) evita il caso peggiore: su un portatile
   molto basso o con la finestra schiacciata la pagina torna impilata, invece di
   stringere titolo ed elenco in un'altezza che non li contiene.
   ============================================================================ */

@media (min-width: 64rem) and (min-height: 38rem) {

  /* Colonna verticale: barra, contenuto elastico, footer. main prende tutto lo
     spazio avanzato e centra la griglia della copertina. */
  .copertina {
    display: flex;
    flex-direction: column;
  }

  .copertina main {
    flex: 1;
    display: flex;
    align-items: center;
  }

  /* Due colonne quasi alla pari. La destra non ha piu' bisogno di spazio per
     tre schede affiancate: le righe si leggono meglio se non sono troppo
     lunghe, e il titolo a sinistra ci guadagna in respiro. */
  .home {
    display: grid;
    grid-template-columns: minmax(22rem, 1fr) 1.1fr;
    align-items: center;
    gap: clamp(2.5rem, 4vw, 5rem);
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(1.5rem, 3vh, 3rem) var(--pad);
  }

  /* Dentro .home le imbottiture di hero e schede sarebbero doppie: le gestisce
     gia' la griglia. */
  .hero,
  .sezioni {
    max-width: none;
    padding: 0;
  }

  /* Il titolo non puo' piu' scalare su 11.5vw: in mezza larghezza sfonderebbe.
     Qui la misura e' legata alla colonna, non alla finestra intera. */
  .hero-title { font-size: clamp(3.25rem, 5.4vw, 6.5rem); }

  .hero-sub { max-width: 34ch; }

  /* Il blocco di testo e' piu' stretto della sua colonna: appoggiato al bordo
     sinistro lasciava un vuoto largo fra lui e le righe. Centrato nella
     colonna (il testo resta allineato a sinistra) sta in mezzo fra il bordo
     della pagina e le schede. In verticale lo centra gia' align-items della
     griglia .home. */
  .copertina .hero { justify-self: center; }

  /* Footer attaccato al fondo: senza il distacco verticale che serviva quando
     la pagina scorreva. Nelle categorie la pagina scorre, quindi il distacco
     serve e resta quello di base. */
  .copertina .site-foot { margin-top: 0; }
}


/* ============================================================================
   9c. COPERTINA SU TELEFONO
   Sotto i 48rem la copertina deve stare in una schermata sola: saluto, titolo
   e tutte e tre le righe visibili senza scorrere, perche' le righe sono l'unica
   cosa da fare nella pagina e l'ultima non deve restare sotto il bordo.

   Con le misure di base non ci stava: sono pensate per respirare, e su 390px
   di larghezza la terza riga finiva fuori. Qui si stringe solo lo spazio
   verticale (imbottiture, margini, corpo dei testi), senza togliere niente.
   Il footer invece non deve starci: resta sotto, a scorrimento.

   E' un max-width, l'opposto del resto del foglio che e' mobile-first: le
   stesse misure compatte, se fossero quelle di base, andrebbero poi annullate
   una per una nelle pagine di categoria e sul tablet. Limitarle a
   body.copertina + telefono e' piu' corto e non tocca nessun'altra pagina.
   ============================================================================ */

@media (max-width: 47.999rem) {

  .copertina .site-head { padding-top: 0.4rem; padding-bottom: 0.4rem; }

  /* Senza la riga di saluto il titolo starebbe incollato alla barra: un po'
     piu' d'aria sopra lo stacca, recuperando parte dello spazio liberato. */
  .copertina .hero { padding-top: 1.1rem; padding-bottom: 0.8rem; }

  .copertina .hero-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }

  .copertina .hero-sub {
    margin-top: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.45;
  }

  /* Con "(clicca qui)" la riga e' piu' lunga: un corpo appena piu' piccolo la
     tiene su una riga sola da 360px in su. */
  .copertina .hero-cerca { margin-top: 0.55rem; font-size: 0.75rem; }

  /* Le righe: meno aria dentro e fra l'una e l'altra, numero e cerchio un
     gradino piu' piccoli. Il titolo resta la cosa piu' grande della riga. */
  .copertina .sezioni { gap: 0.5rem; }

  .copertina .sezioni .card-inner {
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    padding: 0.6rem 1rem;
    /* Quando la riga cresce per riempire la schermata (vedi .home piu' sotto)
       titolo, descrizione e conteggio restano un blocco unico al centro:
       senza questo le tre righe interne si allontanano l'una dall'altra. */
    align-content: center;
  }

  .copertina .card-num { font-size: 1.9rem; }
  .copertina .card-title { font-size: 1.25rem; }
  .copertina .card-desc { font-size: 0.85rem; line-height: 1.4; }
  .copertina .card-meta { margin-top: 0.2rem; font-size: 0.6875rem; }

  .copertina .card-vai {
    width: 2.4rem;
    height: 2.4rem;
  }

  /* La prima schermata e' tutta di saluto e righe: .home e' alta almeno quanto
     la finestra meno la barra (4rem: la pillola piu' le sue due imbottiture),
     e le tre righe si spartiscono in parti uguali l'altezza che avanza sotto
     l'hero. Su un telefono alto le righe crescono invece di lasciare un vuoto;
     su uno basso il minimo e' gia' superato e non cambia niente.

     Il footer resta fuori: comincia subito sotto il bordo e si raggiunge
     scorrendo. Non deve rubare spazio alle righe per farsi vedere. */
  .copertina .home {
    display: flex;
    flex-direction: column;
    min-height: calc(100svh - 4rem);
  }

  .copertina .sezioni {
    flex: 1;
    grid-auto-rows: 1fr;
    width: 100%;
    padding-bottom: 0.75rem;
  }

  .copertina .site-foot { margin-top: 0; }
}

/* Telefoni bassi (o con la barra del browser che mangia altezza): sotto i
   44rem di altezza nemmeno le misure compatte bastano. La soglia segue la
   descrizione piu' lunga, quella dei progetti scolastici, che su 390px di
   larghezza occupa tre righe: con quella la terza scheda sta dentro solo da
   704px di altezza in su. Si rinuncia alla
   descrizione delle righe, che ripete in piccolo cio' che il titolo dice gia':
   resta nel documento per i lettori di schermo, sparisce solo alla vista. */
@media (max-width: 47.999rem) and (max-height: 43.999rem) {

  .copertina .card-desc {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .copertina .hero-sub { font-size: 0.9rem; }
}

/* Telefoni stretti (320px): "Progetti scolastici" andava su due righe e ogni
   riga cresceva di un terzo. Un gradino in meno al titolo lo tiene su una. */
@media (max-width: 22.49rem) {
  .copertina .card-title { font-size: 1.05rem; }
  .copertina .card-num { font-size: 1.6rem; }
  .copertina .hero-sub { font-size: 0.85rem; }
}


/* ============================================================================
   10. ANIMAZIONI DI ENTRATA
   Gli elementi con data-reveal partono trasparenti e leggermente in basso.
   script.js aggiunge .is-in quando entrano nella finestra.
   ============================================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Il transform di .is-in e quello di :hover vivono sulla stessa proprieta':
   questa regola, piu' specifica, garantisce che il sollevamento vinca. */
.card.is-in:hover { transform: translateY(-5px); }

/* Stesso problema per le righe della copertina, che in hover avanzano invece
   di sollevarsi: serve un selettore ancora piu' specifico della riga sopra. */
.sezioni .card.is-in:hover { transform: translateX(8px); }

/* Chi ha chiesto meno movimento al sistema operativo riceve la pagina ferma:
   niente entrate, niente pulsazione, niente scorrimento animato. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
}