/* Pagine interne (progetti, esplorazioni, erbario, studio, contatti, legali, 404).
 * Si carica dopo css/polvere/tokens.css e css/polvere/bundle.css; i componenti pv-* restano quelli di Polvere.
 * Qui solo classi pg-* (guscio e modelli) e le varianti di pagina. Mappa: css/pagine.md */

/* ------------------------------------------------------------------ base */
html { background: var(--vuoto); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; }
.pg { min-height: 100vh; background: var(--vuoto); color: var(--osso); font-family: var(--font-testo); -webkit-font-smoothing: antialiased; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
:where(.pg) a { color: inherit; }                 /* specificità bassa: non batte il colore dei bottoni */
.pg img { max-width: 100%; }
.pg-wrap { max-width: 1344px; margin: 0 auto; padding: 0 var(--passo-12); }
.pg-salta { position: absolute; left: var(--passo-4); top: -60px; z-index: 30; }
.pg-salta:focus { top: var(--passo-3); }
.pg ::selection { background: var(--malva); color: var(--vuoto); }

/* ------------------------------------------------------------------ barra (la stessa della home) */
.pg-barra { position: fixed; top: 0; left: 0; right: 0; z-index: 20; }
/* velo profondo (6/11 sera, scelta A: progetto/brand/scelte/barra.md): la barra resta trasparente, ma dietro ha un
   velo scuro più lungo della barra (150 px) e le stazioni salgono verso osso, così si leggono anche sulle copertine chiare */
.pv-barra.pg-barra { background: none; isolation: isolate; }
.pv-barra.pg-barra::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(6, 5, 6, 0.94), rgba(6, 5, 6, 0.72) 42%, rgba(6, 5, 6, 0)); }
.pg-barra .pv-stazione { color: rgba(236, 227, 218, 0.72); }
@media (hover: hover) and (pointer: fine) { .pg-barra .pv-stazione:hover { color: var(--osso); } }
.pg-barra .pv-stazione[aria-current="page"] { color: var(--osso); }
.pg-barra .pv-stazione[aria-current="page"] .pv-stazione__punto { background: var(--scintilla); box-shadow: var(--bagliore); }
/* ritorno nella barra (.pg-torna, solo nelle schede: il genitore non è la home). In cima la barra è uguale su tutte le
   pagine; quando il link in testa finisce sotto la barra, pagine.js → indietro() mette is-visibile: lo slot si apre
   (0 → 44 px) e la freccia prende il posto del marchio, che si sposta di lato. Nascosto è anche visibility: hidden,
   così il Tab non ci passa. Entrata 200 ms, uscita 120 ms; senza JS resta sempre visibile */
.pg-barra__sinistra { display: flex; align-items: center; gap: var(--passo-3); }
.pg-torna { width: 0; margin-right: calc(var(--passo-3) * -1); flex: none; opacity: 0; transform: translateX(-6px); visibility: hidden;
  transition: width 120ms ease-out, margin-right 120ms ease-out, opacity 120ms ease, transform 120ms ease-out, visibility 0s linear 120ms, box-shadow var(--dur-ui) ease; }
.pg-torna.is-visibile, html.no-js .pg-torna { width: 44px; margin-right: 0; opacity: 1; transform: none; visibility: visible;
  transition: width 200ms var(--ease-componi), margin-right 200ms var(--ease-componi), opacity 200ms ease, transform 200ms var(--ease-componi), visibility 0s, box-shadow var(--dur-ui) ease; }
.pg-torna.is-visibile:active { transform: scale(0.97); transition-duration: var(--dur-premi); }
.pg-barra .pg-torna svg { transform: none; }
@media (hover: hover) and (pointer: fine) { .pg-barra .pg-torna:hover svg { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .pg-torna, .pg-torna.is-visibile { transform: none; transition: opacity 200ms ease, visibility 0s; } }
/* foglio Indice del telefono: come in home, ma fisso sulla pagina che scorre */
.pg-foglio { position: fixed; z-index: 19; }
.pg-foglio .pv-foglio__voci a { text-decoration: none; }
html.foglio-aperto { overflow: hidden; }

/* ------------------------------------------------------------------ frontispizio */
.pg-front { position: relative; height: 560px; overflow: hidden; background: var(--vuoto); }
.pg-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask: radial-gradient(circle, #000 1.9px, transparent 2.6px) 0 0 / 6px 6px, linear-gradient(#000 30%, transparent 92%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle, #000 1.9px, transparent 2.6px) 0 0 / 6px 6px, linear-gradient(#000 30%, transparent 92%);
          mask-composite: intersect; }
.pg-front--basso { height: 380px; }
/* hero con la scena vera (6/11 sera, js/hero-scena.js): la tela sta sopra la foto e entra quando i punti ci sono.
   Niente retino sulla tela (i punti sono già punti), solo la sfumatura verso il basso */
.pg-front__scena { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms cubic-bezier(0.23, 1, 0.32, 1); }
.pg-front__scena canvas { width: 100% !important; height: 100% !important;
  -webkit-mask: linear-gradient(#000 30%, transparent 92%); mask: linear-gradient(#000 30%, transparent 92%); }
.pg-front.is-viva .pg-front__scena { opacity: 1; }
.pg-front.is-viva picture { opacity: 0; transition: opacity 1400ms ease 400ms; }
/* la copertina di un progetto è più luminosa dei fotogrammi: sfuma prima, così il titolo che ci sale sopra si legge */
.pg-front--copertina img { object-position: center 40%;
  -webkit-mask: radial-gradient(circle, #000 1.9px, transparent 2.6px) 0 0 / 6px 6px, linear-gradient(#000 15%, transparent 72%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle, #000 1.9px, transparent 2.6px) 0 0 / 6px 6px, linear-gradient(#000 15%, transparent 72%);
          mask-composite: intersect; }

/* ------------------------------------------------------------------ testa */
.pg-testa { position: relative; margin-top: -200px; display: flex; flex-direction: column; gap: var(--passo-6); }
.pg-front--basso + .pg-wrap .pg-testa { margin-top: -140px; }
.pg-testa--senza { margin-top: 0; padding-top: 144px; }
.pg-righello { padding-bottom: var(--passo-2); border-bottom: 1px solid var(--polvere-900); }
.pg-titolo { margin: 0; max-width: 18ch; text-wrap: balance; }
.pg-lede { margin: 0; max-width: 52ch; font: 400 19px/1.5 var(--font-testo); color: var(--polvere-200); text-wrap: pretty; }
/* ritorno in testa: prima riga di ogni pagina, freccia a sinistra (la pressione la dà Polvere) */
.pg-indietro { align-self: flex-start; }
.pg-indietro svg { transition: transform var(--dur-ui) var(--ease-componi); }
@media (hover: hover) and (pointer: fine) { .pg-indietro:hover svg { transform: translateX(-2px); } }
.pg-azioni { display: flex; gap: var(--passo-3); flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ filtri */
.pg-strumenti { display: flex; flex-direction: column; gap: var(--passo-3); padding: var(--passo-12) 0 var(--passo-8); }
.pg-filtri { display: flex; flex-wrap: wrap; align-items: center; gap: var(--passo-2); }
.pg-filtri__nome { margin-right: var(--passo-3); min-width: 80px; }
@media (min-width: 761px) {   /* le righe che vanno a capo restano allineate dopo il nome del filtro */
  .pg-filtri, .pg-cerca { position: relative; padding-left: 104px; }
  .pg-filtri__nome { position: absolute; left: 0; top: 12px; margin: 0; }
  .pg-cerca .pg-filtri__nome { top: 50%; transform: translateY(-50%); }
}
.pg-filtro { display: inline-flex; align-items: center; gap: var(--passo-2); min-height: 36px; padding: 0 var(--passo-3);
  font: 400 11px/1 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400); text-decoration: none;
  background: none; border: 0; box-shadow: inset 0 0 0 1px var(--polvere-900); cursor: pointer;
  transition: color var(--dur-ui) ease, box-shadow var(--dur-ui) ease, transform var(--dur-premi) ease-out; -webkit-tap-highlight-color: transparent; }
.pg-filtro:active { transform: scale(0.97); }
.pg-filtro i { width: 7px; height: 7px; border-radius: var(--raggio-punto); box-shadow: inset 0 0 0 1px currentColor; transition: background-color var(--dur-ui) ease, box-shadow var(--dur-ui) ease; }
.pg-filtro[aria-pressed="true"], .pg-filtro[aria-current="page"] { color: var(--osso); box-shadow: inset 0 0 0 1px var(--polvere-600); }
.pg-filtro[aria-pressed="true"] i, .pg-filtro[aria-current="page"] i { background: var(--scintilla); box-shadow: var(--bagliore); }
.pg-filtro:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; }
.pg-vista { margin-left: auto; }
.pg-conta { color: var(--polvere-400); }
@media (hover: hover) and (pointer: fine) { .pg-filtro:hover { color: var(--osso); } }

/* ------------------------------------------------------------------ righe dell'indice */
.pg-righe { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--polvere-900); }
.pg-righe > li[hidden] { display: none; }
.pg-riga { position: relative; display: grid; grid-template-columns: 56px 64px minmax(0, 1fr) 220px 240px 32px; align-items: center; gap: var(--passo-6);
  padding: var(--passo-4) var(--passo-3); border-bottom: 1px solid var(--polvere-900); text-decoration: none; color: var(--osso);
  transition: background-color var(--dur-ui) ease; -webkit-tap-highlight-color: transparent; }
.pg-riga--testa { padding-top: 0; padding-bottom: var(--passo-2); border-bottom: 0; }
.pg-riga__num { font: 400 13px/1 var(--font-dato); color: var(--polvere-400); font-variant-numeric: tabular-nums; }
.pg-riga__titolo { font: 500 21px/1.2 var(--font-testo); letter-spacing: -0.012em; }
.pg-riga__meta { font: 400 13px/1.4 var(--font-dato); color: var(--polvere-200); }
.pg-riga__sotto { display: none; }
.pg-vuoto { color: var(--polvere-400); letter-spacing: 0.2em; }
.pg-riga .pv-scheda__freccia { justify-self: end; }
.pg-riga:focus-visible { outline: 2px solid var(--malva); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .pg-riga:hover { background: var(--vuoto-velo); }
  .pg-riga:hover .pv-scheda__freccia { box-shadow: inset 0 0 0 1px var(--osso); transform: translateX(2px); }
}
/* anteprima della copertina che segue il puntatore sulle righe (solo mouse) */
.pg-anteprima { position: fixed; left: 0; top: 0; z-index: 15; width: 220px; pointer-events: none; opacity: 0;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) scale(0.96); transition: opacity var(--dur-ui) ease, transform 160ms ease-out; }
.pg-anteprima.is-visibile { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); }
.pg-anteprima .pg-quadro__img { aspect-ratio: 4 / 5; }
@media (hover: none), (pointer: coarse) { .pg-anteprima { display: none; } }

/* vista copertine */
.pg-copertine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--passo-6); }
.pg-copertine[hidden], .pg-indice[hidden] { display: none; }
.pg-copertine > [hidden] { display: none; }
.pg-copertine .pv-scheda__img img { --grano: 4.4px; transform: none; }
.pg-copertine .pv-scheda__titolo { font-size: 19px; }
/* senza hover (telefono, tablet) le schede delle pagine interne si vedono nitide subito: a punti restano solo col mouse,
   finché non ci passi sopra. La home (binario dell'archivio) non carica questo file e tiene i suoi punti */
@media (hover: none), (pointer: coarse) { .pg .pv-scheda__img img { --grano: 4.4px; transform: none; } }

/* esplorazioni: righe con data e tipo */
.pg-riga--esp { grid-template-columns: 150px 130px minmax(0, 1fr) 260px 32px; }
.pg-evidenza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--passo-6); }
.pg-evidenza .pv-scheda__img { aspect-ratio: 16 / 10; }

/* tipo di esplorazione: punto pieno = progetto, anello = idea, trattino = appunto */
.pg-tipo { display: inline-flex; align-items: center; gap: var(--passo-2); font: 400 11px/1 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-200); white-space: nowrap; }
.pg-tipo i { width: 7px; height: 7px; border-radius: var(--raggio-punto); background: var(--polvere-200); flex: none; }
.pg-tipo--idea i { background: transparent; box-shadow: inset 0 0 0 1px var(--polvere-200); }
.pg-tipo--appunto i { width: 7px; height: 1px; border-radius: 0; }
.pg-tipo--progetto { color: var(--osso); }
.pg-tipo--progetto i { background: var(--scintilla); box-shadow: var(--bagliore); }

/* ------------------------------------------------------------------ sezioni e testo */
.pg-sez { display: flex; flex-direction: column; gap: var(--passo-6); padding: var(--passo-20) 0 0; }
.pg-sez h2 { margin: 0; }
.pg-due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--passo-12); align-items: start; }
.pg-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-6); }
.pg-quattro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--passo-6); }
.pg-corpo { margin: 0; max-width: 60ch; font: 400 16px/1.65 var(--font-testo); color: var(--polvere-200); text-wrap: pretty; }
.pg-corpo--primo { font-size: 18px; color: var(--osso); }

/* voci dello Studio (6/11): titolo con icona a griglia a sinistra, testo a destra, 96 px e un filo tra l'una e l'altra */
.pg-voci { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 96px; }
.pg-voce { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--passo-12); align-items: start; padding-top: var(--passo-6); border-top: 1px solid var(--polvere-900); }
.pg-voce__nome { display: flex; flex-direction: column; gap: 18px; color: var(--osso); }
.pg-voce__lista { list-style: none; margin: 0; padding: 0; max-width: 60ch; font: 400 16px/1.65 var(--font-testo); color: var(--polvere-200); }
.pg-voce__lista li { padding: var(--passo-3) 0; border-bottom: 1px solid var(--polvere-900); }
.pg-voce__lista li:first-child { padding-top: 0; }

/* icone di contenuto: punti su griglia 5×5 (progetto/brand/scelte/icone.md). Si accendono in diagonale quando la voce entra */
.pg-icona { display: block; width: 28px; height: 28px; flex: none; overflow: visible; }
.pg-icona circle { fill: var(--polvere-900); transition: fill 240ms ease; transition-delay: calc(240ms + var(--d, 0ms)); }
.pg-icona .on { fill: var(--osso); }
.pg-icona .mid { fill: var(--polvere-600); }
.pg-icona .acc { fill: var(--scintilla); }
.js .pg-entra:not(.is-composto) .pg-icona circle { fill: var(--polvere-900); transition: none; }

/* colonna di lettura (articolo e racconto del progetto) */
.pg-lettura { display: grid; grid-template-columns: 220px minmax(0, 640px) minmax(0, 1fr); gap: var(--passo-12); align-items: start; }
.pg-lettura__margine { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--passo-6); }
.pg-testo { display: flex; flex-direction: column; gap: var(--passo-5, 20px); }
.pg-testo h2 { margin: var(--passo-6) 0 0; font: 400 28px/1.15 var(--font-testo); letter-spacing: -0.02em; color: var(--osso); text-wrap: balance; }
.pg-testo blockquote { margin: var(--passo-2) 0; padding: 0 0 0 var(--passo-6); font: 300 24px/1.35 var(--font-testo); letter-spacing: -0.015em; color: var(--osso);
  background: radial-gradient(circle, var(--polvere-600) 1px, transparent 1.5px) 0 0 / 6px 6px repeat-y; background-size: 6px 6px; background-position: 0 0; background-repeat: repeat-y; }
.pg-testo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--passo-2); max-width: 60ch; }
.pg-testo li { position: relative; padding-left: var(--passo-6); font: 400 16px/1.6 var(--font-testo); color: var(--polvere-200); }
.pg-testo li::before { content: ""; position: absolute; left: 4px; top: 0.7em; width: 5px; height: 5px; border-radius: var(--raggio-punto); background: var(--polvere-400); }
/* link dentro il testo (dai vecchi appunti: [testo](url) in corpo[]) */
.pg-testo :is(p, li, blockquote, h2) a:not(.pv-bottone) { color: var(--osso); text-decoration: underline; text-decoration-color: var(--polvere-500); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .pg-testo :is(p, li, blockquote, h2) a:not(.pv-bottone):hover { text-decoration-color: var(--osso); } }
/* foto dentro il racconto: gruppi di 1-3 (blocco {t: "foto"}), proporzioni vere, niente taglio */
.pg-foto { display: grid; gap: var(--passo-4); align-items: start; margin: var(--passo-4) 0; }
.pg-foto--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-foto--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-foto .pg-quadro__img img { object-fit: contain; }
.pg-foto figcaption span:last-child { text-align: right; }
.pg-apri { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--passo-6); align-items: center; padding: var(--passo-6); background: var(--vuoto-alto); max-width: 640px; }

/* ------------------------------------------------------------------ immagini */
.pg-quadro { display: flex; flex-direction: column; gap: var(--passo-2); margin: 0; }
.pg-quadro__img { position: relative; overflow: hidden; background: var(--vuoto-alto); border-radius: var(--raggio-1); }
/* foto dentro le pagine: entrano a punti (0,6 px) e si chiudono nitide (4,4 px copre tutta la cella da 6) */
.pg-quadro__img img { display: block; width: 100%; height: 100%; object-fit: cover; --grano: 4.4px;
  -webkit-mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.7px)) 0 0 / 6px 6px;
          mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.7px)) 0 0 / 6px 6px;
  transition: --grano var(--dur-componi) var(--ease-componi); }
.js .pg-quadro__img:not(.is-composto) img { --grano: 0.6px; }
.pg-quadro__vuoto { position: absolute; inset: 0; display: grid; place-items: center; }

/* ------------------------------------------------------------------ dati */
.pg-dati { display: grid; grid-template-columns: auto 1fr; gap: var(--passo-2) var(--passo-6); margin: 0; font: 400 13px/1.5 var(--font-dato); font-variant-numeric: tabular-nums; }
.pg-dati dt { color: var(--polvere-400); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; padding-top: 2px; }
.pg-dati dd { margin: 0; color: var(--osso); }
.pg-dati--colonna { grid-template-columns: minmax(0, 1fr); gap: var(--passo-1); }
.pg-dati--colonna dd + dt { margin-top: var(--passo-3); }

/* calendario di fioritura: dodici punti, pieni nei mesi in cui fiorisce */
.pg-mesi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.pg-mesi > * { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 400 10px/1 var(--font-dato); color: var(--polvere-400); text-transform: uppercase; }
.pg-mesi i { width: 9px; height: 9px; border-radius: var(--raggio-punto); box-shadow: inset 0 0 0 1px var(--polvere-600); }
.pg-mesi .si { color: var(--osso); }
.pg-mesi .si i { background: var(--osso); box-shadow: none; }
.pg-mesi--filtro { width: 420px; max-width: 100%; }
.pg-mesi--filtro button { min-height: 44px; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.pg-mesi--filtro button[aria-pressed="true"] { color: var(--osso); }
.pg-mesi--filtro button[aria-pressed="true"] i { background: var(--scintilla); box-shadow: var(--bagliore); }
.pg-mesi--filtro button:focus-visible { outline: 2px solid var(--malva); outline-offset: 2px; }

/* ------------------------------------------------------------------ progetto */
.pg-video { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-6); max-width: 840px; }
.pg-gioca { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: var(--raggio-punto); display: grid; place-items: center;
  background: rgba(6, 5, 6, 0.6); box-shadow: inset 0 0 0 1px var(--osso); transition: transform var(--dur-ui) var(--ease-componi); }
.pg-gioca svg { width: 16px; height: 16px; fill: var(--osso); margin-left: 3px; }
@media (hover: hover) and (pointer: fine) { a:hover .pg-gioca { transform: scale(1.06); } }
.pg-successivo { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: var(--passo-8); padding: var(--passo-8) 0;
  border-top: 1px solid var(--polvere-900); border-bottom: 1px solid var(--polvere-900); text-decoration: none; color: var(--osso); }
.pg-successivo .t-punto-l { color: var(--polvere-400); transition: color var(--dur-ui) ease; }
.pg-successivo:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pg-successivo:hover .t-punto-l { color: var(--osso); }
  .pg-successivo:hover .pv-bottone--icona { box-shadow: inset 0 0 0 1px var(--osso); }
  .pg-successivo:hover .pv-bottone--icona svg { transform: translateX(2px); }
}

/* ------------------------------------------------------------------ erbario: tavola */
.pg-tavola { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.pg-esemplare { position: relative; padding: var(--passo-6) var(--passo-6) var(--passo-4); --angolo: var(--polvere-600); }
.pg-esemplare .pg-quadro__img { aspect-ratio: 4 / 5; }
.pg-scala { display: flex; align-items: flex-end; height: 14px; margin-top: var(--passo-3); }
.pg-scala i { flex: 1; height: 6px; border-left: 1px solid var(--polvere-600); }
.pg-scala i:nth-child(5n+1) { height: 12px; border-left-color: var(--polvere-400); }
.pg-scientifico { margin: 0; font: italic 300 34px/1.1 var(--font-testo); letter-spacing: -0.02em; color: var(--polvere-200); }
.pg-scientifico--piccolo { font: italic 400 14px/1.4 var(--font-testo); letter-spacing: 0; }
.pg-esemplare-vuoto { opacity: 0.55; }
/* erbario con le piante di Giardino: ricerca, pianta senza foto, credito, fonti, "mostra altre" */
.pg-cerca { flex-direction: row; align-items: center; max-width: 744px; }
.pg-cerca input { flex: 1; }
.no-js .pg-cerca { display: none; }
.pg-senza-foto { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--passo-6); text-align: center;
  font: italic 300 18px/1.3 var(--font-testo); color: var(--polvere-400);
  background: radial-gradient(circle, var(--polvere-900) 1px, transparent 1.5px) 0 0 / 8px 8px; }
.pg-esemplare-vuoto { position: relative; aspect-ratio: 4 / 5; }
.pg-credito span:first-child { text-transform: none; letter-spacing: 0; }
.pg-credito a { color: inherit; text-decoration: underline; text-decoration-color: var(--polvere-600); text-underline-offset: 3px; }
.pg-autore { font: 400 14px/1.4 var(--font-dato); font-style: normal; color: var(--polvere-400); letter-spacing: 0; }
.pg-descrizione { max-width: 72ch; }
.pg-descrizione dd { font: 400 16px/1.6 var(--font-testo); color: var(--polvere-200); }
.pg-fonti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--passo-2); font: 400 14px/1.5 var(--font-testo); color: var(--polvere-200); }
.pg-fonti a { color: var(--osso); text-decoration: underline; text-decoration-color: var(--polvere-600); text-underline-offset: 3px; }
.pg-fonte__licenza { font: 400 11px/1.45 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400); margin-left: var(--passo-2); }
.pg-piu { display: flex; justify-content: center; margin: 0; padding-top: var(--passo-12); }
.no-js .pg-piu { display: none; }

/* ------------------------------------------------------------------ studio */
.pg-bio { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; }
.pg-nomi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--polvere-900); }
.pg-nomi li { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 28px 0; border-bottom: 1px solid var(--polvere-900); }
.pg-riga--semplice { grid-template-columns: 56px minmax(0, 1fr) 260px; }
.pg-fine { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--passo-8); align-items: center; padding: var(--passo-12); background: var(--vuoto-alto); }

/* ------------------------------------------------------------------ contatti: brief guidato */
.pg-contatti { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--passo-20); align-items: start; }
.pg-passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.pg-passo { display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 44px; padding: 0 0 12px; background: none; border: 0; border-bottom: 1px solid var(--polvere-900);
  text-align: left; cursor: pointer; color: var(--polvere-400); font: 400 11px/1.3 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; transition: color var(--dur-ui) ease, border-color var(--dur-ui) ease; }
.pg-passo b { font: 700 36px/1 var(--font-punto); color: inherit; }
.pg-passo[aria-current="step"] { color: var(--osso); border-bottom-color: var(--scia); }
.pg-passo[aria-current="step"] b { color: var(--malva); }
.pg-passo.is-fatto { color: var(--polvere-200); }
.pg-passo:focus-visible { outline: 2px solid var(--malva); outline-offset: 3px; }
/* fieldset: la legend fluttua (altrimenti il browser la mette sul bordo, sopra il padding) */
.pg-foglio-brief { display: block; padding: 48px 0 0; border: 0; margin: 0; min-width: 0; }
.pg-foglio-brief[hidden] { display: none; }
.pg-foglio-brief legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--passo-8); font: 400 34px/1.08 var(--font-testo); letter-spacing: -0.025em; color: var(--osso); }
.pg-foglio-brief legend:focus { outline: 0; }
.pg-foglio-brief > :not(legend) { clear: both; }
.pg-foglio-brief > :not(legend) + :not(legend) { margin-top: var(--passo-8); }
.pg-scelte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--passo-3); }
.pg-scelta { position: relative; display: flex; flex-direction: column; gap: var(--passo-2); min-height: 112px; padding: var(--passo-4); cursor: pointer;
  background: var(--vuoto-alto); color: var(--polvere-200); font: 400 14px/1.45 var(--font-testo);
  clip-path: polygon(0 0, calc(100% - var(--taglio)) 0, 100% var(--taglio), 100% 100%, 0 100%); transition: background-color var(--dur-ui) ease, transform var(--dur-premi) ease-out; }
.pg-scelta:active { transform: scale(0.985); }
.pg-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.pg-scelta b { font: 500 17px/1.25 var(--font-testo); color: var(--osso); }
.pg-scelta:has(input:checked) { background: var(--vuoto-velo); --angolo: var(--osso); }
.pg-scelta:has(input:checked) b::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: middle; border-radius: var(--raggio-punto); background: var(--scintilla); box-shadow: var(--bagliore); }
.pg-scelta:has(input:focus-visible) { outline: 2px solid var(--malva); outline-offset: 3px; clip-path: none; }
@media (hover: hover) and (pointer: fine) { .pg-scelta:hover { background: var(--vuoto-velo); } }
.pg-campo { display: flex; flex-direction: column; gap: var(--passo-2); }
.pg-campo label { font: 400 11px/1.45 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--polvere-400); }
.pg-campo input, .pg-campo textarea { width: 100%; min-height: 48px; padding: var(--passo-3) 0; background: transparent; color: var(--osso); border: 0; border-bottom: 1px solid var(--polvere-600); border-radius: 0; font: 400 17px/1.4 var(--font-testo); }
.pg-campo textarea { min-height: 112px; resize: vertical; }
.pg-campo input::placeholder, .pg-campo textarea::placeholder { color: var(--polvere-400); }
.pg-campo input:focus-visible, .pg-campo textarea:focus-visible { outline: 0; border-bottom-color: var(--malva); box-shadow: 0 1px 0 var(--malva); }
.is-inviato .pg-campo input:invalid { border-bottom-color: var(--malva); }
.pg-brief-azioni { display: flex; gap: var(--passo-3); align-items: center; flex-wrap: wrap; padding-top: 40px; }
.pg-brief-azioni .pv-lettura { margin-left: auto; }
.pg-avviso { margin: 0; font: 400 14px/1.5 var(--font-testo); color: var(--polvere-200); }
.pg-lato { display: flex; flex-direction: column; gap: var(--passo-8); padding: var(--passo-6); background: var(--vuoto-alto); }
.no-js .pg-passi, .no-js [data-brief-avanti], .no-js [data-brief-indietro], .no-js .pg-brief-azioni .pv-lettura { display: none; }

/* ------------------------------------------------------------------ 404 */
.pg-404 { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.pg-404__polvere { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; opacity: 0.6; --grano: 0.6px;
  -webkit-mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.6px)) 0 0 / 13px 13px, radial-gradient(ellipse at 50% 60%, #000 10%, transparent 70%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.6px)) 0 0 / 13px 13px, radial-gradient(ellipse at 50% 60%, #000 10%, transparent 70%);
          mask-composite: intersect;
  animation: pg-respiro 9s var(--ease-sposta) infinite alternate; }
@keyframes pg-respiro { 0% { --grano: 0.5px; transform: translateY(0) scale(1.02); } 70%, 100% { --grano: 4.6px; transform: translateY(-8px) scale(1); } }
.pg-404__pulviscolo { position: absolute; inset: 0; pointer-events: none; }
.pg-404__pulviscolo i { position: absolute; bottom: 18%; width: 2px; height: 2px; border-radius: var(--raggio-punto); background: var(--polvere-200); opacity: 0; animation: pg-sale var(--t, 7s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes pg-sale { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 0.8; } 100% { opacity: 0; transform: translate(var(--dx, 12px), -340px); } }
.pg-404__centro { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--passo-6); text-align: center; padding: 0 var(--passo-4); max-width: 640px; }
.pg-404__centro > * { animation: pg-componi var(--dur-componi) var(--ease-componi) both; animation-delay: calc(200ms + var(--i, 0) * 70ms); }
@keyframes pg-componi { from { opacity: 0; transform: translateY(-10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.pg-404__cifre span { display: inline-block; animation: pg-chiazza 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes pg-chiazza { 0%, 62%, 100% { opacity: 1; filter: blur(0); transform: none; } 72% { opacity: 0.15; filter: blur(3px); transform: translateY(-6px); } 84% { opacity: 1; filter: blur(0); transform: none; } }

/* ------------------------------------------------------------------ entrata: si compone dalla polvere */
.js .pg-entra { transition: opacity 600ms ease, transform var(--dur-componi) var(--ease-componi), filter var(--dur-componi) var(--ease-componi); transition-delay: var(--ritardo, 0ms); }
.js .pg-entra:not(.is-composto) { opacity: 0; transform: translateY(-10px); filter: blur(6px); }

/* ------------------------------------------------------------------ piede */
.pg .pv-piede { margin-top: 120px; }

/* ------------------------------------------------------------------ telefono */
@media (max-width: 760px) {
  .pg-wrap { padding: 0 var(--passo-4); }
  .pg-front { height: 420px; }
  .pg-front--basso { height: 300px; }
  .pg-testa { margin-top: -150px; gap: var(--passo-4); }
  .pg-front--basso + .pg-wrap .pg-testa { margin-top: -110px; }
  .pg-testa--senza { margin-top: 0; padding-top: 96px; }
  .pg-titolo { font-size: 46px; }
  .pg-lede { font-size: 17px; }
  .pg-strumenti { padding: var(--passo-8) 0 var(--passo-6); }
  .pg-filtri { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--passo-4) * -1); padding: 0 var(--passo-4); scrollbar-width: none; }
  .pg-filtri::-webkit-scrollbar { display: none; }
  .pg-filtro { flex: none; min-height: 44px; }
  .pg-filtri__nome { min-width: 0; flex: none; }
  .pg-vista { margin-left: 0; }
  .pg-riga, .pg-riga--esp { grid-template-columns: 36px minmax(0, 1fr) 32px; gap: var(--passo-3); padding: var(--passo-4) 0; }
  .pg-riga--esp { grid-template-columns: minmax(0, 1fr) 32px; }
  .pg-riga--testa { display: none; }
  .pg-riga__sigla, .pg-riga__meta, .pg-riga__data, .pg-riga__tag, .pg-riga--esp .pg-tipo { display: none; }
  .pg-riga__sotto { display: flex; gap: var(--passo-2); margin-top: 6px; }
  .pg-riga__testo { display: flex; flex-direction: column; min-width: 0; }
  .pg-riga__titolo { font-size: 19px; }
  .pg-copertine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--passo-3); }
  .pg-copertine .pv-scheda { padding: var(--passo-2) var(--passo-2) var(--passo-4); gap: var(--passo-3); }
  .pg-copertine .pv-scheda__testa span:last-child, .pg-copertine .pv-scheda__piede .pv-lettura { display: none; }
  .pg-copertine .pv-scheda__titolo { font-size: 16px; }
  .pg-evidenza { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--passo-3); margin: 0 calc(var(--passo-4) * -1); padding: 0 var(--passo-4) 4px; scrollbar-width: none; }
  .pg-evidenza > * { flex: 0 0 82%; scroll-snap-align: center; }
  .pg-evidenza .pv-scheda__img { aspect-ratio: 4 / 3; }
  .pg-sez { padding-top: var(--passo-12); }
  .pg-due, .pg-tre, .pg-bio, .pg-tavola, .pg-contatti, .pg-lettura { grid-template-columns: minmax(0, 1fr); gap: var(--passo-6); }
  .pg-voci { gap: 56px; }
  .pg-voce { grid-template-columns: minmax(0, 1fr); gap: var(--passo-4); padding-top: 18px; }
  .pg-voce__nome { flex-direction: row; align-items: center; gap: 14px; }
  .pg-voce .pg-icona { width: 24px; height: 24px; }
  .pg-lettura__margine { position: static; }
  .pg-lettura__a-lato { display: none; }
  .pg-quattro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--passo-3); }
  .pg-foto--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-foto--3 > :first-child { grid-column: 1 / -1; }
  .pg-galleria .pg-quadro { margin: 0 calc(var(--passo-4) * -1); }
  .pg-galleria .pg-quadro__img { border-radius: 0; }
  .pg-galleria .pg-quadro figcaption { padding: 0 var(--passo-4); }
  .pg-video { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--passo-3); margin: 0 calc(var(--passo-4) * -1); padding: 0 var(--passo-4) 4px; scrollbar-width: none; }
  .pg-video > * { flex: 0 0 62%; scroll-snap-align: center; }
  .pg-successivo { grid-template-columns: minmax(0, 1fr) auto; gap: var(--passo-4); }
  .pg-successivo .t-punto-l { display: none; }
  .pg-successivo .t-titolo { font-size: 26px; }
  .pg-esemplare { padding: var(--passo-3); }
  .pg-scientifico { font-size: 26px; }
  .pg-nomi { grid-template-columns: minmax(0, 1fr); }
  .pg-nomi li { padding: var(--passo-4) 0; }
  .pg-riga--semplice { grid-template-columns: 36px minmax(0, 1fr); }
  .pg-riga--semplice .pg-riga__meta { display: block; grid-column: 2; margin-top: -8px; }
  .pg-fine, .pg-apri { grid-template-columns: minmax(0, 1fr); padding: var(--passo-6); }
  .pg-scelte { grid-template-columns: minmax(0, 1fr); }
  .pg-scelta { min-height: 0; }
  .pg-passo span { display: none; }
  .pg-foglio-brief legend { font-size: 28px; }
  .pg-404 .t-punto-xl { font-size: 88px; }
  .pg-404 .t-titolo { font-size: 28px; }
  .pg .pv-piede { margin-top: 80px; }
}

/* ------------------------------------------------------------------ meno movimento */
@media (prefers-reduced-motion: reduce) {
  .js .pg-entra, .js .pg-entra:not(.is-composto) { transform: none; filter: none; }
  .pg-icona circle { transition-delay: 0ms; }
  .pg-quadro__img img { transition: --grano 200ms ease; }
  .pg-anteprima { transition: opacity var(--dur-ui) ease; }
  .pg-404__polvere { animation: none; --grano: 2px; }
  .pg-404__pulviscolo { display: none; }
  .pg-404__centro > * { animation: pg-appare 400ms ease both; }
  .pg-404__cifre span { animation: none; }
  @keyframes pg-appare { from { opacity: 0; } to { opacity: 1; } }
}

/* ------------------------------------------------------------------ bottone Menu (telefono) e voci del menu
   Cornice (6/11 sera): border vero di 1px, che il browser aggancia ai pixel dello schermo (col clip-path di prima,
   a zoom di Windows 125-150%, ogni lato aveva uno spessore diverso). Il taglio resta clip-path; `::before`
   ridisegna 1px di filo lungo la diagonale. Stesse regole in css/pagina.css e css/pagine.css. */
.pv-indice-apri.pv-bottone--secondario {
  --bordo: var(--polvere-400); --fondo: var(--vuoto-alto);
  isolation: isolate; background: var(--fondo); box-shadow: none;
  border: 1px solid var(--bordo);   /* bordo vero: il browser lo aggancia ai pixel dello schermo anche al 125-150% */
  width: 68px; padding: 0;          /* larghezza intera e uguale per Menu e Chiudi */
  transition: transform var(--dur-premi) ease-out, background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
/* il filo della diagonale: il taglio di clip-path toglie l'angolo, qui si ridisegna 1px lungo il taglio */
.pv-indice-apri.pv-bottone--secondario::before {
  content: ""; position: absolute; top: -1px; right: -1px; width: var(--taglio-b); height: var(--taglio-b); pointer-events: none;
  background: linear-gradient(to bottom left, var(--bordo) calc(50% + 1.3px), transparent calc(50% + 1.3px));
}
.pv-indice-apri.pv-angoli::after { content: none; }   /* niente segni d'angolo nel Menu (6/11, Andrea): sembravano una croce */
.pv-indice-apri.pv-bottone--secondario[aria-expanded="true"] { --bordo: var(--osso); --fondo: var(--vuoto-velo); }
@media (hover: hover) and (pointer: fine) {
  .pv-indice-apri.pv-bottone--secondario:hover { --bordo: var(--osso); --fondo: var(--vuoto-velo); box-shadow: none; }
}
.pg-menu__gruppo { display: flex; justify-content: space-between; margin: var(--passo-8) 0 var(--passo-3); color: var(--polvere-400); opacity: 0; transition: opacity 160ms ease; }
.pv-foglio.is-aperto .pg-menu__gruppo { opacity: 1; transition: opacity 500ms ease calc(140ms + var(--i, 0) * 55ms); }
.pg-foglio { overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) { .pg-foglio .solo-d-m { display: none; } }   /* solo desktop / solo telefono nel Menu */
@media (min-width: 761px) { .pg-foglio .solo-t-m { display: none; } }

/* progetti propri come schede (6/11 sera, scelta A: progetto/brand/scelte/menu.md). Stesso blocco in css/pagina.css (home).
   Immagine a retino (sempre retino, mai pixel): rada a riposo, si compone dopo la cascata delle voci, nitida al passaggio */
.menu-schede { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--passo-3); }
.menu-sch { display: grid; gap: 10px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  opacity: 0; transform: translateY(-10px); filter: blur(5px); transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease; }
.pv-foglio.is-aperto .menu-sch { opacity: 1; transform: none; filter: blur(0);
  transition: opacity 500ms ease calc(140ms + var(--i, 0) * 55ms), transform 700ms var(--ease-componi) calc(140ms + var(--i, 0) * 55ms), filter 700ms var(--ease-componi) calc(140ms + var(--i, 0) * 55ms); }
.menu-sch > * { transition: transform var(--dur-premi, 160ms) ease-out; }
.menu-sch:active > * { transform: scale(0.98); }   /* sui figli: il genitore ha la transizione d'ingresso, col ritardo */
.menu-sch:focus-visible { outline: 2px solid var(--malva); outline-offset: 4px; }
.menu-sch__img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--vuoto); }
.menu-sch__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; --grano: 0.4px;
  -webkit-mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.7px)) 0 0 / 6px 6px;
          mask: radial-gradient(circle, #000 var(--grano), transparent calc(var(--grano) + 0.7px)) 0 0 / 6px 6px;
  transition: --grano 200ms ease-out; }
.pv-foglio.is-aperto .menu-sch__img img { --grano: 2.2px; animation: menu-componi 900ms var(--ease-componi) calc(400ms + var(--i, 0) * 55ms) backwards; }
@keyframes menu-componi { from { --grano: 0.4px; } to { --grano: 2.2px; } }
.pv-foglio.is-aperto .menu-sch:active .menu-sch__img img, .pv-foglio.is-aperto .menu-sch:focus-visible .menu-sch__img img { --grano: 4.4px; transition: --grano 260ms var(--ease-componi); }
@media (hover: hover) and (pointer: fine) {
  .pv-foglio.is-aperto .menu-sch:hover .menu-sch__img img { --grano: 4.4px; transition: --grano 260ms var(--ease-componi); }
  .menu-sch:hover .menu-sch__vai svg { transform: translateX(3px); }
}
.menu-sch__testo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.menu-sch__l { display: flex; justify-content: space-between; gap: 10px; }
.menu-sch__stato { color: var(--malva); }
.menu-sch__t { color: var(--osso); font: 400 18px/1.1 var(--font-testo); letter-spacing: -0.02em; }
.menu-sch__d { color: var(--polvere-200); font: 400 13px/1.45 var(--font-testo); text-wrap: pretty; }
.menu-sch__vai { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--osso); font: 500 13px/1 var(--font-testo); }
.menu-sch__vai svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform var(--dur-ui, 200ms) var(--ease-componi); }
@media (prefers-reduced-motion: reduce) {
  .menu-sch, .pv-foglio.is-aperto .menu-sch { transform: none !important; filter: none !important; transition: opacity 200ms ease; }
  .menu-sch__img img, .pv-foglio.is-aperto .menu-sch__img img { animation: none; transition-duration: 0ms; }
}


/* bottone Menu anche su desktop (6/11), dopo le quattro pagine */
.pg-barra .pv-indice-apri { display: inline-flex; }
.pg-barra nav { margin-left: auto; }

@media (min-width: 761px) {
/* desktop: pagine a sinistra, grandi; progetti propri in una colonna a destra */
.pg-foglio { padding-left: var(--passo-12); padding-right: var(--passo-12); }
.pg-menu { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--passo-16, 64px); align-items: start; }
.pg-menu > .pv-foglio__voci:first-child .pv-foglio__voce { font-size: 48px; }
.pg-menu__gruppo { margin: var(--passo-3) 0 var(--passo-3); }
.menu-schede { grid-template-columns: minmax(0, 1fr); gap: 0; }
.menu-sch { grid-template-columns: minmax(140px, 40%) minmax(0, 1fr); gap: 22px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--polvere-900); }
.menu-schede li:first-child .menu-sch { border-top: 1px solid var(--polvere-900); }
.menu-sch__img { aspect-ratio: 16 / 10; }
.menu-sch__t { font-size: 28px; }
.menu-sch__d { font-size: 14px; line-height: 1.5; max-width: 36ch; }
}

/* piede (6/11): marchio piccolo come nella barra al posto del marchio grande a pixel */
.pg-piede__firma { display: inline-flex; align-items: center; gap: var(--passo-6); }
.pg-piede__firma .pv-lettura { flex: none; }
.pv-piede__fondo { margin-top: var(--passo-12); }
/* riga "Inviando dichiari di aver letto la privacy" sotto i moduli (6/11) */
.pg-legale { font-family: var(--font-testo); color: var(--polvere-400); }
.pg-legale a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }