:root{--bg:#05060b;--fg:#eef0f7;--mute:#a9aec0;--line:rgba(238,240,247,.2);--glow:#9db8ff;--m:clamp(18px,3.4vw,56px);--enter:cubic-bezier(.22,1,.36,1);--move:cubic-bezier(.25,1,.5,1)}
html{background:var(--bg)}
html body{background:var(--bg);color:var(--fg);font:400 18px/1.5 "Instrument Sans",sans-serif;overflow-x:clip}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
::selection{background:#6d7dff;color:#fff}
i.b{font:italic 400 1.08em/0 "Bodoni Moda",serif;letter-spacing:-.015em}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.no-webgl #gl{display:none}
.no-webgl body::before{content:"";position:fixed;inset:0;background:url("img/nodo-poster.jpg") no-repeat right center/auto 100%;opacity:.7}
@media (max-width:820px){.no-webgl body::before{opacity:.28}}
main,.bar,.foot,.rail{position:relative;z-index:1}

/* bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px var(--m);pointer-events:none}
.bar>*{pointer-events:auto;position:relative}
.bar::before{content:"";position:absolute;inset:0 0 -44px 0;background:linear-gradient(rgba(5,6,11,.99),rgba(5,6,11,.96) 56%,transparent);pointer-events:none}
.bar img{display:block;height:36px;width:auto}
.bar .to{font-size:15px;padding:.65rem 0;text-decoration:none;position:relative}
.bar .to::after{content:"";position:absolute;left:0;right:0;bottom:.45rem;height:1px;background:currentColor;transform:scaleX(.0);transform-origin:left;transition:transform .25s var(--move)}
@media (hover:hover){.bar .to:hover::after{transform:scaleX(1)}}

.bar-r{display:flex;align-items:center;gap:clamp(.75rem,2.2vw,2rem)}

.snd{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;min-width:44px;justify-content:center;padding:0;background:none;border:0;cursor:pointer;font-size:15px;color:var(--mute);transition:color .15s}
.snd[aria-pressed="true"]{color:var(--fg)}
@media (hover:hover){.snd:hover{color:var(--fg)}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{display:block;width:2px;height:14px;background:currentColor;transform-origin:bottom;transform:scaleY(.16);transition:transform .25s var(--enter)}
.eq i:nth-child(1){transform:scaleY(.4)}.eq i:nth-child(2){transform:scaleY(.85)}.eq i:nth-child(3){transform:scaleY(.55)}.eq i:nth-child(4){transform:scaleY(.3)}
.snd.playing .eq i{animation:eq 1.15s ease-in-out infinite alternate}
.snd.playing .eq i:nth-child(2){animation-duration:.85s;animation-delay:-.3s}
.snd.playing .eq i:nth-child(3){animation-duration:1.4s;animation-delay:-.6s}
.snd.playing .eq i:nth-child(4){animation-duration:1s;animation-delay:-.15s}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}

/* rail */
.rail{position:fixed;right:var(--m);top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;align-items:flex-end}
.rail{text-shadow:0 0 10px var(--bg),0 0 3px var(--bg)}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:4px;height:32px;text-decoration:none;font-size:13px;color:var(--mute)}
.rail span{opacity:0;transform:translateX(5px);transition:opacity .15s,transform .2s var(--enter);white-space:nowrap}
.rail a::after{content:"";display:block;width:14px;height:1px;background:currentColor;transform-origin:right;transition:transform .3s var(--enter)}
.rail a[aria-current="true"]{color:var(--fg)}
.rail a[aria-current="true"]::after{transform:scaleX(2)}
.rail a:not([aria-current="true"]):focus-visible span{opacity:1;transform:none}
.rail a[aria-current="true"] span{opacity:1;transform:translateX(-14px)}
@media (hover:hover){.rail a:hover{color:var(--fg)}.rail a:not([aria-current="true"]):hover span{opacity:1;transform:none}}


/* hero */
.hero{min-height:100svh;padding:clamp(5rem,14vh,8rem) var(--m) clamp(3.5rem,8vh,5rem);display:flex;flex-direction:column;justify-content:flex-end}
h1{font-weight:400;font-size:clamp(2.75rem,6.3vw,7.2rem);line-height:.98;letter-spacing:-.045em;max-width:12.5ch}
.js h1 .l{display:block;opacity:0;transform:translateY(.28em);animation:up .9s var(--enter) forwards}
.js h1 .l:nth-child(2){animation-delay:.09s}.js h1 .l:nth-child(3){animation-delay:.18s}
@keyframes up{to{opacity:1;transform:none}}
.hero-row{display:flex;flex-wrap:wrap;gap:1.5rem clamp(2rem,5vw,5rem);align-items:flex-start;margin-top:clamp(1.5rem,3.5vh,2.5rem);max-width:min(58vw,800px)}
.hero .who{margin-top:clamp(1.25rem,3vh,2rem)}
.hero-copy{flex:0 1 460px;min-height:7.6em}
.hero-copy p{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.38}
.hint{position:absolute;right:var(--m);bottom:18px;font-size:13px;color:var(--mute);display:flex;align-items:center;gap:.6rem;transition:opacity .25s}
.hint::after{content:"";width:1px;height:26px;background:currentColor;transform-origin:top;animation:draw 2.4s var(--enter) infinite}
@keyframes draw{0%{transform:scaleY(0)}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.hint.off{opacity:0}

/* who */
.who legend{padding:0;font-size:15px;color:var(--mute);margin-bottom:.45rem}
.seg{position:relative;display:inline-flex;padding:3px;background:rgba(238,240,247,.08);border:1px solid var(--line);border-radius:999px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.seg label{position:relative;cursor:pointer;z-index:1}
.seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.seg span{display:flex;align-items:center;height:40px;padding:0 1.05rem;font-size:15px;border-radius:999px;transition:color .15s}
.seg input:checked + span{color:var(--bg)}
.seg input:focus-visible + span{outline:2px solid var(--glow);outline-offset:2px}
.thumb{position:absolute;top:3px;bottom:3px;left:0;width:0;background:var(--fg);border-radius:999px;opacity:0;transition:transform .32s var(--move),width .32s var(--move),opacity .12s}

/* cta */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6rem;min-height:50px;padding:.7rem 1.35rem;border-radius:999px;background:var(--fg);color:var(--bg);text-decoration:none;font-size:16px;font-weight:500;border:0;cursor:pointer;width:fit-content;transition:scale .12s var(--enter)}
.btn:active{scale:.97}
.btn svg{width:16px;height:16px;transition:transform .25s var(--enter)}
@media (hover:hover){.btn:hover svg{transform:translateX(4px)}}
.btn-down svg{animation:nudge 2.4s var(--enter) 2s infinite}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateY(3px)}}
@media (hover:hover){.btn-down:hover svg{animation:none;transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.btn-down svg{animation:none}}
.hero .btn{margin-top:1rem}

/* formats */
.fmt-wrap{padding-inline:var(--m)}
.fmt-intro{min-height:60vh;display:flex;align-items:center}
h2{font-weight:400;font-size:clamp(2.1rem,5.3vw,5.8rem);line-height:1;letter-spacing:-.04em;max-width:13ch}
.fmt{min-height:92vh;display:flex;align-items:center}
.fmt>div{width:min(41vw,560px);--a:1;opacity:calc(.3 + .7*var(--a));transform:translateY(calc((1 - var(--a))*18px))}
.fmt:nth-of-type(even){justify-content:flex-end;padding-right:clamp(0px,5vw,80px)}
.fmt .n{font-size:14px;color:var(--mute);display:flex;gap:.7rem;align-items:center;margin-bottom:.9rem}
.badge{display:none;padding:.1rem .6rem;border:1px solid var(--fg);border-radius:99px;color:var(--fg);font-size:12px}
html[data-audience="azienda"] .fmt[data-for~="azienda"] .badge,html[data-audience="scuola"] .fmt[data-for~="scuola"] .badge,html[data-audience="privato"] .fmt[data-for~="privato"] .badge{display:inline-block}
h3{font-weight:400;font-size:clamp(2rem,4.4vw,4.6rem);line-height:1;letter-spacing:-.035em}
.fmt p.t{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.36;margin-top:1rem;max-width:32em}
.fmt p.m{color:var(--mute);font-size:15px;margin-top:.8rem}
.fmt .btn{margin-top:1.25rem}
.fmt-foto{margin-top:clamp(2.25rem,5vh,3rem);max-width:400px}
/* foto in bianco e nero, si colora al passaggio del mouse; sui touch resta a colori */
@media (hover:hover){.fmt-foto img{filter:grayscale(1);transition:filter .6s var(--enter)}.fmt-foto:hover img{filter:none}}
.vc{margin-top:1.5rem;max-width:400px}
.vc-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:10px 14px;margin:-10px -14px}
.vc-track::-webkit-scrollbar{display:none}
.vc-track:focus-visible{outline:2px solid var(--glow);outline-offset:-2px}
.vc-slide{flex:0 0 100%;scroll-snap-align:center}
.vc-slide img{display:block;width:100%;height:auto}
.vc-cap{margin-top:.6rem}
.vc-dots{display:flex;margin:.3rem 0 0 -5px}
@media (pointer:coarse){.vc-dots{margin-left:-8px}.vc-dots button{width:24px!important}}
.vc-dots button{display:grid;place-items:center;width:18px;height:26px;padding:0;background:none;border:0;cursor:pointer}
.vc-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:background-color .2s}
.vc-dots button[aria-current="true"]::before{background:var(--fg)}
.vc-dots button:focus-visible{outline:2px solid var(--glow);outline-offset:-3px;border-radius:50%}
@media (hover:hover){.vc-dots button:not([aria-current="true"]):hover::before{background:var(--mute)}}
.fmt-foto img{display:block;width:100%;height:auto}

/* method */
#metodo{padding:clamp(4rem,14vh,9rem) var(--m)}
.manifest{font-size:clamp(1.85rem,4.15vw,4.5rem);line-height:1.06;letter-spacing:-.035em;max-width:min(58vw,17em)}
.manifest span{opacity:calc(.26 + .74*var(--w,1))}
.steps{margin-top:clamp(3rem,10vh,6rem);max-width:min(52vw,720px);counter-reset:s}
.steps li{display:grid;grid-template-columns:2.4rem 1fr;padding-block:1rem;border-top:1px solid var(--line);--a:1;opacity:calc(.42 + .58*var(--a))}
.steps .num{font-size:14px;color:var(--mute);padding-top:.4rem;font-variant-numeric:tabular-nums}
.steps strong{font-weight:400;font-size:clamp(1.3rem,2vw,1.8rem);letter-spacing:-.022em;line-height:1.15;display:block}
.steps p{grid-column:2;color:var(--mute);font-size:16px;line-height:1.4;margin-top:.25rem}

/* docente */
#docente{padding:clamp(5rem,16vh,10rem) var(--m)}
.portrait{width:min(50vw,720px);margin-inline:auto}
[data-tilt]{perspective:1400px}
.tilt{position:relative;overflow:hidden;transform-origin:50% 50%}
.portrait img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:50% 20%}
.sheen{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.2),rgba(157,184,255,.06) 34%,transparent 62%);transition:opacity .3s var(--enter)}
.tilt.on .sheen{opacity:1}
.bio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2.5rem 12px;margin-top:clamp(3rem,9vh,6rem)}
.hl{background:var(--fg);color:var(--bg);padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.bio .who-am{grid-column:1/8;padding-right:clamp(1.5rem,5vw,5rem);font-size:clamp(1.45rem,2.6vw,2.6rem);line-height:1.14;letter-spacing:-.026em}
.bio dl{grid-column:8/12;display:grid;gap:1.15rem;align-content:start}
.bio dt{font-size:14px;color:var(--mute)}
.bio dd{font-size:17px;line-height:1.3}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vh,3.5rem) clamp(12px,2vw,32px);margin-top:clamp(3rem,9vh,6rem);max-width:calc(100% - 60px)}
.facts div{position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-end;padding-top:.9rem}
.facts div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;transition:transform 1.1s var(--enter)}
.facts .num{display:block;margin-left:-.07em;transition:opacity .5s var(--enter),transform .9s var(--enter)}
.facts div:nth-child(2)::before,.facts div:nth-child(2) .num{transition-delay:.12s}
.facts div:nth-child(3)::before,.facts div:nth-child(3) .num{transition-delay:.24s}
.facts div:nth-child(4)::before,.facts div:nth-child(4) .num{transition-delay:.36s}
.facts.ready div:nth-child(n)::before,.facts.ready div:nth-child(n) .num{transition-delay:0s}
.facts.wait div::before{transform:scaleX(0)}
.facts.wait .num{opacity:0;transform:translateY(.12em)}
.facts dd{font-size:clamp(4rem,14vw,15rem);line-height:.95;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.facts dt{font-size:clamp(1rem,1.4vw,1.25rem);color:var(--mute);margin-top:.7rem;line-height:1.3}

/* numeri: interazione al passaggio del mouse */
@property --lens{syntax:'<length>';inherits:true;initial-value:0px}
@media (hover:hover) and (pointer:fine){
  .facts div{transition:opacity .28s var(--enter)}
  .facts div::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#4cc7ff,#8e97ff 45%,#d48bff);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--enter)}
  .facts:has(div:hover) div:not(:hover){opacity:.36}
  .facts.ready div:hover::after{transform:scaleX(1);transition-duration:.7s}
  .facts dt{transition:color .2s,translate .35s var(--enter)}
  .facts.ready div:hover dt{color:var(--fg);translate:8px 0}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .facts.ready .num{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:radial-gradient(circle var(--lens) at var(--mx,50%) var(--my,50%),#fff 0,#8fe3ff 26%,#8e97ff 54%,#d48bff 78%,var(--fg) 100%);transition:--lens .5s var(--enter),translate .4s var(--enter),opacity .5s var(--enter),transform .9s var(--enter)}
    .facts.ready div:hover .num{--lens:clamp(170px,22vw,340px)}
  }
}
@media (prefers-reduced-motion:reduce){.facts.ready .num,.facts dt{translate:none!important}}

/* pagina di welcome */
.gate{display:none}
.js .gate{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:space-between;padding:14px var(--m) clamp(1.5rem,4.5vh,2.75rem);background:linear-gradient(transparent 62%,rgba(5,6,11,.82) 92%);transition:opacity .7s var(--enter),visibility .7s}
.gate:focus{outline:0}
.gate.out{opacity:0;visibility:hidden;pointer-events:none}
.gate-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:44px}
.gate-logo{display:block;height:36px;width:auto}
.gate-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap}
.gate-t{font-size:clamp(1.6rem,2.7vw,2.9rem);line-height:1.08;letter-spacing:-.035em}
.gate-a{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.gate-n{font-size:15px;line-height:1.25;color:var(--mute);text-align:right}
.gate-top>*,.gate-bot>*{animation:gatein 1.1s var(--enter) backwards}
.gate-n{animation-delay:.1s}.gate-t{animation-delay:.2s}.gate-a{animation-delay:.3s}
.gate-in{min-height:54px;padding:.7rem 1.75rem;font-size:17px}
.gate-skip{min-height:44px;padding:.5rem 0;background:none;border:0;cursor:pointer;font-size:15px;color:var(--mute);transition:color .15s}
@media (hover:hover){.gate-skip:hover{color:var(--fg)}}
@media (max-width:820px){
  .gate-logo{height:28px}
  .gate-t{font-size:clamp(1.55rem,7.2vw,2.6rem)}
  .gate-n{font-size:13px;max-width:13em}
  .gate-a{width:100%;justify-content:space-between}
  .js .gate{background:linear-gradient(transparent 58%,rgba(5,6,11,.86) 84%)}
}
html.gated,html.gated body{overflow:hidden}
html.gated main,html.gated .bar,html.gated .rail,html.gated .foot,html.gated .skip{visibility:hidden}
.js.gated h1 .l{animation-play-state:paused}
html.entering main,html.entering .bar,html.entering .rail{animation:gatein .9s var(--enter) backwards .12s}
@keyframes gatein{from{opacity:0}to{opacity:1}}
main:focus{outline:0}
@media (prefers-reduced-motion:reduce){.gate-top>*,.gate-bot>*{animation:none}}

/* fasce social */
.ig{position:relative;display:block;padding:clamp(1.75rem,5vh,3.25rem) var(--m) clamp(2rem,6vh,3.75rem);background:rgba(238,240,247,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--fg);text-decoration:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ig:focus-visible{outline-offset:-6px}
.ig-h{display:block;font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--mute);margin-bottom:.5rem;transition:color .2s}
.ig-r{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.ig-t{font-size:clamp(2.6rem,9.3vw,11rem);line-height:1.02;letter-spacing:-.05em;padding:.04em .04em .24em 0;margin-bottom:-.2em}
.ig + .ig{border-top:0}
.ig svg{flex:none;width:clamp(2.4rem,6.4vw,7.5rem);height:auto;transition:transform .4s var(--enter),color .2s}
.ig::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#4cc7ff,#8e97ff 45%,#d48bff);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--enter)}
@media (hover:hover) and (pointer:fine){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .ig-t{color:transparent;-webkit-background-clip:text;background-clip:text;background-image:radial-gradient(circle var(--lens) at var(--mx,50%) var(--my,50%),#fff 0,#8fe3ff 26%,#8e97ff 54%,#d48bff 78%,var(--fg) 100%);transition:--lens .5s var(--enter)}
    .ig:hover .ig-t{--lens:clamp(190px,26vw,420px)}
  }
  .ig:hover svg{transform:translate(6px,-6px);color:#8fe3ff}
  .ig:hover::after{transform:scaleX(1);transition-duration:.7s}
  .ig:hover .ig-h{color:var(--fg)}
}
.ig:active .ig-t{opacity:.8}
@media (prefers-reduced-motion:reduce){.ig:hover svg{transform:none}}

/* banda aula */
/* fascia loghi */
.fmt:has(>.lg){flex-wrap:wrap;align-content:center}
.fmt[data-k=f2]{--pr:clamp(0px,5vw,80px)}
.lg{position:relative;flex:none;width:calc(100% + var(--m)*2 + var(--pr,0px));margin:clamp(1.75rem,4vh,3rem) calc((var(--m) + var(--pr,0px))*-1) 0 calc(var(--m)*-1);padding:clamp(.75rem,2.5vh,1.5rem) 0 clamp(1.5rem,4vh,2.5rem);background:rgba(5,6,11,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lg-head{display:flex;align-items:center;gap:1.5rem;min-height:44px;padding-inline:var(--m);margin-bottom:clamp(.5rem,2vh,1.25rem)}
.lg-t{font-size:clamp(1.05rem,1.45vw,1.3rem)}
.lg-view{--lh:clamp(32px,3.5vw,50px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.lg-track{display:flex;width:max-content;will-change:transform}
.lg-list{--g:clamp(3rem,6vw,6.5rem);flex:none;display:flex;align-items:center;gap:var(--g);padding-right:var(--g);min-height:calc(var(--lh)*1.5);list-style:none}
.lg-list img{display:block;width:auto;height:calc(var(--lh)*var(--s,1));opacity:.92;transition:opacity .25s}
@media (hover:hover){.lg-list img:hover{opacity:1}}
html:not(.js) .lg-track,.lg.is-static .lg-track{width:auto;will-change:auto}
html:not(.js) .lg-view,.lg.is-static .lg-view{-webkit-mask-image:none;mask-image:none}
html:not(.js) .lg-list,.lg.is-static .lg-list{flex:1;flex-wrap:wrap;gap:1.75rem var(--g);padding-inline:var(--m)}

.band{position:relative;height:min(100svh,66.6vw);margin-top:clamp(2rem,6vh,4rem)}
.band-clip{position:absolute;inset:0;overflow:hidden;background:#11131c}
.band[data-tilt]{perspective:2600px;overflow:clip}
.foto-nota{font-size:13px;line-height:1.3;color:var(--mute);margin-top:.6rem}
.band-nota{padding-inline:var(--m)}
.band .sheen{background:radial-gradient(circle 460px at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.22),rgba(157,184,255,.07) 40%,transparent 72%)}
.band-inner{position:absolute;left:0;top:-8%;width:100%;height:116%}
.band-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.rail.on-photo{mix-blend-mode:difference;text-shadow:none;color:#fff}
.rail.on-photo a{color:#fff}

/* quotes */
.rec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.mano{position:sticky;top:max(84px,calc(50svh - min(39vw,calc(50svh - 84px))));width:min(100%,calc((100svh - 168px)*.6667))}
.mano img{width:100%;aspect-ratio:2/3;object-fit:cover;object-position:60% 30%}
#recensioni{padding:clamp(4rem,12vh,8rem) var(--m)}
.q{display:grid;gap:clamp(4rem,16vh,10rem);padding-block:clamp(2rem,12vh,7rem);margin-right:clamp(0px,7vw,110px)}
.q blockquote{font-size:clamp(1.4rem,2.6vw,2.6rem);line-height:1.14;letter-spacing:-.024em;--a:1;opacity:calc(.3 + .7*var(--a))}
.q blockquote::before{content:"\201C";display:block;height:.62em;margin-bottom:.12em;font:400 2.3em/1 "Bodoni Moda",serif;color:var(--glow)}
.q footer{font-size:14px;letter-spacing:0;color:var(--mute);margin-top:.7rem;line-height:1.4}

/* contact */
#contatti{min-height:100svh;padding:clamp(5rem,14vh,8rem) var(--m) clamp(4rem,10vh,6rem);display:flex;align-items:center}
.cbox{width:min(40vw,580px)}
#contatti h2{max-width:11ch;margin-bottom:clamp(1.5rem,4vh,2.5rem)}
form{display:grid;gap:1.1rem;margin-top:1.25rem}
.field label{display:block;font-size:14px;color:#c7cbd9;margin-bottom:.3rem}
.field input,.field textarea{width:100%;min-height:48px;padding:.65rem .85rem;background:rgba(238,240,247,.06);border:1px solid var(--line);border-radius:10px;font-size:17px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .15s,background-color .15s}
.field textarea{min-height:96px;resize:vertical}
.field textarea::placeholder{color:#9398ab}
@media (hover:hover){.field input:hover,.field textarea:hover{border-color:rgba(238,240,247,.42)}}
.field input:focus,.field textarea:focus{outline:2px solid var(--glow);outline-offset:0;border-color:transparent;background:rgba(238,240,247,.1)}
.err{display:block;font-size:14px;color:#ffb0c4;margin-top:.3rem}
.err:empty{margin:0}
.legal{font-size:13px;color:var(--mute)}
.legal a{padding-block:.5rem;text-underline-offset:3px}
.status{font-size:15px;color:#a9e4ff}
.status:empty{display:none}
.foot{padding:1.25rem var(--m) 3.25rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;font-size:14px;color:var(--mute)}
.foot a{display:inline-block;padding-block:.65rem;text-underline-offset:4px}
.foot-l{display:flex;flex-wrap:wrap;gap:0 clamp(1rem,2.5vw,2rem)}
@media (hover:hover){.foot a:hover{color:var(--glow)}}

@media (max-width:820px){
  .rail,.hint{display:none}
  .bar img{height:28px}
  .snd-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  h1{font-size:clamp(2.3rem,11.4vw,4.6rem);max-width:none}
  .hero{justify-content:flex-start;padding-top:36svh;padding-bottom:2rem}
  .hero-row{max-width:none;flex-direction:column;gap:1rem}
  .hero-copy{min-height:0;flex:none}
  .hero .btn{margin-top:.75rem}
  .seg{display:flex;width:fit-content}
  .seg span{height:42px;padding:0 .95rem}
  .fmt{min-height:88svh;align-items:flex-end;padding-bottom:9svh;justify-content:flex-start!important;padding-right:0!important}
  .fmt>div{width:100%}
  .fmt:has(>.lg){align-content:flex-end}
  .fmt[data-k=f2]{--pr:0px}
  .fmt .btn{font-size:15px;padding-inline:1rem;gap:.5rem}
  .fmt-intro{min-height:44svh;align-items:flex-end}
  .manifest,.steps,.cbox{width:100%;max-width:none}
  .rec{grid-template-columns:minmax(0,1fr)}
  .mano{position:static;width:100%}
  .mano img{aspect-ratio:4/5;object-position:60% 22%}
  .q{margin-right:0;padding-block:0;gap:clamp(2.5rem,8vh,4rem)}
  .band{height:75vw}
  .band-inner img{object-position:42% 45%}
  .portrait{width:100%}
  .bio .who-am,.bio dl{grid-column:1/-1}
  .bio .who-am{padding-right:0}
  .facts{max-width:none;gap:2rem 12px}
  .facts dd{font-size:19vw}
  .facts dt{font-size:15px}
  #contatti{padding-top:42svh;align-items:flex-start}
  .field input,.field textarea{background:rgba(18,20,30,.82)}
  .foot{padding-bottom:3rem}
}
@media (prefers-reduced-motion:reduce){
  .snd.playing .eq i{animation:none!important;transform:scaleY(.7)}
  .js h1 .l{opacity:1;transform:none;animation:none}
  .hint::after{animation:none}
  .fmt>div,.steps li,.q blockquote,.manifest span{opacity:1!important;transform:none!important}
}

/* campo esca del modulo */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status.is-err{color:#ffb0c4}