/* VARIANTE — correzioni di interfaccia (solo in prova-variante, il sito originale non cambia) */

/* ---------- HOME ---------- */

/* sottolineatura delle parole dei mestieri: bianca invece che arancio */
.lead em{background-image:linear-gradient(#fff,#fff)!important}

/* 2. card progetti: numero + nome leggibili, servizi sotto, su un velo scuro; visibili anche da telefono */
.caption::before{content:"";position:absolute;left:-8px;right:-8px;bottom:-8px;height:clamp(110px,18vh,180px);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(12,13,16,.45),rgba(12,13,16,.15) 55%,rgba(12,13,16,0));border-radius:0 0 var(--tile-r) var(--tile-r)}
.caption__c{gap:3px;margin-bottom:11px}
.caption__c .vt{font-size:clamp(15px,1.2vw,18px);font-weight:600;letter-spacing:-.015em;line-height:1.2;text-transform:none}
.caption__c .vr{font-size:13px;font-weight:400;letter-spacing:-.005em;line-height:1.4;text-transform:none;opacity:.78}
@media (max-aspect-ratio:1/1){
  .caption__c{display:flex!important;padding-left:6px;padding-right:10px;margin-bottom:8px}
  .caption__c .vt{font-size:15px} .caption__c .vr{font-size:12px}
}

/* 4. titolo dell'archivio: segna il passaggio dai progetti alla griglia */
.v-archead{position:relative;z-index:1;margin:0;min-height:calc(100svh - 12vh);padding:0 calc(var(--pad,10px) + 14px);background:transparent;color:#0c0d10;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(12px,2vh,20px)}
.v-archead h2{margin:0;font-weight:300;letter-spacing:-.05em;line-height:.86;font-size:clamp(64px,10.6vw,190px)}
.v-archead p{margin:0;max-width:30ch;font-size:clamp(31px,3.5vw,64px);line-height:1.02;font-weight:300;letter-spacing:-.045em;color:rgba(12,13,16,.6)}

/* 5. chiusura: invito a scrivere prima del footer */
.v-cta{position:relative;z-index:1;margin:clamp(40px,8vh,100px) var(--fx,.9vw) 10px;padding:clamp(28px,5vw,70px) clamp(22px,3vw,48px);border-radius:clamp(18px,2vw,26px);background:#eeb75c;color:#0c0d10;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(22px,3vw,40px)}   /* bottone a sinistra: a destra in basso c'e' gia' "Top" */
.v-cta h2{margin:0;font-weight:300;letter-spacing:-.05em;line-height:.92;font-size:clamp(40px,6.4vw,112px);max-width:12ch}
.v-cta .btn{background:#0c0d10;color:#fff;height:54px;font-size:15px;padding-left:26px}
.v-cta .btn b{background:#fff;color:#0c0d10;width:46px;height:46px}
@media (max-aspect-ratio:1/1){.v-cta{margin:40px var(--fx,3vw) 10px}}

/* ---------- PAGINE PROGETTO ---------- */

/* 3a. contatore "1 / 3" fra le frecce */
.btn.v-count{display:none!important;padding:0 18px;gap:0;font-variant-numeric:tabular-nums;cursor:default}
body .btn.v-count::before{display:none}   /* niente cerchio nero: non e' un bottone */
@media (max-aspect-ratio:1/1){.btn.v-count{padding:0 14px}}

/* 3b. testo del progetto piu' grande e leggibile */
.brief .k{font-size:max(12px,1.7cqw)!important;color:rgba(246,247,241,.72)!important;letter-spacing:.01em}
.brief .v{font-size:max(14px,2.3cqw)!important;line-height:1.36}
.brief .v.c{line-height:1.45}

/* 3c. su telefono: indizio di scroll sul primo schermo, sparisce appena si scorre */
.v-scroll{display:none}
@media (max-aspect-ratio:1/1){
  .v-scroll{display:inline-flex;position:fixed;z-index:12;left:calc(var(--pad,6px) + 10px);bottom:calc(var(--pad,6px) + 18px + env(safe-area-inset-bottom,0px));align-items:center;gap:6px;
    font-size:13px;font-weight:600;color:#0c0d10;pointer-events:none;transition:opacity .35s}
  .v-scroll b{display:inline-block;font-size:1.2em;line-height:1;animation:vscroll 1.6s cubic-bezier(.45,0,.25,1) infinite}
  .v-scroll.off{opacity:0}
}
@keyframes vscroll{0%,100%{transform:translateY(-.15em)}50%{transform:translateY(.35em)}}
@media (prefers-reduced-motion:reduce){.v-scroll b{animation:none}}

/* 6. "Tutto il progetto": pannello che si apre scorrendo oltre l'ultimo riquadro */
.v-ov{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#0c0d10;color:#f6f7f1;padding:0 var(--fx,.9vw) clamp(30px,5vh,60px);font-family:var(--font,'Inter',system-ui,sans-serif);
  opacity:0;visibility:hidden;transform:translateY(40px);transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .7s}
body.v-ovopen .v-ov{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.v-ovbar{position:sticky;top:0;z-index:3;margin:0 calc(-1 * var(--fx,.9vw));padding:calc(var(--fy,1.2vh) + var(--pad,10px) + 8px) calc(var(--fx,.9vw) + var(--pad,10px) + 8px) 26px;background:linear-gradient(#0c0d10 64%,rgba(12,13,16,0))}
.v-ov .btn.v-ovback{background:#fff!important;color:#0c0d10!important;width:auto;font-size:13px;gap:12px;padding:0 22px 0 4px!important;cursor:pointer;border:0;font-family:inherit}
.v-ov-h{margin-top:clamp(10px,4vh,50px);display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:0 14px clamp(22px,4vh,40px)}
.v-ov-h h2{margin:0;font-weight:300;letter-spacing:-.05em;line-height:.9;font-size:clamp(44px,7vw,120px)}
.v-ov-h span{font-size:14px;font-weight:500;opacity:.6}
.v-grid{columns:3;column-gap:10px;padding:0 4px}
.v-it{break-inside:avoid;margin:0 0 10px;border-radius:clamp(10px,1.2vw,18px);overflow:hidden;background:#1d1d1b;position:relative}
.v-it video,.v-it img{display:block;width:100%;height:auto}
.v-text{aspect-ratio:4/3}
.v-it .tile{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;opacity:1!important;visibility:visible!important;border-radius:0!important}
.v-it .bw>span,.v-it .pc,.v-it .pc *,.v-it .pr,.v-it .pr *,.v-it .pcol,.v-it .sl,.v-it .ss{transform:none!important;animation:none!important;opacity:1!important}
body .v-ov .btn.v-ovback::before{right:auto;left:4px;background:#0c0d10!important}
.v-ov .btn.v-ovback b{background:#0c0d10!important;color:#fff!important}
.v-ov .btn.v-ovback span{display:inline}
.v-logo{aspect-ratio:4/3;background:#f6f7f1;display:grid;place-items:center}
.v-it.v-logo img{width:58%;height:auto}
.v-nextp{display:flex;flex-direction:column;gap:6px;margin:clamp(50px,9vh,110px) 14px 0;color:inherit;text-decoration:none}
.v-nextp span{font-size:14px;font-weight:500;opacity:.6}
.v-nextp strong{font-weight:300;letter-spacing:-.05em;line-height:.95;font-size:clamp(44px,7vw,120px)}
.v-nextp strong b{display:inline-block;font-weight:300;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.v-nextp:hover strong b{transform:translateX(.25em)}
@media (max-aspect-ratio:1/1){.v-grid{columns:2;column-gap:8px}.v-it{margin-bottom:8px}.v-ov{padding:0 var(--fx,3vw) 30px}.v-ovbar{margin:0 calc(-1 * var(--fx,3vw));padding:14px 14px 22px}.v-ov-h,.v-nextp{padding:0 6px;margin-left:0;margin-right:0}.v-ov-h{padding-bottom:24px}}

/* 7. zoom indietro alla fine del progetto */
body.v-zoomed #area{cursor:zoom-in}
body.v-zoomed .prog{opacity:0!important}
body.v-zoomed #area .tile{cursor:pointer;transition:filter .25s;box-shadow:0 0 0 1px rgba(246,247,241,.16)}
body.v-zoomed #area .tile:hover{filter:brightness(1.12)}

/* 8. panoramica (desktop): titolo in alto, prossimo progetto in basso; compaiono con lo zoom */
.v-zoomui{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:var(--zz,0);color:#f6f7f1;font-family:var(--font,'Inter',system-ui,sans-serif)}
body.v-zoomed .v-zoomui{pointer-events:none}
.v-zt{position:absolute;left:0;right:0;top:78px;margin:0;text-align:center;font-size:15px;font-weight:600;letter-spacing:-.01em}
.v-zt span{font-weight:400;opacity:.6}
.v-zn{position:absolute;left:calc(var(--pad,10px) + 22px);bottom:calc(var(--pad,10px) + 20px);display:flex;flex-direction:column;gap:2px;color:inherit;text-decoration:none;pointer-events:none}
body.v-zoomed .v-zn{pointer-events:auto}
.v-zn small{font-size:13px;font-weight:500;opacity:.6}
.v-zn strong{font-size:clamp(28px,3.2vw,52px);font-weight:300;letter-spacing:-.045em;line-height:1}
.v-zn strong b{display:inline-block;font-weight:300;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.v-zn:hover strong b{transform:translateX(.25em)}
@media (max-aspect-ratio:1/1){.v-zoomui{display:none}}
/* invito sull'ultimo riquadro */
.v-endhint{position:absolute;left:50%;bottom:calc(var(--pad,10px) + 22px);z-index:11;transform:translate(-50%,8px);padding:10px 18px;border-radius:999px;background:#fff;color:#0c0d10;font-size:13px;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.v-endhint b{display:inline-block;margin-left:4px;animation:vscroll 1.6s cubic-bezier(.45,0,.25,1) infinite}
body.v-atend .v-endhint{opacity:1;transform:translate(-50%,0);transition-delay:.9s}
@media (max-aspect-ratio:1/1){.v-endhint{display:none}}

/* telefono: ultima schermata "prossimo progetto" */
.tile.t-vnext{background:#0c0d10}
.v-next{position:absolute;inset:0;display:block;color:#f6f7f1;text-decoration:none}
.v-next video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62)}
.v-next-l{position:absolute;left:22px;right:22px;bottom:90px;display:flex;flex-direction:column;gap:6px}
.v-next-l small{font-size:14px;font-weight:500;opacity:.8}
.v-next-l strong{font-size:clamp(48px,14vw,90px);font-weight:300;letter-spacing:-.05em;line-height:.95}
.v-next-l strong b{font-weight:300}
/* panoramica a tutto schermo: titolo e link separati non servono piu' (il prossimo progetto e' l'ultimo riquadro della griglia) */
.v-zoomui{display:none!important}
body.v-zoomed .frame>.cta,body.v-zoomed .frame .btn.cta{opacity:0!important;pointer-events:none!important;transition:opacity .3s}
.tile.t-vnext .v-next-l{bottom:7%;left:7%;right:7%}
.tile.t-vnext .v-next-l strong{font-size:clamp(48px,10cqw,150px)}
.tile.t-vnext{container-type:size}
/* riquadro "prossimo progetto" nella panoramica (computer): tinta unita nera, solo testo */
@media (min-aspect-ratio:1/1){
  .tile.t-vnext{background:#1d1d1b}
  .tile.t-vnext video{display:none}
}

/* 9. Ginbu': specimen tipografico con testo vero, il peso "respira" (Medium -> Bold -> Super -> Bold) */
.vsp{font-family:'DrukWideV',sans-serif;color:var(--c);font-weight:700;line-height:1;letter-spacing:0;display:flex;flex-direction:column;gap:max(12px,4.2cqw)}
.vsp .vh{display:flex;flex-direction:column;font-size:max(14px,5.6cqw);line-height:.98}
.vsp .vr{font-size:max(10px,3.55cqw);line-height:1.08;white-space:nowrap}
.vsp .vh,.vsp .vr{transition:opacity .32s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.vsp .sw{opacity:0;transform:translateY(.12em)}
.t-spec .ss.vsp{display:flex}

/* 10. Ginbu': riquadri tipografia come i poster: righe "DRY GIN" in Druk Super che scorrono, una riga si' e una no in direzione opposta */
.t-spec .sp{gap:0}
.t-spec .vrows{position:absolute;left:0;right:0;top:calc(max(14px,3.6cqw) * 2 + max(11px,2.6cqw));bottom:72px;display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden;font-family:'DrukSuperV',sans-serif;font-weight:900;color:#f3ce31;opacity:0}
.t-spec-b .vrows{color:#eceb9a}
.t-spec.in-view .vrows{animation:pal-in .9s cubic-bezier(.16,1,.3,1) .35s forwards}
.vrw{display:flex;white-space:nowrap;font-size:calc((100cqh - max(14px,3.6cqw) * 2 - max(11px,2.6cqw) - 72px) / 5.6);line-height:1;letter-spacing:-.01em;animation:vrw-l 16s linear infinite}
.vrw.r{animation-name:vrw-r}
.vrw span{flex:none;padding-right:.3em}
@keyframes vrw-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes vrw-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.vrw{animation:none}}

body.v-zoomed .t-spec .vrows{bottom:0}   /* nella panoramica il bottone non c'e': le righe arrivano in fondo */

/* 11. Ginbu': riquadri tipografia con tipografia cinetica (come "Can't find your iPhone?") */
.t-spec .vkin{position:absolute;left:0;right:0;top:calc(max(14px,3.6cqw) * 2 + max(11px,2.6cqw));bottom:72px;overflow:hidden;font-family:'DrukBoldV',sans-serif;font-weight:700;color:#f3ce31;--bg2:#f3ce31;--fg2:#d9623b}
.t-spec-b .vkin{color:#eceb9a;--bg2:#eceb9a;--fg2:#01484a}
body.v-zoomed .t-spec .vkin{bottom:0}
.vkin .vw{position:absolute;left:50%;top:50%;white-space:nowrap;line-height:1;transform:translate(-50%,-50%);transform-origin:50% 50%;will-change:transform,opacity}
.vkin .vc{display:inline-block;width:.06em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:currentColor;animation:vblink .8s steps(1) infinite}
@keyframes vblink{50%{opacity:0}}
.vend{position:absolute;inset:0;z-index:6;border-radius:inherit;display:grid;place-items:center;background:var(--bg2);color:var(--fg2);font-family:var(--font,'Inter',sans-serif);font-weight:700;letter-spacing:-.02em;opacity:0}
.vend span{font-size:max(16px,6cqw)}
.t-spec .vend{--bg2:#f3ce31;--fg2:#d9623b;background:var(--bg2);color:var(--fg2)}.t-spec-b .vend{--bg2:#eceb9a;--fg2:#01484a}

/* 12. tipografia cinetica come la reference: bastone pesante e stretto, cursore sottile, stacco nero */
.vkin .vw2{position:absolute;left:0;top:0;transform-origin:0 0;white-space:nowrap;line-height:1;font-family:'DrukBoldV',sans-serif;font-weight:700;letter-spacing:0;will-change:transform}   /* Druk Wide Bold */
.vkin .vcur{display:inline-block;width:.035em;height:.95em;margin-left:.05em;vertical-align:-.12em;background:currentColor;opacity:.55;animation:vblink .9s steps(1) infinite}
.vend2{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#0c0d10;color:#fff;font-family:var(--font,'Inter',sans-serif);font-weight:700;letter-spacing:-.02em}
.vend2 span{font-size:max(13px,4.2cqw)}

/* 13. riquadro tipografia arancione = animazione After Effects (stesso arancio del fondo, quindi si fonde col riquadro) */
.tile.t-spec-video{background:#f9511a}   /* = arancio del video esportato (diverso da #d9623b del progetto AE: gestione colore dell esportazione) */
.t-spec-video .vtipo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* VARIANTE: brief di Ginbu fisso alla larghezza finale, ancorato a sinistra (il riquadro che entra lo scopre senza far riflusso al testo) */
.tile.brief-tile .brief{left:0!important;transform:none!important;width:min(var(--fw,100cqw),104cqh)!important}

.tile.t-spec-video-b{background:#01484a}   /* = fondo del video blu */

/* telefono: il bottone 'Vedi progetto' non si restringe mai (prima il testo dei ruoli lo schiacciava e il cerchio copriva la scritta); il testo a sinistra si accorcia con i puntini */
.caption .btn{flex:0 0 auto;white-space:nowrap}
.caption__c{overflow:hidden;min-width:0}
.caption__c .vt,.caption__c .vr{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* telefono: la schermata nera di apertura e' meno alta (sotto si intravede il primo progetto) */
/* (tolta la regola che accorciava l'apertura su telefono: senza box il testo sta in fondo allo schermo) */


/* Archivio: come l'intro della home. Schermata bianca con titolo e frase, invito "Sfoglia" in basso; poi sale il box grigio chiarissimo con la griglia, che scorrendo (--wp 0→1) va a tutto schermo e perde il grigio */
body .a-wrap{--wp:0;position:relative;z-index:1}
body .a-wrap #archivio.arch{margin:0;border-radius:0;background:#fff;padding-top:clamp(14px,2vh,22px)}
.v-archead .sep{position:absolute;left:calc(var(--pad,10px) + 14px);bottom:calc(var(--pad,10px) + 22px);margin:0;max-width:none;font-size:15px;line-height:1.3;font-weight:500;letter-spacing:-.005em;letter-spacing:-.005em;color:rgba(12,13,16,.6);white-space:nowrap}
.v-archead .sep .arr{display:inline-block;margin-left:.25em;animation:scrolla 1.6s cubic-bezier(.45,0,.25,1) infinite}

/* Archivio: "Qui puoi trovare" fisso + parole che ruotano, come "mi occupo di" nell'intro */
.v-archead p.va{max-width:none;width:100%;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em}
.v-archead .va-l1{flex:0 0 100%}
.v-archead .va-fix{flex:none}
.v-archead .va-car{flex:1 1 0;min-width:0;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 54%);mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 54%)}
.v-archead .va-trk{display:inline-flex;white-space:nowrap;will-change:transform;transition:transform .8s cubic-bezier(.16,1,.3,1);font-weight:inherit}
.v-archead .va-trk.nt{transition:none}
.v-archead .va-trk .it{flex:none;margin-right:.3em;color:rgba(12,13,16,.07);transition:color .5s ease}
.v-archead .va-trk .it.on{color:#0c0d10}
@media (max-aspect-ratio:1/1){.v-archead .va-fix{flex:none}.v-archead .va-car{flex:1 1 0;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%)}}
@media (prefers-reduced-motion:reduce){.v-archead .va-trk{transition:none}}

/* Archivio: video a tutto schermo in loop, come la hero; testi bianchi sopra, con un velo leggero per leggerli */
.v-archead{overflow:hidden;color:#fff}
.v-archead .v-av{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.v-archead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,rgba(12,13,16,.45) 0%,rgba(12,13,16,.18) 45%,rgba(12,13,16,.3) 100%)}
.v-archead p{color:rgba(255,255,255,.7)}
.v-archead .va-trk .it{color:rgba(255,255,255,.1)}
.v-archead .va-trk .it.on{color:#fff}
.v-archead .sep{color:rgba(255,255,255,.75)}

/* Archivio: impaginato come la hero. "Archivio" grande al centro come "Ciao"; la frase in basso a sinistra come "Visual designer"; il video riempie la schermata e la griglia compare scorrendo */
.v-archead{display:block;min-height:calc(100svh - 24px);margin:0 calc(var(--fx,.9vw) + var(--pad,10px));border-radius:var(--tile-r,26px);padding:0;text-align:left;isolation:isolate}   /* stacco su bianco: una scheda come quelle dei progetti, che sale dal bianco */
.v-archead h2{position:absolute;left:0;right:0;top:47vh;transform:translateY(-50%);margin:0;text-align:center;white-space:nowrap;font-weight:300;letter-spacing:-.07em;line-height:1;font-size:clamp(105px,19.6vw,350px);color:#fff}
@media (max-aspect-ratio:1/1){.v-archead h2{top:40vh;font-size:21vw}}
.v-archead p.va{position:absolute;left:calc(var(--pad,10px) + 14px);right:calc(var(--pad,10px) + 14px);bottom:calc(var(--pad,10px) + 14px);margin:0;width:auto;max-width:none;justify-content:flex-start;text-align:left}
.v-archead .va-car{flex:1 1 0;mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 54%);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 40%,transparent 54%)}
@media (max-aspect-ratio:1/1){.v-archead .va-car{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent 100%)}}
.v-archead .sep{left:auto;right:calc(var(--pad,10px) + 14px);bottom:calc(var(--pad,10px) + 22px);text-align:right}
@media (max-aspect-ratio:1/1){.v-archead .sep{display:none}}   /* telefono: il posto in basso e' tutto della frase */

@media (max-aspect-ratio:1/1){.v-archead{margin-left:calc(var(--fx,3vw) + var(--pad,10px));margin-right:calc(var(--fx,3vw) + var(--pad,10px))}}

.v-archead .va-br{display:none}
@media (max-aspect-ratio:1/1){.v-archead .va-br{display:inline}}   /* telefono: tre righe, "Qui puoi trovare" / "un po' di tutto" / "tipo" + parole */

/* Archivio: scorrendo (--vp 0→1) il video sfuma, la scheda diventa bianca e i testi passano da bianco a nero */
.v-archead{--vp:0;--vq:clamp(0,calc(var(--vp) / .55),1);--vt:clamp(0,calc((var(--vp) - .14) / .08),1);--vc:color-mix(in srgb,#fff calc((1 - var(--vt)) * 100%),#0c0d10);background:#fff;color:var(--vc)}
.v-archead .v-av,.v-archead::before{opacity:calc(1 - var(--vq))}
.v-archead h2{color:var(--vc)}
.v-archead p{color:color-mix(in srgb,var(--vc) 70%,transparent)}
.v-archead .va-trk .it{color:color-mix(in srgb,var(--vc) 10%,transparent)}
.v-archead .va-trk .it.on{color:var(--vc)}
.v-archead .sep{color:color-mix(in srgb,var(--vc) 75%,transparent)}

/* Archivio: nessuna scritta sotto le immagini, nemmeno quando se ne apre una (titolo, tipologia e intestazioni delle altre immagini) */
.a-pin .a-info,.a-pin .a-t{display:none!important}
.a-pin #apc1:not(.hid){margin-bottom:clamp(10px,1.1vw,16px)}
.a-it .cap{display:none!important}

/* Archivio: il tasto Indietro e' solo il cerchio nero con la freccia (la scritta resta per chi usa lo screen reader) */
body .btn.a-back{padding:0;width:46px;gap:0;justify-content:center;background:transparent!important;box-shadow:none;color:#fff}
body .btn.a-back .vp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body .btn.a-back b,body .btn.a-back[data-tone] b{background:#0c0d10;color:#fff}
body .btn.a-back::before,body .btn.a-back[data-tone]::before,body .btn.a-back:hover::before{background:#0c0d10;transform:none}
body .btn.a-back:hover{color:#fff}
@media (max-aspect-ratio:1/1){body .btn.a-back{width:44px}}
/* "Sfoglia l'archivio" sotto la frase, a sinistra (desktop) */
@media (min-aspect-ratio:1/1){
.v-archead .sep{left:calc(var(--pad,10px) + 14px);right:auto;bottom:calc(var(--pad,10px) + 14px);text-align:left}
.v-archead p.va{bottom:calc(var(--pad,10px) + 14px + 19.5px + 150px)}
}
.v-archead p.va{color:var(--vc)}   /* frase a colore pieno */
@media (min-aspect-ratio:1/1){.v-archead h2{top:41vh}}   /* "Archivio" un po' piu' su */
/* Archivio: il video riempie tutto lo schermo, da bordo a bordo, senza margini e senza angoli */
.v-archead{margin:0;border-radius:0;min-height:100svh}
.v-archead p.va{left:calc(var(--fx,.9vw) + var(--pad,10px) + 14px);right:calc(var(--fx,.9vw) + var(--pad,10px) + 14px)}
@media (min-aspect-ratio:1/1){.v-archead .sep{left:calc(var(--fx,.9vw) + var(--pad,10px) + 14px)}}
/* Archivio: il video resta fermo in posizione per 200px di scroll, poi sfuma e sale come prima */
.v-archold{position:relative;height:calc(100svh + 200px)}
.v-archold>.v-archead{position:sticky;top:0}