/* Disposed Studio — il sito nuovo (BRIEF.md): un tavolo da lavoro.
   Carta millimetrata come sistema dello spazio, ritagli, nastro, note a mano.
   Prende colori e caratteri da site.css (si carica prima); qui niente pillole,
   niente schede, niente ombre morbide: il brief li esclude per nome. */

:root{
  --passo:20px;                 /* il quadretto della carta: largo, non fitto */
  --maglia:calc(var(--passo) * 5);
  --riga:color-mix(in srgb, var(--grigio) 55%, var(--bianco));
  --riga-forte:color-mix(in srgb, var(--grigio) 100%, var(--nero) 6%);
  --avorio:#F3EEE3;
  --mano:"Special Gothic", ui-sans-serif, sans-serif;   /* le note: stretto e storto */
}
@media (max-width: 767px){ :root{ --passo:14px } }   /* sul telefono un passo diverso, non piu' fitto */

/* la carta: millimetri e centimetri, allineata alla pagina (anche la home col solo marchio) */
.carta, .carta-pagina, body.nudo{
  background-color:var(--bianco);
  background-image:
    linear-gradient(var(--riga-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--riga-forte) 1px, transparent 1px),
    linear-gradient(var(--riga) 1px, transparent 1px),
    linear-gradient(90deg, var(--riga) 1px, transparent 1px);
  background-size:var(--maglia) var(--maglia), var(--maglia) var(--maglia), var(--passo) var(--passo), var(--passo) var(--passo);
  background-position:-1px -1px;
}
.liscio{ background:var(--bianco) }   /* il fondo piatto che si alterna alla carta */

.carta-pagina main{ max-width:none; padding:0 }
.salta{ position:absolute; left:-999px }
.salta:focus{ left:var(--gutter); top:var(--s-2); z-index:10; background:var(--nero); color:var(--bianco); padding:var(--s-2) var(--s-3) }

/* ---------- lettere ritagliate ---------- */
.ritagli{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.04em; line-height:1 }
.ritagli .r{
  display:inline-block; padding:.08em .1em .02em; font-family:var(--f); font-weight:var(--w);
  background:var(--bg); color:var(--c); rotate:var(--r); translate:0 var(--y); scale:var(--s);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--nero) 12%, transparent);
  clip-path:polygon(0 3%, 97% 0, 100% 96%, 4% 100%);   /* forbici, non righello */
}
.ritagli .parola{ display:inline-flex; gap:.04em; white-space:nowrap }
.ritagli .spazio{ width:.35em }

/* ---------- testata ---------- */
.testata{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--gutter) }
.testata .logo{ text-decoration:none; font-size:clamp(20px, 3vw, 28px) }
.testata nav{ display:flex; gap:var(--s-6); align-items:baseline }
.testata nav a{ font:500 var(--fs-lead)/1 var(--font-text); text-decoration:none; padding-block:var(--s-2); text-underline-offset:.3em }
.testata nav a:hover, .testata nav a[aria-current]{ text-decoration:underline 2px var(--rosso) }
.testata nav .quieto{ font-size:var(--fs-small); color:var(--ink-2) }

/* ---------- fasce ---------- */
.fascia{ position:relative; padding:var(--s-16) var(--gutter); max-width:1440px; margin-inline:auto }
.fascia + .fascia{ padding-top:0 }
.fascia.piena{ max-width:none }
.kick{ font:500 var(--fs-meta)/1.3 var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s-3) }
.kick .n{ color:var(--rosso); font-weight:700 }
.fascia h1, .fascia h2{ font-weight:700; letter-spacing:-.02em; margin:0 }
.fascia h1{ font-size:clamp(40px, 7vw, 96px); line-height:.9 }
.fascia h2{ font-size:clamp(28px, 4vw, 48px); line-height:1 }
.fascia .lead{ font-size:var(--fs-lead); max-width:52ch; margin:var(--s-4) 0 0 }

/* ---------- note a mano: rosso, strette, storte ---------- */
.nota-mano{
  font:700 clamp(15px, 1.6vw, 19px)/1.15 var(--mano); font-stretch:75%; color:var(--rosso);
  rotate:var(--r, -3deg); display:inline-block; max-width:24ch;
}
.nota-mano::before{ content:"↘ " }
.nota-mano.su::before{ content:"↗ " }
.segno{ background:linear-gradient(transparent 55%, color-mix(in srgb, var(--rosso) 30%, transparent) 55% 88%, transparent 88%) }

/* ---------- foto: tengono il posto anche vuote ---------- */
.foto{ position:relative; margin:0; background:
  repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, var(--grigio) 70%, transparent) 7px 8px), var(--avorio) }
.foto::after{ content:attr(data-etichetta); position:absolute; left:var(--s-2); bottom:var(--s-2); font:var(--fs-meta)/1.2 ui-monospace, Menlo, monospace; color:var(--ink-2); text-transform:uppercase; pointer-events:none }
.foto:has(img:not(.rotta)), .foto:has(video){ background:none }
.foto:has(img:not(.rotta))::after, .foto:has(video)::after{ content:none }
.foto img, .foto video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; background:none }
.foto img.rotta{ visibility:hidden }   /* site.js: un'immagine che non arriva lascia il riquadro */
.foto.alta{ aspect-ratio:3/4 } .foto.larga{ aspect-ratio:4/3 } .foto.lunga{ aspect-ratio:16/9 } .foto.quadra{ aspect-ratio:1 }
/* il nastro: due pezzi semitrasparenti sugli angoli */
.nastro::before{ content:""; position:absolute; z-index:1; width:84px; height:22px; top:-10px; left:18%; rotate:-4deg;
  background:color-mix(in srgb, var(--avorio) 75%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, var(--nero) 6%, transparent) }
.storto{ rotate:var(--r, -1.2deg) }
figcaption, .didascalia{ font:var(--fs-meta)/1.35 var(--font-text); color:var(--ink-2); margin-top:var(--s-2) }
figcaption .n, .didascalia .n{ color:var(--rosso); font-weight:700; margin-right:.3em }

/* ---------- la griglia composta a mano: 12 colonne, le posizioni le scrive il PHP ---------- */
.composta{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:var(--s-12) var(--s-6); align-items:start }
.composta > *{ grid-column:var(--da, auto) / span var(--per, 4); margin-top:var(--giu, 0); rotate:var(--r, 0deg) }
.composta > .fuori{ margin-left:calc(var(--gutter) * -1) }   /* oltre il margine, apposta */
.composta a{ text-decoration:none; display:block }
.composta a:hover .foto{ outline:2px solid var(--rosso); outline-offset:4px }
.composta h3{ font-size:var(--fs-title); margin-top:var(--s-2) }
@media (max-width: 767px){
  /* sul telefono due colonne: la composizione si semplifica, non si rimpicciolisce */
  .composta{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-8) var(--s-4) }
  .composta > *{ grid-column:var(--da-m, auto) / span var(--per-m, 2); margin-top:var(--giu-m, 0); rotate:calc(var(--r, 0deg) / 2) }
  .composta > .fuori{ margin-left:0 }
  .composta > .vuoto-voluto{ display:none }
}

/* ---------- elenco indice (archivio vecchio, fatti di un progetto) ---------- */
.indice{ list-style:none; margin:0; padding:0; border-top:2px solid var(--nero) }
.indice li{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:var(--s-4); padding:var(--s-3) 0; border-bottom:1px solid var(--riga-forte) }
.indice a{ text-decoration:none; font-weight:700 }
.indice a:hover{ text-decoration:underline 2px var(--rosso) }
.indice span{ color:var(--ink-2) }

/* parole al posto dei filtri */
.parole{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6); margin-top:var(--s-6); font:700 clamp(18px, 2.4vw, 28px)/1.1 var(--font-text) }
.parole a{ text-decoration:none }
.parole a[aria-current]{ text-decoration:line-through 3px var(--rosso) }
.parole a:hover{ text-decoration:underline 3px var(--rosso) }
.parole .muta{ color:var(--riga-forte) }   /* categoria senza progetti: la parola tace */

/* link sobri: niente bottoni */
.via{ font:700 var(--fs-lead)/1.2 var(--font-text); text-decoration:underline 2px var(--rosso); text-underline-offset:.25em }
.via::after{ content:""; display:inline-block; width:1em; height:1em; margin-left:.3em; vertical-align:-.14em; background:currentColor; mask:url(icone/arrow-right.svg) center / contain no-repeat }

/* ---------- piede ---------- */
.piede-carta{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:var(--s-8); padding:var(--s-12) var(--gutter); border-top:2px solid var(--nero); background:var(--bianco) }
.piede-carta h2{ font:500 var(--fs-meta)/1 var(--font-text); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0 0 var(--s-3) }
.piede-carta div{ display:grid; gap:var(--s-2); align-content:start }
.piede-carta a{ text-decoration:none } .piede-carta a:hover{ text-decoration:underline 2px var(--rosso) }
.piede-carta .recapiti{ display:grid; gap:var(--s-2); margin:0; align-content:start }
.piede-carta .legale{ grid-column:1 / -1; font-size:var(--fs-meta); color:var(--ink-2); margin:0 }

/* ---------- la nota che vede solo lo studio ---------- */
.nota-studio{ margin:var(--s-8) var(--gutter); padding:var(--s-3) var(--s-4); border:2px dashed var(--rosso); background:var(--bianco); font-size:var(--fs-small); max-width:72ch }
.nota-studio ul{ margin:var(--s-2) 0 0; padding-left:1.2em }

/* ---------- moduli: una riga, niente scatole ---------- */
.riga-campo{ display:grid; gap:var(--s-2); max-width:560px }
.riga-campo input{ font:500 clamp(20px, 3vw, 32px)/1.3 var(--font-text); border:0; border-bottom:3px solid var(--nero); background:transparent; padding:var(--s-2) 0; color:var(--ink); border-radius:0 }
.riga-campo input:focus-visible{ outline:0; border-bottom-color:var(--rosso) }
.riga-campo .errore{ font-size:var(--fs-small); color:var(--ink); margin:0 }
.riga-campo .errore::before{ content:""; display:inline-block; width:1em; height:1em; margin-right:.3em; vertical-align:-.14em; background:var(--rosso); mask:url(icone/arrow-up.svg) center / contain no-repeat }
.riga-campo button{ justify-self:start; font:700 var(--fs-lead) var(--font-text); background:none; border:0; padding:var(--s-2) 0; cursor:pointer; text-decoration:underline 2px var(--rosso); text-underline-offset:.25em; color:var(--ink) }
.miele{ position:absolute; left:-9999px }   /* il campo esca per i robot */

/* ---------- home nuova ---------- */
.eroe{ display:grid; justify-items:center; text-align:center; padding-block:var(--s-8) var(--s-16); min-height:calc(100dvh - 80px); align-content:center }
.eroe .kick{ margin-bottom:var(--s-6) }
/* il marchio vero (marchio.js): qui non riempie lo schermo, lascia aria al claim */
.eroe .marchio-home{ width:min(100%, 58vh * var(--formato)); width:min(100%, 58dvh * var(--formato)) }
@media (max-width: 767px){ .eroe .marchio-home{ width:min(100%, 52dvh * var(--formato-m)) } }
.claim{ font:700 clamp(22px, 3.4vw, 40px)/1.05 var(--font-text); letter-spacing:-.02em; margin:var(--s-6) 0 0; max-width:22ch }
.conti{ font-size:var(--fs-small); color:var(--ink-2); margin:var(--s-3) 0 0; display:flex; gap:var(--s-4) }
.conti b{ color:var(--ink); font-size:var(--fs-lead) }
.eroe > .nota-mano{ justify-self:end; margin-right:8%; margin-top:var(--s-4) }

.evidenza h2 a{ text-decoration:none } .evidenza h2 a:hover{ text-decoration:underline 3px var(--rosso) }
/* foto e disegno dello stesso pezzo: affiancati, sfalsati, la foto un po' storta */
.coppia{ position:relative; display:grid; grid-template-columns:7fr 5fr; gap:var(--s-6); margin-top:var(--s-12); align-items:start }
.coppia .disegno{ margin-top:var(--s-16); background-color:var(--bianco) }
.coppia .disegno img{ object-fit:contain; mix-blend-mode:multiply }   /* un disegno su carta, non una foto */
.coppia > .nota-mano{ position:absolute; right:0; top:calc(var(--s-6) * -1) }
@media (max-width: 767px){
  .coppia{ grid-template-columns:1fr 1fr; gap:var(--s-3) }
  .coppia .disegno{ margin-top:var(--s-12) }
  .coppia > .nota-mano{ position:static; grid-column:1 / -1; justify-self:end }
}

.manifesto h2{ max-width:18ch }
.manifesto .lead{ font-size:clamp(17px, 2vw, 22px); max-width:46ch }
.coda{ padding-block:var(--s-8) var(--s-12); font-size:var(--fs-lead) }
.coda b{ font-weight:700 }

/* ---------- progetto ---------- */
.apertura-foto .foto{ width:100%; max-height:88vh }
.testo-progetto{ font-size:clamp(17px, 2vw, 22px); line-height:1.4 }
.testo-progetto p{ max-width:46ch; margin:0 0 var(--s-4) }
.legale-testo h2{ font-size:var(--fs-lead); margin:var(--s-8) 0 var(--s-3) }
.legale-testo h2:first-child{ margin-top:0 }
.disegno{ background-color:var(--bianco) }
.disegno img{ object-fit:contain; mix-blend-mode:multiply }
.vicini{ display:flex; justify-content:space-between; gap:var(--s-6); padding-block:var(--s-12); font:700 var(--fs-lead)/1.2 var(--font-text); border-top:2px solid var(--nero) }
.vicini a{ text-decoration:none } .vicini a:hover{ text-decoration:underline 2px var(--rosso) }

/* ---------- studio ---------- */
.persone h2{ font-size:var(--fs-title); margin-top:var(--s-3) }
.persone .ruolo{ font-size:var(--fs-lead); margin:var(--s-1) 0 0; max-width:30ch }
.persone .bio{ color:var(--ink-2); margin:var(--s-2) 0 0; max-width:40ch }
.persone .kick{ margin-top:var(--s-3) }
.persone li:nth-child(2){ z-index:1 }   /* il ritratto di mezzo si appoggia sugli altri */

/* ---------- contatti: quasi vuota ---------- */
.contatti{ min-height:70vh; display:grid; align-content:center; justify-items:start }
.contatti .frase{ font:700 clamp(22px, 3vw, 36px)/1.1 var(--font-text); margin:0 0 var(--s-6); max-width:24ch }
.numero-grande{ font:700 clamp(48px, 11vw, 168px)/.9 var(--font-text); letter-spacing:-.04em; text-decoration:none; color:var(--ink) }
.numero-grande:hover{ color:var(--rosso) }
.contatti .nota-mano{ margin-top:var(--s-4) }
.contatti .altro{ margin-top:var(--s-12); color:var(--ink-2); font-size:var(--fs-small) }

/* ---------- 404 ---------- */
.numero-404{ font-size:clamp(96px, 22vw, 260px); margin:0 0 var(--s-6) }
.numero-404 .ritagli{ rotate:-3deg }

/* ---------- landing (index.php) ----------
   Dalle reference: il foglio tecnico di heronaiapp (righe sottili, crocette,
   etichette [01] in monospazio, titoli maiuscoli stretti) e le foto sospese di
   carlesfaus. Per chiunque, anche dal telefono della nonna: testo a 18px,
   contrasto pieno, bersagli da 44px, niente che si capisca solo con l'hover. */
:root{ --mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sottile:1px solid color-mix(in srgb, var(--nero) 22%, transparent) }
body.carta-pagina{ font-size:18px; line-height:1.5 }
[id]{ scroll-margin-top:84px }   /* le ancore non finiscono sotto la testata fissa */

/* testata: fissa, una riga sottile sotto, link tra parentesi */
.testata{ position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bianco) 94%, transparent); border-bottom:var(--sottile); padding-block:var(--s-3) }
.testata nav{ flex-wrap:wrap; gap:var(--s-1) var(--s-4) }
.testata:not(:has(nav)){ justify-content:center }   /* senza menu il logo sta in mezzo */
.testata nav a{ font:500 15px/1 var(--mono); text-transform:uppercase; letter-spacing:.04em; min-height:44px; display:inline-flex; align-items:center }
.testata nav a::before{ content:"["; color:var(--ink-2); margin-right:.15em }
.testata nav a::after{ content:"]"; color:var(--ink-2); margin-left:.15em }
.testata nav a:hover, .testata nav a[aria-current]{ color:var(--rosso); text-decoration:none }
@media (max-width: 767px){
  [id]{ scroll-margin-top:112px }
  .testata .logo{ font-size:18px }
  .testata nav{ width:100%; justify-content:space-between; gap:0 }
  .testata nav a{ font-size:15px; letter-spacing:0 }
  .testata nav a::before, .testata nav a::after{ content:none }   /* le parentesi tolgono spazio: sul telefono conta leggere */
}

/* il foglio tecnico: riga sottile in alto e crocette agli angoli */
.cornice-tecnica{ position:relative; border-top:var(--sottile) }
.cornice-tecnica::before, .cornice-tecnica::after{ content:"+"; position:absolute; top:-.72em; font:400 18px/1 var(--mono); color:var(--ink-2) }
.cornice-tecnica::before{ left:calc(var(--gutter) - .3em) }
.cornice-tecnica::after{ right:calc(var(--gutter) - .3em) }
.etichetta{ font:500 13px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:0 0 var(--s-3) }
.etichetta span{ color:var(--rosso) }
.titolone{ font:700 clamp(40px, 7vw, 104px)/.92 var(--font-text); font-stretch:82%; text-transform:uppercase; letter-spacing:-.01em; margin:0 }
.sezione-tecnica{ padding:var(--s-16) var(--gutter) }

/* apertura: il marchio al centro, le foto sospese intorno su piani diversi */
.eroe-landing{ position:relative; min-height:calc(100dvh - 68px); padding:var(--s-8) var(--gutter); display:grid; grid-template-rows:1fr auto; overflow:clip; border-top:0 }
.eroe-landing::before, .eroe-landing::after{ top:var(--s-2) }
.eroe-marchio{ display:grid; place-items:center; position:relative; z-index:1 }
.eroe-marchio .marchio-home{ width:min(100%, 50dvh * var(--formato)) }
@media (max-width: 767px){ .eroe-marchio .marchio-home{ width:min(100%, 46dvh * var(--formato-m)) } }
.sospesa{ position:absolute; left:var(--x); top:var(--y); width:var(--w); margin:0; rotate:var(--r); pointer-events:none;
  box-shadow:0 0 0 6px var(--bianco), 0 0 0 7px color-mix(in srgb, var(--nero) 12%, transparent) }   /* un bordo di carta, non un'ombra */
.sospesa img{ display:block; width:100%; height:auto; border-radius:0 }
/* sul telefono: quattro, piu' grandi, nella fascia alta sopra il marchio: niente dietro le lettere o la frase */
@media (max-width: 767px){ .sospesa{ width:calc(var(--w) * 2); top:calc(var(--y) * .2) } .sospesa:nth-of-type(n+5){ display:none } }
.frase-chiara{ position:relative; z-index:1; font:700 clamp(24px, 3.4vw, 46px)/1.02 var(--font-text); font-stretch:85%; text-transform:uppercase; max-width:20ch; margin:var(--s-6) 0 0; align-self:end }
.eroe-angolo{ position:absolute; right:var(--gutter); bottom:var(--s-8); margin:0; text-align:right; font:500 13px/1.6 var(--mono); text-transform:uppercase; color:var(--ink-2) }
@media (max-width: 767px){ .eroe-angolo{ display:none } }

/* sezioni guidate dallo scorrimento (site.js: [data-scorre], --p da 0 a 1) */
[data-scorre]{ --p:1 }
.fermo{ min-height:100dvh }
[data-scorre].anima .fermo{ position:sticky; top:0 }
.dichiarazione.anima{ height:220vh }
.processo.anima{ height:340vh }

/* la frase che si accende parola per parola */
.dichiarazione .fermo{ display:grid; place-items:center; padding:var(--s-16) var(--gutter); min-height:80dvh }
.dichiarazione.anima .fermo{ min-height:100dvh }
.dichiarazione p{ font:700 clamp(40px, 8.5vw, 136px)/.95 var(--font-text); font-stretch:80%; text-transform:uppercase; text-align:center; margin:0; max-width:14ch }
.dichiarazione.anima [data-passo]{ opacity:.12; transition:opacity 300ms var(--enter) }
.dichiarazione.anima [data-passo].acceso{ opacity:1 }
.dichiarazione [data-passo]:last-child{ color:var(--rosso) }

/* la pianta che si disegna: tre fasi in sequenza lungo --p */
.processo .fermo{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows:auto 1fr auto; gap:var(--s-4) var(--s-12); padding:var(--s-12) var(--gutter); align-items:center }
.processo .etichetta, .processo .titolone{ grid-column:1 }
.processo .pianta{ grid-column:2; grid-row:1 / 4; width:100%; height:auto; max-height:78dvh; fill:none; stroke:var(--nero) }
.processo .didascalie{ grid-column:1; grid-row:3; list-style:none; margin:0; padding:0; display:grid; gap:var(--s-2) }
.didascalie li{ background:var(--nero); color:var(--bianco); padding:var(--s-3) var(--s-4); font:500 17px/1.35 var(--font-text); max-width:30ch }
.didascalie li span{ font:500 13px var(--mono); color:color-mix(in srgb, var(--bianco) 60%, transparent) }
.processo.anima .didascalie li{ opacity:.18; transition:opacity 300ms var(--enter) }
.processo.anima .didascalie li.acceso{ opacity:1 }
.pianta *{ vector-effect:non-scaling-stroke }
/* selettori d'elemento e non d'attributo: sull'SVG pathLength (con la maiuscola) non viene
   rivalutato quando cambia una classe, e la linea resta com'era */
.pianta path, .pianta circle{ stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--q, 1)) }
.pianta text{ fill:var(--nero); stroke:none; font:500 15px var(--mono); text-anchor:middle; opacity:var(--q, 1) }
.pianta .rosso{ stroke:var(--rosso) } .pianta text.rosso{ fill:var(--rosso); text-anchor:start }
.processo.anima .fase1{ --q:clamp(0, var(--p) / .32, 1) }
.processo.anima .fase2{ --q:clamp(0, (var(--p) - .33) / .3, 1) }
.processo.anima .fase3{ --q:clamp(0, (var(--p) - .66) / .3, 1) }
@media (max-width: 767px){
  .processo .fermo{ grid-template-columns:1fr; grid-template-rows:auto auto 1fr auto; gap:var(--s-3) }
  .processo .pianta{ grid-column:1; grid-row:3; max-height:52dvh }
  .processo .didascalie{ grid-row:4 }
  .processo.anima .didascalie li:not(.acceso){ display:none }   /* sul telefono una didascalia alla volta */
}

/* cosa facciamo: quattro colonne separate da righe sottili */
.colonne{ list-style:none; margin:var(--s-12) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:var(--sottile) }
.colonne li{ padding:var(--s-4) var(--s-6) var(--s-8); border-right:var(--sottile) }
.colonne li:last-child{ border-right:0 }
.colonne .icona{ display:block; width:96px; height:96px; margin:var(--s-6) 0; color:var(--nero) }
/* l'icona si disegna quando la colonna entra nello schermo (data-rivela → .visto).
   Keyframes e non transition: su stroke-dashoffset la transizione resta ferma all'inizio. */
.colonne .icona path{ stroke-dasharray:1; stroke-dashoffset:0 }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference){
  .colonne li:not(.visto) .icona path{ stroke-dashoffset:1 }
  .colonne li.visto .icona path{ animation:traccia 1.4s var(--enter) both }
}
@keyframes traccia{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }
.colonne h3{ font:700 clamp(24px, 2.4vw, 32px)/1 var(--font-text); font-stretch:85%; text-transform:uppercase; margin:0 0 var(--s-3) }
.colonne p{ margin:0 }
.colonne .finestra{ margin-top:var(--s-6) }
@media (max-width: 1023px){ .colonne{ grid-template-columns:1fr 1fr } .colonne li:nth-child(2n){ border-right:0 } .colonne li{ border-bottom:var(--sottile) } }
@media (max-width: 599px){ .colonne{ grid-template-columns:1fr } .colonne li{ border-right:0; padding-inline:0 } .colonne .icona{ width:72px; height:72px; margin:var(--s-3) 0 } }

/* la finestra della parallasse: la foto dentro e' piu' grande e scorre piu' lenta (site.js) */
.finestra{ overflow:hidden }
.finestra > .foto{ scale:1.2 }

.progetti-landing{ list-style:none; margin:var(--s-12) 0 0; padding:0; display:grid; gap:var(--s-16) var(--s-8); grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)) }
.progetti-landing a{ display:block; text-decoration:none; color:inherit }
.progetti-landing .etichetta{ margin-top:var(--s-4) }
.progetti-landing h3{ font:700 clamp(26px, 3vw, 40px)/1 var(--font-text); font-stretch:85%; text-transform:uppercase; margin:0 0 var(--s-2) }
.progetti-landing p{ margin:0; max-width:44ch }
.progetti-landing .via{ display:inline-block; margin-top:var(--s-3); min-height:44px; line-height:44px }
.progetti-landing a:hover h3, .progetti-landing a:focus-visible h3{ color:var(--rosso) }
@media (min-width: 768px){ .progetti-landing li:nth-child(even){ margin-top:var(--s-16) } }

.manifesto-h{ font:700 var(--fs-lead)/1.3 var(--font-text); margin:var(--s-8) 0 0 }
.manifesto-testo{ margin-top:var(--s-8); columns:2 30ch; column-gap:var(--s-12); column-rule:var(--sottile) }
.manifesto-testo p{ font:500 clamp(20px, 2vw, 26px)/1.4 var(--font-text); margin:0 0 var(--s-4) }
.persone-landing{ list-style:none; margin:var(--s-12) 0 0; padding:0; display:grid; gap:var(--s-8); grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)) }
.persone-landing h3{ font-size:var(--fs-title); margin:var(--s-3) 0 var(--s-1) }
.persone-landing p{ margin:0 }

.contatto-landing{ padding-block:var(--s-16) }
.contatto-landing .lead{ margin-top:var(--s-6) }
.email-grande{ display:inline-block; margin-top:var(--s-6); font:700 clamp(28px, 7vw, 104px)/1 var(--font-text); font-stretch:85%; letter-spacing:-.02em; color:var(--ink);
  text-decoration:underline 4px var(--rosso); text-underline-offset:.12em; overflow-wrap:anywhere }
.email-grande:hover, .email-grande:focus-visible{ color:var(--rosso) }

/* piede: righe sottili e link tra parentesi, come la testata */
.piede-carta{ border-top:var(--sottile); font:500 14px/1.4 var(--mono); text-transform:uppercase }
.piede-carta .firma{ font-weight:700; margin:0 }
/* tutta la riga: un'email non ha spazi e in una colonna stretta allargava la pagina sul telefono */
.piede-carta .recapiti{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6) }
.piede-carta a{ overflow-wrap:anywhere }
.piede-carta .recapiti a{ min-height:44px; display:inline-flex; align-items:center; text-transform:none }
.piede-carta .recapiti a::before{ content:"["; color:var(--ink-2) } .piede-carta .recapiti a::after{ content:"]"; color:var(--ink-2) }