/* Inter, ospitato sul sito (SIL Open Font License) */
@font-face{ font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/inter-regular.woff") format("woff"); }
@font-face{ font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/inter-medium.woff") format("woff"); }
@font-face{ font-family:"Inter"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/inter-italic.woff") format("woff"); }
@font-face{ font-family:"Inter"; font-style:italic; font-weight:500; font-display:swap; src:url("../fonts/inter-mediumitalic.woff") format("woff"); }

/* =====================================================================
   ULTRASTUDIOS — fondo scuro, impianto a pannelli
   Copertina come studiovedet.com: il marchio è "sticky" in cima e in
   fusione "difference", così quando le foto gli scorrono sotto le
   attraversa in trasparenza; finita la copertina se ne va.
   ===================================================================== */

:root{
  --bg:#0A0A0A;
  --ink:#EDEDEB;           /* 16.89:1 sul nero */
  --ink-2:#9A9A94;         /*  7.00:1 */
  --acid:#C77DFF;          /*  7.36:1 */
  --hair:rgba(237,237,235,.18);
  --e:cubic-bezier(.22,1,.36,1);
  --gut:clamp(14px,2.2vw,28px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; background:var(--bg); }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:400; line-height:1.45; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--acid); color:#0A0A0A; }
:focus-visible{ outline:2px solid var(--acid); outline-offset:3px; }

.wrap{ padding-left:var(--gut); padding-right:var(--gut); }

/* =============================================== 1. copertina */
.cover{ position:relative; }

/* il marchio: resta in cima finché dura la copertina, e si fonde con quello che ha sotto */
.heading{
  position:sticky; top:0; z-index:10;
  mix-blend-mode:difference;
  padding-top:clamp(18px,3vw,34px);
  pointer-events:none;                  /* i clic passano alle foto... */
}
.heading a, .heading nav{ pointer-events:auto; }   /* ...tranne che sui link */

.mark{ display:block; min-height:44px; }
.mark img{ width:100%; height:auto; transition:opacity .3s linear; }

/* menu sotto il marchio, come Vedèt: quattro voci distribuite su tutta la larghezza,
   stessa misura e stessa spaziatura su computer e telefono */
.bar{ margin-top:clamp(2px,.6vw,10px); font-size:14px; letter-spacing:.01em; }
.bar nav{ display:flex; justify-content:space-between; gap:8px; }
.bar nav a{ position:relative; min-height:44px; display:inline-flex; align-items:center; }
.bar nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:10px;
  height:1px; background:currentColor; transition:right .4s var(--e);
}
.bar nav a:hover::after, .bar nav a[aria-current]::after{ right:0; }

/* ---- il reel: foto a tutta pagina che si muovono ---- */
.reel{
  position:relative; overflow:hidden;
  height:max(520px, 100svh);
  margin-top:clamp(18px,3vh,36px);
  background:#111;
}
.slide{
  position:absolute; inset:0; margin:0; overflow:hidden;
  opacity:0; z-index:1;
  background:var(--campo,#111);
}
.slide.is-on{ opacity:1; z-index:2; }
.js-motion .slide{ transition:opacity 1.2s var(--e); }
.js-motion .slide.is-leaving{ opacity:0; z-index:1; }

.slide .kb{ position:absolute; inset:0; will-change:transform; }
.slide--bleed img{ width:100%; height:100%; object-fit:cover; }
.slide--bleed picture{ display:block; width:100%; height:100%; }
/* ---- UltraTrace: video ---- */
.only-narrow{ display:none; }
.slide video{ display:block; width:100%; height:100%; object-fit:cover; background:#0A0A0A; }
.trio{ display:flex; gap:2px; background:#0A0A0A; }
.trio__cell{ flex:1 1 0; min-width:0; position:relative; overflow:hidden; }
/* i tre video entrano dal basso, sfalsati, come un sipario */
.js-motion .slide--video.is-on .trio__cell{
  animation:sipario 1.1s cubic-bezier(.76,0,.24,1) both; animation-delay:var(--d,0ms); }
@keyframes sipario{ from{ clip-path:inset(100% 0 0 0); } to{ clip-path:inset(0 0 0 0); } }
.js-motion .slide.only-narrow.slide--video.is-on .kb{ animation:sipario 1.1s cubic-bezier(.76,0,.24,1) both; }

/* grafiche a fondo piatto: si vedono intere, lo spazio che avanza prende il colore del fondo */
.slide--flat img{ object-fit:contain; }

.slide--posa .kb{ display:flex; align-items:center; justify-content:center;
                  padding:clamp(40px,9vh,110px) var(--gut) clamp(80px,13vh,140px); }
.slide--posa img{ max-height:100%; width:auto; max-width:min(90vw,620px);
                  box-shadow:0 30px 80px rgba(0,0,0,.6);
                  outline:1px solid rgba(237,237,235,.12); }

/* ogni foto ha il suo movimento: parte quando entra, continua mentre esce */
.js-motion .slide.is-on .kb,
.js-motion .slide.is-leaving .kb{ animation:var(--kb,kb-in) 7.2s cubic-bezier(.33,0,.2,1) both; }
.js-motion .reel.is-paused .kb{ animation-play-state:paused; }

@keyframes kb-in    { from{ transform:scale(1.02) }                      to{ transform:scale(1.15) translate(-2.5%,-1.2%) } }
@keyframes kb-out   { from{ transform:scale(1.17) translate(2%,1%) }     to{ transform:scale(1.02) } }
@keyframes kb-right { from{ transform:scale(1.12) translateX(-3.6%) }    to{ transform:scale(1.12) translateX(3.6%) } }
@keyframes kb-left  { from{ transform:scale(1.12) translateX(3.6%) }     to{ transform:scale(1.12) translateX(-3.6%) } }
@keyframes kb-up    { from{ transform:scale(1.12) translateY(3.2%) }     to{ transform:scale(1.12) translateY(-3.2%) } }
/* per le grafiche con testo vicino ai bordi: si muove appena, non taglia */
@keyframes kb-soft  { from{ transform:scale(1) }                         to{ transform:scale(1.045) translateY(-.8%) } }
@keyframes kb-posa  { from{ transform:translateY(5%) scale(.95) }        to{ transform:translateY(-2%) scale(1) } }

/* didascalia e comandi del reel */
.reel__ui{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:flex-end; justify-content:flex-end; gap:12px;
  padding:0 var(--gut) clamp(14px,2.4vw,28px);
  pointer-events:none;
}
.reel__cap{
  display:inline-flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:rgba(10,10,10,.72); padding:10px 14px;
  font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
}
.reel__cap b{ font-size:clamp(15px,1.5vw,19px); font-weight:500; letter-spacing:-.01em;
              text-transform:none; color:var(--ink); }
.reel__btn{ display:none; }
.js-motion .reel__btn{
  pointer-events:auto;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.72); color:var(--ink);
}
.reel__btn svg{ width:14px; height:14px; fill:currentColor; }
.reel__btn .play{ display:none; }
.reel.is-paused .reel__btn .play{ display:block; }
.reel.is-paused .reel__btn .pause{ display:none; }
.reel__btn:hover{ color:var(--acid); }

/* barra di avanzamento sottile */
.reel__prog{ position:absolute; left:0; right:0; top:0; height:2px; z-index:5;
             background:rgba(237,237,235,.12); }
.reel__prog i{ display:block; height:100%; width:100%; background:var(--acid);
               transform-origin:left; transform:scaleX(0); }
.reel__prog i.run{ animation:prog var(--dur,5600ms) linear forwards; }
.reel.is-paused .reel__prog i{ animation-play-state:paused; }
@keyframes prog{ to{ transform:scaleX(1); } }

/* ---- barra piccola: compare quando la copertina è finita ---- */
.mini{
  position:fixed; left:0; right:0; top:0; z-index:40;
  mix-blend-mode:difference;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:6px var(--gut);
  transform:translateY(-110%); transition:transform .5s var(--e);
}
.mini.is-on{ transform:none; }
.mini .mark{ min-height:44px; display:inline-flex; align-items:center; }
.mini .mark img{ width:clamp(120px,12vw,160px); }
.mini nav{ display:flex; gap:clamp(12px,2vw,26px); font-size:13px; }
.mini nav a{ min-height:44px; display:inline-flex; align-items:center; }

/* =============================================== 2. testi */
.claim{ padding-top:clamp(80px,15vh,170px); padding-bottom:clamp(30px,5vh,60px); }
.claim h1{
  font-size:clamp(30px,4.8vw,66px); font-weight:500;
  line-height:1.05; letter-spacing:-.034em; max-width:17ch;
}
.claim h1 em{ font-style:normal; color:var(--acid); }
.claim p{
  margin-top:clamp(20px,2.6vw,32px); max-width:46ch;
  font-size:clamp(14px,1.15vw,17px); line-height:1.6; color:var(--ink-2); letter-spacing:0;
}

.ticker{ overflow:hidden; border-top:1px solid var(--hair);
         border-bottom:1px solid var(--hair); padding:clamp(12px,1.6vw,20px) 0; }
.ticker + .ticker{ border-top:0; }
.ticker__track{ display:flex; width:max-content; white-space:nowrap;
                animation:slide 38s linear infinite; }
.ticker--back .ticker__track{ animation-direction:reverse; animation-duration:46s; }
.ticker span{ font-size:clamp(20px,3.4vw,44px); font-weight:500; letter-spacing:-.028em;
              padding-right:.5em; }
.ticker--acid span{ color:var(--acid); }
.ticker b{ color:var(--ink-2); font-weight:400; padding-right:.5em; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* =============================================== 3. i progetti */
.panel{
  display:block; position:relative;
  height:clamp(470px,90vh,960px); overflow:hidden;
  background:var(--campo,#151515);
}
.panel + .panel{ margin-top:2px; }
.panel--bleed .shot{ position:absolute; inset:0; }
.panel--bleed .shot img{ width:100%; height:120%; object-fit:cover;
                         position:absolute; top:-10%; left:0; }
.panel--posa .shot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:clamp(44px,8vh,104px) clamp(20px,5vw,60px) clamp(72px,11vh,130px);
}
.panel--posa .shot img{
  max-height:100%; width:auto; max-width:min(92vw,560px);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  outline:1px solid rgba(237,237,235,.12);
}
.panel .shot img{
  transform:translate3d(0,var(--py,0px),0) scale(var(--sc,1));
  transition:transform .9s var(--e); will-change:transform;
}
.panel:hover .shot img{ --sc:1.035; }

.panel .tag{
  position:absolute; left:0; bottom:0; max-width:100%; z-index:2;
  display:inline-flex; align-items:baseline; flex-wrap:wrap;
  column-gap:clamp(10px,1.4vw,18px); row-gap:2px;
  background:var(--campo,#151515); color:var(--ink);
  padding:clamp(11px,1.5vw,16px) var(--gut);
}
.panel .tag b{ font-size:clamp(16px,2.1vw,26px); font-weight:500; letter-spacing:-.02em; }
.panel .tag span{ font-size:12px; letter-spacing:.09em; text-transform:uppercase;
                  color:var(--ink-2); white-space:nowrap; }
.panel:hover .tag b{ color:var(--acid); transition:color .35s var(--e); }

/* =============================================== 4. coda */
.tail{ padding-top:clamp(80px,14vh,160px); padding-bottom:clamp(40px,7vh,80px); }
.tail h2{ font-size:clamp(26px,4vw,54px); font-weight:500;
          letter-spacing:-.03em; line-height:1.1; max-width:19ch; }
.tail h2 em{ font-style:normal; color:var(--acid); }
.tail .cols{
  margin-top:clamp(36px,5vw,66px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(22px,3vw,44px);
  border-top:1px solid var(--hair); padding-top:clamp(22px,3vw,34px);
}
.tail .cols h3{ font-size:12px; letter-spacing:.09em; text-transform:uppercase;
                color:var(--ink-2); font-weight:400; margin-bottom:10px; }
.tail .cols p{ font-size:15px; line-height:1.65; }
.tail .cols a{ font-size:15px; display:inline-flex; align-items:center; min-height:44px;
               border-bottom:1px solid var(--hair); }
.tail .cols a:hover{ border-color:var(--acid); color:var(--acid); }
.foot{ border-top:1px solid var(--hair); padding-top:18px; padding-bottom:34px;
       display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
       font-size:12px; color:var(--ink-2); }

/* =============================================== 5. comparse */
.js-motion .fade{ opacity:0; transform:translateY(28px); }
.js-motion .fade.in{ opacity:1; transform:none;
                     transition:opacity .9s var(--e), transform .9s var(--e); }

.js-motion .panel .shot{ transition:opacity 1s var(--e), transform 1.3s var(--e),
                                    clip-path 1.3s var(--e); }
.js-motion .panel[data-mov="zoom"]  .shot{ opacity:0; transform:scale(1.16); }
.js-motion .panel[data-mov="left"]  .shot{ opacity:0; transform:translateX(-14%); }
.js-motion .panel[data-mov="right"] .shot{ opacity:0; transform:translateX(14%); }
.js-motion .panel[data-mov="rise"]  .shot{ opacity:0; transform:translateY(9%); }
.js-motion .panel[data-mov="clip"]  .shot{ clip-path:inset(100% 0 0 0); }
.js-motion .panel[data-mov="split"] .shot{ clip-path:inset(0 50% 0 50%); }
.js-motion .panel.in .shot{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
.js-motion .panel .tag{ opacity:0; transform:translateY(14px); }
.js-motion .panel.in .tag{ opacity:1; transform:none;
   transition:opacity .7s var(--e) .3s, transform .7s var(--e) .3s; }

/* =============================================== 6. apertura in tre tempi */
.js-motion.is-veiled, .js-motion.is-veiled body{ overflow:hidden; }
.js-motion.is-veiled .heading .mark img{ opacity:0; }   /* se ne vede uno solo: quello che vola */

.veil{ position:fixed; inset:0; z-index:90; background:var(--bg);
       transition:opacity 1s var(--e); }
.veil--clear{ opacity:0; }
.veil--gone{ display:none; }
/* il marchio che vola è un elemento a parte, fuori dal velo:
   così la fusione "difference" agisce davvero sulle foto sotto */
.flymark{
  position:fixed; z-index:91; left:var(--gut); width:calc(100% - 2 * var(--gut));
  height:auto; mix-blend-mode:difference;
  transform-origin:center center;
  opacity:0; transform:scale(.13);
}
.flymark--a{ opacity:1; transition:opacity .55s var(--e); }
.flymark--b{ opacity:1; transform:scale(1);
             transition:transform 1.1s cubic-bezier(.76,0,.24,1); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .js-motion .fade, .js-motion .panel .shot, .js-motion .panel .tag{
    opacity:1 !important; transform:none !important; clip-path:none !important; }
  .veil, .flymark{ display:none !important; }
  .ticker__track{ animation:none; }
}

/* telefono e schermi verticali: il reel diventa 4:5, il formato dei post */
@media (max-aspect-ratio:1/1){
  .reel{ height:auto; aspect-ratio:4/5; max-height:82svh; }
  .slide--posa .kb{ padding:28px var(--gut) 76px; }
}
@media (max-width:640px){
  .bar{ font-size:12px; }
  .bar .sede{ width:100%; }
  .panel{ height:clamp(410px,74vh,640px); }
  .panel--posa .shot img{ max-width:76vw; }
  .mini nav a:not(.keep){ display:none; }
}

/* =============================================== 7. telefono, come Vedèt
   Il marchio e il menu restano fissi in cima per tutta la pagina, sempre in
   fusione "difference"; reel e progetti a schermo intero. */
@media (max-width:760px){
  .only-wide{ display:none; }
  .only-narrow{ display:block; }
  .heading{
    position:fixed; left:0; right:0; top:0;
    padding-top:12px;
  }
  .mini{ display:none; }

  .reel{ margin-top:0; height:100svh; max-height:none; aspect-ratio:auto; }
  .slide--flat{ background:var(--campo-s, var(--campo)); }
  /* su telefono le grafiche in formato storia riempiono tutto lo schermo, senza bande ai lati */
  .slide--flat img{ object-fit:cover; }
  .slide--posa .kb{ padding:110px var(--gut) 90px; }

  .panel{ height:100svh; }
  .panel--posa .shot{ padding:110px var(--gut) 60px; }

  .claim{ padding-top:120px; }
}

/* =============================================== 8. pagine interne
   Stesso marchio e stesso menu della home. Sul computer il marchio non resta
   in cima (la copertina è alta quanto lui): quando esce compare la barra piccola. */
.page .reel{ display:none; }
.phead{ padding-top:clamp(48px,9vh,110px); padding-bottom:clamp(28px,5vh,56px); }
.kick{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin-bottom:18px; }
.phead h1{ font-size:clamp(40px,7.4vw,112px); font-weight:500; letter-spacing:-.045em; line-height:.96; max-width:13ch; }
.phead h1 em{ font-style:normal; color:var(--acid); }
.phead .lead{ margin-top:clamp(20px,2.6vw,34px); font-size:clamp(17px,1.55vw,22px); line-height:1.45; max-width:42ch; }
.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px 32px;
        border-top:1px solid var(--hair); padding-top:20px; margin-top:clamp(28px,4vw,48px); }
.facts dt{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px; }
.facts dd{ font-size:15px; line-height:1.5; }
.facts a, .sec__body a{ border-bottom:1px solid var(--hair); }
.facts a:hover, .sec__body a:hover{ color:var(--acid); border-color:var(--acid); }

.hero-img{ margin:0 0 clamp(8px,1vw,14px); }
.hero-img img{ width:100%; height:auto; max-height:94vh; object-fit:cover; }

.sec{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr); gap:clamp(16px,4vw,64px);
      padding:clamp(44px,8vh,96px) 0; border-top:1px solid var(--hair); }
.sec__label{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); padding-top:.3em; }
.sec__body{ max-width:66ch; }
.sec__body > p, .sec__body li{ font-size:clamp(15px,1.15vw,17px); line-height:1.7; color:#D8D8D5; }
.sec__body > p{ margin-bottom:1em; }
.sec__body p.big{ font-size:clamp(22px,2.4vw,32px); line-height:1.25; letter-spacing:-.02em; color:var(--ink); }
.sec__body p.muted, .muted{ color:var(--ink-2); }
.sec__body p.small{ font-size:13px; line-height:1.6; color:var(--ink-2); }
.sec__body ul{ list-style:none; margin:0 0 1.2em; }
.sec__body li{ position:relative; padding-left:18px; margin-bottom:.5em; }
.sec__body li::before{ content:""; position:absolute; left:0; top:.72em; width:6px; height:6px; background:var(--acid); }
.sec__body h3{ font-size:clamp(18px,1.6vw,22px); font-weight:500; letter-spacing:-.015em; margin:1.6em 0 .5em; }
.sec__body h3:first-child{ margin-top:0; }
.quote{ font-size:clamp(20px,2.2vw,28px); color:var(--acid); line-height:1.3; margin:1.1em 0; letter-spacing:-.02em; }

.gal{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(6px,1vw,14px); padding-bottom:clamp(40px,7vh,90px); }
.gal--3{ grid-template-columns:1fr 1fr 1fr; padding-bottom:clamp(6px,1vw,14px); }
.gal figure{ margin:0; }
.gal .w{ grid-column:1/-1; }
.gal img{ width:100%; height:auto; display:block; background:#111; }
.gal .fit{ background:var(--campo,#151515); display:flex; align-items:center; justify-content:center; aspect-ratio:1; }
.gal .fit img{ width:78%; background:none; }
.gal figcaption{ font-size:12px; color:var(--ink-2); padding-top:8px; letter-spacing:.02em; }

.next{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px 16px;
       padding-top:clamp(40px,7vh,80px); padding-bottom:clamp(40px,7vh,80px); border-top:1px solid var(--hair); }
.next span{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); }
.next b{ font-size:clamp(30px,5.4vw,76px); font-weight:500; letter-spacing:-.04em; line-height:1; }
.next:hover b{ color:var(--acid); }

.btn{ display:inline-flex; align-items:center; min-height:48px; padding:0 22px; margin:6px 10px 6px 0;
      border:1px solid var(--ink); font-size:14px; letter-spacing:.01em; transition:background .3s, color .3s, border-color .3s; }
.btn:hover{ background:var(--acid); border-color:var(--acid); color:#0A0A0A; }
.sec__body a.btn{ border-bottom:1px solid var(--ink); }

.price{ width:100%; border-collapse:collapse; margin:0 0 30px; }
.price caption{ text-align:left; font-size:clamp(18px,1.6vw,22px); font-weight:500; letter-spacing:-.015em; padding-bottom:8px; }
.price td{ padding:13px 0; border-bottom:1px solid var(--hair); vertical-align:top; font-size:15px; line-height:1.5; }
.price td.p{ text-align:right; white-space:nowrap; font-weight:500; padding-left:16px; }
.price--2 tr.h td{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); padding:6px 0 10px 16px; white-space:normal; line-height:1.35; vertical-align:bottom; font-weight:400; }
.price--2 td.p{ width:7.5em; }
.price small{ display:block; color:var(--ink-2); font-size:13px; margin-top:2px; }

.person{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:clamp(18px,3vw,40px); }
.person img{ width:100%; height:auto; filter:grayscale(1); }
.person figcaption{ font-size:12px; color:var(--ink-2); padding-top:8px; }
.person h3{ margin-top:0 !important; }
.role{ color:var(--acid) !important; font-size:14px !important; margin-bottom:14px !important; }

.steps{ list-style:none; counter-reset:s; }
.steps li{ counter-increment:s; padding-left:44px !important; margin-bottom:1.1em !important; }
.steps li::before{ content:counter(s,decimal-leading-zero) !important; background:none !important;
                   width:auto !important; height:auto !important; top:.05em !important; color:var(--acid); font-size:13px; }

.stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.stats b{ display:block; font-size:clamp(36px,4.6vw,64px); font-weight:500; letter-spacing:-.04em; color:var(--acid); line-height:1; }
.stats span{ display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--ink-2); }

.index{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,44px) clamp(10px,1.4vw,20px);
        padding-bottom:clamp(40px,7vh,90px); }
.index a{ display:block; }
.index .th{ aspect-ratio:4/3; overflow:hidden; background:var(--campo,#151515); }
.index .th img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e); }
.index a:hover .th img{ transform:scale(1.03); }
.index h2{ font-size:clamp(20px,2vw,28px); font-weight:500; letter-spacing:-.025em; margin-top:14px; }
.index a:hover h2{ color:var(--acid); }
.index p{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); margin-top:6px; }

.vids{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.6vw,24px); padding-bottom:clamp(40px,7vh,90px); }
.vids video{ width:100%; aspect-ratio:9/16; background:#111; display:block; }
.vids h2{ font-size:clamp(20px,2vw,28px); font-weight:500; letter-spacing:-.025em; margin-top:14px; }
.vids .who{ font-size:14px; color:var(--ink-2); margin-top:4px; }
.vids .q{ font-size:15px; color:var(--acid); margin-top:10px; }

@media (max-width:760px){
  .page main{ padding-top:92px; }
  .vids{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .sec{ grid-template-columns:1fr; gap:12px; }
  .gal{ grid-template-columns:1fr; }
  .gal--3{ grid-template-columns:1fr 1fr 1fr; gap:4px; }
  .index{ grid-template-columns:1fr; }
  .person{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
}

/* pannello UltraTrace in home: tre fotogrammi affiancati, uno solo sul telefono */
.panel--trio .shot{ position:absolute; inset:0; }
.panel--trio .trio__cell img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){ .panel--trio .wide-only{ display:none; } }

/* =========================================================================
   v10 — ottobre 2026
   barra fissa con il marchio come prima voce, menu che si muove al passaggio,
   griglia dei lavori in home, elenco a righe, pagine a sequenza alternata
   ========================================================================= */
:root{ --gut:clamp(18px,3vw,48px); }

/* più aria intorno al marchio grande */
.heading{ padding-top:clamp(26px,4vw,60px); }

/* ---- barra fissa: sfondo pieno, marchio + voci su tutta la larghezza ---- */
.mini{
  mix-blend-mode:normal; background:var(--bg);
  border-bottom:1px solid var(--hair);
  padding:clamp(10px,1.2vw,16px) var(--gut);
  justify-content:space-between; gap:12px;
}
.mini nav{ display:contents; }
.mini .mark{ min-height:44px; display:inline-flex; align-items:center; flex:0 0 auto; }
.mini .mark img{ width:auto; height:clamp(11px,1.15vw,17px); }
.mini nav a{ font-size:clamp(11px,1.05vw,15px); letter-spacing:.01em; }
.mini nav a[aria-current]{ color:var(--acid); }

/* ---- lettere che girano al passaggio del mouse (solo menu) ---- */
.roll{ display:inline-flex; overflow:hidden; line-height:1.25; vertical-align:middle; }
.roll .ch{ display:inline-block; position:relative; white-space:pre;
           transition:transform .5s cubic-bezier(.76,0,.24,1);
           transition-delay:calc(var(--i) * 22ms); }
.roll .ch::after{ content:attr(data-c); position:absolute; left:0; top:100%; color:var(--acid); }
@media (hover:hover){
  .bar nav a:hover .ch, .mini nav a:hover .ch{ transform:translateY(-100%); }
}
.bar nav a::after{ display:none; }
.bar nav a[aria-current]{ color:var(--acid); }

/* ---- home: lavori in griglia, una orizzontale e una coppia, a turno ---- */
.works{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,80px) clamp(10px,1.4vw,22px);
  padding-top:clamp(60px,10vh,120px); padding-bottom:clamp(40px,6vh,80px);
}
.work{ display:block; }
.work--wide{ grid-column:1 / -1; }
.work .ph{ position:relative; overflow:hidden; background:var(--campo,#151515); aspect-ratio:4 / 5; }
.work--wide .ph{ aspect-ratio:3 / 2; max-height:88vh; width:100%; }
.work .ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e); }
.work:hover .ph img{ transform:scale(1.03); }
.work .cap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
            padding-top:12px; font-size:clamp(13px,1.1vw,16px); }
.work .cap b{ font-weight:500; letter-spacing:-.01em; }
.work .cap span{ color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.work:hover .cap b{ color:var(--acid); }

/* ---- pagina Lavori: elenco a righe, stesse colonne per tutti ---- */
.rows{ border-top:1px solid var(--hair); margin-bottom:clamp(40px,7vh,90px); }
.rows__head, .row{
  display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,1.2fr) minmax(90px,.6fr);
  gap:clamp(12px,2vw,32px); align-items:baseline;
}
.rows__head{ font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2);
             padding:14px 0; border-bottom:1px solid var(--hair); }
.row{ padding:clamp(16px,2vw,26px) 0; border-bottom:1px solid var(--hair);
      transition:color .3s var(--e), padding .5s var(--e); }
.row b{ font-size:clamp(20px,2.4vw,34px); font-weight:500; letter-spacing:-.025em; line-height:1.1; }
.row span{ font-size:clamp(13px,1.05vw,15px); color:var(--ink-2); line-height:1.45; }
.row .yr{ text-align:right; font-variant-numeric:tabular-nums; }
.rows__head .yr{ text-align:right; }
.row:hover b{ color:var(--acid); }
@media (hover:hover){ .row:hover{ padding-left:14px; } }
/* anteprima che segue il mouse */
.peek{ position:fixed; left:0; top:0; z-index:30; width:clamp(220px,22vw,340px); aspect-ratio:4/5;
       pointer-events:none; opacity:0; transform:translate(28px,-50%) scale(.92);
       transition:opacity .3s var(--e), transform .4s var(--e); background:#151515; }
.peek img{ width:100%; height:100%; object-fit:cover; }
.peek.on{ opacity:1; transform:translate(28px,-50%) scale(1); }

/* ---- pagine dei lavori: coppia, testo, orizzontale, testo... ---- */
.flow{ padding-bottom:clamp(30px,5vh,60px); }
.f-pair, .f-wide, .f-tri{ margin:0 0 clamp(10px,1.4vw,22px); }
.f-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.4vw,22px); }
.f-tri{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,22px); }
.f-pair figure, .f-tri figure, .f-wide{ margin-top:0; margin-left:0; margin-right:0; }
.f-pair .ph, .f-tri .ph{ aspect-ratio:var(--ar,4 / 5); overflow:hidden; background:var(--campo,#151515); }
.f-pair .ph img, .f-tri .ph img{ width:100%; height:100%; object-fit:var(--fit,cover); }
.f-wide img{ width:100%; height:auto; max-height:94vh; object-fit:cover; display:block; }
.f-wide .fit{ background:var(--campo,#151515); display:flex; align-items:center; justify-content:center;
              aspect-ratio:16 / 9; }
.f-wide .fit img{ width:min(60%,700px); height:auto; }
figcaption{ font-size:12px; color:var(--ink-2); padding-top:8px; letter-spacing:.02em; }
.f-text{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr); gap:clamp(16px,4vw,64px);
         padding:clamp(40px,8vh,100px) 0 clamp(50px,9vh,110px); }
.f-text .sec__body > p:last-child{ margin-bottom:0; }

/* pagina Spazio: la foto viene prima di tutto */
.hero-img--top{ margin-top:clamp(16px,2vw,28px); margin-bottom:0; }

/* ---- telefono ---- */
@media (max-width:760px){
  /* il marchio grande non resta più fisso: dopo la copertina arriva la barra */
  .heading{ position:sticky; padding-top:22px; }
  .mini{ display:flex; padding:8px var(--gut); }
  .mini nav a:not(.keep){ display:inline-flex; }
  .page main{ padding-top:0; }
  .claim{ padding-top:clamp(80px,15vh,170px); }
  .works{ gap:28px 8px; }
  .work .cap{ flex-direction:column; gap:2px; font-size:13px; }
  .work--wide .cap{ flex-direction:row; }
  .rows__head{ display:none; }
  .row{ grid-template-columns:1fr auto; row-gap:4px; }
  .row .k, .row .w{ grid-column:1 / -1; }
  .row .yr{ grid-row:1; grid-column:2; }
  .row .w{ display:none; }
  .peek{ display:none; }
  .f-text{ grid-template-columns:1fr; gap:10px; }
  .f-tri{ grid-template-columns:1fr 1fr 1fr; gap:4px; }
}
@media (max-width:640px){
  .f-pair{ gap:6px; }
}
.hero-img--top{ padding:0 var(--gut); }
@media (max-width:760px){
  .mini{ padding:6px 14px; gap:6px; }
  .mini .mark img{ height:9px; }
  .mini nav a{ font-size:11px; letter-spacing:-.01em; }
}
@media (max-width:370px){
  .mini nav a{ font-size:10px; }
  .mini .mark img{ height:8px; }
}
.f-pair .ph video{ width:100%; height:100%; object-fit:cover; display:block; background:#0A0A0A; }
video.auto{ cursor:pointer; }
.f-pair .ph{ position:relative; }
.f-pair .ph:has(video.auto:not(.noaudio))::after{ content:"audio"; position:absolute; right:10px; bottom:10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:rgba(10,10,10,.6); padding:5px 8px; pointer-events:none; }
.f-pair .ph:has(video.auto.sound)::after{ content:"audio on"; color:var(--acid); }
.f-wide video{ width:100%; height:auto; display:block; background:#0A0A0A; }

/* Garden of Gods: le opere e la colonna sonora */
.f-works{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,22px); margin:0 0 clamp(10px,1.4vw,22px); }
.f-works figure{ margin:0; }
.f-works .ph{ position:relative; aspect-ratio:9 / 16; overflow:hidden; background:#0A0A0A; }
.f-works .ph video, .f-works .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.f-works .ph:has(video.auto)::after{ content:"audio"; position:absolute; right:8px; bottom:8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:rgba(10,10,10,.6); padding:4px 7px; pointer-events:none; }
.f-works .ph:has(video.auto.sound)::after{ content:"audio on"; color:var(--acid); }
.f-works figcaption{ font-size:13px; padding-top:8px; line-height:1.4; }
.f-works figcaption b{ display:block; font-weight:500; color:var(--ink); }
@media (max-width:760px){ .f-works{ grid-template-columns:1fr 1fr; gap:8px; } }

.player{ display:flex; align-items:center; gap:16px; margin:1.6em 0 2em; padding:14px 16px; border:1px solid var(--hair); }
.player__btn{ flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:var(--acid); color:#0A0A0A; display:inline-flex; align-items:center; justify-content:center; }
.player__btn svg{ width:16px; height:16px; fill:currentColor; }
.player__btn .pause{ display:none; }
.player.is-playing .player__btn .play{ display:none; }
.player.is-playing .player__btn .pause{ display:block; }
.player__bar{ flex:1 1 auto; height:28px; position:relative; cursor:pointer; }
.player__bar::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:var(--hair); }
.player__bar i{ position:absolute; left:0; top:50%; height:2px; width:0; background:var(--acid); }
.player__time{ font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.poem p{ font-size:15px; line-height:1.75; color:var(--ink-2); margin-bottom:1.1em; }
.poem p.small{ font-size:13px; }
@media (max-width:640px){ .player{ gap:12px; padding:12px; } .player__time{ font-size:12px; } }
.work .ph video{ width:100%; height:100%; object-fit:cover; display:block; }

/* video YouTube: si carica solo al clic */
.yt{ position:relative; }
.yt__play{ display:block; width:100%; position:relative; padding:0; aspect-ratio:16 / 9; background:#000; overflow:hidden; }
.yt__play img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--e), opacity .4s; }
.yt__play:hover img{ transform:scale(1.02); opacity:.85; }
.yt__btn{ position:absolute; left:50%; top:50%; width:clamp(64px,7vw,96px); height:clamp(64px,7vw,96px); margin:calc(clamp(64px,7vw,96px) / -2) 0 0 calc(clamp(64px,7vw,96px) / -2);
          border-radius:50%; background:var(--acid); color:#0A0A0A; display:flex; align-items:center; justify-content:center; }
.yt__btn svg{ width:30%; height:30%; fill:currentColor; margin-left:6%; }
.yt iframe{ display:block; width:100%; aspect-ratio:16 / 9; border:0; background:#000; }
.yt figcaption a{ border-bottom:1px solid var(--hair); }
.yt figcaption a:hover{ color:var(--acid); border-color:var(--acid); }
.credits{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px 32px; max-width:none; }
.credits h3{ font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); font-weight:400; margin:0 0 10px !important; }
.credits p{ font-size:14px !important; line-height:1.7 !important; }
.credits b{ font-weight:500; color:var(--acid); }
.credits p.small{ grid-column:1 / -1; }

/* Diorama: capitoli e tre colonne LUMEN */
.chap{ display:flex; gap:clamp(18px,3vw,48px); flex-wrap:wrap; padding-top:clamp(8px,1.5vw,20px); padding-bottom:clamp(24px,4vw,56px); border-bottom:1px solid var(--hair); margin-bottom:clamp(24px,4vw,56px); }
.chap a{ font-size:clamp(15px,1.4vw,19px); color:var(--ink); }
.chap a span{ color:var(--acid); margin-right:8px; font-size:.8em; letter-spacing:.06em; }
.chap a:hover{ color:var(--acid); }
.f-head h2{ font-size:clamp(30px,4.2vw,64px); font-weight:400; line-height:1.02; letter-spacing:-.02em; margin:0 0 .4em; }
.f-head h2 em{ color:var(--acid); }
#arti-visive{ margin-top:clamp(48px,8vw,120px); scroll-margin-top:70px; }
#comunicazione{ scroll-margin-top:70px; }
.f-works--3{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1100px; margin-left:auto; margin-right:auto; }
.f-works--3 .ph{ aspect-ratio:1 / 2; }
.f-works .ph:has(video.noaudio)::after{ display:none; }
@media (max-width:760px){ .f-works--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .f-works--3 figcaption{ font-size:11px; } }
.facts--mini{ grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:1.4em; border-top:1px solid var(--hair); padding-top:1em; }
@media (max-width:760px){ .facts--mini{ grid-template-columns:1fr 1fr; } }

/* selettore di lingua */
.bar nav a.lang, .mini nav a.lang{ color:var(--ink-2); letter-spacing:.06em; }
.bar nav a.lang:hover, .mini nav a.lang:hover{ color:var(--acid); }
.poem--prose{ max-width:62ch; margin-top:1.6em; }
.poem--prose p{ font-size:15.5px; }

/* pulsante Instagram: messaggio diretto */
.ig-chat{ position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:60;
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  background:rgba(10,10,10,.82); color:var(--ink); border:1px solid var(--hair); font-size:13px; letter-spacing:.02em;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:color .3s, border-color .3s; }
.ig-chat:hover, .ig-chat:focus-visible{ color:#C77DFF; border-color:#C77DFF; }
@media (max-width:640px){ .ig-chat span{ display:none; } .ig-chat{ padding:11px; } }
@media print{ .ig-chat{ display:none; } }
.sec__body .names{ font-size:clamp(18px,1.7vw,24px); line-height:1.5; letter-spacing:-.01em; }

/* telefono: le immagini dei lavori arrivano ai bordi dello schermo */
@media (max-width:640px){
  .flow > .f-wide, .flow > .f-pair, .flow > .f-tri, .flow > .f-works, .wrap > .gal{
    margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut)); }
  .flow > .f-wide > figcaption, .flow > .f-pair figcaption, .flow > .f-tri figcaption,
  .flow > .f-works figcaption, .wrap > .gal figcaption, .flow > figure.f-wide figcaption{
    padding-left:var(--gut); padding-right:var(--gut); }
  .f-tri, .f-pair, .f-works{ gap:3px; }
}
/* pagina Lavori: miniatura su telefono e tablet (dove non c'è il passaggio del mouse) */
.row .th{ display:none; }
@media (max-width:760px), (hover:none){
  .row{ grid-template-columns:76px minmax(0,1fr) auto; column-gap:14px; align-items:center; }
  .row .th{ display:block; grid-row:1 / span 2; grid-column:1; width:76px; height:76px; object-fit:cover; background:#151515; }
  .row b{ grid-column:2; grid-row:1; align-self:end; }
  .row .k{ grid-column:2 / -1; grid-row:2; align-self:start; }
  .row .yr{ grid-column:3; grid-row:1; align-self:end; }
  .row .w{ display:none; }
}
@media (max-width:640px){
  .wrap.works{ padding-left:0; padding-right:0; gap:22px 3px; }
  .wrap.works .work .cap{ padding-left:var(--gut); padding-right:var(--gut); }
  .wrap.works .work:nth-child(odd):not(.work--wide) .cap{ padding-right:4px; }
}