/* C · Ordine — «tolgo rumore».
   Stato finale nel CSS: senza JS e senza WebGL la pagina è completa.
   Classi aggiunte dal JS: .mv (movimento), .mv-largo (galleria che scorre di lato),
   .gl (particelle attive), .gl-lavori (piani WebGL al posto delle immagini). */

:root{
  --paper:var(--c-paper); --ink:var(--c-ink); --pine:var(--c-pine); --ember:var(--c-ember); --clay:var(--c-clay);
  --ink-2:#4b4a46;                 /* 8,1:1 sulla carta */
  --filo:rgba(40,40,40,.14);
  --g:clamp(20px,6vw,104px);       /* margine laterale */
  --aria:clamp(120px,22vh,240px);  /* il silenzio fra le sezioni */
  --h-piano:clamp(220px,50vh,560px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ff-body);font-weight:300;font-size:18px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure,blockquote{margin:0;padding:0}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--pine);outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:absolute;left:var(--g);top:-80px;z-index:20;background:var(--ink);color:var(--paper);padding:12px 18px;text-decoration:none}
.salta:focus{top:12px}

/* la tela WebGL: fissa, dietro al contenuto, entra in dissolvenza sopra la carta */
.tela{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.gl .tela{opacity:1}
main,.piede{position:relative;z-index:1}

/* ── testata ───────────────────────────────────────────── */

/* ── 1. apertura ───────────────────────────────────────── */
.apertura{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:120px var(--g) clamp(48px,9vh,110px)}
.rumore{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(64,92,88,.34) 1px,transparent 1.35px);background-size:13px 13px;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,#000 78%);mask-image:linear-gradient(100deg,transparent 30%,#000 78%);
  transition:opacity 1.4s ease}
.gl .rumore{opacity:0}
.apertura-in{position:relative;max-width:1100px}
.occhiello{font-size:16px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--pine);margin-bottom:clamp(14px,2.4vh,28px)}
h1{font-family:var(--ff-display);font-weight:400;font-size:clamp(3.4rem,11.5vw,11.5rem);line-height:.9;letter-spacing:-.01em;color:var(--ink);margin-left:-.04em}
.lead{max-width:34ch;font-size:clamp(1.125rem,1.7vw,1.5rem);line-height:1.45;margin-top:clamp(22px,4vh,44px);color:var(--ink)}
.luogo{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:16px;color:var(--ink-2)}
.filo{display:inline-block;width:48px;height:1px;background:currentColor}

/* ── 2. manifesto ──────────────────────────────────────── */
.manifesto{position:relative}
.manifesto-in{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:4vw;padding:clamp(90px,12vh,140px) var(--g)}
.etichetta{font-family:var(--ff-body);font-size:16px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.manifesto .etichetta{position:absolute;top:clamp(90px,12vh,140px);left:var(--g)}
.verbi{font-family:var(--ff-display);font-size:clamp(2.6rem,6.2vw,6.4rem);line-height:1.02;color:var(--ink)}
.riga{display:block;white-space:nowrap}
.riga:nth-child(2){padding-left:.9em}
.riga:nth-child(3){padding-left:1.8em;color:var(--pine)}
.punto{display:inline-block;width:.15em;height:.15em;border-radius:50%;background:var(--ember);margin-left:.05em;vertical-align:baseline;transition:opacity .8s}
.segno{color:var(--pine);justify-self:center;width:min(100%,560px)}
.segno svg{width:100%;height:auto;aspect-ratio:353.9/155.5;transition:opacity 1s}
.gl .segno svg,.gl .manifesto .punto{opacity:0}

/* ── 3. lavori ─────────────────────────────────────────── */
.lavori{position:relative;padding:var(--aria) 0 0}
.lavori-in{display:flex;flex-direction:column;justify-content:center}
.lavori-testa{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:0 var(--g);margin-bottom:clamp(28px,5vh,56px)}
.lavori-testa h2{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.6rem,6vw,5.6rem);line-height:1}
.lavori-testa p{font-size:clamp(1.0625rem,1.3vw,1.25rem);color:var(--ink-2);max-width:30ch}
.binario{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scroll-padding:0 var(--g)}
.casi{display:flex;align-items:flex-start;gap:clamp(28px,4.5vw,84px);padding:0 var(--g) 18px;width:max-content}
.caso{scroll-snap-align:start;flex:none}
.piani{display:flex;gap:clamp(12px,1.4vw,22px)}
.piano{position:relative;flex:none;height:var(--h-piano);width:calc(var(--h-piano) * var(--rn));background:#e7e1d4;overflow:hidden}
.piano .media{width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.gl-lavori .piano{background:transparent}
.gl-lavori .piano .media{opacity:0}
.didascalia{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:17px;max-width:calc(var(--h-piano) * 1.5)}
.didascalia .n{font-size:14px;font-weight:300;color:var(--pine);letter-spacing:.08em}
.didascalia strong{font-weight:300}
.didascalia span:last-child{color:var(--ink-2)}
.pausa{position:absolute;right:12px;bottom:12px;min-width:64px;min-height:44px;padding:0 16px;border:0;border-radius:22px;
  background:rgba(244,240,231,.92);color:var(--ink);font:400 15px/1 var(--ff-body);cursor:pointer}
.pausa:hover{background:var(--paper)}
.avanzamento{display:none}
.mv-largo .lavori{height:calc(100vh + var(--scorri,160vw));padding:0;overflow-x:clip}
.mv-largo .lavori-in{position:sticky;top:0;height:100vh;padding-top:clamp(70px,10vh,120px)}
.mv-largo .binario{overflow:visible;scroll-snap-type:none;cursor:grab}
.mv-largo .binario.presa{cursor:grabbing}
.mv-largo .binario.presa *{user-select:none}
.mv-largo .avanzamento{display:block;margin:clamp(24px,4vh,44px) var(--g) 0;height:1px;background:var(--filo);position:relative}
.mv-largo .avanzamento span{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--pine);transform-origin:0 50%;transform:scaleX(0)}

/* ── 4. metodo ─────────────────────────────────────────── */
.metodo{padding:var(--aria) var(--g) 0}
.passi{margin-top:clamp(30px,5vh,60px);border-top:1px solid var(--filo)}
.passi li{display:flex;align-items:baseline;gap:clamp(18px,4vw,72px);padding:clamp(18px,3.4vh,40px) 0;border-bottom:1px solid var(--filo)}
.passi .n{font-size:16px;font-weight:300;color:var(--pine);letter-spacing:.08em;min-width:2.4em}
.parola{font-family:var(--ff-display);font-size:clamp(2.4rem,8.4vw,8.8rem);line-height:1;white-space:nowrap}
.passi li:nth-child(2) .parola{padding-left:clamp(0px,8vw,160px)}
.passi li:nth-child(3) .parola{padding-left:clamp(0px,16vw,320px)}

/* ── 5. chi sono ───────────────────────────────────────── */
.chi{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:end;padding:var(--aria) var(--g) 0}
.ritratto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:40% 50%;filter:grayscale(1)}
.chi-testo{display:grid;gap:14px;max-width:34ch}
.chi-testo .etichetta{margin-bottom:10px}
.frase{font-family:var(--ff-display);font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.05;margin-bottom:8px}
.segnaposto{color:var(--ink-2);font-style:italic}
.meta{font-size:16px;color:var(--ink-2);margin-top:18px;padding-top:18px;border-top:1px solid var(--filo)}

/* ── 6. voce ───────────────────────────────────────────── */
.voce{padding:var(--aria) var(--g) 0}
.voce figure{max-width:1100px;margin:0 auto}
.voce blockquote p{font-family:var(--ff-display);font-size:clamp(2rem,4.4vw,4.2rem);line-height:1.12;color:var(--ink);text-wrap:balance}
.voce figcaption{margin-top:28px;font-size:17px;color:var(--ink-2)}
.voce figcaption strong{font-weight:300;color:var(--ink)}
.stelle{display:block;margin-top:6px;color:var(--pine)}

/* ── 7. contatto e piede ───────────────────────────────── */
.contatto{padding:var(--aria) var(--g) clamp(90px,16vh,180px)}
.contatto h2{font-family:var(--ff-display);font-weight:400;font-size:clamp(4rem,15vw,15rem);line-height:.9;color:var(--pine)}
.contatto .punto{width:.11em;height:.11em}
.vie{display:flex;flex-wrap:wrap;gap:8px clamp(24px,4vw,64px);margin-top:clamp(28px,5vh,56px)}
.vie a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(1.125rem,1.8vw,1.5rem);text-decoration:none;border-bottom:1px solid var(--filo);transition:border-color .3s}
.vie a:hover{border-color:var(--ink)}
.piede{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:36px var(--g) 44px;border-top:1px solid var(--filo);font-size:16px;color:var(--ink-2)}
.piede strong{font-weight:300;color:var(--ink)}
.piede-segno{width:70px;height:auto;color:var(--pine)}

/* ── movimento: manifesto lungo con palco appiccicoso ──── */
.mv .manifesto{height:250vh}
.mv .manifesto-in{position:sticky;top:0;height:100vh;height:100svh}

/* ── telefono ──────────────────────────────────────────── */
@media (max-width:760px){
  body{font-size:17px}
  .apertura{padding-top:110px}
  .manifesto-in{grid-template-columns:1fr;align-content:center;gap:9vh}
  .manifesto .etichetta{position:static}
  .riga:nth-child(2){padding-left:.5em}
  .riga:nth-child(3){padding-left:1em}
  .segno{width:86%}
  :root{--h-piano:min(64vw,62vh)}
  .piano{width:min(calc(var(--h-piano) * var(--rn)),84vw)}
  .didascalia{max-width:84vw}
  .chi{grid-template-columns:1fr}
  .parola{font-size:clamp(2.2rem,10.4vw,4rem)}
  .passi li:nth-child(n) .parola{padding-left:0}
  .piede{align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .tela,.rumore,.segno svg,.punto,.piano .media{transition:none}
}
/* la terza riga del manifesto la scrivono le particelle: la riga vera resta sotto, trasparente */
.gl-frase .verbi .riga:nth-child(3){color:rgb(64 92 88 / var(--frase-a,0))}

/* ══ Revisione del 23/09 ══════════════════════════════════
   Tipografia: Evangelina per nome, manifesto, citazione, «Scrivimi» e i recapiti; Satoshi 500
   stretto per titoli di sezione, metodo, nomi dei casi. Colori del sito di prima: carta →
   ocra (Metodo) → verde (Chi sono) → mattone (voce) → verde bosco (contatto e piede).
   Senza JS i colori stanno sulle sezioni; col movimento li porta il fondo della pagina,
   che la regia sfuma con lo scroll (main.js). Filigrane: il fiore inclinato, più grande
   dello schermo, appena percettibile, in parallasse. */
:root{
  --ocra:#e59642;      /* ink sopra 6,2:1 */
  --verde:#405c58;     /* carta sopra 6,4:1 */
  --bosco:#2d3d30;     /* carta sopra 10,1:1; ocra sopra 4,8:1 */
  --mattone:#7b392d;   /* carta sopra 7,5:1; sulla carta 7,5:1 */
  --raggio:clamp(14px,1.5vw,24px);
}
body{font-size:19px}
.lavori-testa h2{font-family:var(--ff-body);font-weight:300;font-size:clamp(2.6rem,6vw,5.8rem);line-height:.95;letter-spacing:-.035em}
.parola{font-family:var(--ff-body);font-weight:300;letter-spacing:-.03em;font-size:clamp(2.4rem,8vw,8.2rem)}
.frase{font-family:var(--ff-body);font-weight:300;letter-spacing:-.03em;font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.02}
.didascalia{font-size:18px}
.didascalia strong{font-size:clamp(1.25rem,1.6vw,1.5rem);letter-spacing:-.015em}
.didascalia .n{color:var(--mattone)}
.piano,.ritratto img{border-radius:var(--raggio)}

/* i colori delle sezioni (stato finale, senza JS) */
[data-fondo]{background:var(--fondo-sez,transparent)}
.metodo{--fondo-sez:var(--ocra);color:var(--ink);padding-bottom:var(--aria);margin-top:clamp(60px,10vh,120px)}
.chi{--fondo-sez:var(--verde);color:var(--c-paper);padding-bottom:var(--aria)}
.voce{--fondo-sez:var(--mattone);color:var(--c-paper);padding-bottom:var(--aria)}
.contatto,.piede{--fondo-sez:var(--bosco);color:var(--c-paper)}
/* col movimento il colore lo porta il fondo della pagina */
.mv [data-fondo]{background:transparent}
.mv body,.mv{background:var(--fondo-pagina,var(--c-paper))}

.metodo .etichetta,.metodo .passi .n{color:var(--ink)}
.metodo .passi,.metodo .passi li{border-color:rgba(40,40,40,.28)}
.chi .etichetta,.chi .meta,.chi .segnaposto{color:rgba(244,240,231,.86)}
.chi .meta{border-top-color:rgba(244,240,231,.22)}
.ritratto img{filter:grayscale(1) contrast(1.05)}
.voce blockquote p,.voce figcaption,.voce figcaption strong,.voce .stelle{color:var(--c-paper)}

/* contatto e piede, impaginati come la quarta di copertina della proposta B */
.contatto{padding:clamp(60px,10vh,120px) var(--g) clamp(80px,12vh,140px)}
.testatina{display:flex;align-items:center;gap:18px;font-size:14px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,231,.86)}
.testatina-filo{flex:1;height:1px;background:rgba(244,240,231,.22)}
.contatto h2{font-family:var(--ff-display);font-weight:400;color:var(--c-paper);font-size:clamp(4.4rem,17vw,17rem);line-height:1.05;margin-top:clamp(28px,5vh,64px)}
.vie{display:block;margin-top:clamp(48px,9vh,110px);border-top:1px solid rgba(244,240,231,.22)}
.vie li{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:clamp(14px,2.2vh,26px) 0;border-bottom:1px solid rgba(244,240,231,.22)}
.via-etichetta{font-size:14px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,240,231,.86)}
.vie a{font-family:var(--ff-display);font-size:clamp(1.9rem,4.4vw,4.4rem);line-height:1.1;color:var(--c-paper);text-decoration:none;border:0;min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(var(--ocra),var(--ocra)) 0 100%/0 2px no-repeat;transition:background-size .5s cubic-bezier(.2,.7,.2,1)}
.vie a:hover,.vie a:focus-visible{background-size:100% 2px}
.contatto :focus-visible{outline-color:var(--ocra)}
.piede{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 36px;padding:28px var(--g) 40px;border-top:1px solid rgba(244,240,231,.18);font-size:15px;color:rgba(244,240,231,.86)}
.piede-marchio{height:22px;width:auto}
.piede-motto{font-family:var(--ff-display);font-size:1.3rem;color:rgba(244,240,231,.9)}

/* filigrane: il fiore inclinato, più grande dello schermo, appena percettibile.
   Posizione da top/left, rotazione con `rotate` (sopravvive a GSAP), parallasse in yPercent
   partendo da --ancora (memoria: GSAP si prende la trasformazione). */
/* niente contesti di impilamento sulle sezioni: filigrane, trama e segno (z-index −1) scendono
   tutti sul piano di fondo di main, sotto ogni contenuto di ogni sezione */
.apertura,.metodo,.chi,.contatto{position:relative;overflow-x:clip}
/* senza movimento ogni sezione ha il suo fondo: le filigrane (z-index −1) ci passano sotto da sole */
/* GSAP muove solo l'involucro (yPercent); centraggio in margine e rotazione sull'SVG interno,
   dove GSAP non li tocca (memoria: GSAP si prende la trasformazione) */
.filigrana{--w:max(2600px,320vw);position:absolute;z-index:-1;pointer-events:none;width:var(--w);height:var(--w);top:50%;margin-top:calc(var(--w) * -.5)}
.filigrana svg{width:100%;height:100%;max-width:none;rotate:var(--rot,0deg)}
.apertura .filigrana{color:var(--ink);opacity:.045;left:18vw;--rot:-12deg}
.metodo .filigrana{color:var(--ink);opacity:.06;left:-40vw;--rot:14deg}
.chi .filigrana{color:var(--c-paper);opacity:.03;left:20vw;--rot:-8deg}
.contatto .filigrana{color:var(--c-paper);opacity:.03;left:-55vw;--rot:10deg}
.apertura-in{position:relative}

@media (max-width:760px){
  .filigrana{--w:max(1500px,480vw)}
  .apertura .filigrana{left:-20vw}.metodo .filigrana{left:-120vw}.chi .filigrana{left:-60vw}.contatto .filigrana{left:-140vw}
  .parola{font-size:clamp(2.2rem,11vw,4rem)}
  .vie li{flex-direction:column;align-items:flex-start;gap:4px}
  .vie a{font-size:clamp(1.6rem,7.6vw,2.4rem);word-break:break-all}
  .piede{grid-template-columns:1fr}
}

/* col movimento anche il colore del testo lo porta la regia (--testo-pagina, main.js):
   dentro le sezioni i colori «fissi» diventano derivati dal testo corrente */
.mv main,.mv .piede{color:var(--testo-pagina,var(--ink))}
.mv main [data-fondo]{color:inherit}
.mv h1,.mv .verbi,.mv .lead,.mv .luogo,.mv .etichetta,.mv .occhiello,.mv .lavori-testa p,
.mv .didascalia .n,.mv .didascalia span:last-child,.mv .metodo .passi .n,.mv .chi .etichetta,.mv .chi .meta,
.mv .chi .segnaposto,.mv .voce blockquote p,.mv .voce figcaption,.mv .voce figcaption strong,.mv .voce .stelle,
.mv .testatina,.mv .via-etichetta,.mv .contatto h2,.mv .vie a,.mv .piede-motto,.mv .piede-nap{color:inherit}
.mv .verbi .riga:nth-child(3){color:var(--pine)}
.mv .gl-frase .verbi .riga:nth-child(3),.gl-frase.mv .verbi .riga:nth-child(3){color:rgb(64 92 88 / var(--frase-a,0))}
.mv .didascalia span:last-child,.mv .lavori-testa p,.mv .luogo,.mv .chi .meta,.mv .chi .segnaposto{opacity:.88}
.mv .passi,.mv .passi li,.mv .chi .meta,.mv .vie,.mv .vie li,.mv .piede,.mv .avanzamento{border-color:color-mix(in srgb,currentColor 26%,transparent)}
.mv .testatina-filo{background:color-mix(in srgb,currentColor 26%,transparent)}
.mv .filigrana{color:currentColor}

/* la trama di punti dell'apertura resta anche col WebGL acceso, e torna nelle sezioni
   colorate: stessi punti da 13 px, nel colore del testo, sfumati in diagonale */
.gl .rumore{opacity:.7}
@media (max-width:760px){.gl .rumore{opacity:.35}}
.trama{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,color-mix(in srgb,currentColor 30%,transparent) 1px,transparent 1.35px);background-size:13px 13px;
  -webkit-mask-image:linear-gradient(var(--trama-dir,100deg),transparent 35%,#000 85%);mask-image:linear-gradient(var(--trama-dir,100deg),transparent 35%,#000 85%)}
.metodo .trama{--trama-dir:280deg}
.chi .trama{--trama-dir:160deg}
.contatto .trama{--trama-dir:20deg}
.mv .chi .meta,.mv .chi .segnaposto{opacity:.96}

/* ══ Metodo a schede che si impilano (24/09) ══════════════
   Tre schede grandi, testo a sinistra e numero enorme in Evangelina a destra.
   Col movimento sono sticky: ognuna sale sopra la precedente, che arretra appena (main.js).
   Senza movimento stanno una sotto l'altra. */
.metodo{--fondo-sez:transparent;padding-bottom:clamp(60px,10vh,120px)}
.schede{display:grid;gap:clamp(18px,3vh,32px);margin-top:clamp(28px,5vh,56px)}
.scheda{--r:clamp(18px,2vw,32px);display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,760px);border-radius:var(--r);overflow:hidden;transform-origin:50% 0}
.scheda-testo{display:flex;flex-direction:column;gap:clamp(14px,2.4vh,26px);padding:clamp(28px,4vw,64px)}
.scheda-n{font-size:14px;font-weight:300;letter-spacing:.16em;text-transform:uppercase}
.scheda .parola{font-family:var(--ff-body);font-weight:300;letter-spacing:-.03em;line-height:.95;font-size:clamp(2.6rem,5.4vw,6rem);white-space:normal;padding:0!important}
.scheda .segnaposto{font-style:italic;max-width:34ch;color:inherit;opacity:.92}
.scheda-numero{display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:var(--ff-display);line-height:.8;
  font-size:clamp(18rem,44vw,46rem);color:var(--c-paper);user-select:none}
.scheda--1 .scheda-testo{background:var(--ocra);color:var(--ink)}
.scheda--1 .scheda-numero{background:var(--arancio,#c46328)}
.scheda--2 .scheda-testo{background:var(--verde);color:var(--c-paper)}
.scheda--2 .scheda-numero{background:#5d776f}
.scheda--3 .scheda-testo{background:var(--mattone);color:var(--c-paper)}
.scheda--3 .scheda-numero{background:#bd7a2c}
.mv .schede{gap:0}
.mv .scheda{position:sticky;top:clamp(76px,11vh,120px);margin-bottom:clamp(40px,14vh,160px)}
.mv .scheda:last-child{margin-bottom:0}
@media (max-width:760px){
  .scheda{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:min(80vh,640px)}
  .scheda-numero{order:-1;font-size:clamp(9rem,52vw,16rem);min-height:34vh}
  .mv .scheda{top:64px}
}

/* il segno: la linea ember che attraversa la pagina (main.js la traccia sulla pagina composta) */
.segno-filo{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;overflow:visible}
.segno-filo path{fill:none;stroke:var(--c-ember);stroke-linecap:round;stroke-linejoin:round}
.ritratto,.voce figure,.contatto h2,.vie{position:relative}
.contatto .punto--fine{display:inline-block;width:.13em;height:.13em;margin-left:.04em;border-radius:50%;background:var(--c-ember);vertical-align:baseline}

/* ══ 24/09 sera ══════════════════════════════════════════
   Una sola filigrana per tutta la pagina: il fiore gigante su un piano fisso dietro a tutto,
   con una parallasse lunga e lenta su tutto lo scroll (main.js). Niente più quattro fiori che
   si sovrappongono. Il colore segue il testo della pagina. */
.filigrana-pagina{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;color:var(--testo-pagina,var(--ink));opacity:.045}
.filigrana-moto{position:absolute;--w:max(2800px,300vw);width:var(--w);height:var(--w);left:12vw;top:-18vh}
.filigrana-moto svg{width:100%;height:100%;max-width:none;rotate:-12deg}
@media (max-width:760px){.filigrana-moto{--w:max(1600px,420vw);left:-40vw}}
.filigrana{display:none}

/* schede: il velo al posto del filtro (brightness su schede grandi e appiccicose mandava a nero) */
.scheda{position:relative}
.scheda::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#1d1d1b;opacity:var(--ombra,0);pointer-events:none}
.mv .scheda{position:sticky}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.manifesto .punto{margin-left:0}

/* il retino (main.js): immagine di punti a raggio variabile; più alto della sezione per la parallasse */
.trama.retino{background-size:auto;background-repeat:no-repeat;background-position:center;-webkit-mask-image:none;mask-image:none;inset:-6% 0}

/* ══ 25/09 — testi, menu del telefono, voci a schede, piede ══════════════ */
.perchi{max-width:36ch;margin-top:14px;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.45;opacity:.88}
.scheda-riga{font-size:clamp(1.125rem,1.5vw,1.375rem);line-height:1.4;max-width:30ch}

/* le voci dei clienti: schede che si impilano, come il Metodo, sul mattone */
.voce{padding:clamp(60px,10vh,120px) var(--g) clamp(60px,12vh,140px)}
.voce .testatina{max-width:none}
.voci{display:grid;gap:clamp(18px,3vh,32px);margin-top:clamp(28px,5vh,56px)}
.voce-scheda{position:relative;border-radius:clamp(18px,2vw,32px);padding:clamp(28px,5vw,80px);min-height:min(62vh,560px);display:flex;align-items:center;overflow:hidden;transform-origin:50% 0}
.voce-scheda::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#1d1d1b;opacity:var(--ombra,0);pointer-events:none}
.voce-scheda figure{max-width:1000px}
.voce-scheda blockquote p{font-family:var(--ff-display);font-size:clamp(1.9rem,4vw,3.8rem);line-height:1.12;text-wrap:balance;color:inherit}
.voce-scheda figcaption{margin-top:clamp(20px,3vh,32px);font-size:17px;color:inherit}
.voce-scheda figcaption strong{font-weight:300}
.voce-scheda .stelle{display:block;margin-top:6px;opacity:.9;letter-spacing:.08em}
.voce--1{background:var(--c-paper);color:var(--ink)}
.voce--2{background:var(--ocra);color:var(--ink)}
.voce--3{background:var(--bosco,#2d3d30);color:var(--c-paper)}
.voce--4{background:var(--verde,#405c58);color:var(--c-paper)}
.mv .voci{gap:0}
.mv .voce-scheda{position:sticky;top:clamp(76px,11vh,120px);margin-bottom:clamp(40px,12vh,140px)}
.mv .voce-scheda:last-child{margin-bottom:0}
.mv .voce-scheda blockquote p,.mv .voce-scheda figcaption,.mv .voce-scheda figcaption strong,.mv .voce-scheda .stelle{color:inherit}
.voce--1,.mv .voce--1{color:var(--ink)}
.voce--2,.mv .voce--2{color:var(--ink)}
.voce--3,.mv .voce--3,.voce--4,.mv .voce--4{color:var(--c-paper)}

/* piede: social, note legali e preferenze cookie (LZ Consent) */
.piede-link{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 26px;font-size:15px}
.piede-link a,.piede-consenso{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;border:0;background:none;padding:0;font:inherit;cursor:pointer;background-image:linear-gradient(var(--ocra),var(--ocra));background-size:0 1px;background-position:0 78%;background-repeat:no-repeat;transition:background-size .4s}
.piede-link a:hover,.piede-consenso:hover,.piede-link a:focus-visible,.piede-consenso:focus-visible{background-size:100% 1px}
.voce-scheda figcaption strong,.voce-scheda .stelle{color:inherit}

/* i lavori portano al loro racconto: nome del caso come link, cursore «Guarda» sui piani */
.caso-nome{color:inherit;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-position:0 92%;background-repeat:no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.caso-nome:hover,.caso-nome:focus-visible{background-size:100% 1px}
.cursore{position:fixed;left:0;top:0;z-index:40;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--bosco,#2d3d30);color:var(--c-paper);display:grid;place-items:center;font:400 15px/1 var(--ff-body);letter-spacing:.02em;pointer-events:none;opacity:0;scale:.4;transition:opacity .25s,scale .35s cubic-bezier(.2,.7,.2,1)}
.cursore.su{opacity:1;scale:1}
@media (hover:none),(pointer:coarse){.cursore{display:none}}
.mv-largo .piano{cursor:none}
.caso-nome{display:inline-flex;align-items:center;min-height:44px}

/* ══ 25/09 pomeriggio — testi in ogni sezione, Metodo completo, voci in orizzontale ══ */
/* manifesto: il testo nella colonna di destra, il monogramma di riserva sotto (solo senza WebGL) */
.verbi{grid-column:1;grid-row:1/3}
.manifesto-testo{grid-column:2;grid-row:1;align-self:end;max-width:32ch;font-size:clamp(1.0625rem,1.35vw,1.3rem);line-height:1.5}
.segno{grid-column:2;grid-row:2}
.gl .segno{visibility:hidden}
@media (max-width:760px){.verbi,.manifesto-testo,.segno{grid-column:1;grid-row:auto}}

/* testate di sezione: occhiello, titolo in Satoshi, testo a lato */
.sezione-occhiello{font-size:14px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;margin-bottom:clamp(12px,2vh,20px)}
.sezione-testa h2,.lavori-testa h2{font-family:var(--ff-body);font-weight:300;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.3rem,4.8vw,4.8rem);max-width:15ch}
.sezione-testo{display:grid;gap:10px;max-width:40ch;font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.5}
.sezione-testa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(24px,5vw,90px);align-items:end}
.sezione-testa .sezione-occhiello{grid-column:1/-1}
.lavori-testa{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(24px,5vw,90px);align-items:end}
.lavori-testa .sezione-occhiello{grid-column:1/-1}
.lavori-testa .sezione-testo p{color:inherit;max-width:none}
.mv .lavori-testa p{opacity:1}
.link-freccia{color:inherit;text-underline-offset:5px;text-decoration-thickness:1px;display:inline-flex;min-height:44px;align-items:center}
.link-freccia::after{content:"→";margin-left:.45em;transition:translate .3s}
.link-freccia:hover::after{translate:4px 0}
@media (max-width:760px){.sezione-testa,.lavori-testa{grid-template-columns:1fr;row-gap:18px}}
.contatto-testo{display:grid;gap:8px;max-width:44ch;margin-top:clamp(18px,3vh,32px);font-size:clamp(1.0625rem,1.35vw,1.3rem);line-height:1.5}

/* Metodo: schede complete — cosa facciamo e cosa ottieni, parola per parola dalla pagina Metodo */
.metodo .schede{margin-top:clamp(36px,6vh,72px)}
.scheda{min-height:min(calc(100svh - 150px),820px)}
.scheda-colonne{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,40px);margin-top:auto;padding-top:clamp(12px,2vh,24px);border-top:1px solid color-mix(in srgb,currentColor 30%,transparent)}
.scheda-titoletto{font-size:13px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;opacity:.9}
.scheda-lista{display:grid;gap:8px;font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.4}
.scheda-lista li{padding-left:1.1em;position:relative}
.scheda-lista li::before{content:"";position:absolute;left:0;top:.68em;width:.55em;height:1px;background:currentColor}
.scheda-lista--esito li::before{height:.4em;width:.4em;top:.5em;border-radius:50%;background:currentColor}
.scheda-numero{font-size:min(30vw,62svh);line-height:1;align-items:center}
.mv .scheda{margin-bottom:clamp(60px,40vh,420px)}
@media (max-width:1100px){.scheda-colonne{grid-template-columns:1fr}}
@media (max-width:760px){
  /* al telefono una scheda è più alta dello schermo: scorre tutta, poi si ferma col fondo appena sopra il bordo
     (--fermo lo calcola main.js dall'altezza vera) e la successiva le sale sopra. Niente resta da leggere sotto */
  .mv .schede .scheda{position:sticky;top:var(--fermo,64px);margin-bottom:32svh}
  .mv .schede .scheda:last-child{margin-bottom:0}
  .mv .schede{gap:0}
  .mv .schede::after{content:"";display:block;height:28svh}
  .scheda-numero{font-size:min(44vw,34svh);min-height:0;padding:10px 0}
}

/* le voci: carte che passano sul tavolo, in orizzontale */
.voci-binario{margin-top:clamp(28px,5vh,52px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:12px}
.voci-binario::-webkit-scrollbar{display:none}
.voci,.mv .voci{display:flex;gap:clamp(18px,2.4vw,40px);width:max-content;margin:0;padding:0 var(--g) 0 0}
.voce-scheda,.mv .voce-scheda{position:relative;top:auto;flex:none;width:min(62vw,840px);min-height:min(46vh,440px);margin:0;scroll-snap-align:start;transform-origin:50% 100%}
.voce-scheda blockquote p{font-size:clamp(1.7rem,3vw,3rem)}
.voce{padding-top:clamp(70px,11vh,130px)}
.mv-largo .voci-binario{overflow:visible;scroll-snap-type:none}
@media (max-width:760px){.voce-scheda,.mv .voce-scheda{width:84vw;min-height:0}}

/* ══ 25/09 — testi SEO/GEO ══ */
.apertura h1 .occhiello{display:block;font-family:var(--ff-body);font-size:16px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;line-height:1.4;margin:0 0 clamp(14px,2.4vh,28px) .04em;color:var(--pine)}
.mv .apertura h1 .occhiello{color:inherit;opacity:.9}
.perchi{max-width:44ch}

/* domande frequenti: elenco aperto/chiuso, nativo (details), leggibile anche senza JS */
.domande{position:relative;padding:clamp(70px,12vh,140px) var(--g)}
.domande-elenco{margin-top:clamp(28px,5vh,56px);border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);max-width:1100px}
.domanda{border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.domanda summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:clamp(16px,2.6vh,26px) 0}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary h3{font-family:var(--ff-body);font-weight:300;letter-spacing:-.02em;font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.2;margin:0}
.domanda summary::after{content:"";flex:none;width:18px;height:18px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:rotate .35s cubic-bezier(.2,.7,.2,1)}
.domanda[open] summary::after{rotate:45deg}
.domanda summary:focus-visible{outline:2px solid var(--pine);outline-offset:4px}
.domanda p{max-width:62ch;padding:0 0 clamp(18px,3vh,28px);font-size:clamp(1.0625rem,1.2vw,1.2rem);line-height:1.55}

/* piede: le pagine di servizio */
.piede-servizi{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 26px;font-size:15px;padding-top:10px;border-top:1px solid rgba(244,240,231,.14)}
.piede-servizi a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;background-image:linear-gradient(var(--ocra),var(--ocra));background-size:0 1px;background-position:0 78%;background-repeat:no-repeat;transition:background-size .4s}
.piede-servizi a:hover,.piede-servizi a:focus-visible{background-size:100% 1px}

/* ══ 25/09 — manifesto, Metodo: schede sfalsate e incisioni ══ */
.manifesto-testo{font-weight:300;letter-spacing:-.02em;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1.25;max-width:18ch}

/* le schede si impilano sfalsate: di ognuna resta la testata (64 px) */
.scheda:nth-child(1){--i:0}.scheda:nth-child(2){--i:1}.scheda:nth-child(3){--i:2}
.mv .scheda{top:calc(clamp(76px,11vh,120px) + var(--i) * 64px)}
.scheda{min-height:min(calc(100svh - 150px - 128px),760px)}
.scheda-testo{padding-top:clamp(22px,2.6vw,30px)}

/* la metà col numero: incisione anatomica (cuore, cervello, mano) davanti a un numero grande
   e tenue; l'incisione si scopre dal basso quando la scheda arriva (main.js) */
.scheda-numero{position:relative;overflow:hidden;display:grid;place-items:center}
.scheda-cifra{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-display);line-height:1;font-size:min(34vw,72svh);color:color-mix(in srgb,var(--c-paper) 16%,transparent)}
.scheda-incisione{position:relative;height:min(78%,560px);aspect-ratio:auto;display:grid;place-items:center}
.scheda-incisione img{height:100%;width:auto;max-width:100%;object-fit:contain;opacity:.94}
@media (max-width:760px){.scheda-numero{min-height:28vh}.scheda-incisione{height:23vh}.scheda-cifra{font-size:min(56vw,28svh)}}
/* incisioni stampate in nero sul colore, come su carta colorata */
.scheda-incisione img{opacity:.88;mix-blend-mode:multiply}
.scheda-cifra{color:color-mix(in srgb,#1e1c1a 10%,transparent)}

/* ══ 25/09 — i lavori come tavole verticali ══════════════
   Ogni caso è una tavola: media grande da un lato (si forma a puntini entrando), testo dall'altro;
   le tavole si alternano a destra e a sinistra. Annulla la galleria orizzontale. */
.mv-largo .lavori{height:auto;padding:var(--aria) 0 0;overflow-x:clip}
.mv-largo .lavori-in{position:relative;top:auto;height:auto;padding-top:0}
.binario,.mv-largo .binario{overflow:visible;scroll-snap-type:none;cursor:auto}
.casi{display:grid;gap:clamp(90px,16vh,200px);width:auto;padding:clamp(40px,8vh,100px) var(--g) 0}
.caso{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:center}
.caso:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.caso:nth-child(even) .piani{order:2}
.piani{display:flex;gap:clamp(12px,1.4vw,22px);align-items:flex-end}
.piano{height:auto;width:100%;aspect-ratio:var(--rn);flex:1 1 0}
.piani .piano + .piano{flex:.58 1 0;margin-bottom:-8%}
.caso-testo{display:grid;gap:clamp(10px,1.6vh,16px);max-width:34ch}
.caso-n{font-family:var(--ff-display);font-size:clamp(3.4rem,6vw,6rem);line-height:.9;color:color-mix(in srgb,currentColor 22%,transparent)}
/* il numero è decorazione: sta nel CSS, così non è testo da leggere né da misurare */
.caso-n::before{content:attr(data-n)}
.caso-titolo{font-family:var(--ff-body);font-weight:300;letter-spacing:-.03em;font-size:clamp(1.8rem,3vw,3rem);line-height:1.02}
.caso-titolo .caso-nome{min-height:0;display:inline}
.caso-settore{font-size:14px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--mattone)}
.mv .caso-settore{color:inherit;opacity:.8}
.caso-frase{font-family:var(--ff-display);font-size:clamp(1.4rem,2vw,2rem);line-height:1.18;margin-top:6px}
.caso-servizi{font-size:16px;opacity:.85}
.pausa{z-index:2}
@media (max-width:760px){
  .caso,.caso:nth-child(even){grid-template-columns:1fr}
  .caso:nth-child(even) .piani{order:0}
  .piani .piano + .piano{margin-bottom:0}
  .casi{gap:clamp(64px,10vh,110px)}
}
.caso-titolo .caso-nome{display:inline-flex;align-items:center;min-height:44px}

/* ══ 25/09 sera — le tavole scorrono di lato ══════════════
   Stesso impaginato delle tavole (media da un lato, testo dall'altro, alternate), ma su schermo
   largo col movimento la fila si ferma al centro dello schermo e lo scroll la porta in orizzontale
   (main.js). Al telefono, senza movimento e senza JS restano una sotto l'altra. */
:root{--h-tavola:min(64vh,700px)}
.mv-largo .lavori{padding-bottom:clamp(40px,8vh,90px)}
.mv-largo .binario{padding:clamp(16px,3vh,32px) 0 0}
.mv-largo .casi{display:flex;align-items:center;gap:clamp(110px,10vw,200px);width:max-content;padding:0 var(--g)}
.mv-largo .caso,.mv-largo .caso:nth-child(even){flex:none;display:flex;align-items:center;gap:clamp(40px,4.4vw,84px)}
/* in fila l'alternanza destra/sinistra metterebbe due testi accanto: qui il media sta sempre prima
   e le tavole si alternano in altezza, un'onda leggera */
.mv-largo .caso:nth-child(even) .piani{order:0}
.mv-largo .caso:nth-child(odd){translate:0 -3.5vh}
.mv-largo .caso:nth-child(even){translate:0 3.5vh}
.mv-largo .piani{flex:none;align-items:flex-end}
.mv-largo .piano,.mv-largo .piani .piano + .piano{flex:none;height:auto;aspect-ratio:var(--rn);width:min(calc(var(--h-tavola) * var(--rn)),50vw)}
.mv-largo .piani:has(.piano + .piano) .piano:first-child{width:min(calc(var(--h-tavola) * var(--rn)),46vw)}
.mv-largo .piani .piano + .piano{width:min(calc(var(--h-tavola) * .5 * var(--rn)),18vw);margin-bottom:-7%}
.mv-largo .caso-testo{flex:none;width:clamp(280px,25vw,420px)}
.mv-largo .avanzamento{margin:clamp(36px,7vh,72px) var(--g) 0}

/* domande: la risposta si apre morbida (main.js); il punto ember segna la domanda aperta */
.risposta{overflow:hidden}
.domanda summary h3{position:relative;transition:padding-left .6s cubic-bezier(.2,.7,.2,1)}
.domanda summary h3::before{content:"";position:absolute;left:0;top:.46em;width:.34em;height:.34em;border-radius:50%;background:var(--c-ember);scale:0;transition:scale .5s cubic-bezier(.3,1.5,.5,1)}
.domanda[open] summary h3{padding-left:.9em}
.domanda[open] summary h3::before{scale:1}
.domanda.chiude summary h3{padding-left:0}
.domanda.chiude summary h3::before{scale:0;transition-duration:.3s}
.domanda summary:hover h3{opacity:.78}
.domanda summary h3{transition:padding-left .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.domanda .riga-r{display:block}
.domanda.chiude summary::after{rotate:0deg}

/* ══ 25/09 notte — manifesto in una colonna, incisioni a metà forza ══
   La frase non galleggia più da sola in alto a destra: sta sotto i verbi, allineata a «tolgo rumore.»,
   e arriva quando la frase è scritta (main.js). Il monogramma di riserva non serve più. */
.manifesto-in{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(28px,5vh,56px)}
.verbi,.manifesto-testo{grid-column:1;grid-row:auto}
.manifesto-testo{align-self:start;max-width:24ch;margin-left:calc(clamp(2.6rem,6.2vw,6.4rem) * 1.8)}
.manifesto .segno{display:none}
@media (max-width:760px){.manifesto-testo{margin-left:calc(clamp(2.6rem,6.2vw,6.4rem) * 1)}}

/* l'incisione affiora come inchiostro: una sfumatura larga che sale (--sv da main.js, 1 senza JS) */
.scheda-incisione{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--sv,1) * 150% - 50%),transparent calc(var(--sv,1) * 150%));mask-image:linear-gradient(to top,#000 calc(var(--sv,1) * 150% - 50%),transparent calc(var(--sv,1) * 150%))}
.scheda-incisione img{opacity:.5}

/* Metodo: la terza scheda non si posava mai. Uno sticky si ferma quando il suo margine inferiore tocca
   il fondo del contenitore: la terza non aveva spazio, e le prime due (margine da 40vh) si staccavano
   proprio mentre lei arrivava. Ora i margini compensano lo sfalsamento (top + margine uguale per tutte),
   così tutte e tre si posano a 64 px l'una dall'altra, la pila resta ferma (--sosta) e se ne va intera. */
.mv-largo .schede{--passo:clamp(60px,40vh,420px);--sosta:clamp(180px,36vh,400px)}
.mv-largo .scheda--1{margin-bottom:calc(var(--passo) + 128px)}
.mv-largo .scheda--2{margin-bottom:calc(var(--passo) + 64px)}
.mv-largo .scheda--3,.mv-largo .scheda:last-child{margin-bottom:var(--passo)}
.mv-largo .schede::after{content:"";display:block;height:var(--sosta)}
/* manifesto più grande: i verbi prendono la pagina, la frase sotto si legge in due righe pari */
@media (min-width:761px){
  .verbi{font-size:clamp(2.6rem,8.2vw,9.6rem)}
  .manifesto-testo{margin-left:calc(clamp(2.6rem,8.2vw,9.6rem) * 1.8);max-width:30ch;text-wrap:balance;font-size:clamp(1.3rem,1.9vw,2rem)}
}

/* ══ 26/09 — Satoshi leggero, come nel sito di prima (satoshi-light) ══
   Testo e titoli in Satoshi 300; le etichette maiuscole piccole a 400, perché a 13–16 px con la
   spaziatura larga il 300 si sfilaccia. Nei lavori i caratteri tornano al loro posto:
   Evangelina per il nome del caso, Satoshi per la frase e il resto. */
.occhiello,.etichetta,.sezione-occhiello,.apertura h1 .occhiello,.testatina,.via-etichetta,.scheda-n,
.scheda-titoletto,.caso-settore,.didascalia .n,.passi .n{font-weight:400}
strong,.voce-scheda figcaption strong,.piede strong{font-weight:400}
.caso-titolo{font-family:var(--ff-display);font-weight:400;letter-spacing:0;font-size:clamp(2.3rem,3.8vw,3.9rem);line-height:1}
.caso-frase{font-family:var(--ff-body);font-weight:300;font-size:clamp(1.125rem,1.35vw,1.3rem);line-height:1.45;margin-top:2px}
.caso-servizi{font-size:15px;letter-spacing:.02em}
.caso-titolo{font-size:clamp(2.1rem,3.2vw,3.4rem);text-wrap:balance}
.mv-largo .caso-testo{width:clamp(300px,28vw,460px)}

/* ══ 26/09 — dalla tavola al caso senza stacco (View Transitions fra documenti) ══
   L'immagine della tavola cliccata diventa l'immagine d'apertura del caso, e il nome diventa il titolo.
   I nomi si danno solo alla tavola scelta (main.js), perché devono essere unici nella pagina. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition-group(caso-media),::view-transition-group(caso-titolo){animation-duration:.95s;animation-timing-function:cubic-bezier(.65,0,.2,1)}
::view-transition-group(caso-media){border-radius:clamp(14px,1.5vw,24px);overflow:clip}
::view-transition-old(caso-media),::view-transition-new(caso-media){height:100%;object-fit:cover}
::view-transition-old(root),::view-transition-new(root){animation-duration:.55s}
/* la tavola in partenza mostra la foto vera (col WebGL la foto DOM è nascosta: l'istantanea sarebbe vuota) */
.vt-partenza .media{opacity:1!important;transition:none!important}
.vt-partenza{background:#e7e1d4!important}
/* 27/09 — il nome dell'apertura su una riga: con lo scroll vola nella testata (testa.js) */
@media (min-width:761px){.nome-h1{white-space:nowrap}.apertura-in{max-width:none}.apertura-in > :not(h1){max-width:1100px}.apertura-in > .perchi{max-width:66ch}}
/* 27/09 — i titoli in Satoshi a 400: a 300, più grandi del testo, non si distinguevano come titoli */
.lavori-testa h2,.parola,.frase,.scheda .parola,.sezione-testa h2,.domanda summary h3{font-weight:400}
/* 28/09 — i titoli della home in Evangelina, come nelle pagine interne (Satoshi resta per il testo e le domande) */
.sezione-testa h2,.lavori-testa h2,.scheda .parola,.frase{font-family:var(--ff-display);font-weight:400;letter-spacing:0}
.scheda .parola{line-height:.95;font-size:clamp(2.8rem,5.4vw,6rem)}
.sezione-testa h2,.lavori-testa h2{line-height:1}
.frase{line-height:1.05}