/* Logofonia · foglio di stile v2.30
   Impianto: stessa famiglia di filofonia.com, in negativo. Colonna unica ampia, aria bianca,
   velature d'azzurro al posto del fondo marino; la linea d'onda resta il filo comune. */
@import url("../fonts/fonts.css");
:root{
  color-scheme:light;
  --bg:#ffffff; --surface:#f2f8fc; --surface-2:#e4f0f8; --ink:#0c2233; --muted:#4a6476; --line:#cfe1ec;
  --accent:#1c6a96; --azzurro:#5aaedb; --cielo:#bfe0f2; --deep:#0b3b5e;
  --warm:#ecd2ae; --warm-ink:#2a2010;
  /* colori convenzionali dell'Istantanea Vocale */
  --f-laringeo:#3e9fd6; --f-palatino:#e8963c; --f-faringeo:#d977a8; --f-ideale:#3fae6b; --f-ecc:#d2553f; --f-scarso:#8c99a3;
  --display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(18px,5vw,56px); --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--accent)}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.08;margin:0;text-wrap:balance}
h2{font-size:clamp(2.1rem,5vw,3.5rem);letter-spacing:-.01em}
h3{font-size:1.75rem;font-weight:400}
p{margin:0;max-width:62ch}
.muted{color:var(--muted)}

/* ---------- barra ---------- */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:62px;flex-wrap:wrap}
.brand{font-family:var(--display);font-size:1.5rem;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;gap:11px;color:var(--ink)}
.marchio{width:24px;height:22px;color:var(--accent);flex:none}
.bar nav{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.bar nav a{font-size:.86rem;text-decoration:none;color:var(--muted);padding-block:6px;border-bottom:1px solid transparent;transition:color .4s,border-color .4s}
.bar nav a:hover{color:var(--ink);border-color:var(--azzurro)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.82rem;padding:7px 14px;border-radius:999px;cursor:pointer}
.torna{font-size:.86rem;color:var(--muted);text-decoration:none}
.torna:hover{color:var(--ink)}
@media (max-width:900px){
  .menu-btn{display:inline-block}
  .bar nav{display:none;width:100%;flex-direction:column;gap:2px;padding-bottom:14px}
  .bar nav.open{display:flex}
  .bar nav a{padding-block:10px;font-size:1rem}
}

/* ---------- apertura ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(90% 70% at 78% 0%,color-mix(in srgb,var(--cielo) 78%,transparent),transparent 70%),
  linear-gradient(180deg,var(--bg) 0%,var(--surface) 62%,var(--surface-2) 100%)}
#onda{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.hero .wrap{position:relative;padding-block:clamp(70px,11vw,140px) clamp(170px,17vw,220px);display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(3.3rem,11.5vw,8.6rem);letter-spacing:-.025em;line-height:.94}
.sottotitolo{font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2.9vw,2.1rem);letter-spacing:.01em;line-height:1.1;max-width:none}
.sotto{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.8rem,4.6vw,3.5rem);line-height:1.1;color:var(--accent);max-width:none}
.lead{font-size:clamp(1.08rem,2vw,1.3rem);font-weight:300;color:var(--muted);max-width:44ch;line-height:1.55}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-block;text-decoration:none;font-size:.92rem;font-weight:500;padding:14px 26px;border-radius:999px;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .5s,color .5s,border-color .5s}
.btn.primary{background:var(--deep);color:var(--bg)}
.btn.ghost{border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost:hover{border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}.btn:hover{transform:none}}

/* ---------- sezioni ---------- */
section{padding-block:clamp(72px,11vw,140px)}
.tint{background:var(--surface)}
.velo{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,5vw,60px)}
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,90px);align-items:start}
.duo > *{min-width:0}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:22px}
.big{font-family:var(--display);font-size:clamp(1.6rem,3.3vw,2.35rem);line-height:1.25;font-weight:300;max-width:26ch}
.motto{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--accent);line-height:1.2}
.src{font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.etimo{font-family:var(--display);font-size:1.25rem;font-style:italic;color:var(--muted)}

/* elenco di voci: termine a sinistra, definizione a destra */
.voci{margin:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
.voci > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(14px,3vw,40px);padding-block:22px;border-bottom:1px solid var(--line)}
.voci dt{font-family:var(--display);font-size:1.55rem;line-height:1.15}
.voci dt small{display:block;font-family:var(--body);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.voci dd{margin:0;color:var(--muted)}
.voci dd strong{color:var(--ink);font-weight:500}
@media (max-width:640px){.voci > div{grid-template-columns:minmax(0,1fr);gap:8px}}

/* ambiti: cinque colonne che diventano righe */
.ambiti{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ambiti li{background:var(--bg);padding:26px 20px 30px;display:flex;flex-direction:column;gap:12px;min-width:0}
.ambiti h3{font-size:1.45rem}
.ambiti p{font-size:.92rem;color:var(--muted)}
.ambiti svg{width:100%;height:44px;color:var(--azzurro)}
@media (max-width:980px){.ambiti{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ambiti{grid-template-columns:minmax(0,1fr)}}

/* Istantanea Vocale */
.istantanea{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(26px,5vw,70px);align-items:center}
@media (max-width:860px){.istantanea{grid-template-columns:minmax(0,1fr)}}
.tavola{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:clamp(14px,3vw,28px)}
.tavola svg{display:block;width:100%;height:auto}
.tavola text{font-family:var(--body);font-size:13px;fill:var(--muted)}
.comandi{display:flex;flex-direction:column;gap:18px}
.cmd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline}
.cmd label{font-weight:500;display:flex;align-items:center;gap:9px}
.cmd label i{width:12px;height:12px;border-radius:50%;flex:none}
.cmd output{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.9rem}
.cmd input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
.cmd small{grid-column:1/-1;color:var(--muted);font-size:.84rem}
.esito{font-family:var(--display);font-size:1.4rem;line-height:1.25;min-height:2.6em}
.preset{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:inherit;font-size:.82rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--accent)}

/* Melodia Vocale */
.melodie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px 30px}
@media (max-width:980px){.melodie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.melodie{grid-template-columns:minmax(0,1fr)}}
.melodie li{display:flex;flex-direction:column;gap:8px;min-width:0}
.melodie svg{width:100%;height:54px;color:var(--accent)}
.melodie h3{font-size:1.4rem}
.melodie p{font-size:.92rem;color:var(--muted)}
.formule{display:flex;flex-direction:column;gap:10px;margin-top:clamp(30px,5vw,54px);padding-top:26px;border-top:1px solid var(--line);font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem)}
.formule span{color:var(--accent)}

/* Alfabeto Labiale Italiano */
.ali{list-style:none;margin:0;padding:1px;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1px}
.ali li{background:var(--bg);outline:1px solid var(--line);padding:18px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}
.ali svg,.foglio svg{width:54px;height:44px;color:var(--accent)}
.ali b{font-weight:500;letter-spacing:.08em;font-size:.86rem}
.ali span{font-size:.82rem;color:var(--muted)}
.prova{display:flex;flex-direction:column;gap:14px;margin-top:clamp(26px,4vw,44px)}
.prova label{font-weight:500}
.prova input{font:inherit;font-size:1.1rem;padding:12px 16px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);width:min(100%,360px)}
.foglio{display:flex;flex-wrap:wrap;gap:6px 4px;min-height:86px;padding:14px;border:1px dashed var(--line);border-radius:6px;background:var(--bg)}
.foglio figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px;width:60px}
.foglio figcaption{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.prova small{color:var(--muted);font-size:.84rem;max-width:62ch}

.esperimento{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:1.2;display:flex;flex-direction:column;gap:6px}
.esperimento span:last-child{color:var(--accent);letter-spacing:.04em}

/* la macchina e il pilota */
.due-discipline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:stretch}
.due-discipline > div{padding:clamp(22px,3vw,36px);border-radius:6px;display:flex;flex-direction:column;gap:12px;min-width:0}
.due-discipline .logo-f{background:var(--bg);border:1px solid var(--line)}
.due-discipline .filo-f{background:#051c2e;color:#eaf5fb}
.due-discipline .filo-f p{color:#a9cbdf}
.due-discipline .filo-f .label{color:var(--warm)}
.due-discipline .filo-f a{color:#eaf5fb}
.due-discipline .e{align-self:center;font-family:var(--display);font-style:italic;font-size:2rem;color:var(--muted);padding:0;background:none}
@media (max-width:760px){.due-discipline{grid-template-columns:minmax(0,1fr)}.due-discipline .e{justify-self:center}}

/* articoli */
.articoli{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,34px)}
@media (max-width:860px){.articoli{grid-template-columns:minmax(0,1fr)}}
.articoli a{display:flex;flex-direction:column;gap:12px;height:100%;padding:26px 0 0;border-top:2px solid var(--ink);text-decoration:none;transition:border-color .4s}
.articoli a:hover{border-color:var(--azzurro)}
.articoli h3{font-size:1.9rem}
.articoli p{color:var(--muted);font-size:.95rem}
.articoli .vai{margin-top:auto;font-size:.86rem;font-weight:500;color:var(--accent)}

.ritratto{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.25;font-weight:300;max-width:24ch}
.freccia{display:inline-block;margin-left:4px}

/* ---------- piede ---------- */
footer{background:var(--surface-2);color:var(--muted);padding-block:56px 40px;font-size:.86rem;border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-direction:column;gap:22px}
footer p{max-width:78ch}
footer .brand{color:var(--ink)}
footer .diritti{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:20px;font-size:.8rem;line-height:1.55}
footer .diritti .c,footer .diritti .titolare{color:var(--ink)}
footer .diritti .c{font-weight:500}
footer .diritti a{color:inherit;text-underline-offset:3px}
footer .amatolab{align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px;color:var(--ink);text-decoration:none;opacity:.86;transition:opacity .4s}
footer .amatolab:hover{opacity:1}
footer .amatolab-logo{width:clamp(150px,22vw,190px);height:auto;display:block}
footer .amatolab span{font-size:.74rem;letter-spacing:.2em;color:var(--muted)}

/* ---------- pagine di lettura (articoli, privacy) ---------- */
.lettura{max-width:760px;margin-inline:auto;padding:clamp(48px,8vw,96px) var(--gutter) clamp(64px,9vw,110px);display:flex;flex-direction:column;gap:22px}
.lettura h1{font-size:clamp(2.6rem,7vw,4.6rem);letter-spacing:-.02em}
.lettura h2{font-size:clamp(1.7rem,3.6vw,2.3rem);margin-top:22px}
.lettura p,.lettura li{max-width:68ch}
.lettura ul,.lettura ol{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.lettura .occhiello{font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:300;color:var(--muted);line-height:1.5}
.lettura .meta{font-size:.8rem;color:var(--muted);letter-spacing:.04em}
.lettura .breve{background:var(--surface);border-left:3px solid var(--azzurro);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.lettura .breve .label{color:var(--accent)}
.lettura blockquote{margin:10px 0;font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.2;color:var(--accent)}
.lettura .seguito{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:26px;border-top:1px solid var(--line)}
.piede-breve{background:var(--surface-2);border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;padding:26px var(--gutter);text-align:center}

/* i Labiogrammi sono segni a tratto */
.ali svg,.foglio svg{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ====================== movimento (v1.2) ======================
   Tutto ciò che segue vive sotto .mo, la classe che lo script mette su <html>
   solo se il sistema non chiede animazioni ridotte. Senza script la pagina è ferma e completa. */
.bar{position:sticky}
.progresso{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--azzurro),var(--accent))}
.marchio circle{transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand:hover .marchio circle{transform:scale(1.25)}

/* apertura: l'alone respira, il testo sale */
.hero::before{content:"";position:absolute;inset:-10% -10% 0 20%;pointer-events:none;background:radial-gradient(46% 52% at 68% 26%,color-mix(in srgb,var(--cielo) 92%,transparent),transparent 72%);opacity:.7}
.mo .hero::before{animation:respiro 7s ease-in-out infinite}
@keyframes respiro{0%,100%{transform:scale(.9);opacity:.5}45%{transform:scale(1.14);opacity:1}}
.mo .hero .wrap > *{animation:sale 1.4s cubic-bezier(.2,.7,.2,1) both}
.mo .hero .wrap > *:nth-child(2){animation-delay:.12s}.mo .hero .wrap > *:nth-child(3){animation-delay:.3s}
.mo .hero .wrap > *:nth-child(4){animation-delay:.48s}.mo .hero .wrap > *:nth-child(5){animation-delay:.66s}.mo .hero .wrap > *:nth-child(6){animation-delay:.84s}
@keyframes sale{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* comparsa allo scorrimento */
.mo .rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*80ms)}
.mo .rv.in{opacity:1;transform:none}
.mo .rv:not(.in) svg .tr{stroke-dasharray:1;stroke-dashoffset:1}
.mo .rv.in svg .tr{stroke-dasharray:1;animation:traccia 1.8s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i,0)*80ms + .25s)}
@keyframes traccia{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ambiti: ogni segno ha il suo modo di muoversi */
.ambiti svg{transform-origin:50% 68%}
.mo .ambiti li:nth-child(1) svg{animation:fiato 7s ease-in-out infinite}
.mo .ambiti li:nth-child(2) svg{animation:vibra 1.1s ease-in-out infinite}
.mo .ambiti li:nth-child(3) svg{animation:fiato 5s ease-in-out infinite reverse}
.mo .ambiti li:nth-child(5) svg{animation:dondola 4s ease-in-out infinite}
@keyframes fiato{0%,100%{transform:scaleY(.55)}45%{transform:scaleY(1.12)}}
@keyframes vibra{0%,100%{transform:scaleY(.8)}50%{transform:scaleY(1.1)}}
@keyframes batte{from{transform:scaleY(.82)}to{transform:scaleY(1.06)}}
@keyframes dondola{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
.ambiti li{transition:background .5s}
.ambiti li:hover{background:var(--surface)}

/* Istantanea Vocale */
#iv-c{transform-box:fill-box;transform-origin:center}
.mo #iv-c{animation:polso 3.4s ease-in-out infinite}
@keyframes polso{0%,100%{transform:scale(.96)}50%{transform:scale(1.04)}}
.chip{transition:border-color .3s,background .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.chip:hover{transform:translateY(-2px);background:var(--surface)}
.esito{transition:color .4s}

/* melodie e ritmo: un punto percorre la linea */
.punto{fill:var(--azzurro)}
.ritmo{margin-bottom:clamp(30px,5vw,54px);max-width:760px}
.ritmo svg{display:block;width:100%;height:auto;overflow:visible}
.ritmo .curva{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round}
.ritmo .zona{opacity:1}
.ritmo .base{stroke:var(--line);stroke-width:1}
.ritmo text{font-family:var(--body);font-size:12px;fill:var(--muted);letter-spacing:.06em}
.ritmo .punto{fill:var(--deep)}

/* elenchi di voci */
.voci > div{transition:background .5s}
.voci dt{transition:color .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.voci > div:hover dt{color:var(--accent);transform:translateX(6px)}

/* Labiogrammi */
.ali li{transition:background .4s}
.ali svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ali li:hover{background:var(--surface-2)}
.ali li:hover svg{transform:scale(1.18)}
.prova .riga{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.foglio figure{transition:transform .35s cubic-bezier(.2,.7,.2,1),color .3s}
.foglio figure svg{transition:color .3s}
.mo .foglio figure{animation:posa .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes posa{from{opacity:0;transform:translateY(10px) scale(.86)}to{opacity:1;transform:none}}
.foglio figure.ora{transform:scale(1.28)}
.foglio figure.ora svg{color:var(--deep)}
.foglio figure.ora figcaption{color:var(--ink);font-weight:600}

/* il ponte tra le due discipline */
.ponte{display:block;width:100%;height:46px;margin-top:clamp(24px,4vw,44px);overflow:hidden}
.ponte path{fill:none;stroke:var(--azzurro);stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:.8}
.ponte path + path{stroke:var(--accent);opacity:.35}
.mo .ponte path{animation:scorre 9s ease-in-out infinite alternate}
.mo .ponte path + path{animation-duration:13s;animation-direction:alternate-reverse}
@keyframes scorre{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.due-discipline > div{transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
.due-discipline .logo-f:hover,.due-discipline .filo-f:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--deep) 60%,transparent)}

/* articoli e rimandi */
.articoli h3{transition:color .4s}
.articoli .vai{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.articoli a:hover h3{color:var(--accent)}
.articoli a:hover .vai{transform:translateX(6px)}
.freccia{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a:hover > .freccia{transform:translate(3px,-3px)}

@media (prefers-reduced-motion:reduce){html:not(.forza) *,html:not(.forza) *::before,html:not(.forza) *::after{animation:none!important;transition:none!important}}

/* ---------- marchio e logo originali (v1.3) ---------- */
img.marchio{width:34px;height:auto;flex:none;display:block}
.logo-h{line-height:0;font-size:0}
.logo-h img{display:block;width:min(100%,780px);height:auto}

/* labbra che articolano (v1.5) */
.ambiti .labbro{fill:color-mix(in srgb,var(--cielo) 70%,var(--bg));stroke:var(--accent);stroke-width:2.6;stroke-linejoin:round}
.ambiti svg.labbra{width:auto;height:46px;align-self:flex-start;margin-bottom:-2px}
.ambiti .labbro.bocca{fill:var(--deep);stroke:none}

/* ---------- ambiti: onda sonora, respiro con voce, parole omografe (v1.6) ---------- */
.ambiti li > :first-child{height:64px}
.ambiti svg{height:64px}
.ambiti svg.labbra{height:52px;margin-block:6px}
.ambiti canvas.ico{display:block;width:100%}
.diz{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.diz-riga{display:flex;align-items:center;gap:10px;min-width:0}
.diz-parola{position:relative;display:inline-flex;font-family:var(--display);font-size:2rem;line-height:1.15;color:var(--ink);white-space:nowrap;transition:opacity .45s,transform .45s}
.diz-parola span{display:inline-block;transition:color .5s}
.diz-parola span.tonica{color:var(--accent)}
.diz-parola i.acc{position:absolute;left:0;top:.2em;width:.3em;height:.085em;margin-left:-.15em;border-radius:1px;background:var(--accent);transform:translateX(var(--x,0)) rotate(var(--r,32deg));transition:transform .75s cubic-bezier(.5,0,.2,1)}
.diz.cambia .diz-parola,.diz.cambia .diz-senso{opacity:0;transform:translateY(6px)}
.diz-senso{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);transition:opacity .45s,transform .45s;min-height:1.3em}
.ambiti .diz-fig{width:38px;height:38px;flex:none;fill:none;stroke:var(--azzurro);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.diz-fig g{opacity:0;transition:opacity .5s}
.diz[data-fig="frutto"] .fig-frutto,.diz[data-fig="pesca"] .fig-pesca{opacity:1}

/* ---------- sesto riquadro: l'Ortolessia, dove i cinque ambiti si incontrano (v1.8) ---------- */
.ambiti li.sintesi{background:var(--surface)}
.orto{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.orto-segni{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0}
.ambiti .orto-segni svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--azzurro);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.orto-parola{font-family:var(--display);font-size:clamp(1.55rem,2.6vw,2rem);font-weight:400;line-height:1;letter-spacing:.01em;color:var(--accent);white-space:nowrap}
/* in movimento: i segni si raccolgono al centro, dal centro si aprono le due parole */
.mo .orto-segni{opacity:1}
.mo .ambiti .orto-segni svg{animation:raccoglie 8s cubic-bezier(.5,0,.2,1) infinite;animation-delay:calc(var(--i)*.06s)}
@keyframes raccoglie{0%,12%{opacity:1;transform:none}30%,90%{opacity:0;transform:translateX(calc((2 - var(--i))*26px)) scale(.3)}98%,100%{opacity:1;transform:none}}
.mo .orto-parola{animation:apre 8s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes apre{0%,28%{opacity:0;transform:scale(.45);letter-spacing:-.22em}42%,84%{opacity:1;transform:none;letter-spacing:.01em}91%,100%{opacity:0;transform:scale(.9);letter-spacing:.01em}}

/* ---------- titoletti di sezione: più grandi, più pieni, con una piccola onda sotto (v1.9) ---------- */
.head > .label,section > .wrap.duo > .stack:first-child > .label{display:flex;flex-direction:column;align-items:flex-start;gap:11px;font-size:.98rem;font-weight:600;letter-spacing:.17em;color:var(--deep)}
.head > .label::after,section > .wrap.duo > .stack:first-child > .label::after{content:"";display:block;width:54px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 9'%3E%3Cpath d='M1.5 4.5C6 4.5 6 1.5 10.5 1.5s4.5 6 9 6 4.5-6 9-6 4.5 6 9 6 4.5-3 9-3h5.500' fill='none' stroke='%235aaedb' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left center/contain no-repeat}
.mo .rv .label::after{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.2,.7,.2,1) .35s}
.mo .rv.in .label::after{clip-path:inset(0 0 0 0)}

/* ---------- la macchina e il pilota: due disegni al tratto (v1.10) ---------- */
.fig-md{display:block;width:min(100%,340px);height:auto;margin-bottom:10px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.fig-auto{stroke:var(--accent)}
.fig-auto .corpo{fill:color-mix(in srgb,var(--cielo) 62%,var(--bg))}
.fig-auto .vetro{fill:var(--bg);stroke-width:2}
.fig-auto .filetto{stroke:var(--azzurro);stroke-width:2}
.fig-auto .terra{stroke:var(--line);stroke-width:1.6}
.fig-auto .scie{stroke:var(--azzurro);stroke-dasharray:14 10}
.fig-auto .ruota circle{fill:var(--deep);stroke:var(--deep)}
.fig-auto .ruota .cerchio{fill:var(--bg);stroke:none}
.fig-auto .ruota path{stroke:var(--bg);stroke-width:1.6}
.fig-auto .ruota{transform-origin:var(--cx) var(--cy)}
.fig-pilota{stroke:#eaf5fb}
.fig-pilota .calotta{fill:#0b3b5e}
.fig-pilota .visiera{fill:var(--warm);stroke:#eaf5fb}
.fig-pilota .riflesso{stroke:#fff;stroke-width:2;opacity:.85}
.fig-pilota .fascia{stroke:var(--azzurro);stroke-width:2}
.fig-pilota .presa{stroke:#a9cbdf;stroke-width:2}
.fig-pilota .pensiero{stroke:var(--warm);stroke-width:2;opacity:.9}
.mo .fig-auto .ruota{animation:gira 1.1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.mo .fig-auto .scie{animation:scia 1s linear infinite}
@keyframes scia{to{stroke-dashoffset:24}}
.mo .fig-auto .scocca{animation:molleggia 1.6s ease-in-out infinite}
@keyframes molleggia{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.mo .fig-pilota .pensiero path{animation:pensa 3.2s ease-in-out infinite}
.mo .fig-pilota .pensiero path + path{animation-delay:.5s}
@keyframes pensa{0%,100%{opacity:.2;transform:translateY(5px)}50%{opacity:1;transform:none}}
.mo .fig-pilota .riflesso{animation:brilla 4.5s ease-in-out infinite}
@keyframes brilla{0%,70%,100%{opacity:.25}82%{opacity:1}}
.fig-auto .numero{fill:var(--bg);stroke:var(--accent);stroke-width:2}
.fig-auto .alettone{stroke-width:2.6}

/* nota sulle tecniche inedite (v1.11) */
.inedite{border-left:3px solid var(--azzurro);padding:4px 0 4px 16px;color:var(--ink);font-weight:500}

/* ====================== il cielo (v2.0) ======================
   filofonia.com scende dalla luce nel mare; qui si parte dalla stessa superficie e si sale.
   Il colore del cielo segue la quota (--alt, da 0 a 1), che lo script aggiorna allo scorrere. */
:root{--alt:0;--c1:#cfe2f1;--c2:#d8e8f4;--muted:#3f5769}
body{background:var(--c2)}
.cielo{position:fixed;inset:0;z-index:-3;background:linear-gradient(180deg,var(--c1),var(--c2))}
.sole{position:fixed;left:50%;top:-34vh;width:120vmax;height:120vmax;margin-left:-60vmax;z-index:-2;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,251,240,.7) 22%,rgba(255,255,255,0) 62%);
  opacity:var(--sole,0);transform:translateY(calc((1 - var(--sole,0))*-18vh)) scale(calc(.7 + var(--sole,0)*.5))}
.nuvole{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:var(--nubi,0)}
.nuvole i{position:absolute;left:var(--x);top:0;width:calc(360px*var(--s));height:calc(120px*var(--s));transform:translateY(var(--ty,0));filter:blur(10px);opacity:.9;
  background:radial-gradient(50% 60% at 30% 62%,#fff 0,rgba(255,255,255,0) 100%),radial-gradient(40% 70% at 55% 40%,#fff 0,rgba(255,255,255,0) 100%),radial-gradient(45% 55% at 76% 66%,#fff 0,rgba(255,255,255,0) 100%)}
section.tint,section.velo,section{background:none}
.hero{background:none}
.hero::before{display:none}
.hero .wrap{padding-bottom:clamp(230px,24vw,300px)}
/* v2.5 - tra le nuvole: dietro tecniche e strumenti compare una fotografia, che entra ed esce in dissolvenza (--foto) */
.nubi-foto{position:fixed;inset:-6vh 0;z-index:-1;pointer-events:none;background:url(../img/nuvole.jpg) no-repeat center/cover;opacity:calc(var(--foto,0)*.92);transform:translateY(calc((.5 - var(--scorre,.5))*8vh));
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%)}
.nuvole{opacity:calc(var(--nubi,0)*(1 - var(--foto,0)))!important}
/* v2.4 - l'apertura è una fotografia del cielo alto: i raggi scendono da destra, in basso sfuma nel cielo della pagina */
.cielo-alto{position:absolute;inset:0;background:url(../img/cielo.jpg) no-repeat right top/cover;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 68%,transparent 100%)}
.mo .cielo-alto{animation:schiara 9s ease-in-out infinite}
@keyframes schiara{0%,100%{filter:brightness(1)}50%{filter:brightness(1.05)}}
@media (max-width:760px){.cielo-alto{background-position:82% top}}
/* v2.3 - si parte dal cielo alto e si scende: la fotografia dell'orizzonte chiude la pagina, e sotto comincia la Filofonia */
.superficie{position:relative;overflow:hidden;min-height:min(96svh,860px);display:flex;align-items:flex-end;--mare:clamp(220px,40svh,380px);--w:max(100vw,190svh);--px:.3}
.mare{position:absolute;inset:0;background:url(../img/orizzonte.jpg) no-repeat left calc((100vw - var(--w))*var(--px)) bottom calc(var(--mare) - var(--w)*.2065)/var(--w) auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.mare::after{content:"";position:absolute;width:46vmin;height:46vmin;left:calc((100vw - var(--w))*var(--px) + var(--w)*.662 - 23vmin);bottom:calc(var(--mare) + var(--w)*.03 - 23vmin);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,246,226,.85),rgba(255,240,214,.28) 45%,rgba(255,240,214,0) 100%);opacity:.55}
.mo .mare::after{animation:respiro 7s ease-in-out infinite}
.superficie::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(6,48,77,0),#06304d);pointer-events:none}
.superficie .wrap{position:relative;z-index:1;width:100%;padding-block:0 54px;display:flex;flex-direction:column;gap:14px}
.approdo{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.05;color:#fff;text-shadow:0 2px 22px rgba(5,28,46,.55)}
.sotto-mare{align-self:flex-start;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:#e3f1f9;text-decoration:none;text-shadow:0 1px 8px rgba(5,28,46,.6);border-bottom:1px solid rgba(227,241,249,.5);padding-bottom:5px}
.sotto-mare:hover{color:#fff;border-bottom-color:#fff}
.mo .sotto-mare span{display:inline-block;animation:giu 2.4s ease-in-out infinite}
@keyframes giu{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (max-width:760px){.superficie{--px:.6}.sotto-mare{font-size:.72rem;letter-spacing:.12em}}
/* sotto la superficie: il piede della pagina è già acqua */
footer{background:linear-gradient(180deg,#06304d,#051c2e)!important;color:#b9d3e3!important;border-top:0!important}
footer .brand,footer .diritti .c,footer .diritti .titolare,footer .amatolab{color:#eef6fb}
footer .amatolab span{color:#b9d3e3}
footer .diritti{border-color:rgba(227,241,249,.2)!important}
.hero .wrap{z-index:1}
/* i riquadri restano bianchi e leggibili sopra il cielo */
.ambiti{background:none;border-color:color-mix(in srgb,var(--deep) 14%,transparent)}
.ambiti li{background:rgba(255,255,255,.88)}
.ambiti li.sintesi{background:rgba(255,255,255,.62)}
.voci,.voci > div,.formule,footer .diritti{border-color:color-mix(in srgb,var(--deep) 16%,transparent)}
.tavola,.ali li,.foglio,.prova input{background:rgba(255,255,255,.9)}
.articoli a{border-top-color:var(--deep)}
footer{background:rgba(255,255,255,.55);border-top-color:color-mix(in srgb,var(--deep) 14%,transparent)}
.bar{background:rgba(255,255,255,.72)}
/* indicatore di quota */
.quota{position:fixed;right:14px;bottom:14px;z-index:15;display:flex;flex-direction:column;align-items:flex-end;gap:1px;padding:9px 14px;border-radius:10px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,var(--deep) 12%,transparent);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.quota b{font-family:var(--display);font-weight:500;font-size:1.05rem;letter-spacing:.01em;text-transform:none;color:var(--deep)}
@media (max-width:560px){.quota{right:10px;bottom:10px;padding:7px 11px}.quota b{font-size:.95rem}}
/* l'apertura occupa giusto il primo schermo, così la linea dell'acqua si vede subito */
.hero{min-height:calc(100svh - 63px);display:flex;align-items:center}
.hero .wrap{width:100%;padding-block:clamp(36px,6vw,80px) clamp(120px,16vw,190px)}

/* ---------- v2.9 - carta da scrivere: bianca, pulita, grana appena percettibile, bordi netti ---------- */
.carta{position:relative;isolation:isolate;padding:clamp(22px,3.8vw,48px);border:0;border-radius:2px;background:none;transform:translateY(var(--gal,0px));will-change:transform}
.carta::before{content:"";position:absolute;inset:0;z-index:-2;border-radius:2px;background:#f4f6f8;transform:translate(6px,7px) rotate(.3deg);box-shadow:0 14px 26px -8px rgba(11,59,94,.26)}
.carta::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),#fffefc;box-shadow:0 1px 2px rgba(11,59,94,.16),0 10px 22px -10px rgba(11,59,94,.2)}
.carta .tavola{background:none;border:0;padding:0}
.carta .chip,.carta input[type=range]{position:relative}
/* strisce di carta tra le righe: le righe restano, e tra l'una e l'altra il testo poggia su una striscia più bassa dello spazio */
.strisce > *{position:relative;isolation:isolate;padding-inline:clamp(16px,2.6vw,30px)}
.strisce > *::after{content:"";position:absolute;inset:12px 0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),rgba(255,254,252,.74);filter:url(#bordo-carta) drop-shadow(0 1px 1px rgba(11,59,94,.18)) drop-shadow(0 8px 12px rgba(11,59,94,.14))}
.strisce > *:nth-child(odd)::after{transform:rotate(-.18deg)}
.strisce > *:nth-child(even)::after{transform:rotate(.16deg) translateX(3px);background-position:120px 60px,0 0}
.strisce > *:nth-child(3n)::after{background-position:60px 200px,0 0}
.voci.strisce > div{padding-block:34px}
.voci.strisce,.voci.strisce > div{border-color:color-mix(in srgb,var(--deep) 30%,transparent)}
/* Melodia Vocale: stesso schema a righe della metrica - nome, linea melodica, descrizione */
.melodie.strisce{display:block;border-top:1px solid color-mix(in srgb,var(--deep) 30%,transparent)}
.melodie.strisce li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(14px,3vw,40px);align-items:center;padding-block:34px;border-bottom:1px solid color-mix(in srgb,var(--deep) 30%,transparent)}
.melodie.strisce h3{font-size:1.55rem;line-height:1.15;transition:color .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.melodie.strisce li:hover h3{color:var(--accent);transform:translateX(6px)}
.melodie.strisce svg{height:54px}
.melodie.strisce p{font-size:1rem}
@media (max-width:760px){.melodie.strisce li{grid-template-columns:minmax(0,1fr);gap:8px;align-items:start}.melodie.strisce svg{max-width:300px}}
@media (max-width:560px){.carta::before{transform:translate(4px,5px) rotate(.3deg)}}

/* ---------- v2.10 - Teoria dei Fonotipi: niente foglio, il triangolo è libero nel cielo e i comandi sono strisce ---------- */
.istantanea{align-items:start}
.figura{display:flex;flex-direction:column;gap:18px;min-width:0}
.istantanea .tavola{background:radial-gradient(closest-side,rgba(255,255,255,.92),rgba(255,255,255,.5) 55%,rgba(255,255,255,0) 100%);border:0;border-radius:0;padding:0}
.istantanea .tavola text{font-size:13.5px;fill:var(--ink);font-weight:500}
.istantanea .esito{font-style:italic;text-align:center;font-size:clamp(1.3rem,2.3vw,1.6rem);min-height:3.8em;max-width:30ch;margin-inline:auto}
/* fascia delle frequenze, in scala logaritmica: ogni zona si riempie in proporzione al suo comando */
.spettro{padding-bottom:22px}
.bande{display:flex;gap:3px;height:74px;align-items:stretch;border-bottom:1px solid color-mix(in srgb,var(--deep) 40%,transparent)}
.bande .z{position:relative;display:flex;align-items:flex-end;min-width:0;background:rgba(255,255,255,.34)}
.bande .z i{display:block;width:100%;height:calc(var(--v,.5)*100%);background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,transparent));opacity:calc(.45 + var(--v,.5)*.55)}
.bande .z span{position:absolute;left:8px;top:6px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.tacche{position:relative;height:0;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tacche span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.tacche span:first-child{transform:none}.tacche span:last-child{transform:translateX(-100%)}
.tacche span::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:5px;background:color-mix(in srgb,var(--deep) 40%,transparent)}
.tacche span:first-child::before{left:0}.tacche span:last-child::before{left:100%}
.comandi{gap:26px}
.cmd-lista{border-top:1px solid color-mix(in srgb,var(--deep) 30%,transparent)}
.cmd-lista .cmd{padding-block:28px;border-bottom:1px solid color-mix(in srgb,var(--deep) 30%,transparent);gap:6px 14px}
.cmd output{font-family:var(--display);font-size:1.5rem;color:var(--deep);line-height:1}
.cmd input{height:26px;cursor:pointer}
@media (max-width:860px){.cmd input{height:36px}}
/* gli esempi: etichette di carta */
.preset{gap:12px 10px}
.preset .chip{position:relative;isolation:isolate;border:0;border-radius:0;background:none;padding:9px 16px;font-size:.84rem}
.preset .chip::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,254,252,.78);filter:url(#bordo-carta) drop-shadow(0 1px 1px rgba(11,59,94,.2)) drop-shadow(0 5px 8px rgba(11,59,94,.14))}
.preset .chip:nth-child(odd)::after{transform:rotate(-1.2deg)}.preset .chip:nth-child(even)::after{transform:rotate(1deg)}
.preset .chip:hover{background:none;color:var(--accent)}

/* ---------- v2.11 - articoli come pagina di giornale: testata, pezzo di apertura, due di spalla ---------- */
.giornale{position:relative;isolation:isolate;padding:clamp(22px,4vw,54px)}
.giornale::after{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),rgba(255,254,252,.82);filter:url(#bordo-carta) drop-shadow(0 1px 2px rgba(11,59,94,.18)) drop-shadow(0 16px 26px rgba(11,59,94,.16))}
.testata{text-align:center;display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(22px,3.4vw,40px)}
.testata .sopra,.testata .colophon{max-width:none;display:flex;justify-content:space-between;gap:14px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.testata .sopra{padding-bottom:10px;border-bottom:1px solid var(--ink)}
.testata h2{font-size:clamp(2.3rem,7vw,5rem);line-height:1;letter-spacing:-.01em;margin:6px 0 2px}
.testata h2::after{display:none}
.testata .colophon{padding-block:9px;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.giornale .articoli{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 clamp(22px,3.4vw,44px)}
.giornale .articoli li{min-width:0}
.giornale .articoli .apertura{grid-row:1 / span 2;padding-right:clamp(22px,3.4vw,44px);border-right:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.giornale .articoli li:nth-child(3){border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);margin-top:26px;padding-top:26px}
.giornale .articoli a{border-top:0;padding:0;gap:10px;color:var(--ink)}
.giornale .occ{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.giornale h3{font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.05}
.giornale .apertura h3{font-size:clamp(2.4rem,5.4vw,4rem);line-height:.98}
.giornale .somm{font-family:var(--display);font-style:italic;font-size:1.2rem;line-height:1.35;color:var(--ink)}
.giornale .apertura .somm{font-size:clamp(1.3rem,2.2vw,1.6rem)}
.giornale .firma{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.attacco{position:relative;margin-top:8px;max-height:15.5em;overflow:hidden;columns:2;column-gap:26px;column-rule:1px solid color-mix(in srgb,var(--ink) 16%,transparent);font-size:.96rem;line-height:1.6;color:var(--ink);text-align:justify;hyphens:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.attacco p{margin:0;font-size:inherit;color:inherit}
.attacco p + p{text-indent:1.4em}
.attacco p:first-child::first-letter,.lettura .meta + p::first-letter{float:left;font-family:var(--display);font-size:3.9em;line-height:.8;padding:.06em .1em 0 0;color:var(--deep)}
.giornale .vai{margin-top:8px}
@media (max-width:860px){.giornale .articoli{grid-template-columns:minmax(0,1fr)}.giornale .articoli .apertura{grid-row:auto;padding-right:0;border-right:0}
  .giornale .articoli li:nth-child(2){border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);margin-top:26px;padding-top:26px}}
@media (max-width:560px){.attacco{columns:1;max-height:13em}.testata .sopra span:last-child{display:none}.testata .sopra{justify-content:center}.testata .colophon{flex-direction:column;align-items:center;gap:4px}}
/* le pagine degli articoli: stessa testata, sommario in corsivo, capolettera, rimandi in fondo */
.lettura .testatina{display:flex;flex-direction:column;gap:8px;text-align:center;text-decoration:none;color:var(--ink);margin-bottom:clamp(18px,3vw,30px)}
.lettura .testatina b{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,4vw,2.2rem);line-height:1;padding-bottom:10px;border-bottom:3px double var(--ink)}
.lettura .testatina span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lettura .occhiello{font-family:var(--display);font-style:italic;font-weight:400;color:var(--ink)}
.lettura .meta{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;padding-block:10px;border-block:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}
.altri{display:flex;flex-direction:column;gap:14px;margin-top:clamp(30px,5vw,50px);padding-top:16px;border-top:3px double var(--ink)}
.altri > span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.altri div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,34px)}
.altri a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink)}
.altri a i{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.altri a b{font-family:var(--display);font-weight:500;font-size:1.6rem;line-height:1.1}
.altri a em{font-family:var(--display);font-size:1.05rem;line-height:1.35;color:var(--muted)}
.altri a:hover b{color:var(--accent)}
@media (max-width:560px){.altri div{grid-template-columns:minmax(0,1fr)}}

/* ---------- v2.12 - spazi: sezioni meno distanti, niente vuoti tra un blocco e la sua continuazione, il mare subito dopo l'ultimo testo ---------- */
section{padding-block:clamp(52px,7vw,96px)}
.head{margin-bottom:clamp(28px,4vw,48px)}
#strumenti{padding-bottom:clamp(30px,4vw,48px)}
section.continua{padding-top:0}
.ritmo{margin-bottom:clamp(22px,3.4vw,38px)}
.formule{margin-top:clamp(24px,3.6vw,40px)}
/* la chiusura: la fotografia sale dietro l'ultima sezione, così il testo finisce poco sopra il pelo dell'acqua */
#percorsi{position:relative;z-index:1;padding-bottom:0}
.superficie{z-index:0;--cielo-su:clamp(300px,46svh,440px);min-height:calc(var(--mare) + var(--cielo-su));margin-top:calc(90px - var(--cielo-su));--mare:clamp(230px,38svh,360px)}
.mare{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%);mask-image:linear-gradient(180deg,transparent 0,#000 34%)}

/* ---------- v2.13 - fascia delle frequenze: ogni tacca porta il suo valore in hertz, in cifre grandi ---------- */
.spettro{padding-bottom:44px}
.tacche{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.tacche span{top:14px;display:flex;align-items:baseline;gap:4px}
.tacche span b{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:0;line-height:1;color:var(--deep);font-variant-numeric:lining-nums tabular-nums}
.tacche span::before{top:-14px;height:11px;width:2px;margin-left:-1px;background:var(--deep)}
.tacche span:first-child::before{margin-left:0}.tacche span:last-child::before{margin-left:-2px}
/* la terza tacca è allineata a destra del suo segno, così non tocca l'ultima */
.tacche span:nth-child(3){transform:translateX(-100%);padding-right:7px}.tacche span:nth-child(3)::before{left:100%;margin-left:-1px}
@media (max-width:560px){.tacche span b{font-size:1.02rem}.tacche{font-size:.54rem;letter-spacing:.06em}.tacche span{gap:3px}}

/* ---------- v2.14 - la chiusura su una striscia di carta; nella fonorespirazione una figura che inspira e parla con la pallina ---------- */
.chiusa{position:relative;isolation:isolate;align-self:flex-start;max-width:100%;display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.6vw,28px) clamp(20px,3.4vw,40px)}
.chiusa::after{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),rgba(255,254,252,.84);box-shadow:0 12px 24px rgba(5,28,46,.34);border-radius:2px}
@media (max-width:560px){.chiusa .sotto-mare{font-size:.64rem;letter-spacing:.06em;white-space:nowrap}.chiusa{padding-inline:16px}}
.chiusa .approdo{color:var(--deep);text-shadow:none}
.chiusa .sotto-mare{color:var(--accent);font-weight:600;text-shadow:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.chiusa .sotto-mare:hover{color:var(--deep);border-bottom-color:var(--deep)}
.superficie .wrap{padding-bottom:clamp(40px,7svh,70px)}
.ritmo{display:grid;grid-template-columns:clamp(110px,14vw,150px) minmax(0,1fr);gap:clamp(14px,3vw,36px);align-items:end;max-width:920px}
.ritmo svg.respira{overflow:visible}
.respira .corpo{fill:rgba(255,255,255,.72);stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round}
.respira .bocca{fill:var(--deep)}
.respira .aria line{stroke:var(--azzurro);stroke-width:2.2;stroke-linecap:round}
.respira .voce path{fill:none;stroke:var(--deep);stroke-width:2.2;stroke-linecap:round}
.respira text{font-size:12px;letter-spacing:.14em;text-transform:uppercase;fill:var(--accent);font-weight:600}
@media (max-width:640px){.ritmo{grid-template-columns:minmax(0,1fr)}.ritmo svg.respira{width:120px;justify-self:center}}

/* ---------- v2.15 - omino con la bocca che si apre, copertine dei libri, estratto di un Testo di Potenziamento ---------- */
.ritmo{grid-template-columns:clamp(120px,15vw,165px) minmax(0,1fr)}
.respira .naso{fill:rgba(255,255,255,.72)}
.respira .occhio{fill:var(--deep)}
.respira .flusso{fill:none;stroke:var(--azzurro);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 11}
@media (max-width:640px){.ritmo svg.respira{width:130px}}
.voci.libri > div{grid-template-columns:clamp(84px,9vw,112px) minmax(0,1fr);gap:4px clamp(14px,2vw,24px);align-items:start}
.voci.libri .cop{grid-row:1 / span 2;width:100%;height:auto;display:block;filter:drop-shadow(0 8px 10px rgba(5,28,46,.3));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.voci.libri > div:hover .cop{transform:translateY(-4px) rotate(-1.5deg)}
.voci.libri dt,.voci.libri dd{grid-column:2}
.esperimento{align-self:center}
.muted strong{color:var(--ink);font-weight:600}
.estratto{position:relative;isolation:isolate;margin:clamp(30px,4.6vw,56px) 0 0;padding:clamp(22px,3.4vw,40px) clamp(20px,3.6vw,46px) 22px;display:flex;flex-direction:column;gap:16px}
.estratto::after{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),rgba(255,254,252,.8);filter:url(#bordo-carta) drop-shadow(0 1px 1px rgba(11,59,94,.18)) drop-shadow(0 10px 16px rgba(11,59,94,.14));transform:rotate(-.25deg)}
.estratto figcaption{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.estratto figcaption span{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.estratto figcaption b{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,3.8rem);line-height:1;color:var(--deep)}
.estratto p{max-width:none;margin:0;columns:2;column-gap:clamp(24px,4vw,56px);font-family:"Courier New",Courier,ui-monospace,monospace;font-size:.95rem;line-height:1.75;text-align:justify;color:var(--ink);max-height:17.5em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 100%);mask-image:linear-gradient(180deg,#000 48%,transparent 100%)}
.estratto small{font-size:.78rem;color:var(--muted);letter-spacing:.04em}
@media (max-width:640px){.estratto p{columns:1;max-height:16em;text-align:left;font-size:.9rem}}
.respira #r-testa,.respira .naso{fill:#eef6fc}

/* ---------- v2.19 - Cerchio Nasale: figura propria con la scala 0-10; Triangolo + Cerchio = Istantanea Vocale ---------- */
.fig-nome{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-align:center;margin:0 auto -6px;max-width:none}
.componenti{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(8px,2vw,22px);align-items:center;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--deep) 30%,transparent)}
.componenti figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.componenti svg{display:block;width:100%;max-width:190px;height:auto;aspect-ratio:1.2;overflow:visible}
.componenti #iv-mc{aspect-ratio:1;max-width:176px}
.componenti figcaption{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-align:center;font-weight:500}
.componenti figcaption b{font-family:var(--display);font-size:1.3rem;letter-spacing:0;font-weight:600;color:var(--deep)}
.componenti .piu{font-family:var(--display);font-size:2.4rem;line-height:1;color:var(--accent)}
#iv-mc .anello{fill:none;stroke:color-mix(in srgb,var(--deep) 34%,transparent);stroke-width:.8}
#iv-mc .anello.ideale{stroke:var(--deep);stroke-width:1.2;stroke-dasharray:3 3}
#iv-mc text{font-family:var(--body);font-size:12px;fill:var(--deep);font-weight:600;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:2.4px}

/* ---------- v2.20 - la banda finale arriva da fuori, a sinistra; l'acqua si increspa (solo la parte di mare della fotografia) ---------- */
.chiusa::after{inset:0 0 0 -100vw;border-radius:0 2px 2px 0}
.mo .chiusa{transform:translateX(calc(-100% - 60px));transition:transform 1.5s cubic-bezier(.16,.8,.2,1)}
.mo .chiusa.in{transform:none}
.mo .chiusa .approdo,.mo .chiusa .sotto-mare{opacity:0;transition:opacity .9s ease .9s}
.mo .chiusa.in .approdo,.mo .chiusa.in .sotto-mare{opacity:1}
.onde{position:absolute;left:0;right:0;bottom:0;height:calc(var(--mare) - 6px);background:url(../img/orizzonte.jpg) no-repeat left calc((100vw - var(--w))*var(--px)) bottom calc(var(--mare) - var(--w)*.2065)/var(--w) auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46px);mask-image:linear-gradient(180deg,transparent 0,#000 46px);display:none}
.mo .onde{display:block;filter:url(#onde)}

/* ---------- v2.21 - il ritratto dell'ideatore: una stampa fotografica su carta, con un velo azzurro, appoggiata su un secondo foglio ---------- */
.foto{position:relative;isolation:isolate;margin:6px 0 0;width:min(100%,340px);padding:14px 14px 0;transform:rotate(-1.6deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.foto:hover{transform:rotate(-.4deg) translateY(-4px)}
.foto::before{content:"";position:absolute;inset:0;z-index:-2;background:rgba(244,248,251,.9);transform:translate(10px,9px) rotate(2.6deg);box-shadow:0 14px 24px -8px rgba(11,59,94,.26)}
.foto::after{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),#fffefc;box-shadow:0 1px 2px rgba(11,59,94,.2),0 16px 28px -10px rgba(11,59,94,.3)}
.foto .stampa{position:relative;overflow:hidden;background:#dfeaf2}
.foto img{display:block;width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;object-position:50% 20%;filter:contrast(1.04)}
.foto .stampa::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(90,174,219,.2),rgba(11,59,94,.34));mix-blend-mode:color;pointer-events:none}
.foto .stampa::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(200deg,rgba(255,255,255,.3),rgba(255,255,255,0) 38%);pointer-events:none}
.foto figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 4px 16px}
.foto figcaption b{font-family:var(--display);font-weight:500;font-size:1.5rem;line-height:1.1;color:var(--deep)}
.foto figcaption span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#autore .ritratto{margin-bottom:4px}
@media (max-width:860px){.foto{width:min(78%,320px)}}
/* v2.22 - didascalia del ritratto centrata e in neretto */
.foto figcaption{align-items:center;text-align:center}
.foto figcaption span{font-weight:700;color:var(--deep)}
/* v2.23 - ritratto a colori pieni: niente velo azzurro (per tornare al colore attenuato: filter:saturate(.64) contrast(1.03) su .foto img) */
.foto .stampa::after{display:none}
.foto img{filter:none}

/* ---------- v2.24 - pulsante per accendere le animazioni quando il sistema le ha ridotte ---------- */
.avviso{position:absolute;z-index:3;top:18px;right:var(--gutter);font:inherit;font-size:.8rem;color:#4a3414;background:var(--warm);border:0;border-radius:999px;padding:9px 16px;cursor:pointer;box-shadow:0 4px 12px -4px rgba(11,59,94,.35)}
.avviso:hover{background:#f3ddbd}
.avviso[hidden]{display:none}
@media (max-width:560px){.avviso{top:12px;right:12px;font-size:.72rem;padding:8px 12px}}

/* ---------- v2.25 - raggi del sole che si muovono nell'apertura; nuvole vere (ritagliate dalle fotografie) al posto di quelle disegnate ---------- */
.raggi{position:absolute;inset:0;pointer-events:none;--sx:calc(100% - 5svh);--sy:-3%;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(130% 120% at var(--sx) var(--sy),#000 0,rgba(0,0,0,.75) 34%,transparent 78%);mask-image:radial-gradient(130% 120% at var(--sx) var(--sy),#000 0,rgba(0,0,0,.75) 34%,transparent 78%)}
.raggi i{position:absolute;inset:-12%;--ox:calc((var(--sx) + 12%)/1.24);transform-origin:calc(100% - 5svh - 12% * 0 ) 9%;opacity:.55}
.raggi i:first-child{background:conic-gradient(from 188deg at calc(100% - 12%/1.24 - 5svh) 9.2%,rgba(255,248,228,0) 0deg,rgba(255,248,228,.62) 5deg,rgba(255,248,228,0) 11deg,rgba(255,248,228,0) 17deg,rgba(255,248,228,.5) 23deg,rgba(255,248,228,0) 31deg,rgba(255,248,228,0) 38deg,rgba(255,248,228,.66) 45deg,rgba(255,248,228,0) 53deg,rgba(255,248,228,0) 60deg,rgba(255,248,228,.45) 66deg,rgba(255,248,228,0) 74deg,rgba(255,248,228,0) 360deg);
  transform-origin:calc(100% - 12%/1.24 - 5svh) 9.2%}
.raggi i:last-child{background:conic-gradient(from 194deg at calc(100% - 12%/1.24 - 5svh) 9.2%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.5) 3deg,rgba(255,255,255,0) 7deg,rgba(255,255,255,0) 21deg,rgba(255,255,255,.42) 26deg,rgba(255,255,255,0) 31deg,rgba(255,255,255,0) 47deg,rgba(255,255,255,.5) 51deg,rgba(255,255,255,0) 56deg,rgba(255,255,255,0) 360deg);
  transform-origin:calc(100% - 12%/1.24 - 5svh) 9.2%;opacity:.4}
.mo .raggi i:first-child{animation:raggi-a 17s ease-in-out infinite}
.mo .raggi i:last-child{animation:raggi-b 23s ease-in-out infinite}
@keyframes raggi-a{0%,100%{transform:rotate(-2.6deg);opacity:.42}50%{transform:rotate(3.2deg);opacity:.72}}
@keyframes raggi-b{0%,100%{transform:rotate(3.4deg);opacity:.5}50%{transform:rotate(-3deg);opacity:.22}}
@media (max-width:760px){.raggi{--sx:128%}.raggi i:first-child,.raggi i:last-child{background-position:0 0}
  .raggi i:first-child{background:conic-gradient(from 200deg at 118% 9.2%,rgba(255,248,228,0) 0deg,rgba(255,248,228,.62) 5deg,rgba(255,248,228,0) 11deg,rgba(255,248,228,0) 17deg,rgba(255,248,228,.5) 23deg,rgba(255,248,228,0) 31deg,rgba(255,248,228,0) 38deg,rgba(255,248,228,.66) 45deg,rgba(255,248,228,0) 53deg,rgba(255,248,228,0) 360deg);transform-origin:118% 9.2%}
  .raggi i:last-child{background:conic-gradient(from 206deg at 118% 9.2%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.5) 3deg,rgba(255,255,255,0) 7deg,rgba(255,255,255,0) 21deg,rgba(255,255,255,.42) 26deg,rgba(255,255,255,0) 31deg,rgba(255,255,255,0) 360deg);transform-origin:118% 9.2%}}
.nuvole i{width:calc(420px*var(--s));height:auto;aspect-ratio:640/587;filter:none;opacity:.95;background:url(../img/n1.webp) no-repeat center/contain}
.nuvole i:nth-child(2){aspect-ratio:360/140;background-image:url(../img/n3.webp);width:calc(300px*var(--s))}
.nuvole i:nth-child(3){aspect-ratio:640/460;background-image:url(../img/n2.webp)}
.nuvole i:nth-child(4){aspect-ratio:560/157;background-image:url(../img/n4.webp);width:calc(380px*var(--s))}
.nuvole i:nth-child(5){aspect-ratio:640/341;background-image:url(../img/n5.webp)}
.nuvole i:nth-child(6){aspect-ratio:360/140;background-image:url(../img/n3.webp);width:calc(320px*var(--s));scale:-1 1}
.mo .nuvole i{animation:deriva 46s ease-in-out infinite alternate}
.mo .nuvole i:nth-child(even){animation-duration:62s;animation-direction:alternate-reverse}
@keyframes deriva{from{translate:-30px 0}to{translate:46px 0}}

/* ---------- v2.26 - Foglio Ortolabiale: una scheda a sé con cornice tratteggiata, titolo sulla cornice, tutto centrato ---------- */
fieldset.prova{display:block;min-width:0;margin:clamp(34px,5vw,56px) auto 0;max-width:860px;padding:clamp(18px,3vw,30px) clamp(16px,3.4vw,40px) clamp(22px,3vw,32px);border:2px dashed var(--azzurro);border-radius:10px;background:rgba(255,254,252,.62)}
fieldset.prova legend{margin-inline:auto;padding:0 16px;font-size:.98rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--deep)}
.prova-in{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.prova-in label{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.2}
.prova .riga{justify-content:center}
.prova input{text-align:center;width:min(100%,300px)}
.prova .foglio{justify-content:center;gap:14px 10px;min-height:96px;padding:6px 0;border:0;background:none;width:100%}
.prova .foglio figure{width:68px}
.prova .foglio svg{width:62px;height:50px}
.prova .nota{max-width:58ch;margin:4px 0 0;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--deep) 26%,transparent);font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.45;color:var(--ink)}
.prova .nota strong{font-weight:700;font-style:normal;color:var(--deep)}
.prova .riga{width:100%}

/* ---------- v2.27 - il titolo del Foglio Ortolabiale è un cartellino di carta bianca che sporge dalla cornice ---------- */
fieldset.prova{margin-top:clamp(48px,6vw,72px);padding-top:clamp(10px,2vw,18px)}
fieldset.prova legend{position:relative;isolation:isolate;padding:11px clamp(20px,3vw,34px) 12px;font-family:var(--display);font-weight:700;font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1;letter-spacing:.01em;text-transform:none;color:var(--deep);transform:rotate(-1.2deg)}
fieldset.prova legend::after{content:"";position:absolute;inset:0;z-index:-1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .38 0 0 0 0 .42 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"),#fffefc;filter:url(#bordo-carta) drop-shadow(0 1px 1px rgba(11,59,94,.22)) drop-shadow(0 8px 12px rgba(11,59,94,.2))}