/* Menu a tutto riquadro: unico per tutte le pagine (markup in menu.js). Colori da --frame, --ink, --c1, --c2 di ogni pagina. */
.mnav,.msub{list-style:none;display:flex;flex-direction:column}
.mnav{gap:clamp(18px,3.2vh,32px)} .mnav li{overflow:hidden} .msub{gap:clamp(4px,.8vh,8px);margin-top:clamp(8px,1.4vh,14px);padding-left:clamp(14px,1.6vw,26px)}
.mnav a,.mnav .mh{display:block;font-size:clamp(22px,3.6vh,34px);line-height:1.15;letter-spacing:-.02em;font-weight:500;transform:translateY(110%);transition:transform .6s cubic-bezier(.76,0,.24,1),color .3s}
.mnav .mh{opacity:.55;font-size:clamp(13px,1.8vh,16px);letter-spacing:0;font-weight:500}
.msub a{font-size:clamp(17px,2.6vh,24px);font-weight:400;opacity:.78}
.open .mnav a,.open .mnav .mh{transform:none;transition:transform .9s cubic-bezier(.76,0,.24,1) var(--d,0s),color .3s}
.mnav a:hover{color:inherit}
.mnav a.cur::after{content:none}

/* ===== Pulsanti animati (uguali in tutte le pagine): nessun giallo, entrata, hover e pressione ===== */
body .btn{transition:background .35s,color .35s,transform .5s cubic-bezier(.16,1,.3,1),box-shadow .35s}
body .btn:active{transform:scale(.97);transition-duration:.12s}
body .btn b{transition:background .3s,color .3s,transform .5s cubic-bezier(.16,1,.3,1)}
body .btn b svg{transition:transform .5s cubic-bezier(.16,1,.3,1)}
body .btn:hover b svg{transform:translateX(2px)}
body .btn.cta:hover b svg{transform:translate(2px,2px)}
body .btn.menu:hover b svg{transform:none}
@keyframes btn-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
.topl .btn,.topr .btn,.btn.cta{animation:btn-in .8s cubic-bezier(.16,1,.3,1) backwards}
.topl .btn:nth-child(1){animation-delay:.12s} .topl .btn:nth-child(2){animation-delay:.2s}
.topr .btn{animation-delay:.28s} .btn.cta{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.topl .btn,.topr .btn,.btn.cta{animation:none} body .btn,body .btn b,body .btn b svg{transition:none!important}}

/* ===== Menu aperto: contenuto centrato, a due colonne (Home / Manifesto / About a sinistra, Progetti a destra), pie' di pagina in basso ===== */
nav.mpanel{display:grid;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;justify-content:stretch;gap:0}
nav.mpanel .mnav{align-self:center;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:clamp(36px,8vw,150px);row-gap:clamp(14px,3vh,30px);align-items:start;margin:0 clamp(0px,2vw,36px)}
nav.mpanel .mnav>li{grid-column:1} nav.mpanel .mnav>li.grp{grid-column:2;grid-row:1 / span 3}
nav.mpanel .mnav>li>a{font-size:clamp(36px,9.5vh,110px);line-height:1.02;letter-spacing:-.045em;font-weight:500;transition:transform .6s cubic-bezier(.76,0,.24,1),padding .4s cubic-bezier(.76,0,.24,1),opacity .3s}
nav.mpanel .mnav .mh{font-size:clamp(13px,1.8vh,16px);opacity:.55;margin-bottom:clamp(6px,1.2vh,14px)}
nav.mpanel .msub{margin-top:0;padding-left:0;gap:clamp(6px,1.2vh,14px)}
nav.mpanel .msub a{font-size:clamp(26px,6vh,64px);line-height:1.08;letter-spacing:-.035em;font-weight:500;opacity:1}
nav.mpanel .mnav a:hover{color:inherit;padding-left:.22em}
nav.mpanel .mnav:hover a:not(:hover){opacity:.5}
@media (max-aspect-ratio:1/1){
  nav.mpanel .mnav{grid-template-columns:1fr;row-gap:clamp(12px,2.2vh,22px)}
  nav.mpanel .mnav>li.grp{grid-column:1;grid-row:auto}
  nav.mpanel .mnav>li>a{font-size:clamp(34px,6.4vh,56px)}
  nav.mpanel .msub a{font-size:clamp(22px,3.8vh,34px)}
}

/* ===== Interfaccia che segue lo scroll (vedi uimove.js) ===== */

/* ===== Pulsanti: un solo bianco (#fff), un solo nero (#0c0d10), nessun accento. Tutti i bottoni (Next, Vai al sito, Vedi progetto, nome del progetto, Menu)
   si alternano a seconda del fondo che hanno sotto (attributo data-tone, vedi uimove.js): su fondo scuro pillola bianca, su fondo chiaro pillola nera.
   Hover: il cerchio si allarga fino a riempire la pillola e il testo cambia colore. ===== */
body .btn,body .name{background:#fff;color:#0c0d10}
body .btn{overflow:hidden;isolation:isolate}
body .btn:not(.cta){position:relative}   /* il cta resta fisso in basso a destra (absolute dalla pagina) */
body .btn b{background:#0c0d10;color:#fff}
body .btn::before{content:"";position:absolute;right:4px;top:50%;margin-top:-19px;width:38px;height:38px;border-radius:50%;background:#0c0d10;z-index:-1;pointer-events:none;transition:transform .6s cubic-bezier(.16,1,.3,1),background .35s}
body .btn[data-tone=l],body .name[data-tone=l]{background:#0c0d10;color:#fff}
body .btn[data-tone=l] b{background:#fff;color:#0c0d10}
body .btn[data-tone=l]::before{background:#fff}
/* menu aperto: sempre pillola bianca (il pannello e' scuro) */
body .open .btn.menu,body .open .btn.menu[data-tone]{background:#fff;color:#0c0d10}
body .open .btn.menu b,body .open .btn.menu[data-tone] b{background:#0c0d10;color:#fff}
body .open .btn.menu::before,body .open .btn.menu[data-tone]::before{background:#0c0d10}
.topl .name{animation:btn-in .8s cubic-bezier(.16,1,.3,1) .12s backwards}
@media (prefers-reduced-motion:reduce){.topl .name{animation:none}}

/* ===== Usabilità: aree di tocco da almeno 44px su telefono; voci del menu più alte; voce corrente più visibile ===== */
body .btn::after{content:"";position:absolute;inset:-5px -3px;border-radius:999px}
body .mnav a{padding:5px 0}
body .msub a{padding:7px 0}
body .mfoot a{padding:12px 0}
body .mnav a.cur::after{content:none}
@media (max-aspect-ratio:1/1){
  body .btn{height:44px} body .btn b{width:38px;height:38px} body .btn::before{width:38px;height:38px;margin-top:-19px}
}

/* Prev: specchio di Next (freccia a sinistra, cerchio a sinistra) */
body .btn.prev{padding:0;width:46px;gap:0;justify-content:center}
@media (max-aspect-ratio:1/1){body .btn.prev{width:44px}}
body .btn.prev::before{right:auto;left:4px}
body .btn.prev:hover b svg{transform:translateX(-2px)}

/* voce corrente del menu: sottolineata (niente puntino). Nell'archivio la sottolineatura passa alla voce "Archivio". */
.mnav a.cur{text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.14em}
.mpanel.in-arch .mnav a.cur{text-decoration:none}
.mpanel.in-arch .mnav a[href$="#archivio"]{text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.14em}

/* hover (riempimento nero del bottone) solo con mouse: su telefono il tocco lascia :hover 'appiccicato' e il cerchio copriva il testo */
@media (hover:hover) and (pointer:fine){
body .btn:hover{color:#fff}
body .btn:hover::before{transform:scale(9)}
body .btn[data-tone=l]:hover{color:#0c0d10}
body .open .btn.menu:hover,body .open .btn.menu[data-tone]:hover{color:#fff}
/* il bottone Menu non si riempie al passaggio del mouse: aprendo, la pillola resta della stessa misura e cambiano solo scritta e icona */
body .btn.menu:hover::before,body .open .btn.menu:hover::before{transform:none}
body .btn.menu:hover{color:#0c0d10}
body .btn.menu[data-tone=l]:hover{color:#fff}
body .open .btn.menu:hover,body .open .btn.menu[data-tone]:hover{color:#0c0d10}
}