/* Sito di Danilo Aprigliano — foglio di stile unico.
   DIREZIONE «APPARATO»: una pagina di edizione critica, non un portfolio.
   Un solo colore (la rubrica), due caratteri (Vollkorn e Space Mono),
   la colonna di margine per le parole di servizio, le note numerate.

   Copre tutte le pagine che caricano questo foglio: ritratto, sezioni,
   schede, indice cronologico, profilo, curriculum. L'archivio degli
   articoli ha il suo foglio, stile-articoli.css, con gli stessi token.

   Struttura richiesta dalla home (solo lì):
   1. <div class="testata-nome"> intorno al ritratto e a <h1 class="nome">;
   2. <sup class="rimando"><a href="#n1">1</a></sup> per i richiami nel testo;
   3. data-mestiere="docente" su <a class="porta">: la parola nel margine
      viene da lì, con content:attr(), senza elementi in più;
   4. <span class="rimando-pagina">IA a scuola</span> in coda a .porta-testo.
   Tutte le altre pagine funzionano senza ritocchi. */

/* ============================================================
   1. TOKEN
   ============================================================ */
:root{
  /* carta e inchiostro */
  --carta:#FBFAF8;
  --carta-alt:#F2F0EC;
  --inchiostro:#14120F;
  --grigio-1:#57524A;
  --grigio-2:#736C60;
  --grigio-3:#797267;  /* 4.56:1 su carta: regge anche a corpo piccolo */
  /* rubrica: l'unico colore del sito */
  --rubrica:#A81E12;
  --rubrica-forte:#8C1810;
  /* i tre colori vecchi restano definiti perche' non si rompa nulla */
  --ciano:#A81E12;
  --ciano-forte:#8C1810;
  --magenta:#A81E12;
  --giallo:#A81E12;
  --filo:rgba(20,18,15,.14);
  --filo-forte:rgba(20,18,15,.28);
  --filo-tenue:rgba(20,18,15,.07);

  --serif:'Vollkorn',Georgia,'Times New Roman',serif;
  --mono:'Space Mono','SFMono-Regular',Consolas,monospace;

  /* tipografia */
  --t-mono:12px;      /* apparato, etichette, indirizzi */
  --t-mono-s:11.5px;  /* margine, colofone */
  --t-1:13px;
  --t-2:15px;
  --t-3:17.5px;       /* nota, paragrafo di scheda */
  --t-4:18px;         /* corpo di lettura */
  --t-5:20px;         /* lemma */
  --t-6:22px;         /* titolo di scheda piccolo */
  --t-7:28px;         /* il testo della home */
  --t-8:32px;         /* il nome in testata */
  --t-9:44px;         /* titolo di pagina */

  /* spaziature */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:22px;
  --s-6:28px; --s-7:40px; --s-8:56px; --s-9:64px; --s-10:96px;

  --margine:104px;    /* la colonna delle parole di mestiere */
  --misura:66ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --carta:#100F0D;
    --carta-alt:#1A1815;
    --inchiostro:#EDE8DE;
    --grigio-1:#B0A899;
    --grigio-2:#8B8375;
    --grigio-3:#8B8375;
    --rubrica:#F0705F;
    --rubrica-forte:#F58C7D;
    --ciano:#F0705F;
    --ciano-forte:#F58C7D;
    --magenta:#F0705F;
    --giallo:#F0705F;
    --filo:rgba(237,232,222,.16);
    --filo-forte:rgba(237,232,222,.32);
    --filo-tenue:rgba(237,232,222,.08);
  }
}
:root[data-theme="dark"]{
  --carta:#100F0D;
  --carta-alt:#1A1815;
  --inchiostro:#EDE8DE;
  --grigio-1:#B0A899;
  --grigio-2:#8B8375;
  --grigio-3:#8B8375;
  --rubrica:#F0705F;
  --rubrica-forte:#F58C7D;
  --ciano:#F0705F;
  --ciano-forte:#F58C7D;
  --magenta:#F0705F;
  --giallo:#F0705F;
  --filo:rgba(237,232,222,.16);
  --filo-forte:rgba(237,232,222,.32);
  --filo-tenue:rgba(237,232,222,.08);
}

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

body{
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--serif);
  font-size:var(--t-4);line-height:1.68;font-weight:400;
  margin:0;padding:0 clamp(20px,5vw,64px) var(--s-10);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  /* un indirizzo web lungo e' una parola sola: senza questo sfonda la
     pagina e il telefono rimpicciolisce tutto per farcelo stare */
  overflow-wrap:break-word;
}
.foglio{max-width:1080px;margin:0 auto;padding-top:var(--s-5)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;line-height:1.12;margin:0;text-wrap:balance}
a{color:var(--rubrica);text-decoration:none}
a:hover{color:var(--rubrica-forte);border-bottom:1px solid currentColor}
a:focus-visible{outline:2px solid var(--rubrica);outline-offset:3px;border-bottom:0}
::selection{background:color-mix(in oklab,var(--rubrica) 22%,transparent)}
em{font-style:italic}

/* i filetti pesanti non servono piu': ne resta uno, sopra le note */
.filo-6{height:3px;background:var(--inchiostro)}
.filo-3{height:1px;background:var(--inchiostro)}
.filo-1{height:1px;background:var(--filo)}
.filo-t{height:1px;background:var(--filo-tenue)}

/* ============================================================
   2. TESTATA: nome, ritratto, mestieri, navigazione
   ============================================================ */
.testata{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-6);
  justify-content:space-between;align-items:baseline;
  padding:var(--s-5) 0 0;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-2);
}
.testata .centro{color:var(--grigio-2);letter-spacing:.1em}

/* il blocco nome + ritratto (aggiunta 1) */
.testata-nome{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:0 var(--s-5);align-items:center;
  margin-top:var(--s-6);
}
.testata-nome .ritratto{grid-column:1;grid-row:1}
.testata-nome .nome,.testata-nome .nome-piccolo{grid-column:2;grid-row:1;margin:0}

/* il ritratto in bianco e nero, come tutte le fotografie del sito:
   il rosso della rubrica resta l'unico colore della pagina */
.ritratto{
  width:64px;height:64px;max-width:64px;aspect-ratio:1/1;
  border-radius:50%;object-fit:cover;justify-self:start;
  background:none;
  filter:grayscale(1) contrast(1.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ritratto{filter:grayscale(1) contrast(1.02) brightness(.92)}
}
:root[data-theme="dark"] .ritratto{filter:grayscale(1) contrast(1.02) brightness(.92)}

.nome{
  font-size:var(--t-8);line-height:1.06;letter-spacing:-.022em;font-weight:600;
  margin:var(--s-6) 0 0;
}
.nome-piccolo{font-size:var(--t-6);font-weight:600;letter-spacing:-.014em;margin:var(--s-6) 0 0;line-height:1.15}
.nome-piccolo a,.nome a{color:var(--inchiostro);border:0}
.nome-piccolo a:hover,.nome a:hover{color:var(--rubrica);border:0}

/* i quattro mestieri sotto il nome */
.qualifiche{
  display:block;
  font-family:var(--mono);font-size:var(--t-mono);font-style:normal;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-2);
  margin-top:7px;
}

/* la navigazione: parole, mai sigle. Regge le etichette inglesi
   perche' va a capo e non tronca nulla */
.navsito{
  display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-6);
  margin:var(--s-5) 0 0;
  border-bottom:1px solid var(--inchiostro);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  text-transform:lowercase;
}
.navsito a{
  color:var(--grigio-1);padding:var(--s-2) 0 6px;
  border-bottom:2px solid transparent;min-height:36px;
  display:inline-flex;align-items:center;
}
.navsito a:hover{color:var(--inchiostro);border-bottom-color:var(--filo-forte)}
.navsito a.qui{color:var(--rubrica);border-bottom-color:var(--rubrica)}

/* ============================================================
   3. IL TESTO DELLA HOME
   Un paragrafo unico, capolettera rubricato di tre righe fatto
   con ::first-letter (nessun markup), richiami in apice.
   ============================================================ */
.cappello{
  display:grid;
  grid-template-columns:var(--margine) minmax(0,1fr) 200px;
  gap:var(--s-6) var(--s-7);align-items:start;
  margin-top:var(--s-8);
}
/* l'etichetta di margine cambia con la lingua della pagina */
[lang="en"] .cappello::before{content:"The text"}
.cappello::before{
  content:"Il testo";
  grid-column:1;grid-row:1;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-2);
  padding-top:9px;
}
.cappello .sommario{
  grid-column:2;grid-row:1;
  margin:0;font-size:var(--t-7);line-height:1.5;max-width:42ch;
  letter-spacing:-.008em;
}
.cappello .sommario::first-letter{
  float:left;font-size:74px;line-height:.79;font-weight:600;
  color:var(--rubrica);padding:7px 12px 0 0;letter-spacing:-.03em;
}
.rimando{font-family:var(--mono);font-size:.4em;vertical-align:super;padding-left:1px}
.rimando a{color:var(--rubrica);border:0}
.rimando a:hover{border:0;color:var(--rubrica-forte)}

.blocco-contatti{
  grid-column:2;grid-row:2;
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-6);align-items:baseline;
  font-family:var(--mono);font-size:var(--t-1);line-height:1.6;
}
.etichetta{
  flex-basis:100%;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--grigio-2);
}
.blocco-contatti a{
  border-bottom:1px solid var(--filo);padding-bottom:2px;
  width:fit-content;max-width:100%;overflow-wrap:anywhere;
}
.blocco-contatti a:hover{border-bottom-color:currentColor}

/* la nota di margine, in terza colonna */
.cappello .margine{
  grid-column:3;grid-row:1;
  font-family:var(--mono);font-size:var(--t-mono-s);line-height:1.75;
  color:var(--grigio-1);
}

/* ============================================================
   4. LE NOTE = LE SEI PORTE
   Tre colonne: parola del mestiere (da data-mestiere), numero, voce.
   Il numero si conta da solo; la parentesi quadra la mette il CSS.
   ============================================================ */
.indice{margin-top:var(--s-9);counter-reset:nota}
.indice .titolo-blocco,.porte-titolo{
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-2);
  padding:var(--s-3) 0;border-top:3px solid var(--inchiostro);
  display:flex;justify-content:space-between;gap:var(--s-6);
}
.porte-titolo .rub{color:var(--rubrica)}

body{counter-reset:nota}
/* blocco, non griglia: lemma e nota devono scorrere come un unico
   testo, e i due segni di margine stanno in posizione assoluta.
   Con la griglia sarebbero due celle e si sovrapporrebbero. */
.porta{
  display:block;position:relative;
  padding:var(--s-5) 0 var(--s-5) calc(var(--margine) + 46px);
  border-bottom:1px solid var(--filo-tenue);
  color:inherit;counter-increment:nota;
}
.porta:first-of-type{border-top:1px solid var(--filo-tenue)}
.porta::before{
  content:attr(data-mestiere);
  position:absolute;left:0;top:calc(var(--s-5) + 7px);width:var(--margine);
  font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.08em;text-transform:uppercase;color:var(--grigio-2);
}
.porta::after{
  content:counter(nota);
  position:absolute;left:var(--margine);top:calc(var(--s-5) + 6px);
  width:26px;text-align:right;
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--rubrica);
}
.porta-titolo{
  display:inline;
  font-size:var(--t-5);font-weight:600;letter-spacing:-.01em;
}
.porta-titolo::after{
  content:"]";font-family:var(--mono);font-size:15px;
  color:var(--rubrica);padding:0 10px;font-weight:400;
}
.porta-testo{
  display:inline;margin:0;
  font-size:var(--t-3);line-height:1.68;color:var(--grigio-1);
}
.rimando-pagina{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;
  color:var(--rubrica);white-space:nowrap;
}
.rimando-pagina::after{content:" \2192"}
.porta:hover .porta-titolo{color:var(--rubrica)}
.porta:hover .rimando-pagina{color:var(--rubrica-forte)}

/* indice storico (.voce): stessa forma */
.voce{
  display:grid;grid-template-columns:var(--margine) minmax(0,1fr);
  gap:var(--s-2) 20px;padding:var(--s-5) 0;
  border-bottom:1px solid var(--filo-tenue);color:inherit;
}
.voce-num{
  font-family:var(--mono);font-size:var(--t-mono-s);font-weight:700;
  letter-spacing:.08em;color:var(--rubrica);
}
.voce-titolo{font-size:var(--t-5);font-weight:600;line-height:1.2;max-width:26ch}
.voce-glossa{grid-column:2;font-size:var(--t-3);line-height:1.68;color:var(--grigio-1);max-width:var(--misura)}
.voce:hover .voce-titolo{color:var(--rubrica)}

.chiusura{
  margin:var(--s-7) 0 0;max-width:76ch;
  font-family:var(--mono);font-size:var(--t-1);line-height:1.8;
  color:var(--grigio-1);
}
/* solo quando la chiusura contiene altri blocchi diventa una griglia:
   se è un <p> con il testo dentro, resta un paragrafo e non finisce
   schiacciata nella colonna del margine */
div.chiusura{
  display:grid;grid-template-columns:var(--margine) minmax(0,1fr);
  gap:0 var(--s-7);max-width:none;
}
div.chiusura > *{grid-column:2;max-width:76ch}

/* ============================================================
   5. PAGINE INTERNE
   Nessun buco: la parola del mestiere occupa il margine e il
   titolo attacca subito. Fra occhiello e primo blocco 48 px.
   ============================================================ */
.titolo-pagina{
  font-size:clamp(30px,4.6vw,var(--t-9));font-weight:600;
  letter-spacing:-.02em;line-height:1.12;
  margin:var(--s-8) 0 var(--s-4);max-width:26ch;
}
.occhiello-pagina{
  font-size:var(--t-6);line-height:1.56;color:var(--grigio-1);
  max-width:48ch;margin:0 0 var(--s-7);
}
.sezione{margin-top:var(--s-10);scroll-margin-top:20px}
.sezione:first-of-type{margin-top:var(--s-8)}
.capo{
  display:grid;grid-template-columns:var(--margine) minmax(0,1fr);
  gap:0 var(--s-7);align-items:start;
}
.capo-num{
  font-family:var(--mono);font-size:var(--t-mono-s);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rubrica);
  padding-top:12px;
}
.capo h2{font-size:clamp(26px,3.4vw,36px);line-height:1.14;max-width:24ch}
.capo .occhio{margin:var(--s-4) 0 0;max-width:48ch;color:var(--grigio-1);font-size:var(--t-3);line-height:1.68}
.corpo{
  display:grid;grid-template-columns:var(--margine) minmax(0,1fr);
  gap:0 var(--s-7);margin-top:var(--s-7);
}
.corpo > .interno{min-width:0}

/* mai piu' tre colonne giustificate */
.colonne{columns:1;column-gap:0;text-align:left;hyphens:none;max-width:var(--misura)}
.colonne p{margin:0 0 1.1em}
.colonne p:last-child{margin-bottom:0}
.unica{max-width:var(--misura)}
.unica p{margin:0 0 1.1em}
.unica p:last-child{margin-bottom:0}

blockquote{
  margin:var(--s-9) 0;padding:0;border:0;max-width:32ch;
  font-size:clamp(21px,2.4vw,27px);line-height:1.4;font-style:italic;
  color:var(--inchiostro);
}
blockquote p{margin:0 0 var(--s-3)}
blockquote .fonte{
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--rubrica);
}

/* ============================================================
   6. LE SCHEDE — voci d'apparato: lemma, quadra, dati, paragrafo
   Regge i paragrafi lunghi perche' la misura e' chiusa a 66ch e
   la data sta nel margine, non a fianco del titolo.
   ============================================================ */
.progetti{border-top:3px solid var(--inchiostro);margin-top:var(--s-5)}
.progetto{
  display:block;position:relative;
  padding:var(--s-6) 0 var(--s-6) calc(var(--margine) + var(--s-7));
  border-bottom:1px solid var(--filo-tenue);
}
.progetto:last-child{border-bottom:1px solid var(--filo-forte)}
/* inline, non blocco: un contenitore di blocco chiuderebbe la riga
   e manderebbe .dove a capo, spezzando il «titolo ] dati» */
.progetto .capo-p{display:inline}
.progetto h3{
  display:inline;font-size:var(--t-6);font-weight:600;letter-spacing:-.012em;
}
.progetto h3::after{
  content:"]";font-family:var(--mono);font-size:15px;font-weight:400;
  color:var(--rubrica);padding:0 10px;
}
/* la data va nel margine, in prima colonna */
.progetto .genere{
  position:absolute;left:0;top:calc(var(--s-6) + 7px);width:var(--margine);
  font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.08em;text-transform:uppercase;color:var(--grigio-2);
  line-height:1.7;
}
.progetto .dove{
  display:inline;margin:0;max-width:var(--misura);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--grigio-1);
  overflow-wrap:anywhere;
}
.progetto p.testo{
  margin:var(--s-3) 0 0;
  font-size:var(--t-3);line-height:1.7;max-width:var(--misura);
}

.scheda{border-top:3px solid var(--inchiostro);border-bottom:0;padding:var(--s-6) 0 0}
.scheda-testa{display:block}
.scheda-testa h3{display:inline;font-size:var(--t-6);line-height:1.2;letter-spacing:-.016em}
.scheda-testa h3::after{
  content:"]";font-family:var(--mono);font-size:15px;font-weight:400;
  color:var(--rubrica);padding:0 10px;
}
.scheda-data{
  font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.08em;text-transform:uppercase;color:var(--grigio-2);
  white-space:nowrap;
}
.scheda-ente{
  margin:var(--s-3) 0 0;font-family:var(--mono);font-size:12.5px;
  line-height:1.6;color:var(--grigio-1);max-width:70ch;
}

/* le cifre: una riga di dati, senza riquadri */
.cifre{
  display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);align-items:baseline;
  margin:var(--s-7) 0;padding:0;border:0;
}
.cifra{display:flex;align-items:baseline;gap:var(--s-3);max-width:24ch}
.cifra .valore{
  font-size:var(--t-6);line-height:1;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:lining-nums tabular-nums;color:var(--rubrica);
}
.cifra .didascalia{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--grigio-1)}

.tappe{margin:var(--s-6) 0;padding:0;list-style:none;border:0}
.tappe li{padding:0 0 var(--s-5);border:0;font-size:var(--t-3);line-height:1.7;max-width:var(--misura)}
.tappe li:last-child{padding-bottom:0}
.tappe strong{font-weight:600;color:var(--inchiostro)}
.chiusa{
  font-family:var(--mono);font-size:var(--t-mono);line-height:1.85;
  color:var(--grigio-1);margin:var(--s-6) 0 0;max-width:72ch;
}

/* ============================================================
   7. METODO E FORMATI — nessuna cella, solo vuoto
   ============================================================ */
.passi{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-8) var(--s-7);background:none;border:0;margin-top:var(--s-6);
}
.passo{background:none;padding:0}
.passo .quando{
  font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.1em;text-transform:uppercase;color:var(--rubrica);
  margin-bottom:var(--s-3);
}
.passo h3{font-size:var(--t-5);line-height:1.24;margin-bottom:var(--s-3)}
.passo p{margin:0;font-size:var(--t-2);line-height:1.66;color:var(--grigio-1);max-width:44ch}

.formati{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-8) var(--s-7);border:0;padding-top:var(--s-6);
}
.formato .genere{
  font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-2);
  margin-bottom:var(--s-3);
}
.formato h3{font-size:var(--t-5);line-height:1.22;margin-bottom:var(--s-3)}
.formato p{margin:0;font-size:var(--t-2);line-height:1.66;color:var(--grigio-1)}
.formato .durata{
  margin-top:var(--s-4);padding:0;border:0;
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.07em;
  text-transform:uppercase;color:var(--grigio-3);
}

/* ============================================================
   8. SCRITTI E ARCHIVIO
   La data sta nel margine, come nelle schede. L'anno resta in
   alto mentre si scorre: position:sticky, nessuno script.
   ============================================================ */
.scritti{margin:0;padding:0;list-style:none;border-top:3px solid var(--inchiostro)}
.scritti li{
  display:grid;grid-template-columns:var(--margine) minmax(0,1fr);
  gap:var(--s-2) var(--s-7);align-items:baseline;
  padding:var(--s-5) 0;border-bottom:1px solid var(--filo-tenue);
}
.scritti li:last-child{border-bottom:1px solid var(--filo-forte)}
.scritti .sede{
  /* occupa le due righe: se va a capo non spinge in basso la glossa */
  grid-column:1;grid-row:1/span 2;text-align:left;
  font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.08em;text-transform:uppercase;color:var(--grigio-2);
}
.scritti .titolo{grid-column:2;grid-row:1;font-size:var(--t-5);line-height:1.28;font-weight:600;letter-spacing:-.012em}
.scritti .titolo a{color:inherit;border-bottom:1px solid var(--filo)}
.scritti .titolo a:hover{color:var(--rubrica);border-bottom-color:currentColor}
.scritti .glossa{
  grid-column:2;margin:0;font-size:var(--t-3);line-height:1.68;
  color:var(--grigio-1);max-width:var(--misura);
}
.gruppo-titolo{
  position:sticky;top:0;z-index:2;background:var(--carta);
  font-family:var(--mono);font-size:var(--t-mono);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rubrica);
  margin:var(--s-10) 0 var(--s-4);padding:var(--s-3) 0;
  border-bottom:1px solid var(--filo);
}
.gruppo-scritti > .gruppo-titolo:first-child{margin-top:0}

/* ============================================================
   9. PROFILO
   ============================================================ */
.profilo{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-9);
  border-top:3px solid var(--inchiostro);padding-top:var(--s-6);
}
.blocco h3{
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--rubrica);
  margin-bottom:var(--s-4);
}
.blocco ul{margin:0;padding:0;list-style:none;max-width:var(--misura)}
.blocco li{
  font-size:var(--t-3);line-height:1.68;color:var(--grigio-1);
  padding:0 0 var(--s-4);border:0;
}
.blocco li:last-child{padding-bottom:0}
.blocco li strong{color:var(--inchiostro);font-weight:600}

/* ============================================================
   10. ARTICOLI D'ARCHIVIO (lettura lunga)
   ============================================================ */
.unica h2,.foglio > h2{font-size:clamp(23px,2.6vw,var(--t-6));line-height:1.24;margin:var(--s-9) 0 var(--s-4);max-width:30ch}
.unica h3{font-size:var(--t-5);margin:var(--s-8) 0 var(--s-3);max-width:34ch}
.unica ul,.unica ol{margin:0 0 1.1em;padding-left:1.2em}
.unica li{margin:0 0 .5em}
.unica figure{margin:var(--s-9) 0}
.unica figure img{max-width:100%;height:auto;filter:grayscale(1) contrast(1.08)}
.unica figcaption{
  font-family:var(--mono);font-size:var(--t-mono-s);line-height:1.65;
  color:var(--grigio-2);margin-top:var(--s-3);max-width:48ch;
}
.unica a{border-bottom:1px solid var(--filo)}

/* ============================================================
   11. IL COLOFONE (al posto del piede)
   La D rubricata la mette il CSS: nessun elemento, nessuna immagine.
   ============================================================ */
footer{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;
  gap:0 var(--s-5);align-items:center;
  margin-top:var(--s-10);padding-top:var(--s-5);
  border-top:1px solid var(--inchiostro);
  font-family:var(--mono);font-size:var(--t-mono-s);line-height:1.8;
  letter-spacing:.03em;text-transform:none;color:var(--grigio-2);
}
/* la lettera è la stessa dell'icona del sito: iniziale del cognome */
footer::before{
  content:"A";
  width:40px;height:40px;background:var(--rubrica);color:var(--carta);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:29px;font-weight:600;line-height:1;
  letter-spacing:-.04em;padding-bottom:3px;
}
footer .colofone{grid-column:2}
footer .servizi{grid-column:3;text-align:right}
footer a{border-bottom:1px solid transparent}
footer a:hover{border-bottom-color:currentColor}

.su{display:flex;justify-content:flex-start;margin-top:var(--s-6)}
.su a{
  display:inline-flex;align-items:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-3) 0;
  font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--grigio-2);
  border-bottom:1px solid transparent;
}
.su a:hover{color:var(--rubrica);border-bottom-color:currentColor}
.su svg{width:12px;height:12px;flex:none}

/* ============================================================
   12. ADATTAMENTO — il telefono non e' il desktop stretto
   ============================================================ */
@media (max-width:900px){
  :root{--margine:88px}
  .cappello{grid-template-columns:var(--margine) minmax(0,1fr);gap:var(--s-6) var(--s-7)}
  .cappello .margine{grid-column:2;grid-row:3}
  .passi,.formati{grid-template-columns:1fr;gap:var(--s-8)}
}
@media (max-width:700px){
  :root{
    --t-7:23px;--t-8:27px;--t-9:32px;--t-6:20px;--t-5:19px;
    --s-10:64px;--s-9:48px;--s-8:36px;
  }
  body{font-size:17.5px;padding-bottom:var(--s-9)}
  /* i quattro mestieri stanno gia' sotto il nome e nel colofone: in
     testata, sul telefono, occupano due righe e non dicono nulla di nuovo */
  .testata{gap:var(--s-1) var(--s-4);font-size:11.5px;letter-spacing:.08em}
  .testata .centro{display:none}
  .testata-nome{grid-template-columns:48px minmax(0,1fr);gap:0 var(--s-4)}
  .ritratto{width:48px;height:48px;max-width:48px}
  .navsito{gap:0 var(--s-5);font-size:12px}

  /* il margine sparisce: le etichette salgono sopra il testo */
  .cappello{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
  .cappello::before{grid-column:1;grid-row:1;padding-top:0}
  .cappello .sommario{grid-column:1;grid-row:2;max-width:none}
  .cappello .sommario::first-letter{font-size:58px;padding:5px 10px 0 0}
  .blocco-contatti{grid-column:1;grid-row:3;flex-direction:column;gap:var(--s-2)}
  .cappello .margine{grid-column:1;grid-row:4}

  /* la nota: mestiere e numero in linea sopra il lemma */
  .porta{padding:calc(var(--s-6) + 22px) 0 var(--s-6);position:relative}
  .porta::before{position:absolute;left:0;top:var(--s-6);width:auto}
  .porta::after{position:absolute;left:auto;right:0;top:var(--s-6);width:auto;text-align:right}

  .voce{grid-template-columns:minmax(0,1fr)}
  .voce-glossa{grid-column:1}
  .capo,.corpo,.chiusura{grid-template-columns:1fr;gap:0}
  .capo-num{padding-top:0;margin-bottom:var(--s-3)}
  .corpo{margin-top:var(--s-5)}
  .chiusura > *{grid-column:1}
  .progetto{padding:calc(var(--s-6) + 22px) 0 var(--s-6)}
  .progetto .genere{position:absolute;left:0;top:var(--s-6);width:auto}
  .scritti li{grid-template-columns:minmax(0,1fr)}
  .scritti .sede{grid-column:1;grid-row:1}
  .scritti .titolo{grid-column:1;grid-row:2}
  .scritti .glossa{grid-column:1}
  .cifre{flex-direction:column;gap:var(--s-4)}
  .cifra{max-width:none}
  .cifra .valore{min-width:2.6em}
  blockquote{max-width:none;font-size:21px}
  footer{grid-template-columns:40px minmax(0,1fr);gap:var(--s-4) var(--s-4)}
  footer .servizi{grid-column:1/-1;text-align:left}
}


/* ============================================================
   13. QUANDO IL MARGINE NON SERVE
   Alcune pagine (curriculum, tutto) usano tutta la larghezza.
   ============================================================ */
.corpo.senza-rail{grid-template-columns:minmax(0,1fr)}
.lingua-voce{
  font-family:var(--mono);font-size:.72em;letter-spacing:.1em;
  color:var(--grigio-2);vertical-align:.1em;padding-left:3px;
}

/* i collegamenti dentro il testo continuo: nessuna sottolineatura di
   sistema, un filetto che si accende passandoci sopra */
.chiusura a,.chiusa a,.occhiello-pagina a,.occhio a,
.paragrafo-cv a,.dettagli-cv a,.titolo-cv a,.dove-cv a,
.porta-testo a,.glossa a,.blocco li a{
  border-bottom:1px solid var(--filo);
}
.chiusura a:hover,.chiusa a:hover,.occhiello-pagina a:hover,.occhio a:hover,
.paragrafo-cv a:hover,.dettagli-cv a:hover,.titolo-cv a:hover,.dove-cv a:hover,
.porta-testo a:hover,.glossa a:hover,.blocco li a:hover{
  border-bottom-color:currentColor;
}

/* ============================================================
   14. LA PAGINA DEL CURRICULUM
   Un curriculum si legge saltando: si cerca un anno, un titolo, un
   numero. Perciò il numero sta fuori dal rigo, nella colonna del
   margine, e ogni voce resta una riga sola finché non la si guarda.
   ============================================================ */
.anagrafica-cv{
  font-family:var(--mono);font-size:var(--t-1);line-height:1.9;
  color:var(--grigio-1);margin:0 0 var(--s-7);padding-bottom:var(--s-4);
  border-bottom:1px solid var(--filo-forte);
}
.anagrafica-cv a{color:var(--rubrica);border-bottom:1px solid var(--filo)}
.anagrafica-cv a:hover{border-bottom-color:currentColor}
.scarica-cv{
  font-weight:700;color:var(--rubrica)!important;
  border-bottom:2px solid var(--rubrica)!important;
}
h2.sezione-cv{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grigio-2);
  margin:var(--s-9) 0 var(--s-5);padding:var(--s-3) 0 0;
  border-top:3px solid var(--inchiostro);
}
h2.sezione-cv:first-of-type{margin-top:0}
.paragrafo-cv{
  max-width:var(--misura);margin:0 0 var(--s-4);
  font-size:var(--t-3);line-height:1.68;
}
ul.voci-cv{list-style:none;margin:0;padding:0}
li.sottotitolo-cv{
  font-family:var(--mono);font-size:var(--t-mono-s);letter-spacing:.1em;
  text-transform:uppercase;color:var(--rubrica);
  margin:var(--s-7) 0 var(--s-4);
}
li.voce-cv{
  position:relative;padding-left:56px;margin:0 0 var(--s-6);
  max-width:calc(var(--misura) + 56px);
}
.numero-cv{
  font-family:var(--mono);font-size:12.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--rubrica);
}
li.voce-cv > .numero-cv{position:absolute;left:0;top:5px}
.titolo-cv{display:block;font-weight:600;line-height:1.3;font-size:var(--t-5)}
.dove-cv{
  display:block;font-family:var(--mono);font-size:12.5px;line-height:1.6;
  color:var(--grigio-1);margin-top:var(--s-2);
}
.quando-cv{
  display:block;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.06em;color:var(--grigio-2);margin-top:var(--s-1);
}
ul.dettagli-cv{
  margin:var(--s-3) 0 0;padding-left:var(--s-4);
  font-size:var(--t-3);line-height:1.62;
}
ul.dettagli-cv li{margin-bottom:var(--s-2);color:var(--grigio-1)}
.link-cv{
  margin:var(--s-3) 0 0;font-family:var(--mono);font-size:var(--t-mono-s);
  letter-spacing:.03em;color:var(--grigio-2);overflow-wrap:anywhere;
}
/* dovunque si citi un indirizzo per esteso */
.dettagli-cv a,.scheda-ente a,.dove a,.glossa a,.chiusa a{overflow-wrap:anywhere}

@media (max-width:700px){
  li.voce-cv{padding-left:0}
  li.voce-cv > .numero-cv{position:static;display:inline-block;margin-right:var(--s-2)}
  .titolo-cv{display:inline}
}

/* ============================================================
   15. LA STAMPA
   Il PDF del curriculum si stampa da questa pagina: deve uscire
   senza la testata, la navigazione e il colofone.
   ============================================================ */
@media print{
  .testata,.navsito,.nome-piccolo,.testata-nome,.filo-6,.filo-1,.filo-3,
  footer,.chiusura,.su{display:none!important}
  body,.foglio{background:#fff;color:#000;max-width:none;padding:0;font-size:10.5pt}
  .titolo-pagina{font-size:24pt;margin:0 0 6px}
  .occhiello-pagina{font-size:9pt;color:#444;max-width:none}
  h2.sezione-cv{margin-top:18px;border-top-color:#000;page-break-after:avoid}
  /* una voce lunga puo' spezzarsi fra un punto e l'altro: se resta tutta
     intera lascia mezze pagine bianche. Il titolo, pero', non si stacca
     mai da quello che introduce. */
  li.voce-cv{page-break-inside:avoid;margin-bottom:10px}
  /* solo le voci lunghe possono spezzarsi: quelle brevi restano intere,
     e non si lascia mezza pagina bianca per far stare un elenco di sei punti */
  li.voce-cv:has(ul.dettagli-cv li:nth-child(6)){page-break-inside:auto}
  .titolo-cv,.dove-cv,.quando-cv,li.sottotitolo-cv{page-break-after:avoid}
  ul.dettagli-cv li{page-break-inside:avoid}
  .solo-schermo{display:none}
  .link-cv::before{content:"In rete: "}
  .numero-cv,.scarica-cv,.sottotitolo-cv{color:#000!important}
  .scarica-cv{display:none}
  a{color:#000;border:0!important}
}