/* ============================================================
   HOME – prova del 9 settembre 2026
   Blocco sperimentale, da appendere in coda a stile.css.
   Non modifica nessuna regola esistente: le sovrascrive.
   1. il ritratto passa dalla testata alla colonna del cappello
   2. le note salgono di un corpo
   ============================================================ */

/* 1. il ritratto in apertura ------------------------------- */
.testata-nome{grid-template-columns:minmax(0,1fr)}
.testata-nome .ritratto{display:none}
.testata-nome .nome{grid-column:1}

.cappello{grid-template-columns:var(--margine) minmax(0,1fr) 216px}
.figura-ritratto{
  grid-column:3;grid-row:1;margin:0;
  display:flex;flex-direction:column;gap:var(--s-3);
}
.figura-ritratto img{
  width:216px;height:216px;object-fit:cover;
  border-radius:50%;
  filter:grayscale(1) contrast(1.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .figura-ritratto img{filter:grayscale(1) contrast(1.02) brightness(.9)}
}
:root[data-theme="dark"] .figura-ritratto img{filter:grayscale(1) contrast(1.02) brightness(.9)}
.figura-ritratto figcaption{
  font-family:var(--mono);font-size:var(--t-mono-s);line-height:1.6;
  color:var(--grigio-2);letter-spacing:.02em;
  border-top:1px solid var(--filo-tenue);padding-top:var(--s-2);
}

/* 2. le note, un corpo più su ------------------------------ */
.porta-testo{font-size:var(--t-4);line-height:1.62}
.porta{padding-top:var(--s-6);padding-bottom:var(--s-6)}

/* 3. la fascia di documenti (solo variante B) -------------- */
.documenti{
  margin-top:var(--s-8);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-6) var(--s-7);
}
.documenti .rubrica-fascia{
  grid-column:1/-1;
  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);
}
.documenti .rubrica-fascia .rub{color:var(--rubrica)}
.documenti figure{margin:0;display:flex;flex-direction:column;gap:var(--s-3)}
.documenti img{
  width:100%;height:172px;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  background:var(--filo-tenue);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .documenti img{filter:grayscale(1) contrast(1) brightness(.88)}
}
:root[data-theme="dark"] .documenti img{filter:grayscale(1) contrast(1) brightness(.88)}
.documenti figcaption{
  font-size:var(--t-2);line-height:1.55;color:var(--grigio-1);
}
.documenti figcaption .fonte{
  display:block;margin-top:var(--s-2);
  font-family:var(--mono);font-size:var(--t-mono-s);color:var(--grigio-2);
}
.documenti a{border:0;color:inherit}
.documenti a:hover figcaption{color:var(--rubrica)}
.documenti a:hover img{filter:grayscale(0) contrast(1.02)}

@media (max-width:900px){
  .cappello{grid-template-columns:var(--margine) minmax(0,1fr)}
  .cappello .sommario{grid-column:2;grid-row:1}
  .figura-ritratto{grid-column:2;grid-row:2;flex-direction:row;gap:var(--s-5);align-items:center}
  .figura-ritratto img{width:132px;height:132px}
  .cappello .blocco-contatti{grid-column:2;grid-row:3}
  .documenti{grid-template-columns:minmax(0,1fr)}
  .documenti img{height:200px}
}
@media (max-width:620px){
  /* sul telefono il ritratto viene prima del testo: è la prima cosa
     che si vede dopo il nome, e il testo comincia subito sotto */
  .cappello{grid-template-columns:minmax(0,1fr)}
  .figura-ritratto{
    grid-column:1;grid-row:1;
    flex-direction:row;align-items:center;gap:var(--s-5);
  }
  .figura-ritratto img{width:112px;height:112px}
  .figura-ritratto figcaption{border-top:0;padding-top:0}
  .cappello::before{grid-column:1;grid-row:2;padding-top:0}
  .cappello .sommario{grid-column:1;grid-row:3}
  .cappello .blocco-contatti{grid-column:1;grid-row:4}
}

/* la testata di un giornale si mostra intera, non ritagliata */
.documenti .doc-testata img{object-fit:contain;padding:var(--s-5) 0;background:transparent}

/* ============================================================
   ORNAMENTI
   Fregi disegnati per questo sito, in SVG: ereditano il colore
   del testo, quindi valgono in chiaro e in scuro senza copie.
   ============================================================ */
.stacco{margin:var(--s-9) 0 var(--s-8);color:var(--grigio-2);opacity:.75}
.stacco .orn-filo{display:block;width:100%}
.figura-ritratto figcaption .orn-rosa{
  display:block;margin-bottom:var(--s-3);color:var(--rubrica);opacity:.85;
}
.finale{
  display:flex;justify-content:center;
  margin:var(--s-9) 0 var(--s-8);color:var(--grigio-2);opacity:.7;
}

/* ============================================================
   MARCHI E DOCUMENTI ACCANTO ALLE VOCI
   Solo dove la voce nomina davvero l'ente o la carta.
   Stanno nella colonna di margine, in bianco e nero come le
   fotografie: non sono decorazione, sono il riferimento.
   ============================================================ */
.marchio-sezione{
  display:block;width:calc(var(--margine) - 8px);height:auto;margin-top:var(--s-4);
  color:var(--grigio-1);opacity:.85;
}
.progetto{position:relative}
.marchio-scheda,.doc-scheda{
  position:absolute;left:0;top:calc(var(--s-6) + 30px);
  width:calc(var(--margine) - 12px);height:auto;
  filter:grayscale(1) contrast(1.05);opacity:.9;
}
.doc-scheda{top:calc(var(--s-6) + 32px)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .marchio-scheda,
  :root:not([data-theme="light"]) .doc-scheda{filter:grayscale(1) invert(1) contrast(.95);opacity:.8}
}
:root[data-theme="dark"] .marchio-scheda,
:root[data-theme="dark"] .doc-scheda{filter:grayscale(1) invert(1) contrast(.95);opacity:.8}
@media (max-width:720px){
  .marchio-scheda,.doc-scheda{position:static;width:120px;margin-bottom:var(--s-3)}
  .marchio-sezione{width:96px}
}

/* ============================================================
   SCHERMATE DEI SITI
   In terza colonna, a destra del testo: si vedono senza
   interrompere la lettura. In bianco e nero come le fotografie,
   a colori quando ci si passa sopra.
   ============================================================ */
/* la scheda che ospita una schermata lascia libera la colonna di destra:
   senza questo, il titolo e la riga dei dati ci passano sotto */
.progetto:has(.schermata){padding-right:280px}
/* browser senza :has(): l'immagine scende sotto il testo invece di
   sovrapporsi. Meglio una figura in colonna che una pagina rotta. */
@supports not (selector(:has(*))){
  .schermata{position:static;width:100%;max-width:420px;margin:var(--s-5) 0 0}
  .copertina{position:static;display:block;width:96px;margin:0 0 var(--s-3)}
}
.schermata{
  position:absolute;right:0;top:var(--s-6);
  width:248px;margin:0;
  display:flex;flex-direction:column;gap:var(--s-2);
}
.schermata img{
  width:100%;height:auto;display:block;
  border:1px solid var(--filo);
  filter:grayscale(1) contrast(1.03);
  transition:filter .25s;
}
.progetto:hover .schermata img{filter:grayscale(0) contrast(1)}
.schermata figcaption{
  font-family:var(--mono);font-size:var(--t-mono-s);color:var(--grigio-2);
  letter-spacing:.02em;overflow-wrap:anywhere;
}
.schermata-doc img{border:0;padding:var(--s-3) 0;filter:grayscale(1) contrast(1.1)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .schermata img{filter:grayscale(1) contrast(.96) brightness(.86)}
  :root:not([data-theme="light"]) .schermata-doc img{filter:grayscale(1) invert(1) contrast(.95)}
}
:root[data-theme="dark"] .schermata img{filter:grayscale(1) contrast(.96) brightness(.86)}
:root[data-theme="dark"] .schermata-doc img{filter:grayscale(1) invert(1) contrast(.95)}
@media (max-width:1180px){
  .progetto:has(.schermata){padding-right:0}
  .schermata{position:static;width:100%;max-width:420px;margin:var(--s-5) 0 0}
}

/* copertine dei libri, accanto alla voce bibliografica */
li:has(> .copertina){position:relative;padding-right:118px}
.copertina{
  position:absolute;right:0;top:2px;width:88px;height:auto;
  border:1px solid var(--filo);
  filter:grayscale(1) contrast(1.04);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .copertina{filter:grayscale(1) contrast(.95) brightness(.88)}
}
:root[data-theme="dark"] .copertina{filter:grayscale(1) contrast(.95) brightness(.88)}
.schermata-foto img{border:0}
@media (max-width:620px){
  li:has(> .copertina){padding-right:0}
  .copertina{position:static;display:block;width:96px;margin:0 0 var(--s-3)}
}

/* ============================================================
   LE MARCHE DI PAGINA E GLI SCHEMI
   Una marca incisa per ogni pagina, in testata; e, dove il sito
   dal vivo non si può mostrare, uno schema al tratto al posto
   della schermata. Tutto in SVG, che prende il colore del testo.
   ============================================================ */
.marca-testata{
  float:right;margin:var(--s-2) 0 var(--s-5) var(--s-7);
  color:var(--grigio-2);opacity:.9;
}
.marca-testata svg{display:block}

.schermata-schema .schema{
  width:100%;height:auto;display:block;
  border:1px solid var(--filo);
  padding:var(--s-4) var(--s-3);
  color:var(--grigio-1);
  box-sizing:border-box;
}
.progetto:hover .schermata-schema .schema{color:var(--rubrica)}

@media (max-width:720px){
  .marca-testata{margin:0 0 var(--s-4) var(--s-5)}
  .marca-testata svg{width:48px;height:48px}
}

/* lo schema come blocco, dove la scheda non ha colonna di destra */
.schema-blocco{margin:var(--s-5) 0 var(--s-2);max-width:440px}
.schema-blocco .schema{
  width:100%;height:auto;display:block;box-sizing:border-box;
  border:1px solid var(--filo);padding:var(--s-4) var(--s-3);color:var(--grigio-1);
}
.schema-blocco figcaption{
  margin-top:var(--s-2);
  font-family:var(--mono);font-size:var(--t-mono-s);color:var(--grigio-2);letter-spacing:.02em;
}

/* ============================================================
   EMBLEMI E FIGURE — terzo giro
   Un segno per ogni scheda, un emblema per ogni rubrica, e le
   figure grandi dove una cosa si capisce meglio disegnata.
   ============================================================ */
.emblema-scheda{
  position:absolute;left:0;top:calc(var(--s-6) + 24px);
  width:calc(var(--margine) - 6px);height:82px;
  color:var(--grigio-2);opacity:.9;
}
.progetto:hover .emblema-scheda{color:var(--rubrica)}

/* accanto ai titoli di gruppo: la riga diventa una fascia con il segno
   a destra. .gruppo-titolo è sticky, quindi niente float qui dentro. */
.gruppo-titolo{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5)}
.emblema-gruppo{width:74px;height:62px;flex:none;color:var(--grigio-2);opacity:.85}
/* nelle rubriche del profilo il segno sta a destra e il testo gli scorre accanto */
.emblema-rubrica{
  float:right;width:92px;height:76px;
  margin:0 0 var(--s-3) var(--s-5);
  color:var(--grigio-2);opacity:.85;
}

/* la figura larga: la linea del tempo del curriculum */
.schema-largo{margin:var(--s-6) 0 var(--s-8);max-width:none}
.schema-largo .schema{
  width:100%;height:auto;display:block;box-sizing:border-box;
  border:1px solid var(--filo);padding:var(--s-5) var(--s-4);
  color:var(--grigio-1);
}
.schema-largo figcaption{
  margin-top:var(--s-2);
  font-family:var(--mono);font-size:var(--t-mono-s);color:var(--grigio-2);letter-spacing:.02em;
}

@media (max-width:720px){
  .emblema-scheda{position:static;width:74px;margin-bottom:var(--s-3)}
  .emblema-gruppo,.emblema-rubrica{width:48px;height:40px;margin-left:var(--s-4)}
  .schema-largo .schema{padding:var(--s-3) var(--s-2)}
}

/* ============================================================
   IL MOVIMENTO
   Nessuno script: sono animazioni CSS, brevi, che accompagnano
   la prima lettura e poi spariscono. Tutto sta dentro
   prefers-reduced-motion: no-preference, così chi ha chiesto al
   sistema di ridurre le animazioni – e chi usa un browser che non
   le sostiene – vede la pagina ferma e completa.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  @keyframes sale{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
  @keyframes appare{from{opacity:0}to{opacity:1}}
  @keyframes scrive{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes capolettera{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}

  .foglio > .testata,
  .foglio > .testata-nome,
  .foglio > .navsito,
  .cappello .sommario,
  .figura-ritratto,
  .cappello .blocco-contatti,
  .porte-titolo,
  .porta,
  .chiusura{
    animation:sale .62s cubic-bezier(.22,.61,.36,1) both;
  }
  .foglio > .testata{animation-delay:.02s}
  .foglio > .testata-nome{animation-delay:.08s}
  .foglio > .navsito{animation-delay:.14s}
  .cappello .sommario{animation-delay:.20s}
  .figura-ritratto{animation-delay:.28s}
  .cappello .blocco-contatti{animation-delay:.34s}
  .porte-titolo{animation-delay:.44s}
  /* le sei note entrano una dopo l'altra, come si sfoglia un apparato */
  .porta:nth-of-type(1){animation-delay:.50s}
  .porta:nth-of-type(2){animation-delay:.56s}
  .porta:nth-of-type(3){animation-delay:.62s}
  .porta:nth-of-type(4){animation-delay:.68s}
  .porta:nth-of-type(5){animation-delay:.74s}
  .porta:nth-of-type(6){animation-delay:.80s}
  .chiusura{animation-delay:.88s}

  /* il capolettera si posa un istante dopo il testo */
  .cappello .sommario::first-letter{animation:capolettera .7s .30s cubic-bezier(.22,.61,.36,1) both}

  /* il fregio si scrive da sinistra a destra, come una riga di piombo */
  .stacco .orn-filo{animation:scrive .9s .40s cubic-bezier(.4,0,.2,1) both}
  .finale{animation:appare 1s .95s ease both}

  /* la rosetta accanto al ritratto respira appena, una volta sola */
  @keyframes rosetta{0%{opacity:0;transform:rotate(-25deg) scale(.6)}100%{opacity:.85;transform:none}}
  .figura-ritratto figcaption .orn-rosa{animation:rosetta .8s .55s cubic-bezier(.22,.61,.36,1) both}

  /* nelle pagine interne: la marca e le figure entrano quando le si raggiunge */
  .marca-testata{animation:sale .6s .1s cubic-bezier(.22,.61,.36,1) both}
  .schema-blocco,.schema-largo,.schermata{animation:appare .7s ease both}

  /* al passaggio del mouse la nota si avvicina di un soffio */
  .porta{transition:transform .25s ease, border-color .25s ease}
  .porta:hover{transform:translateX(3px)}
}

/* ============================================================
   LA HOME: le marche accanto alle note, e le quattro cifre
   Ogni nota porta il segno della pagina a cui conduce, così
   l'indice si legge anche con gli occhi; le cifre dicono in
   quattro numeri quello che il testo dice in dieci righe.
   ============================================================ */
.marca-nota{
  position:absolute;left:0;top:calc(var(--s-6) + 30px);
  width:56px;height:56px;
  color:var(--grigio-2);opacity:.75;
  transition:color .25s ease, opacity .25s ease;
}
.porta:hover .marca-nota{color:var(--rubrica);opacity:1}

.cifre-home{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:var(--s-8) 0 var(--s-9);
  padding-left:0;
  gap:var(--s-6) var(--s-7);
}
.cifre-home .cifra{max-width:none;align-items:baseline}
.cifre-home .valore{font-size:var(--t-7);white-space:nowrap}
.cifre-home .didascalia{max-width:20ch}

@media (max-width:1100px){
  .cifre-home{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .marca-nota{position:static;display:block;width:44px;height:44px;margin:var(--s-3) 0 var(--s-3)}
  /* sul telefono le cifre stanno in colonna, con il numero sopra:
     affiancate, il numero e la sua didascalia si toccavano */
  .cifre-home{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:0;gap:var(--s-5) var(--s-6)}
  .cifre-home .cifra{flex-direction:column;gap:var(--s-1)}
  .cifre-home .valore{font-size:var(--t-6)}
  .cifre-home .didascalia{max-width:none}
}