/* =========================================================
   HOME (index.php): lo smartphone 3D nell'apertura e il portatile nella slide dei servizi;
   Lab e News scorrono a binario. Regole proprie della home, caricate solo li'; il resto arriva
   da sviluppo.css.
   Principi: gerarchia solo con dimensione, peso e spazio; niente numeri d'ordine, niente
   filetti, niente etichette sopra ogni titolo. Un elemento forte per slide.
   ========================================================= */

/* ---------- slide agganciate (desktop), schermate (mobile) ----------
   Stessa meccanica di .sec-pin e .brand-pin: il contenitore e' alto tre schermi, la slide resta
   ferma per uno, poi la successiva le scorre sopra (margin-bottom negativo). La barra sul bordo
   sinistro la riempie home.js. */
.pp-pin{position:relative;height:300svh;margin-bottom:-100svh}
.pp{position:sticky;top:0;z-index:5;min-height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;
  justify-content:center;padding:clamp(88px,12vh,120px) var(--pad) clamp(64px,9vh,96px);overflow:hidden}
/* Fondi alternati. In molte fasce accento e tinta fredda hanno una tonalita' vicina al fondo, quindi
   la sola tinta non stacca (Lab e News risultavano quasi uguali): la fredda si sposta anche di
   luminosita', un passo verso l'inchiostro. Il testo secondario si avvicina di pari passo
   all'inchiostro, cosi' il contrasto resta sopra 4,5:1 in tutte e dieci le fasce (misurato). */
.pp-calda{background:color-mix(in srgb,var(--accent) 12%,var(--bg));--muted:color-mix(in srgb,var(--muted) 88%,var(--cream))}
/* la fotografia e' in tinta fredda come le News: il selettore con l'ID serve a vincere su
   #fotografia di sviluppo.css, che le da' il fondo base */
.pp-fredda,.pp-home-3d #fotografia{background:color-mix(in srgb,var(--tone-cool) 18%,color-mix(in srgb,var(--cream) 11%,var(--bg)));
  --muted:color-mix(in srgb,var(--muted) 72%,var(--cream))}
.pp-in{width:100%;max-width:var(--maxw);margin:0 auto}
.pp-titolo{margin:0;font-family:var(--titoli);font-weight:700;font-size:var(--t-sezione);line-height:1;
  letter-spacing:-.04em;color:var(--cream);text-wrap:balance}
.pp-titolo em,.pp-grande em{font-style:italic;color:var(--accent)}
.pp-grande{margin:0;font-family:var(--titoli);font-weight:700;font-size:var(--t-titolo);line-height:.98;
  letter-spacing:-.045em;color:var(--cream);text-wrap:balance}

/* ---------- scena 3D ----------
   #scena3d tiene il canvas: fisso sopra le slide, trasparente ai clic, in vista solo mentre
   l'apertura e' in scena (la classe la mette home.js). Il canvas dipinge anche il fondo
   della schermata, quindi sta sotto testata, menu e colonna dei numeri; e sotto le slide (z-index
   5), che a fine animazione gli scorrono sopra. */
#scena3d{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;visibility:hidden}
#scena3d canvas{display:block;width:100%;height:100%}
html.ap-in-scena #scena3d{opacity:1;visibility:visible}
@media(prefers-reduced-motion:no-preference){#scena3d{transition:opacity .6s ease}}

/* ---------- apertura: la scena 3D ----------
   .ap-pin e' alto quanto chiede l'animazione: lo scorrimento dentro di lui e' la sua durata, e
   quando finisce la slide successiva arriva da se'. --ap-scroll e' l'unico numero da toccare per
   allungarla o accorciarla.
   .ap resta agganciata in cima e tiene testi, barra e bande del sipario; il telefono e il fondo
   li disegna il canvas di #scena3d, che sta dietro a tutto questo. */
/* Il fondo scuro sta sul contenitore, che resta sotto il canvas: si vede prima del primo
   fotogramma, sotto il telo del sipario e quando la scena non parte. .ap invece e' trasparente e
   sta SOPRA il canvas, se no il canvas coprirebbe i testi, ma SOTTO le slide (z-index 5).
   Lo schermo in piu' e il margine negativo sono la stessa meccanica di .sec-pin e .brand-pin:
   finita l'animazione l'apertura resta ferma e la slide successiva le scorre sopra, invece di
   trascinarsi via i testi lasciando indietro il telefono, che il canvas tiene fisso. */
.ap-pin{--ap-scroll:1600svh;position:relative;height:calc(var(--ap-scroll) + 100svh);
  margin-bottom:-100svh;background:#15130f}
.ap{position:sticky;top:0;height:100svh;overflow:hidden;z-index:4}
/* La scena e' un'immagine, come il video di copertina di oggi: i testi sopra hanno colori chiari
   fissi, non i token del tema. Il marchio e i pulsanti della testata invece non li tocca questa
   pagina: l'apertura si dichiara fondo scuro (data-fondo) e ci pensa sviluppo.css. */

/* i quattro ruoli, uno per volta: opacita' e scostamento li scrive home.js con i tempi
   della scena, quindi la rotazione a tempo di sviluppo.css (@keyframes ruota-hero) qui si spegne */
.ap-testi{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);z-index:2;
  width:min(42vw,620px);pointer-events:none}
.ap-titoli>span,.ap-righe>p{animation:none;opacity:0;transform:translateY(var(--y,0))}
/* senza JavaScript resta in vista l'ultima voce, quella che chiude l'animazione */
.ap-titoli>span:nth-child(4),.ap-righe>p:nth-child(4){opacity:1}
/* fuori scala come la copertina di oggi: "UI/UX Designer" sta su una riga accanto al telefono */
.ap-titoli{font-size:min(5.2vw,11vh);color:color-mix(in srgb,#ede4d8 92%,transparent)}
.ap-righe{margin-top:clamp(20px,2.4vw,32px);color:color-mix(in srgb,#ede4d8 62%,transparent)}
.ap-righe p{max-width:30ch}
/* la parola in risalto segue l'accento del tema, schiarito quel tanto che basta a leggersi sul
   fondo scuro della scena: stesso modo della copertina di oggi (.hero-cover-role em). Vale per
   tutte e due le scene, apertura e portatile. */
.ap-righe .kw,.pc-riga .kw{color:color-mix(in srgb,var(--accent) 62%,#f0ece2)}

/* ripiego fermo: il fronte del telefono, al posto dove la scena lo porta a fine animazione */
.ap-ripiego{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:min(74svh,calc(100svw * 2.09));width:auto;display:block}
html.scena-pronta .ap-ripiego{display:none}
/* Senza WebGL, o con "meno movimento", la scena non parte: l'apertura torna una schermata sola
   con il telefono fermo e l'ultima voce, quella che chiude l'animazione. */
/* senza animazione l'apertura e' una schermata come le altre: stessa meccanica di .sec-pin,
   uno schermo ferma e uno mentre la slide successiva le scorre sopra */
html.senza-scena .ap-pin{height:300svh}
html.senza-scena .ap-titoli>span:nth-child(4),html.senza-scena .ap-righe>p:nth-child(4){opacity:1}
/* Con "meno movimento" sviluppo.css lascia in vista la PRIMA voce del titolo che ruota: qui la
   voce che resta e' l'ultima, quella su cui l'animazione si ferma, se no se ne vedono due. */
@media(prefers-reduced-motion:reduce){
  .ap-titoli>span:nth-child(1),.ap-righe>p:nth-child(1){opacity:0}
}

/* ---------- servizi: il portatile ----------
   Stessa meccanica dell'apertura: .pc-pin e' alto quanto chiede l'animazione (--pc-scroll) piu'
   uno schermo, .pc resta agganciata in cima e a fine corsa la slide successiva le scorre sopra.
   Il canvas sta dentro la slide e dipinge il fondo; i testi, sopra, hanno colori chiari fissi
   come nell'apertura, perche' la scena e' scura a ogni ora. */
.pc-pin{--pc-scroll:2200svh;position:relative;height:calc(var(--pc-scroll) + 100svh);margin-bottom:-100svh}
.pc{position:sticky;top:0;z-index:5;height:100svh;overflow:hidden;background:#070708}
.pc-scena{position:absolute;inset:0;width:100%;height:100%;display:block}
.pc-servizi{position:absolute;inset:0;z-index:1;pointer-events:none}
/* a destra del portatile, che la scena sposta a sinistra sugli schermi orizzontali; la domanda
   d'apertura invece sta a sinistra, perche' li' il portatile chiuso e' ancora a destra */
.pc-voce{position:absolute;left:60vw;top:50%;width:min(36vw,620px);transform:translateY(-50%)}
.pc-domanda{left:var(--pad);width:min(40vw,680px)}
/* fuori scala per richiesta, come la parola della copertina: sta da sola accanto al portatile
   chiuso, su due righe, ed e' la prima cosa della slide */
.pc-domanda .pc-titolo{font-size:min(5.8vw,13vh)}
/* opacita' e --y le scrive home.js coi tempi della scena; senza JavaScript resta in
   vista la chiusura, quella su cui l'animazione si ferma */
.pc-titolo,.pc-riga,.pc-cta{opacity:0;transform:translateY(var(--y,0))}
.pc-chiusura>*{opacity:1}
.pc-titolo{margin:0;font-family:var(--titoli);font-weight:700;font-size:var(--t-titolo);line-height:.98;
  letter-spacing:-.045em;color:color-mix(in srgb,#ede4d8 92%,transparent);text-wrap:balance}
.pc-riga{margin:clamp(20px,2.4vw,32px) 0 0;font-family:var(--display);font-size:var(--t-testo);line-height:1.45;
  color:color-mix(in srgb,#ede4d8 62%,transparent)}
/* sempre due righe: la divisione e' nel testo, una riga per span */
.pc-riga>span{display:block;white-space:nowrap}
/* I pulsanti sono quelli della demo pc_3d.html, identici per richiesta (forma, carattere, misure,
   freccia): per questo carattere e misura sono i suoi e non un ruolo della scala. Cambia solo il
   colore, che al posto dell'arancione fisso prende l'accento del tema schiarito, lo stesso degli
   evidenziati. Pieno per la chiusura, contorno per ogni servizio. */
.pc-servizi{--pc-accento:color-mix(in srgb,var(--accent) 62%,#f0ece2)}
.pc-cta{display:inline-flex;align-items:center;gap:.6em;margin-top:2.2em;padding:.95em 1.6em;border-radius:999px;
  background:var(--pc-accento);color:#15130f;font:600 var(--t-piccolo)/1 system-ui,sans-serif;
  text-decoration:none;transition:background-color .2s ease}
.pc-cta:hover{background:color-mix(in srgb,var(--pc-accento) 70%,#f0ece2)}
.pc-cta--ghost{background:transparent;color:color-mix(in srgb,var(--pc-accento) 70%,#f0ece2);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pc-accento) 70%,transparent);
  transition:background-color .2s ease,color .2s ease}
.pc-cta--ghost:hover{background:var(--pc-accento);color:#15130f}
.pc-voce.is-active .pc-cta{pointer-events:auto}
/* senza scena (niente WebGL, "meno movimento", modulo non arrivato) resta una schermata sola con
   la chiusura, stessa meccanica di .sec-pin */
html.pc-ferma .pc-pin{height:300svh}
/* sugli schermi verticali la scena porta il portatile in basso: il testo va sopra, centrato */
@media(max-aspect-ratio:1/1){
  .pc-voce{left:50%;top:calc(var(--testa-h) + 2svh);width:min(92vw,560px);text-align:center;transform:translateX(-50%)}
  /* le due meta' della riga non ci stanno su una riga ciascuna: scorrono come un paragrafo solo */
  .pc-riga>span{display:inline;white-space:normal}
  .pc-domanda .pc-titolo{font-size:min(13vw,8svh)}
  .pc-cta{margin-top:1.1em;padding:.8em 1.3em}
}

/* ---------- presentazione ----------
   Il testo e' quello della home (.profilo-sub, due versioni: estesa su desktop, breve su mobile).
   In tre paragrafi corti tiene la misura di lettura del sito (--measure) e la schermata resta in
   una finestra anche sui portatili bassi; il blocco unico di prima, con quella misura, diventava
   una colonna troppo alta. Il margine sopra lo fa gia' il gap di .pp-in. */
.pp-presenta .pp-in{display:flex;flex-direction:column;gap:clamp(28px,3.4vw,44px)}
.pp-presenta .pp-grande{max-width:22ch}
.pp-presenta .profilo-sub{margin-top:0;max-width:var(--measure)}
/* i paragrafi della presentazione sono un blocco solo: fra loro il passo e' il loro, piu' stretto
   del gap di .pp-in, che serve a staccare titolo, testo e pulsante */
.pp-presenta-testi{display:flex;flex-direction:column;gap:clamp(12px,1.4vh,18px)}

/* ---------- Lab & Portfolio, a passi ----------
   Cinque lavori ad anello: al centro l'attivo, ai lati il precedente e il successivo, piu' piccoli
   e spenti e sfocati. home.js scrive su ogni voce la sua distanza dal centro (--x, --s, --o, --b, --z e
   il parallax --px, --mx) e su ogni didascalia la sua visibilita' (--t, --ty). Desktop: si passa
   da un lavoro all'altro a scatti, il movimento lo fanno le transizioni. Mobile: il binario si
   sfoglia col dito e le variabili seguono il dito, senza transizioni. */
.pf-pin{height:600svh}
/* le schermate prendono tutta l'altezza che resta: sotto meno margine delle altre slide, fra i
   nomi e le schermate piu' aria che fra schermate, didascalia e pulsante */
.pf{--pf-w:min(64vw,72vh,1080px);gap:clamp(12px,2vh,22px);padding-left:0;padding-right:0;padding-bottom:clamp(24px,4vh,44px)}
.pf-palco{margin-top:clamp(12px,3.4vh,40px)}
.pf>.pp-in{max-width:calc(var(--maxw) + 2 * var(--pad));padding-inline:var(--pad);box-sizing:border-box}
/* il titolo a sinistra, i nomi dei lavori a destra sulla stessa riga */
.pf-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.pf-nav{display:flex;flex-wrap:wrap;gap:4px}
.pf-tab{min-height:44px;padding:0 14px;border:0;background:none;cursor:pointer;font-family:var(--mono);
  font-size:var(--t-etichetta);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-tab:hover,.pf-tab[aria-current="true"]{color:var(--cream)}
.pf-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.pf-palco{position:relative;height:calc(var(--pf-w) * .594 + var(--pf-w) * .08)}
.pf-voci{list-style:none;margin:0;padding:0;position:relative;height:100%}
.pf-voce{position:absolute;left:50%;top:0;width:var(--pf-w);z-index:var(--z,1);opacity:var(--o,1);
  filter:blur(var(--b,0px));transform:translateX(calc(-50% + var(--x,0px))) scale(var(--s,1))}
.pf-voce a{position:relative;display:block;color:var(--cream);text-decoration:none}
.pf-voce a:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:18px}
/* la coppia dell'indice del Lab: desktop con la mobile sovrapposta in basso a destra.
   16:9,5 e non 16:10: le schermate sono larghe 1280 e la copertina dei donuts finisce a 790px,
   quindi a 16:10 in fondo alla cornice spuntava la striscia chiara della sezione successiva */
.pf-desktop{display:block;aspect-ratio:16/9.5;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.pf-mobile{position:absolute;right:-6%;bottom:-8%;width:22%;aspect-ratio:9/19.5;border-radius:16px;overflow:hidden;
  border:3px solid var(--card);background:var(--card);transform:translateX(var(--mx,0px))}
.pf-voce img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* parallax: la schermata resta un po' indietro rispetto alla cornice (per questo e' un po' piu'
   grande), la mobile va un po' avanti */
.pf-desktop img{transform:translateX(var(--px,0px)) scale(1.05);transform-origin:50% 0}
/* sotto il binario la didascalia del lavoro attivo: le cinque stanno una sull'altra nella
   stessa cella e si vede quella a fuoco */
.pf-didascalie{display:grid;justify-items:center;padding-inline:24px;text-align:center}
.pf-didascalia{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:60ch;
  opacity:var(--t,0);transform:translateY(var(--ty,0px))}
.pf-nome{font-family:var(--titoli);font-weight:700;font-size:var(--t-sottotitolo);line-height:1.1;letter-spacing:-.025em;color:var(--cream)}
.pf-riga{font-family:var(--display);font-size:var(--t-testo);line-height:1.45;color:var(--muted)}
.pf-tipo{font-family:var(--mono);font-size:var(--t-etichetta);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pf-tipo.pf-lab{color:var(--accent)}
.pf-fondo{display:flex;justify-content:center}
@media(min-width:921px) and (prefers-reduced-motion:no-preference){
  .pf-voce{transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .6s ease,filter .6s ease}
  .pf-desktop img,.pf-mobile{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .pf-didascalia{transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .pf-tab{transition:color .3s ease}
  /* il lavoro che passa da un capo all'altro dell'anello salta, non attraversa la scena */
  .pf-voce.pf-salto,.pf-salto .pf-desktop img,.pf-salto .pf-mobile{transition:none}
}

/* ---------- News, sommario ----------
   A sinistra l'articolo in evidenza, senza riquadro e allineato al titolo, a destra l'elenco: la voce su cui si passa
   (classe .on, la mette home.js) si accende e il pannello mostra il suo articolo. I
   pannelli stanno uno sull'altro nella stessa cella; .su sono quelli prima dell'attivo, che
   escono verso l'alto. Mobile: il pannello dell'ultimo articolo, sotto gli altri due. */
/* come in Lab & Portfolio, sotto meno margine delle altre slide: il sommario prende l'altezza */
.ns{padding-bottom:clamp(24px,4vh,44px)}
.ns-in{display:flex;flex-direction:column;gap:clamp(20px,3.6vh,40px)}
.ns-corpo{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,5vw,72px)}
.ns-vetrina{display:grid;min-height:clamp(300px,46vh,480px)}
.ns-pannello{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,2.6vh,28px);
  color:var(--cream);text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(16px)}
.ns-pannello.su{transform:translateY(-16px)}
.ns-pannello.on{opacity:1;visibility:visible;transform:none}
.ns-pannello:focus-visible,.ns-voce:focus-visible{outline:2px solid var(--accent);outline-offset:8px;border-radius:12px}
.ns-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:var(--t-etichetta);
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ns-arg{color:var(--accent)}
.ns-testo{display:flex;flex-direction:column;gap:18px}
.ns-titolo{font-family:var(--titoli);font-weight:700;font-size:var(--t-sezione);line-height:1.05;letter-spacing:-.035em;
  max-width:17ch;text-wrap:balance}
.ns-sotto{font-family:var(--display);font-size:var(--t-testo);line-height:1.5;color:var(--muted);max-width:46ch}
.ns-leggi{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:var(--t-piccolo);color:var(--accent)}
.ns-leggi .arrow{font-family:var(--mono);transition:transform .25s}
.ns-pannello:hover .ns-leggi .arrow{transform:translateX(4px)}
.ns-elenco{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.ns-voce{display:flex;align-items:center;gap:24px;padding:clamp(8px,1.4vh,16px) 0;color:var(--cream);text-decoration:none;opacity:.55}
.ns-voce.on{opacity:1}
.ns-voce-testo{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ns-voce .ns-arg{color:var(--muted)}
.ns-voce.on .ns-arg{color:var(--accent)}
.ns-voce-titolo{font-family:var(--titoli);font-weight:700;font-size:var(--t-sottotitolo);line-height:1.2;letter-spacing:-.02em}
.ns-freccia{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  font-family:var(--mono);color:var(--muted)}
.ns-voce.on .ns-freccia{border-color:var(--accent);color:var(--accent);transform:translateX(4px)}
.ns-fondo{display:flex;justify-content:center}
@media(min-width:921px) and (prefers-reduced-motion:no-preference){
  .ns-pannello{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.7,.2,1),visibility 0s .7s}
  .ns-pannello.on{transition-delay:0s}
  .ns-voce,.ns-voce .ns-arg{transition:opacity .35s ease,color .35s ease}
  .ns-freccia{transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s ease,color .35s ease}
}

/* ---------- brand, senza fotografia ----------
   Senza la foto il velo che la schiariva (.brand-band::after in sviluppo.css) non serve piu', e
   il nastro deve avere un fondo pieno: scorre sopra la slide delle News, agganciata. */
/* la home tiene le sue larghezze, piu' ampie del resto del sito (vedi --contenuto in sviluppo.css) */
.pp-home-3d{--maxw:1280px;--measure:min(100%,980px)}
.pp-home-3d .brand-band{background-color:var(--bg);background-image:var(--sfumo)}
.pp-home-3d .brand-band::after{content:none}
/* mobile bassi (375x667): con i due paragrafi della home la banda sforava di una sessantina di
   pixel; i due margini verticali sommati (banda e contenuto) diventano uno solo, sotto la testata */
@media(max-width:920px) and (max-height:700px){
  .pp-home-3d .brand-band{padding-block:0}
  .pp-home-3d .brand-inner{padding-block:72px 24px}
}

/* ---------- fotografia: il provino della home ----------
   Movimento in sviluppo.js. Su desktop le foto non vanno a tutta altezza,
   come nella home: stanno a meta' circa, centrate sul testo, con gli angoli del sito. */
@media(min-width:921px){
  /* sviluppo.js accende una foto quando il suo bordo sinistro e' entrato del 62% della finestra:
     a tutta altezza le foto erano abbastanza larghe da arrivarci, cosi' piu' piccole l'ultima
     (verticale, circa 41svh) restava spenta a fine corsa. Lo spazio in coda la porta fin li'. */
  .pp-home-3d .reel-track{align-items:center;padding-right:max(0px,calc(62vw - 40svh))}
  .pp-home-3d .reel-gallery .frame{height:min(62svh,660px);border-radius:14px;overflow:hidden}
}

/* ---------- misura dei testi descrittivi (desktop) ----------
   La scala resta quella del sito: i titoli tengono --t-sezione e --t-titolo, cambia solo il testo
   lungo. Nelle slide va letto tutto in una schermata, e a 1440 i ruoli della scala arrivavano a
   25px (--t-sottotitolo: copertina, presentazione, esperienze, fotografia): troppo per queste
   misure. Qui tutto il testo descrittivo usa --t-testo, come i paragrafi delle pagine interne.
   Solo da 921px in su: su mobile valgono le misure di sotto. */
@media(min-width:921px){
  .pp-home-3d .ap-righe p,
  .pp-home-3d .pc-riga,
  .pp-home-3d .profilo-sub,
  .pp-home-3d .brand-sub,
  .pp-home-3d .ns-sotto,
  .pp-home-3d .pf-riga,
  .pp-home-3d .frame.reel-text .sub{font-size:var(--t-testo)}
}

/* ---------- mobile: una schermata per gesto ---------- */
@media(max-width:920px){
  .pp-pin{height:auto;margin-bottom:0}
  /* le due scene sono schermate da una finestra: vanno a passi, un gesto una scritta (home.js).
     In dvh come le altre schermate: in svh, a barre del browser ritirate, sotto la scena restava
     una fascia della slide successiva */
  .ap-pin,.pc-pin,.ap,.pc{height:100dvh;margin-bottom:0}
  .pp{position:relative;padding:clamp(80px,11vh,100px) 24px clamp(40px,6vh,64px)}
  /* Su mobile sviluppo.css toglie la posizione a #profilo (regola della home con .stage e le altre
     schermate agganciate) e vince per specificita'. Senza posizione lo z-index non conta e la
     prima slide passerebbe SOTTO il canvas dell'apertura, che e' fisso, invece di scorrergli
     sopra a fine animazione. */
  #profilo.pp{position:relative}

  /* apertura in colonna: il ruolo in alto, la riga in fondo, il telefono nello spazio fra i due.
     La scena centra il telefono nella finestra: home.js misura lo spazio libero e scrive in
     --ap-giu di quanto spostare il canvas (e il ripiego) perche' stia al centro di quello. Il
     fondo di #scena3d e' il colore del bordo della scena e copre la striscia che lo spostamento
     lascia scoperta. */
  .ap-testi{left:50%;top:calc(var(--testa-h) + 2svh);bottom:4dvh;width:min(92vw,560px);text-align:center;
    transform:translateX(-50%);display:flex;flex-direction:column;justify-content:space-between}
  .ap-titoli{font-size:min(10vw,64px);justify-items:center}
  .ap-righe{margin-top:0;font-size:var(--t-testo)}
  .ap-righe p{max-width:34ch;margin-inline:auto}
  #scena3d{background:#0e0d0a}
  #scena3d canvas{transform:translateY(var(--ap-giu,0px))}
  .ap-ripiego{top:50%;transform:translate(-50%,calc(-50% + var(--ap-giu,0px)));height:min(48dvh,calc(100svw * 2.09))}

  /* Lab & Portfolio: titolo, binario, didascalia, collegamento. Il binario si sfoglia col dito,
     il lavoro al centro va a fuoco (lo calcola home.js dallo scorrimento del binario);
     i nomi in alto non servono */
  .pf{--pf-w:min(80vw,360px);gap:clamp(18px,3svh,28px);padding-left:0;padding-right:0}
  .pf>.pp-in{padding-inline:24px}
  .pf-nav{display:none}
  /* touch-action:pan-x: il verticale resta al motore a schermate, che sul binario decide il verso
     a fine gesto (come sulla galleria della fotografia) */
  .pf-palco{height:auto;margin-top:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x}
  .pf-palco::-webkit-scrollbar{display:none}
  .pf-voci{display:flex;gap:12px;width:max-content;height:auto;padding:4px calc(50vw - var(--pf-w) / 2) calc(var(--pf-w) * .1)}
  .pf-voce{position:relative;left:auto;flex:none;scroll-snap-align:center;transform:scale(var(--s,1))}
  .pf-fondo{padding-inline:24px}
  .pf-fondo .btn{flex:1;justify-content:center}

  /* News: il pannello del primo articolo, sotto gli altri due in righe; il primo dell'elenco e gli
     altri pannelli non servono */
  .ns-in{gap:clamp(18px,3svh,28px)}
  .ns-corpo{grid-template-columns:1fr;gap:clamp(8px,1.6svh,16px)}
  .ns-vetrina{min-height:0}
  .ns-pannello:not(:first-child),.ns-elenco li:first-child{display:none}
  .ns-pannello:first-child{opacity:1;visibility:visible;transform:none;gap:14px}
  .ns-testo{gap:10px}
  .ns-sotto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ns-elenco{gap:0}
  .ns-voce{opacity:1;padding:10px 0;gap:16px}
  .ns-voce-titolo{font-size:var(--t-testo);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ns-freccia{width:auto;height:auto;border:0}
  .ns-voce.on .ns-freccia{border:0;color:var(--muted);transform:none}
  .ns-voce.on .ns-arg{color:var(--muted)}
  .ns-fondo .btn{flex:1;justify-content:center}
  /* mobile bassi (375x667): senza sottotitolo e con meno aria il sommario sta in una finestra */
  @media(max-height:700px){
    .ns-sotto{display:none}
    .ns-pannello:first-child{gap:10px}
    .ns-voce{padding:6px 0}
  }

}
/* telefoni bassi: meno aria, cosi' ogni schermata resta in una finestra */
@media(max-width:920px) and (max-height:700px){
  .pp{padding-top:76px;padding-bottom:28px}
}