/* c-ordine/testa.css — la testata e il menu, uguali in home, nei casi e nelle pagine interne (testa.js).
   In cima: marchio, nome, voci, «Scrivimi» e «Menu», senza fondo. Scendendo la testata si ritira e
   restano solo i due bottoni (su un vetro sfocato, come nel sito di riferimento); risalendo a metà
   pagina torna tutta, sul vetro. Il colore segue quello della pagina (--testo-pagina, --fondo-pagina).
   Il menu: un campo bosco che si apre a cerchio dal bottone, le voci grandi che salgono dalla loro
   riga, e a destra l'incisione della voce su cui passi. */

.testa{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);padding:16px var(--g);
  color:var(--testo-pagina,var(--c-ink));pointer-events:none;transition:color .5s}
.testa > *{pointer-events:auto}
/* il vetro: un velo del colore della pagina, sfocato, che entra quando la testata non è più in cima */
.testa::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--fondo-pagina,var(--c-paper)) 70%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent);
  opacity:0;transition:opacity .45s,translate .6s cubic-bezier(.7,0,.2,1)}
.testa-su .testa::before{opacity:1}

.marchio{display:inline-flex;align-items:center;gap:14px;min-height:48px;color:inherit;text-decoration:none;transition:translate .6s cubic-bezier(.7,0,.2,1),opacity .4s}
.marchio-mono{width:clamp(66px,5.4vw,84px);height:auto;color:var(--c-pine);transition:color .5s}
.mv .marchio-mono{color:currentColor}
.marchio-nome{font-family:var(--ff-display);font-size:clamp(1.15rem,1.4vw,1.4rem);line-height:1;letter-spacing:.005em;white-space:nowrap;
  padding-left:14px;border-left:1px solid color-mix(in srgb,currentColor 30%,transparent)}

.testa-nav{display:flex;gap:clamp(6px,1.6vw,26px);margin-left:auto;transition:translate .6s cubic-bezier(.7,0,.2,1),opacity .4s}
.testa-nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:inherit;text-decoration:none;font-size:16px;font-weight:400;letter-spacing:.01em}
/* la voce: un punto ember sotto che si allarga in un tratto */
.testa-nav a::after{content:"";position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:3px;background:var(--c-ember);
  scale:0;transition:scale .35s cubic-bezier(.3,1.6,.5,1),width .45s cubic-bezier(.2,.7,.2,1),margin .45s cubic-bezier(.2,.7,.2,1)}
.testa-nav a:hover::after,.testa-nav a:focus-visible::after{scale:1}
.testa-nav a[aria-current="page"]::after{scale:1;width:calc(100% - 12px);height:2px;margin-left:calc(-50% + 6px);bottom:8px}

.testa-azioni{display:flex;gap:8px;align-items:center}
.testa-nav + .testa-azioni{margin-left:clamp(4px,1vw,14px)}
.pillola{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border-radius:24px;border:1px solid color-mix(in srgb,currentColor 40%,transparent);
  background:color-mix(in srgb,var(--fondo-pagina,var(--c-paper)) 55%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:inherit;text-decoration:none;font:400 16px/1 var(--ff-body);cursor:pointer;overflow:hidden;isolation:isolate;transition:border-color .3s,color .35s}
/* il riempimento: sale dal basso come inchiostro, e il testo cambia colore sopra */
.pillola::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;border-radius:inherit;translate:0 102%;transition:translate .5s cubic-bezier(.7,0,.2,1)}
.pillola:hover,.pillola:focus-visible{border-color:currentColor}
.pillola:hover::before,.pillola:focus-visible::before{translate:0 0}
.pillola > span{transition:color .35s;position:relative}
.pillola:hover > span,.pillola:focus-visible > span{color:var(--fondo-pagina,var(--c-paper))}
.pillola--piena{background:var(--testo-pagina,var(--c-ink));border-color:var(--testo-pagina,var(--c-ink));color:var(--fondo-pagina,var(--c-paper))}
.pillola--piena::before{background:var(--c-ember)}
.pillola--piena:hover > span,.pillola--piena:focus-visible > span{color:#1e1c1a}
.pillola--piena .punto-pillola{width:7px;height:7px;border-radius:50%;background:var(--c-ember);transition:background .35s}
.pillola--piena:hover .punto-pillola{background:#1e1c1a}

/* scendendo: la testata si ritira, restano i due bottoni; risalendo torna */
.testa-via .testa::before{translate:0 -101%}
.testa-via .marchio,.testa-via .testa-nav{translate:0 -160%;opacity:0}

/* in home il nome piccolo aspetta quello grande dell'apertura, che arriva volando con lo scroll (testa.js) */
.nome-volante{position:fixed;left:0;top:0;z-index:31;pointer-events:none;transform-origin:0 0;white-space:nowrap;will-change:transform;
  font-family:var(--ff-display);font-weight:400;line-height:1;color:var(--testo-pagina,var(--c-ink))}
.nome-volante{visibility:hidden}
/* il nome vero resta finché non si scorre (è il contenuto più grande dell'apertura, conta per l'LCP):
   al primo movimento la copia prende il suo posto e parte */
.nome-in-volo .nome-h1{visibility:hidden}
.nome-in-volo .nome-volante{visibility:visible}
.con-nome-volante .testa .marchio-nome{opacity:0}
.con-nome-volante.nome-arrivato .testa .marchio-nome{opacity:1}
.con-nome-volante.nome-arrivato .nome-volante{opacity:0}
.con-nome-volante:not(.nome-arrivato) .testa .marchio{translate:none!important;opacity:1!important}
.con-nome-volante .marchio-nome{border-left-color:transparent}
.con-nome-volante.nome-arrivato .marchio-nome{border-left-color:color-mix(in srgb,currentColor 30%,transparent);transition:border-color .4s .1s}
@media (max-width:1080px){.testa-nav{display:none}.testa-azioni,.testa-nav + .testa-azioni{margin-left:auto}}
@media (max-width:760px){
  .testa{padding:12px 16px;gap:10px}
  .marchio-nome{display:none}
  .pillola{padding:0 16px;font-size:15px}
  .testa .pillola{padding:0 14px}.testa .punto-pillola{display:none}
}

/* ── il menu ────────────────────────────────────────────── */
.menu-pieno{position:fixed;inset:0;z-index:60;color:var(--c-paper);display:block;padding:0}
.menu-pieno[hidden]{display:none}
.menu-fondo{position:absolute;inset:0;background:var(--bosco,#2d3d30);clip-path:circle(var(--r,150%) at var(--cx,100%) var(--cy,0%))}
.menu-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);padding:clamp(90px,13vh,130px) var(--g) clamp(30px,5vh,56px);overflow:auto}
/* le icone del menu: SVG disegnati, tratto 1.5 con le punte tonde; la seconda riga del Menu si allunga in hover */
.pillola .menu-segno{display:block;flex:none;width:20px;height:14px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;position:relative;transition:color .35s,translate .5s cubic-bezier(.2,.7,.2,1)}
.menu-segno--x{width:14px}
.menu-segno-b{stroke-dasharray:11 40;transition:stroke-dasharray .45s cubic-bezier(.2,.7,.2,1)}
.menu-apri:hover .menu-segno-b,.menu-apri:focus-visible .menu-segno-b{stroke-dasharray:18 40}
.menu-segno--x path{transform-origin:7px 7px;transition:rotate .5s cubic-bezier(.2,.7,.2,1)}
.menu-chiudi:hover .menu-segno--x path,.menu-chiudi:focus-visible .menu-segno--x path{rotate:90deg}
.pillola:hover > .menu-segno,.pillola:focus-visible > .menu-segno{color:var(--fondo-pagina,var(--c-paper))}
.menu-chiudi:hover > .menu-segno{color:var(--bosco,#2d3d30)}
.menu-chiudi{position:absolute;top:16px;right:var(--g);color:var(--c-paper);border-color:rgba(244,240,231,.45);background:transparent}
.menu-chiudi:hover > span{color:var(--bosco,#2d3d30)}
.menu-voci{display:flex;flex-direction:column;justify-content:center;gap:clamp(0px,.6vh,8px)}
.menu-voci > a{position:relative;display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);min-height:44px;color:var(--c-paper);text-decoration:none;overflow:hidden;padding-bottom:.08em}
.menu-n{font-size:14px;letter-spacing:.16em;opacity:.7;min-width:2.2em;font-weight:400}
.menu-t{display:inline-block;font-family:var(--ff-display);font-size:clamp(2.8rem,6.6vw,6.2rem);line-height:1.02;transition:translate .6s cubic-bezier(.2,.7,.2,1),color .3s}
.menu-t::after{content:"";display:inline-block;width:.14em;height:.14em;margin-left:.08em;border-radius:50%;background:var(--c-ember);scale:0;transition:scale .45s cubic-bezier(.3,1.6,.5,1)}
.menu-voci > a:hover .menu-t,.menu-voci > a:focus-visible .menu-t{translate:.18em 0}
.menu-voci > a:hover .menu-t::after,.menu-voci > a:focus-visible .menu-t::after,.menu-voci > a[aria-current="page"] .menu-t::after{scale:1}
.menu-voci:has(> a:hover) > a:not(:hover) .menu-t{color:rgba(244,240,231,.45)}
/* i settori, sotto «Servizi»: una riga piccola, allineata al nome della voce */
.menu-settori{margin:-.2em 0 .5em;padding-left:calc(14px * 2.2 + clamp(14px,2vw,28px));font-size:clamp(15px,1.15vw,18px);line-height:1.4;color:rgba(244,240,231,.62)}
.menu-settori a{display:inline-block;padding:10px 0;color:var(--c-paper);text-decoration:none;background:linear-gradient(var(--c-ember),var(--c-ember)) 0 80%/0 1px no-repeat;transition:background-size .45s}
.menu-settori a:hover,.menu-settori a:focus-visible,.menu-settori a[aria-current="page"]{background-size:100% 1px}
.menu-lato{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:0}
.menu-incisione{position:relative;flex:1;min-height:200px;margin:0}
.menu-incisione img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;filter:invert(1);mix-blend-mode:screen;opacity:0;scale:.96;
  transition:opacity .6s,scale 1.2s cubic-bezier(.2,.7,.2,1)}
.menu-incisione img.su{opacity:.8;scale:1}
.menu-motto{font-family:var(--ff-display);font-size:clamp(1.4rem,2vw,2rem);line-height:1.2}
.menu-motto .punto{background:var(--c-ember)}
.menu-contatti{display:grid;gap:2px;font-size:16px;list-style:none;padding:0;border-top:1px solid rgba(244,240,231,.18);padding-top:14px}
.menu-contatti a{display:inline-flex;align-items:center;min-height:40px;color:inherit;text-decoration:none;background:linear-gradient(var(--c-ember),var(--c-ember)) 0 78%/0 1px no-repeat;transition:background-size .45s}
.menu-contatti a:hover{background-size:100% 1px}
@media (max-width:860px){
  .menu-in{grid-template-columns:1fr;align-content:start}
  .menu-incisione{display:none}
  .menu-t{font-size:clamp(2.6rem,12vw,4.4rem)}
}
@media (prefers-reduced-motion:reduce){
  .testa::before,.marchio,.testa-nav,.pillola::before,.menu-t,.menu-incisione img{transition:none}
}

/* la testata sopra il fondo che cambia colore: il colore lo porta la pagina */
.mv .testa{color:var(--testo-pagina,var(--c-ink))}

/* ── il cursore «Guarda»: un tondo grande che segue il puntatore sulle immagini dei lavori ── */
.cursore{position:fixed;left:0;top:0;z-index:40;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;background:var(--c-ember);color:#1e1c1a;
  display:grid;place-items:center;font:400 16px/1 var(--ff-body);letter-spacing:.02em;pointer-events:none;opacity:0;scale:.2;
  transition:opacity .3s,scale .5s cubic-bezier(.3,1.5,.5,1);box-shadow:0 10px 40px -12px rgba(30,28,26,.35)}
.cursore span::after{content:" →"}
.cursore.su{opacity:1;scale:1}
@media (hover:none),(pointer:coarse){.cursore{display:none}}
/* il pastello (pastello.js): fra il fondo della pagina e il contenuto */
.tela-pastello{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}

/* il marchio della testata: il fiore da solo accanto al nome (le iniziali col nome accanto si ripetevano) */
.marchio-fiore{width:clamp(30px,2.5vw,38px)}
.marchio{gap:12px}
.marchio-nome,.con-nome-volante.nome-arrivato .marchio-nome{border-left:0;padding-left:0}

/* la polvere (pagine/polvere.js), in home e nelle pagine */
.tela-polvere{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.polvere-su{opacity:var(--polvere-a,1)}
/* l'elemento vero, finché la polvere lo compone, resta a un filo di opacità e non a zero: così il browser
   lo conta da subito come dipinto (LCP) e non tre secondi dopo, quando la figura è finita */
.polvere-su{opacity:max(var(--polvere-a,1),.012)}

/* 28/09 — il marchio: in cima il fiore dritto (quello del logo orizzontale) e il nome; quando la testata torna
   a metà pagina, il marchio piccolo con L e Z */
.marchio-fiore{width:clamp(32px,2.6vw,40px);height:auto;color:currentColor}
.marchio-lz{display:none;width:clamp(64px,5vw,80px);height:auto;color:currentColor}
.testa-ritorno .marchio-lz{display:block}
.testa-ritorno .marchio-fiore,.testa-ritorno .marchio-nome{display:none}
.mv .marchio-fiore,.mv .marchio-lz{color:currentColor}

/* il testo cambia colore con una transizione morbida: la variabile è registrata come colore, così il browser
   la anima (il fondo no: lo muove già il regista, fotogramma per fotogramma) */
@property --testo-pagina{syntax:'<color>';inherits:true;initial-value:#282828}
html{transition:--testo-pagina .9s cubic-bezier(.4,0,.2,1)}
[data-pastello]{transition:color .9s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){html,[data-pastello]{transition:none}}

/* il menu: la filigrana del fiore gigante, come quella delle pagine, appena visibile sul bosco;
   all'apertura gira e si posa (testa.js). Sta dentro il fondo, quindi il cerchio la ritaglia. */
.menu-filigrana{position:absolute;width:max(130vmax,1400px);aspect-ratio:1;left:-38vmax;top:-20vmax;color:var(--c-paper);opacity:.055;pointer-events:none}
.menu-filigrana svg{width:100%;height:100%;rotate:-12deg}
.menu-fondo{overflow:hidden}
@media (max-width:760px){.menu-filigrana{width:220vmax;left:-80vmax;top:-40vmax}}

/* ══ 28/09 — interazioni al passaggio, in tutto il sito (home, casi, pagine) ══════════════════════════════
   Una grammatica sola: le foto si avvicinano (WebGL: gl.js e piani.js), i bottoni sono magnetici e si
   riempiono di ember dal basso (testa.js), i link hanno la sottolineatura che si ritira e ne cresce una ember,
   le frecce avanzano, le schede si alzano e si scaldano. */

/* link nel testo, ovunque */
main p a:not([class]),main li a:not([class]),main dd a:not([class]),.chiusura-testo a,.contatto a:not([class]){text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat,linear-gradient(var(--c-ember),var(--c-ember)) 0 100%/0 2px no-repeat;
  transition:background-size .55s cubic-bezier(.2,.7,.2,1);padding-bottom:1px}
main p a:not([class]):hover,main li a:not([class]):hover,main dd a:not([class]):hover,.chiusura-testo a:hover,.contatto a:not([class]):hover{background-size:0 1px,100% 2px}

/* le frecce: la sottolineatura ember si disegna, la freccia avanza */
.link-freccia{text-decoration:none!important;background:linear-gradient(var(--c-ember),var(--c-ember)) 0 90%/0 2px no-repeat;transition:background-size .55s cubic-bezier(.2,.7,.2,1)}
.link-freccia::after{transition:translate .45s cubic-bezier(.2,.7,.2,1)}
.link-freccia:hover,a:hover .link-freccia,a:focus-visible .link-freccia{background-size:calc(100% - 1.3em) 2px}
.link-freccia:hover::after,a:hover .link-freccia::after,a:focus-visible .link-freccia::after{translate:6px 0}

/* home: il nome del caso nelle tavole */
.caso-nome{text-decoration:none;background:linear-gradient(var(--c-ember),var(--c-ember)) 0 96%/0 2px no-repeat;transition:background-size .6s cubic-bezier(.2,.7,.2,1),color .3s}
.caso-nome:hover,.caso-nome:focus-visible{background-size:100% 2px}
.caso:hover .caso-numero,.caso:hover .caso-n{color:var(--c-ember);transition:color .4s}

/* casi: «Vedi il sito», il caso successivo, «Tutti i lavori» */
.prossimo-nome{transition:translate .7s cubic-bezier(.2,.7,.2,1)}
.prossimo-link:hover .prossimo-nome{translate:.1em 0}
.tutti{transition:border-color .3s,translate .45s cubic-bezier(.2,.7,.2,1)}
.tutti:hover{translate:-4px 0}

/* le domande (home e pagine): la riga si scalda e la domanda scivola */
.domanda summary{transition:background .4s}
.domanda summary:hover{background:linear-gradient(90deg,color-mix(in srgb,var(--c-ember) 10%,transparent),transparent 75%)}
.domanda summary h3{transition:translate .5s cubic-bezier(.2,.7,.2,1),padding-left .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.domanda:not([open]) summary:hover h3{translate:.3em 0}
.domanda summary::after{transition:rotate .35s cubic-bezier(.2,.7,.2,1),scale .35s}
.domanda summary:hover::after{scale:1.25}

/* le schede e le carte: si alzano, l'ombra si allunga */
.settore,.lista-link a,.riquadro,.caso-scheda,.nastro-voce,.voce-scheda{transition:translate .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s,background .4s}
.settore:hover,.lista-link a:hover,.riquadro:hover,.nastro-voce:hover{translate:0 -8px;box-shadow:0 28px 50px -30px rgba(30,28,26,.55)}
.caso-scheda-foto img{transition:scale 1.4s cubic-bezier(.2,.7,.2,1)}
.caso-scheda:hover .caso-scheda-foto img{scale:1.06}

/* le foto vere (senza WebGL, al telefono o col movimento ridotto): si avvicinano anche loro */
a .foto-piano img,.tassello-cornice img,.prossimo-foto img{transition:scale 1.4s cubic-bezier(.2,.7,.2,1)}
a:hover .foto-piano img,.tassello:hover .tassello-cornice img,.prossimo-link:hover .prossimo-foto img{scale:1.06}

/* i bottoni magnetici (testa.js li sposta verso il puntatore): la traslazione è morbida */
.magnetico{transition:translate .5s cubic-bezier(.2,.7,.2,1),color .35s,border-color .3s,background .3s}
.magnetico > span{display:inline-block;transition:translate .5s cubic-bezier(.2,.7,.2,1),color .35s}

/* i recapiti grandi: la sottolineatura ember si disegna (anche in home) */
.vie a{background:linear-gradient(var(--c-ember),var(--c-ember)) 0 100%/0 2px no-repeat;transition:background-size .55s cubic-bezier(.2,.7,.2,1)}
.vie a:hover,.vie a:focus-visible{background-size:100% 2px}

@media (prefers-reduced-motion:reduce){.settore:hover,.lista-link a:hover,.riquadro:hover,.nastro-voce:hover{translate:none}.magnetico{translate:none!important}}
@media (hover:none){.settore:hover,.lista-link a:hover,.riquadro:hover,.nastro-voce:hover{translate:none;box-shadow:none}}
/* GSAP muove il cursore (x, y) e si prendeva anche la sua scala, fermandola a .2: la scala e il tondo
   stanno sull'elemento interno, che GSAP non tocca */
.cursore{background:none;box-shadow:none;scale:none!important;opacity:1!important;transition:none;width:128px;height:128px}
.cursore span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--c-ember);color:#1e1c1a;
  box-shadow:0 10px 40px -12px rgba(30,28,26,.35);scale:.2;opacity:0;transition:opacity .3s,scale .5s cubic-bezier(.3,1.5,.5,1)}
.cursore.su span{scale:1;opacity:1}
.cursore span{display:flex;align-items:center;justify-content:center;gap:.35em}
.cursore span::after{content:"→"}

/* ══ 26/09 — giro Impeccable ═══════════════════════════════════════════════════════════════════════
   Un solo anello di fuoco su tutto il sito: il colore del testo della pagina in quel momento (inchiostro sulla
   carta, carta sul bosco), quindi sempre leggibile anche dopo i cambi di fondo. */
html :focus-visible{outline:2px solid var(--testo-pagina,currentColor);outline-offset:3px}
/* il «Salta al contenuto» sopra la testata (prima ci finiva sotto, tagliato) */
.salta{z-index:60}
/* al telefono le lettere sparpagliate del manifesto e le parole della citazione dei casi partono fuori dallo
   schermo: si tagliano (clip, non hidden, così gli sticky funzionano) invece di allargare la pagina */
.manifesto,.frase-autore{overflow-x:clip}
/* dentro i pannelli il colore del testo è il loro, non quello della pagina: l'anello lo segue */
.menu-pieno{--testo-pagina:#f4f0e7}
.modale{--testo-pagina:#282828}
/* alla fine di un caso o di un lavoro, prima del successivo: l'invito a parlarne (è il momento in cui interessa di più) */
.parliamone{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px;margin:clamp(40px,8vh,96px) var(--g) clamp(56px,10vh,120px);padding-top:clamp(28px,5vh,48px);border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.parliamone-t{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.3rem,4.6vw,4.2rem);line-height:1;margin:0}
.parliamone-t .punto{display:inline-block;width:.13em;height:.13em;margin-left:.05em;border-radius:50%;background:var(--c-ember);vertical-align:baseline}
.parliamone p{max-width:42ch;font-size:clamp(17px,1.3vw,19px);line-height:1.5;margin-top:14px}
.parliamone-vie{display:flex;flex-wrap:wrap;gap:10px}
/* 26/09 — l'interlinea del menu: a 1.02 le maiuscole di Evangelina toccavano la riga sopra. Più aria fra le voci,
   e la misura segue anche l'altezza dello schermo (sui portatili bassi le sei voci stanno comunque) */
.menu-voci{gap:clamp(4px,1.2vh,14px)}
.menu-t{line-height:1.16;font-size:clamp(2.8rem,min(6.6vw,9.4vh),6.2rem)}
@media (max-width:760px){.menu-t{font-size:clamp(2.4rem,min(12vw,7.2vh),4.4rem)}}
/* 26/09 — le schede dei casi: niente filo arancio al passaggio; «Leggi il caso» lungo quanto le sue parole */
.caso-scheda .link-freccia{align-self:flex-start}
/* 27/09 — l'inchiostro dei titoli (casi/caso.js): ogni riga si scopre da sinistra, dal grigio al pieno.
   La maschera allunga il box sopra e sotto, così le code di Evangelina non vengono tagliate */
.riga-inchiostro{--p:0;padding:.2em 0 .34em;margin:-.2em 0 -.34em;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) * 135% - 35%),rgba(0,0,0,.13) calc(var(--p) * 135%));
  mask-image:linear-gradient(90deg,#000 calc(var(--p) * 135% - 35%),rgba(0,0,0,.13) calc(var(--p) * 135%))}
@media (prefers-reduced-motion:reduce){.riga-inchiostro{-webkit-mask-image:none;mask-image:none}}

/* ══ 01/10 — il segnalibro (testa.js): le voci lasciano il posto alla testatina della pagina ═══════════════
   In mezzo alla testata: il nome della pagina in maiuscoletto e la sezione che stai leggendo in Evangelina,
   su un vetro come quello delle pillole. Le voci restano tutte nel menu grande. */
.testa-nav{display:none}
.testa-azioni,.testa-nav + .testa-azioni{margin-left:auto}
.testa > .segnalibro{pointer-events:none}
.segnalibro{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;gap:12px;min-height:44px;margin:0;padding:0 20px;
  max-width:min(620px,calc(100vw - 640px));border-radius:24px;white-space:nowrap;
  background:color-mix(in srgb,var(--fondo-pagina,var(--c-paper)) 55%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .45s}
.segnalibro-su .segnalibro{opacity:1}
.menu-aperto .segnalibro{opacity:0}
.segnalibro-pagina{flex:none;font:400 12px/1 var(--ff-body);letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.segnalibro-pagina:empty{display:none}
.segnalibro.con-sezione .segnalibro-pagina:not(:empty)::after{content:"·";margin-left:12px}
.segnalibro-riga{display:grid;min-width:0;overflow:hidden;padding:3px 0}
.segnalibro-sezione{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--ff-display);font-size:clamp(1.1rem,1.35vw,1.35rem);line-height:1.2;
  transition:translate .6s cubic-bezier(.2,.7,.2,1),opacity .45s}
.segnalibro-sezione.entra{translate:0 105%;opacity:0;transition:none}
.segnalibro-sezione.esce{translate:0 -105%;opacity:0}
/* fra telefono e schermo largo non c'è posto in mezzo: sta dove c'era il marchio, solo mentre il marchio è via */
@media (max-width:1080px){
  .segnalibro{left:var(--g,16px);translate:0 -50%;max-width:calc(100vw - var(--g,16px) - 250px);padding:0 16px}
  .segnalibro.con-sezione .segnalibro-pagina{display:none}
  html:not(.testa-via) .segnalibro{opacity:0}
}
/* al telefono fra il marchio e i due bottoni non c'è posto (il nome si troncava a «Gli ult…»): niente segnalibro */
@media (max-width:760px){.segnalibro{display:none}}
@media (prefers-reduced-motion:reduce){.segnalibro-sezione{transition:opacity .2s}.segnalibro-sezione.entra,.segnalibro-sezione.esce{translate:none}}