/* PHARI — il retino del video hero è il filo di tutto il sito: fondo notte, parole-finestra sul video, foto in mezzatinta. */
/* crit:start */
@font-face{font-family:Revolt;src:url('assets/fonts/REVOLT.woff2') format('woff2'),url('assets/fonts/REVOLT.woff') format('woff');font-display:swap}
@font-face{font-family:Syne;src:url('assets/fonts/syne-var-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:MadeSoulmaze;src:url('assets/tmh/made-soulmaze.woff2') format('woff2');font-display:swap}

:root{
  --night:#0b0710;
  --raise:#17101f;
  --crimson:#c8103e;
  --plum:#2c1640;
  --mint:#a6f0d5;
  --bone:#f1edf3;
  --dim:#f1edf3a6;
  --gutter:clamp(22px,5vw,88px);
  --section:clamp(56px,7vw,110px);   /* respiro verticale unico: cima delle sezioni e fondo dei corpi */
  --radius:clamp(14px,1.6vw,24px);
  --sans:Syne,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--night);color:var(--bone);font:500 17px/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
body:has(dialog[open]){overflow:hidden}
::selection{background:var(--crimson);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button,a{-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:5px}
h1,h2,h3,p,ol,figure{margin:0}
ol{padding:0;list-style:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:26px 4vw;pointer-events:none;mix-blend-mode:difference;color:#fff}
.nav a,.nav button{pointer-events:auto}
.nav-brand{width:116px;filter:brightness(0) invert(1)}
.nav-right{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.nav-links{display:flex;gap:clamp(18px,2.4vw,34px)}
.nav-links a,.booking-link{position:relative}
.nav-links a::after,.booking-link::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover::after,.booking-link:hover::after{transform:scaleX(1)}
.worlds{display:flex;padding:3px;border-radius:999px;border:1.5px solid currentColor;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-right:auto;margin-left:clamp(14px,2vw,30px)}
.worlds a{padding:8px 14px;border-radius:999px;transition:background .2s,color .2s}
.worlds a[aria-current]{background:#fff;color:#000}
.worlds a:not([aria-current]):hover{background:#ffffff33}
.worlds--menu{display:none}
.lang{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;font-size:12px;font-weight:800;letter-spacing:.04em;transition:background .2s,color .2s}
.lang:hover{background:#fff;color:#000}

.circle{display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff55;border-radius:50%;width:58px;height:58px;flex-shrink:0;color:#fff;font-size:25px;transition:background .25s,color .25s,border-color .25s}
.circle:hover{background:#fff;color:#100d13;border-color:#fff}
.menu-toggle{display:none;flex-direction:column;gap:6px;width:44px;height:44px;border-width:1.5px;border-color:currentColor}
.menu-toggle span{display:block;width:18px;height:1.5px;background:currentColor}

/* ---------- hero ---------- */
.intro{position:relative;background:var(--night)}
.intro-spacer{position:relative;height:150svh}
.stage{position:sticky;top:0;height:100vh;height:100lvh;min-height:520px;overflow:hidden;isolation:isolate;background:#160d20}
.hero-field{position:absolute;inset:0;width:100%;height:100%;background:var(--crimson) url('assets/hero-poster.webp') center/cover}
.video-shade{position:absolute;inset:0;background:linear-gradient(#0003,transparent 35%,#08060a66);pointer-events:none}
/* tutto ciò che sta sull'hero è in blend difference come il logo: meta, "BE DIFFERENT.", tag e link scroll */
.hero-meta{position:absolute;top:143px;left:4vw;right:4vw;display:flex;justify-content:space-between;gap:20px;font:700 12px/1.5 var(--sans);letter-spacing:.1em;mix-blend-mode:difference;color:#fff}
.hero-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;mix-blend-mode:difference;z-index:4;will-change:transform,opacity}
.wordmark{width:92%;height:auto;overflow:visible;filter:brightness(0) invert(1)}
.letter{animation:letter-in 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.2s + var(--i)*.14s);transform-box:fill-box;transform-origin:center}
.portrait-layer{position:absolute;inset:0;z-index:3;opacity:0;transform:translateY(22%);will-change:transform,opacity}
.portrait-layer img{position:absolute;bottom:0;left:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
/* la misura la calcola main.js: la riga più lunga riempie esattamente lo spazio tra i margini, a ogni larghezza */
/* "BE DIFFERENT." vive in un livello suo, sotto il ritratto, così il difference vede il campo (dentro al livello del ritratto,
   che ha transform e opacità, non avrebbe nulla con cui fondersi); il JS lo muove insieme al ritratto */
.portrait-words{position:absolute;inset:0;z-index:2;opacity:0;transform:translateY(22%);mix-blend-mode:difference;color:#fff;will-change:transform,opacity}
.portrait-word{position:absolute;left:6vw;right:6vw;top:19%;font:800 var(--fit,11vw)/.88 var(--sans);letter-spacing:-.055em;white-space:nowrap}
.portrait-word>span{display:inline-block}
.hero-bottom{position:absolute;left:4vw;right:4vw;bottom:35px;z-index:6;display:flex;align-items:flex-end;justify-content:space-between;mix-blend-mode:difference;color:#fff}
.hero-tag{font:700 12px/1.5 var(--sans);letter-spacing:.12em}
.scroll-link{display:flex;align-items:center;gap:18px;font:700 12px var(--sans);letter-spacing:.1em}
.portrait-anchor{position:absolute;top:35%;left:0}
/* dalla scena "BE DIFFERENT." alla bio: lo sfondo si spegne, il ritratto resta fissato, scivola di lato e va in blend */
.stage-dim{position:absolute;inset:0;z-index:2;background:var(--night);opacity:calc(var(--q,0)*.9);pointer-events:none}
.portrait-layer img{transform:translateX(calc(var(--q,0)*var(--shift,-24vw)));opacity:calc(1 - var(--q,0)*var(--fade,.1))}
.portrait-word,.hero-meta{opacity:calc(1 - var(--q,0)*2.2)}
.stage.bio .portrait-layer{mix-blend-mode:screen}

/* crit:end */
/* ---------- struttura sezioni ---------- */
/* Il video dell'hero resta fisso dietro a tutto. Ogni .plate è fondo notte in darken: il fondo vince sul video,
   le lettere bianche lo lasciano passare, così i titoli cambiano palette insieme all'hero. */
/* crit:start */
.backdrop{position:fixed;inset:0;z-index:-1;width:100%;height:100%;background:var(--crimson) url('assets/hero-poster.webp') center/cover}
.plate{padding:var(--section) var(--gutter) clamp(28px,4vw,64px);background:var(--night);color:#fff;mix-blend-mode:darken}
.sec-body{padding:0 var(--gutter) var(--section);margin-top:-1px;background:var(--night)}
.word{display:block;font-family:Revolt,var(--sans);font-weight:400;line-height:.82;font-size:var(--fit,15vw);white-space:nowrap;margin:0}
.word>span{display:inline-block;padding-top:.06em}
/* crit:end */
@supports (animation-timeline:view()){
  .plate .word>span{transform-origin:left bottom;animation:word-in linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
  @keyframes word-in{from{transform:translateY(55%) scaleY(1.7);opacity:.2}to{transform:none;opacity:1}}
}

/* Finestre tra le sezioni: il sito si apre sul video vivo, i bordi si sciolgono in un retino di punti. */
.gap{position:relative;height:clamp(240px,52vh,560px);margin:-1px 0;mix-blend-mode:darken}
/* divisore sottile: stessa finestra, ma tutta bordo, una fascia di punti che respira tra due sezioni vicine */
.gap--thin{height:clamp(64px,9vw,120px)}
.gap--thin .gap-edge{height:50%}
.gap--thin .gap-edge .ht-bw{--dot:8px}
.gap-edge{position:absolute;left:0;right:0;top:0;height:clamp(90px,14vw,190px);overflow:hidden}
.gap-edge--end{top:auto;bottom:0;transform:scaleY(-1)}
.gap-edge::after{content:'';position:absolute;inset:0;background:var(--night);mix-blend-mode:lighten}
.gap-edge .ht-bw{--dot:10px}
.gap-edge .ht-bw::before{transform:none}
/* la sfumatura è alta tre volte il bordo: il terzo centrale è il passaggio inchiostro → finestra e, con lo scroll, scorre
   lungo il bordo. La finestra entra chiusa (tutta notte), si scioglie aprendosi verso il centro dello schermo e si richiude uscendo. */
.gap-edge i{position:absolute;left:0;right:0;top:-100%;height:300%;opacity:.5;background:linear-gradient(#000 0,#000 33.33%,#fff 66.67%,#fff 100%)}
@supports (animation-timeline:view()){
  .gap{view-timeline:--gap block}
  .gap-edge i{animation:edge-open linear both;animation-timeline:--gap;animation-range:entry 0% exit 100%}
  @keyframes edge-open{0%{transform:translateY(33.33%)}38%,62%{transform:none}100%{transform:translateY(33.33%)}}
}

/* ---------- mezzatinta ---------- */
/* Foto e retino si sommano al 50%, il contrasto estremo li trasforma in punti veri; poi due inchiostri:
   cremisi in multiply, prugna in lighten. .ht-clean è la foto che "si sviluppa" a colori. */
.ht{position:relative;display:block;overflow:hidden;isolation:isolate;background:var(--plum);border-radius:var(--radius)}
.ht-bw{position:absolute;inset:0;display:block;background:#fff;filter:contrast(14);overflow:hidden}
.ht-bw::before{content:'';position:absolute;inset:-50%;background:radial-gradient(closest-side,#000,#fff) 0 0/var(--dot,7px) var(--dot,7px);transform:rotate(24deg)}
.ht-bw img{position:relative;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(1.15) blur(.5px);opacity:.5}
.ht::before,.ht::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.ht::before{background:var(--crimson);mix-blend-mode:multiply}
.ht::after{background:var(--plum);mix-blend-mode:lighten}
.ht-clean{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.ht.in .ht-clean{opacity:1}
/* con un mouse copertine e video restano stampati finché non ci passi sopra */
@media(hover:hover) and (pointer:fine){
  .track .ht.in .ht-clean,.live-video .ht.in .ht-clean{opacity:0}
  .track:hover .ht-clean,.track:focus-visible .ht-clean,.live-video:hover .ht-clean,.live-video:focus-visible .ht-clean{opacity:1!important}
}
@supports (animation-timeline:view()){
  .ht img{animation:drift linear both;animation-timeline:view()}
  @keyframes drift{from{transform:scale(1.16) translateY(-5%)}to{transform:scale(1.16) translateY(5%)}}
}

/* In italiano niente text-wrap balance/pretty: con la sillabazione italiana Chrome (laboratorio PageSpeed) impiega decine di
   secondi a impaginare, con lang="en" no. Verificato il 22/09/2026 con pagine di prova: solo `wrap` riporta le pagine IT a 99. */
:lang(it) :is(.statement,.equation,.chapter p,.tmh-text,.legal article p,.legal li){text-wrap:wrap}

/* ---------- icone e bottoni: sempre tondi ---------- */
.icons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.icon{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--raise);color:var(--bone);transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.icon svg{width:21px;height:21px;fill:currentColor}
.icon:hover,.icon:focus-visible{background:var(--mint);color:var(--night);transform:translateY(-4px) rotate(-8deg)}

/* ---------- about: scorre sopra la scena fissata, il ritratto dell'hero resta a sinistra ---------- */
.about{position:relative;z-index:5;padding:var(--section) var(--gutter) 45svh}
.about-word{mix-blend-mode:difference;color:#fff;margin-bottom:clamp(32px,5vw,80px)}
.about-copy{margin-left:46%;container-type:inline-size}
.statement{font-size:clamp(18px,7.3cqi,74px);line-height:.96;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;margin-bottom:clamp(40px,5vw,84px);text-wrap:balance}
.statement .hl{color:var(--crimson)}
.chapter{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:clamp(22px,2.6vw,38px) 0;border-top:1px solid #f1edf326}
.chapter h3{font-size:clamp(20px,2.4vw,36px);line-height:1;font-weight:800;letter-spacing:-.035em;text-transform:uppercase;color:var(--mint)}
.chapter p,.tmh-text,.legal article p,.legal li{text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.chapter p{max-width:56ch;font-size:clamp(16px,1.3vw,19px);color:#f1edf3d9}
/* ogni capitolo si accende quando passa a centro schermo */
@supports (animation-timeline:view()){
  .chapter{animation:chapter linear both;animation-timeline:view();animation-range:entry 10% exit 90%}
  @keyframes chapter{0%{filter:brightness(.22);transform:translateX(var(--slide,28px))}32%,68%{filter:none;transform:none}100%{filter:brightness(.22);transform:translateX(-10px)}}
}
.labels{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:clamp(22px,2.6vw,38px);border-top:1px solid #f1edf326}
.labels span{padding:.5em 1.05em;border-radius:999px;border:1px solid #f1edf340;font-size:13px;font-weight:600}
.labels .labels-title{border:0;padding-left:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.about-copy .icons{margin-top:clamp(24px,2.6vw,38px)}

/* ---------- music ---------- */
.tracks{display:grid;gap:8px}
.track{display:grid;grid-template-columns:clamp(84px,10vw,150px) minmax(0,1fr) minmax(0,.6fr) auto;gap:clamp(16px,3vw,48px);align-items:center;padding:clamp(10px,1.1vw,16px);padding-right:clamp(16px,2vw,30px);border-radius:calc(var(--radius) + 10px);background:var(--raise);transition:background .25s,color .25s}
.track-cover .ht{aspect-ratio:1;--dot:5px}
.track-title{font-size:clamp(22px,4.2vw,68px);line-height:.95;font-weight:800;letter-spacing:-.05em;text-transform:uppercase;transition:transform .45s cubic-bezier(.2,.8,.2,1),letter-spacing .45s cubic-bezier(.2,.8,.2,1)}
.track-label{font-size:15px;color:var(--dim);transition:color .25s}
.track-go{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--night);transition:background .25s,color .25s,transform .3s}
.track-go svg{width:20px;height:20px;fill:currentColor}
.track:hover,.track:focus-visible{background:var(--mint);color:var(--night)}
.track:hover .track-title,.track:focus-visible .track-title{transform:translateX(clamp(6px,1vw,18px));letter-spacing:-.02em}
.track:hover .track-label,.track:focus-visible .track-label{color:var(--night)}
.track:hover .track-go,.track:focus-visible .track-go{background:var(--night);color:var(--mint);transform:rotate(-12deg)}

.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(40px,5vw,80px)}
.player-shell{min-width:0}
.player-shell button{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:clamp(18px,2vw,28px) 28px;border-radius:999px;border:2px solid var(--bone);font-size:clamp(14px,1.35vw,20px);font-weight:800;letter-spacing:-.01em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.player-shell button svg{width:26px;height:26px;fill:currentColor;flex-shrink:0}
.player-shell button:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}
.player-shell iframe{width:100%;height:352px;border:0;display:block;border-radius:var(--radius)}
.music .icons{margin-top:clamp(24px,2.6vw,38px)}

/* ---------- Tech My House: parla la lingua del suo sito (ink, acid, Syne, script) ---------- */
.tmh{--acid:#CCFF00;--tmh-ink:#0A0A0A;position:relative;isolation:isolate;overflow:hidden;background:var(--tmh-ink);color:#fff;padding:clamp(80px,10vw,160px) var(--gutter)}
.tmh::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 22% 50%,#ccff0024,transparent 55%)}
.tmh-inner{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,6vw,100px);align-items:center;max-width:1280px;margin:0 auto}
.tmh-logo{position:relative}
.tmh-logo::before{content:'';position:absolute;inset:8%;border-radius:50%;background:#ccff0033;filter:blur(60px)}
.tmh-logo img{position:relative;width:100%;height:auto;transform-origin:55.44% 42.84%;animation:tmh-spin 14s linear infinite;filter:drop-shadow(0 0 24px #ccff0040)}
.tmh-tape{display:inline-block;padding:.45em .9em;background:var(--acid);color:var(--tmh-ink);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-2deg)}
.tmh-title{margin-top:26px;font-size:clamp(44px,8vw,112px);font-weight:800;line-height:.9;letter-spacing:-.045em;text-transform:uppercase}
.tmh-script{margin-top:14px;font:400 clamp(28px,4vw,52px)/1.1 MadeSoulmaze,cursive;color:var(--acid);transform:rotate(-1.5deg);transform-origin:left}
.tmh-text{margin-top:26px;max-width:38ch;font-size:clamp(16px,1.35vw,19px);color:#ffffff9e}
.tmh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:34px}
.tmh-pill{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;border-radius:999px;background:var(--acid);color:var(--tmh-ink);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 28px #ccff0024;transition:transform .22s,box-shadow .22s}
.tmh-pill svg{width:20px;height:20px;fill:currentColor}
.tmh-pill:hover{transform:translateY(-2px);box-shadow:0 0 40px #ccff0047}
.tmh .icons{justify-content:flex-start}
.icons--acid .icon{width:50px;height:50px;background:none;border:1px solid #ccff0059;color:var(--acid)}
.icons--acid .icon:hover,.icons--acid .icon:focus-visible{background:var(--acid);color:var(--tmh-ink)}
@keyframes tmh-spin{to{transform:rotate(360deg)}}

/* ---------- live ---------- */
.live-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,32px);align-items:start}
.live-item{display:block;text-align:left;min-width:0}
.w12{grid-column:span 12}.w7{grid-column:span 7}.w6{grid-column:span 6}.w5{grid-column:span 5}
.drop{margin-top:clamp(36px,7vw,120px)}
.live-item .ht{aspect-ratio:16/9}
.live-item.w12 .ht{aspect-ratio:21/9}
.live-item.tall .ht{aspect-ratio:4/5}
.live-item.land .ht{aspect-ratio:5/4}
.live-photo img{object-position:center 22%}
.live-item .ht-bw img{filter:grayscale(1) brightness(.72) contrast(1.35) blur(.5px)}
.photo-credit{margin-top:8px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.live-caption{display:flex;align-items:center;gap:14px;padding-top:14px;font-size:clamp(15px,1.7vw,26px);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;line-height:1.05}
.live-play{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--mint);transition:transform .3s}
.live-play::before{content:'';margin-left:3px;border-left:11px solid var(--night);border-top:7px solid transparent;border-bottom:7px solid transparent}
.live-video:hover .live-play{transform:scale(1.15)}

/* ---------- PHARI STUDIO: stesso marchio, altro mondo. Cremisi fisso e accento osso al posto della menta ---------- */
/* crit:start */
body[data-world=studio]{--mint:#f4ece0}
.studio-hero{position:relative;height:100vh;height:100lvh;min-height:520px;overflow:hidden;isolation:isolate;background:#160d20}
.studio-title{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.6vw,22px);margin:0;padding:0 4vw;mix-blend-mode:difference;color:#fff}
.studio-logo{width:clamp(120px,17vw,260px);height:auto;filter:brightness(0) invert(1)}
.studio-title .word>span{animation:letter-in 1.2s cubic-bezier(.16,1,.3,1) both .15s}
/* crit:end */
/* Scena con la figura: Phari scontornato in piedi su una finestra del campo vivo, due parole d'inchiostro alle spalle e un alone
   di luce lungo il bordo. Entra "stampato" (retino in multiply mascherato dalla sua sagoma) e si sviluppa a colori a centro
   schermo; parole e figura scorrono a velocità diverse. Ordine di pittura = ordine nel DOM (bordo alto, parole, figura, bordo
   basso): niente z-index né transform su .figure, altrimenti diventa un contesto isolato e il multiply non vede più il campo. */
.figure-scene{--scene-h:clamp(520px,100vh,1000px);position:relative;height:var(--scene-h);overflow:hidden;margin:-1px 0;view-timeline:--fig block}
.figure-scene .gap-edge{mix-blend-mode:darken}
/* variante senza figura (home, tra Music e Live): solo le parole d'inchiostro sulla finestra, più bassa */
.figure-scene--words{height:clamp(360px,68vh,680px)}
.figure-scene--words .figure-words{transform:translateY(-50%)}
.figure-words{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-60%);mix-blend-mode:difference;color:#fff;pointer-events:none}
.figure-words .word{line-height:.86}
/* alta il 94% della scena (.78 × altezza × 1.207), mai più larga del 92%; niente container query: la layout containment
   creerebbe uno stacking context e la stampa in multiply non vedrebbe più il campo */
.figure{position:absolute;left:50%;bottom:0;width:min(calc(var(--scene-h) * .78),92vw);margin-left:calc(min(calc(var(--scene-h) * .78),92vw) / -2);aspect-ratio:1000/1207}
.figure-print,.figure-glow,.figure-photo{position:absolute;inset:0;width:100%;height:100%}
.figure-print,.figure-glow{-webkit-mask:url('assets/figure-600.webp') center/100% 100% no-repeat;mask:url('assets/figure-600.webp') center/100% 100% no-repeat}
.figure-print{display:block;overflow:hidden;mix-blend-mode:multiply}
.figure-print .ht-bw{--dot:9px}
/* l'alone: la sagoma stessa, un po' più grande, colore d'accento e sfocata; respira una volta sviluppata */
.figure-glow{inset:-2.5% -3%;width:auto;height:auto;background:var(--mint);filter:blur(30px);opacity:0;transition:opacity 1.4s ease .3s}
.figure-photo{object-fit:contain;opacity:0;transition:opacity 1.2s ease .15s}
.figure.in .figure-photo{opacity:1}
.figure.in .figure-glow{opacity:.7;animation:glow-breathe 4.5s ease-in-out 1.6s infinite alternate}
@keyframes glow-breathe{from{opacity:.45}to{opacity:.85}}
@supports (animation-timeline:view()){
  .figure-words .word:first-child{animation:drift-l linear both;animation-timeline:--fig;animation-range:entry 0% exit 100%}
  .figure-words .word:last-child{animation:drift-r linear both;animation-timeline:--fig;animation-range:entry 0% exit 100%}
  .figure-print,.figure-glow,.figure-photo{animation-name:fig-rise;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--fig;animation-range:entry 0% exit 100%;transform-origin:50% 100%}
  .figure.in .figure-glow{animation:fig-rise linear both,glow-breathe 4.5s ease-in-out 1.6s infinite alternate;animation-timeline:--fig,auto}
  @keyframes drift-l{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
  @keyframes drift-r{from{transform:translateX(5%)}to{transform:translateX(-5%)}}
  @keyframes fig-rise{from{transform:translateY(9%) scale(1.06)}to{transform:translateY(-2%) scale(1)}}
}
.statement-block .sec-body{padding-top:var(--section)}
.statement-block .studio-intro{margin-bottom:0}
.steps{list-style:none;margin:0 0 clamp(40px,5vw,80px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,30px);counter-reset:none}
.step{container-type:inline-size;padding:clamp(18px,2vw,28px);border-radius:calc(var(--radius) + 10px);background:var(--raise)}
.step b{display:block;font:400 clamp(34px,4.4vw,64px)/.9 Revolt,var(--sans);color:var(--crimson);margin-bottom:clamp(18px,2.4vw,36px)}
.step h3{font-size:clamp(16px,11cqi,30px);line-height:1;font-weight:800;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:10px}
.step p{font-size:15px;color:#f1edf3cc}
.method-notes{margin-bottom:0}
/* Sul campo: le foto del banco tecnico, stampate in mezzatinta come quelle della home */
.onsite-intro{max-width:56ch;margin:0 0 clamp(20px,2.4vw,34px)}
.onsite{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2vw,32px);align-items:start;margin-bottom:clamp(40px,5vw,80px)}
.onsite figure{margin:0;grid-column:span 7;min-width:0}
.onsite .tall{grid-column:span 5}
.onsite .ht{aspect-ratio:16/9}
.onsite .tall .ht{aspect-ratio:4/5}
.onsite img{object-position:center 30%}
.onsite .ht-bw img{filter:grayscale(1) brightness(.72) contrast(1.35) blur(.5px)}
.studio-intro .studio-note{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;hyphens:manual;-webkit-hyphens:manual;color:var(--dim);padding-left:clamp(16px,2vw,28px);border-left:3px solid var(--crimson)}
.teaser-text{max-width:52ch;font-size:clamp(16px,1.35vw,20px);color:#f1edf3d9;text-align:justify;hyphens:auto;-webkit-hyphens:auto;margin-bottom:clamp(24px,3vw,40px)}
.studio-teaser .equation{margin-bottom:clamp(24px,3vw,44px)}
.studio-teaser .sec-body{container-type:inline-size}
.teaser-cta{padding:16px 28px}
.chapter-link{justify-self:start;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.chapter-link:hover{color:var(--bone)}

/* ---------- studio: il lato creative technologist ---------- */
.studio .sec-body,.statement-block .sec-body{container-type:inline-size}
.equation{font-size:clamp(18px,8.2cqi,104px);line-height:.95;font-weight:800;letter-spacing:-.05em;text-transform:uppercase;text-wrap:balance;margin-bottom:clamp(36px,5vw,80px)}
.equation b{color:var(--mint);font-weight:800}
.equation .hl{color:var(--crimson)}
.studio-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(48px,6vw,96px)}
.studio-intro p{font-size:clamp(16px,1.35vw,20px);color:#f1edf3d9;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.studio-intro .studio-quote{font-size:clamp(20px,2.2vw,32px);line-height:1.1;font-weight:800;letter-spacing:-.035em;text-transform:uppercase;color:var(--bone);text-align:left;hyphens:manual;-webkit-hyphens:manual;padding-left:clamp(16px,2vw,28px);border-left:3px solid var(--crimson)}
.skills{list-style:none;margin:0;padding:0;border-bottom:1px solid #f1edf326}
.skill{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(16px,4vw,70px);align-items:baseline;padding:clamp(18px,2.2vw,32px) 0;border-top:1px solid #f1edf326;transition:padding .35s cubic-bezier(.2,.8,.2,1)}
.skill h3{font-size:clamp(20px,2.8vw,44px);line-height:1;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;transition:color .25s}
.skill p{font-size:clamp(15px,1.2vw,18px);color:var(--dim);text-align:justify;hyphens:auto;-webkit-hyphens:auto;transition:color .25s}
.skill:hover{padding-left:clamp(8px,1.2vw,20px)}
.skill:hover h3{color:var(--mint)}
.skill:hover p{color:var(--bone)}
.studio-sub{margin:var(--section) 0 clamp(20px,2.4vw,34px);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.project{container-type:inline-size;display:flex;flex-direction:column;gap:14px;padding:clamp(12px,1.2vw,18px);padding-bottom:clamp(20px,2vw,30px);border-radius:calc(var(--radius) + 10px);background:var(--raise)}
.project h3{margin:6px 0 0;font-size:clamp(16px,6.6cqi,40px);line-height:1;font-weight:800;letter-spacing:-.045em;text-transform:uppercase}
.project h3.long{font-size:clamp(15px,6.3cqi,38px)}  /* nomi lunghi (Transcendentia): stesso margine a destra e a sinistra */
.project p{margin:0;font-size:15px;color:#f1edf3cc;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.project .tags{display:flex;flex-wrap:wrap;gap:6px;text-align:left}
.tags span{padding:.4em .9em;border-radius:999px;border:1px solid #a6f0d566;color:var(--mint);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.project h3,.project .tags,.project>p{padding:0 clamp(4px,.6vw,10px)}
.studio-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(40px,5vw,72px)}
.studio-cta .pill{padding:16px 28px}

.project-link{align-self:flex-start;margin:4px clamp(4px,.6vw,10px) 0;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);border-bottom:1.5px solid currentColor;padding-bottom:3px}
.project-link:hover{color:var(--crimson)}
/* card con materiale fotografico vero (Cinedisco): la foto stampata in mezzatinta come nella home, il logo dello show sopra */
.project-media{margin:0}
.project-media .ht{aspect-ratio:16/10}
.project-media .ht-bw img{filter:grayscale(1) brightness(.72) contrast(1.35) blur(.5px)}
.project-media .ht-clean{object-position:center 40%}
.ht .project-logo{position:absolute;left:50%;top:50%;z-index:3;width:min(64%,360px);height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 28px #0b0710cc);animation:none;pointer-events:none}
.project .project-meta{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:left;hyphens:manual;-webkit-hyphens:manual}
/* reel: striscia orizzontale a scatti, ogni lavoro si apre a schermo intero */
.strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(20px,2.4vw,34px)}
.strip-intro{max-width:44ch;font-size:clamp(16px,1.35vw,20px);color:#f1edf3d9}
.strip-nav{display:flex;gap:8px;flex-shrink:0}
.strip-nav .circle{width:50px;height:50px;font-size:20px;border-color:#f1edf340}
.strip{list-style:none;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 6px;display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip-item{flex:0 0 auto;width:min(78vw,520px);scroll-snap-align:start}
.strip-item.is-tall{width:min(58vw,330px)}
.strip-open{display:block;width:100%;padding:0;border-radius:var(--radius);overflow:hidden;background:#000;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.strip-open:hover{transform:translateY(-4px)}
.strip-open video,.strip-open img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.is-tall .strip-open video,.is-tall .strip-open img{aspect-ratio:4/5}
.strip figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding-top:12px;font-size:13px;color:var(--dim)}
.strip figcaption b{font-size:clamp(15px,1.5vw,20px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;color:var(--bone)}
.lightbox{width:100vw;max-width:none;height:100svh;max-height:none;padding:0;background:transparent;overflow:hidden}
.lightbox::backdrop{background:#050307f2}
.lb-stage{display:grid;place-items:center;width:100%;height:100%;padding:72px var(--gutter) 90px}
.lb-stage video,.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--radius);background:#000}
.lb-caption{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:14px;color:var(--dim)}
.lb-caption b{font-size:18px;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;color:var(--bone)}
.close-lightbox{position:absolute;right:var(--gutter);top:18px}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-29px;left:var(--gutter)}
.lb-next{left:auto;right:var(--gutter)}

/* Gaia Circle Lab: collaborazione su siti e motion */
.gcl .sec-body{padding-top:var(--section)}
.gcl-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding:clamp(24px,3vw,44px);border-radius:calc(var(--radius) + 12px);background:var(--raise)}
.gcl-logo{width:min(100%,300px);height:auto;margin-bottom:clamp(18px,2vw,28px)}
.gcl-copy h3{font-size:clamp(24px,3vw,44px);line-height:1;font-weight:800;letter-spacing:-.045em;text-transform:uppercase;margin-bottom:14px}
.gcl-copy p{font-size:clamp(15px,1.25vw,18px);color:#f1edf3d9;text-align:justify;hyphens:auto;-webkit-hyphens:auto;margin-bottom:clamp(20px,2.4vw,32px)}
.gcl-link{max-width:100%;letter-spacing:.06em;text-transform:none;font-size:13px}
.gcl-reel{margin:0}
.gcl-reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);background:#000}
.gcl-reel figcaption{display:flex;gap:12px;align-items:baseline;padding-top:12px;font-size:13px;color:var(--dim)}
.gcl-reel figcaption b{font-size:15px;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;color:var(--bone)}

.project--featured{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,48px);align-items:center;padding:clamp(14px,1.4vw,22px)}
.featured-media{position:relative;display:block;width:100%;padding:0;border-radius:var(--radius);overflow:hidden;background:#000}
.featured-media video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.audio-toggle{position:absolute;right:14px;bottom:14px;width:52px;height:52px;background:#0b0710cc;border-color:#f1edf366;backdrop-filter:blur(6px)}
.audio-toggle svg{width:22px;height:22px;fill:currentColor}
.audio-toggle .on{display:none}
.audio-toggle[aria-pressed=true]{background:var(--mint);color:var(--night);border-color:var(--mint)}
.audio-toggle[aria-pressed=true] .on{display:block}
.audio-toggle[aria-pressed=true] .off{display:none}
.featured-copy{display:flex;flex-direction:column;gap:12px;padding:clamp(4px,1vw,16px) clamp(4px,.6vw,10px)}
.featured-copy h3{font-size:clamp(34px,5vw,80px);margin:0}
.featured-copy p,.featured-copy .tags{padding:0}
.featured-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:10px}
.featured-hint{font-size:13px;color:var(--dim)}

/* mini-visual in puro CSS: ogni progetto è raccontato dal suo comportamento, non da uno screenshot */
.viz{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;background:var(--night);isolation:isolate}
/* BehindMe: tu al centro, un veicolo che arriva da dietro, l'allarme che scatta */
.viz--radar i{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;margin:-9% 0 0 -9%;border-radius:50%;border:1.5px solid var(--mint);opacity:0;animation:radar 3.6s linear infinite}
.viz--radar i:nth-child(2){animation-delay:1.2s}
.viz--radar i:nth-child(3){animation-delay:2.4s}
.viz--radar b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--mint)}
.viz--radar em{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--crimson);animation:approach 3.6s cubic-bezier(.5,0,.8,.6) infinite}
@keyframes radar{0%{transform:scale(.4);opacity:.9}100%{transform:scale(6);opacity:0}}
@keyframes approach{0%{transform:translate(120%,420%) scale(.5);opacity:0;box-shadow:0 0 0 0 #c8103e00}15%{opacity:1}80%{transform:translate(30%,90%) scale(1);box-shadow:0 0 0 0 #c8103e99}100%{transform:translate(30%,90%) scale(1);opacity:0;box-shadow:0 0 0 46px #c8103e00}}
/* Trascendentia: immagine generativa che non si ripete mai uguale, sotto lo stesso retino del sito */
.viz--gen i{position:absolute;inset:-40%;background:conic-gradient(from 0deg,#c8103e,#2a12c8,#3ff2aa,#e9d92b,#c8103e);filter:blur(38px);animation:gen 17s linear infinite}
.viz--gen i:nth-child(2){inset:-10%;mix-blend-mode:difference;animation-duration:11s;animation-direction:reverse;opacity:.75}
.viz--gen::after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#0b0710 38%,transparent 42%) 0 0/7px 7px;mix-blend-mode:multiply}
@keyframes gen{to{transform:rotate(360deg) scale(1.15)}}
/* PulseDeck: un tasto che batte a 126 BPM esatti (60/126 = 0,476 s) */
.viz--bpm{display:grid;grid-template-columns:repeat(3,1fr);gap:6%;padding:9% 8%;align-items:center}
.key{position:relative;display:grid;place-items:center;align-content:center;aspect-ratio:1;border-radius:22%;background:#17101f;border:1px solid #f1edf326;color:var(--bone)}
.key b{font-size:clamp(20px,2.6vw,38px);line-height:1;font-weight:800;letter-spacing:-.04em}
.key small{margin-top:3px;font-size:9px;font-weight:800;letter-spacing:.16em;color:var(--mint)}
.key:first-child{border-color:var(--mint);animation:beat .476s cubic-bezier(.2,.8,.2,1) infinite}
.key--ghost{opacity:.45}
.key--ghost::before{content:'';width:34%;aspect-ratio:1;border-radius:50%;background:#f1edf326}
@keyframes beat{0%{box-shadow:0 0 0 0 #a6f0d5aa;transform:scale(1.04)}100%{box-shadow:0 0 0 16px #a6f0d500;transform:scale(1)}}

/* ---------- contact ---------- */
.contact .plate{padding-bottom:clamp(28px,4vw,56px)}
.contact-label{display:inline-block;padding:.55em 1.1em;border-radius:999px;background:var(--crimson);color:#fff;font-size:clamp(11px,1vw,14px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:clamp(14px,1.6vw,24px)}
.email{display:block;font-size:var(--fit,9vw);line-height:1;font-weight:800;letter-spacing:-.055em;white-space:nowrap;padding:.05em 0 .15em;transition:color .25s}
.email>span{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.email:hover{color:var(--mint)}
.email:hover>span{transform:skewX(-8deg)}
.contact-socials{margin-top:clamp(22px,2.6vw,38px)}

footer{background:var(--night);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px var(--gutter);border-top:1px solid #f1edf31f;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
footer img{width:100px;height:auto;filter:brightness(0) invert(1)}

/* cursore-etichetta: compare solo su ciò che si apre o si riproduce */
.cursor{position:fixed;left:0;top:0;z-index:60;display:grid;place-items:center;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--mint);color:var(--night);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;opacity:0;scale:.2;transition:opacity .2s,scale .3s cubic-bezier(.2,.8,.2,1)}
.cursor.on{opacity:1;scale:1}
@media not ((hover:hover) and (pointer:fine)){.cursor{display:none}}

/* ---------- consenso e avviso cookie ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:999px;border:1.5px solid var(--bone);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.pill:hover{background:var(--bone);color:var(--night)}
.pill--solid{background:var(--mint);border-color:var(--mint);color:var(--night)}
.pill--solid:hover{background:var(--bone);border-color:var(--bone)}
.consent{width:min(480px,92vw);padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--raise);border:1px solid #f1edf326}
.consent h2{font-size:clamp(22px,2.4vw,30px);line-height:1;font-weight:800;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:14px}
.consent p{font-size:15px;color:#f1edf3d9}
.consent b{color:var(--mint);font-weight:700}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 16px}
.consent-link,.notice a,footer a{border-bottom:1px solid currentColor}
.consent-link{font-size:13px;color:var(--dim)}
.notice{position:fixed;left:16px;bottom:16px;z-index:40;display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);padding:8px 8px 8px 20px;border-radius:999px;background:var(--raise);border:1px solid #f1edf326;box-shadow:0 12px 36px #000a}
.notice p{font-size:13px;line-height:1.2;color:#f1edf3d9;white-space:nowrap}
.notice-actions{display:flex;gap:6px;flex-shrink:0}
.notice .pill{padding:9px 16px;font-size:11px;flex-shrink:0}
footer a:hover,.notice a:hover{color:var(--mint)}

.notice[hidden]{display:none}

/* ---------- pagina legale ---------- */
.legal-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px var(--gutter)}
.legal-nav img{width:116px;height:auto;filter:brightness(0) invert(1)}
.legal-nav nav{display:flex;gap:8px}
.legal{max-width:780px;margin:0 auto;padding:clamp(30px,5vw,70px) var(--gutter) clamp(60px,8vw,120px)}
.legal h1{font-size:clamp(34px,6vw,76px);line-height:.95;font-weight:800;letter-spacing:-.05em;text-transform:uppercase}
.legal-meta{margin:14px 0 0;font-size:13px;color:var(--dim)}
.legal h2{margin:clamp(34px,4vw,54px) 0 12px;font-size:clamp(18px,2vw,24px);line-height:1.05;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;color:var(--mint)}
.legal p,.legal li{font-size:16px;color:#f1edf3d9}
.legal p+p,.legal ul+p{margin-top:14px}
.legal ul{margin:14px 0;padding-left:1.2em;display:grid;gap:10px}
.legal article a{border-bottom:1px solid currentColor}
.legal article a:hover{color:var(--mint)}
.legal mark{background:var(--crimson);color:#fff;padding:.1em .4em;border-radius:6px}
.legal .pill{margin:6px 0;cursor:pointer}
.legal>p{margin-top:clamp(40px,5vw,70px)}

/* ---------- 404 ---------- */
.notfound{text-align:center}
.notfound .word{font-size:min(15vw,150px);margin:clamp(10px,2vw,24px) 0}
.notfound-text{max-width:44ch;margin:0 auto}
.notfound-text+.notfound-text{margin-top:8px;color:var(--dim)}
.notfound-links{display:flex;justify-content:center;gap:10px;margin-top:clamp(28px,4vw,48px)}

/* ---------- dialog ---------- */
dialog{color:var(--bone);background:var(--night);border:0;padding:0}
dialog::backdrop{background:#050307f0}
.video-dialog{width:min(1100px,94vw);overflow:visible;padding:0;background:#000}
.close-video{position:absolute;right:0;top:-72px}
.video-slot{aspect-ratio:16/9;background:#000}
.video-slot iframe{width:100%;height:100%;border:0}
.video-fallback{position:absolute;left:0;top:calc(100% + 14px);font-size:14px;border-bottom:1px solid currentColor}
.menu-dialog{max-width:none;max-height:none;width:100%;height:100%;padding:100px var(--gutter);background:var(--crimson) url('assets/hero-poster.webp') center/cover}
.close-menu{position:absolute;right:4vw;top:22px}
.menu-dialog nav{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;mix-blend-mode:difference}
.menu-dialog nav a{font:clamp(26px,7.8vw,100px)/1.15 Revolt,var(--sans);color:#fff}
.menu-dialog nav.worlds{height:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:0;color:#fff}
.menu-dialog nav.worlds a{font:800 11px/1.6 var(--sans);letter-spacing:.1em;color:inherit}
.menu-dialog nav.worlds a[aria-current]{color:#000}

/* crit:start */
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;z-index:100;left:20px;top:20px;padding:10px;background:#000;color:#fff}
@keyframes letter-in{from{opacity:0;transform:translateY(180px) rotate(7deg)}to{opacity:1;transform:none}}
/* crit:end */

/* ---------- tablet ---------- */
@media(max-width:1100px){
/* crit:start @media(max-width:1100px) */
  .hero-meta{top:120px}
  .about-copy{margin-left:42%}
  .stage{--shift:-27vw}
/* crit:end */
  .track{grid-template-columns:clamp(84px,12vw,130px) minmax(0,1fr) auto}
  .track-label{grid-column:2;grid-row:2;align-self:start}
  .track-title{align-self:end}
  .track-cover,.track-go{grid-row:span 2}
  .tmh-inner{grid-template-columns:minmax(0,3fr) minmax(0,7fr)}
  .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project--featured{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project:last-child{grid-column:1/-1}
  .project:last-child .viz{aspect-ratio:24/9}
/* crit:start @media(max-width:1100px) */
  .portrait-layer img{height:88%}
/* crit:end */
}
@media(max-width:1100px) and (orientation:portrait){
/* crit:start @media(max-width:1100px) and (orientation:portrait) */
  .portrait-layer img{width:150%;max-width:none;left:-25%;height:72%}
  .stage{--shift:-30vw}
  .portrait-word{top:16%}
/* crit:end */
}

/* tra tablet e mobile le voci di sezione vanno nel menu: nella barra restano marchio, selettore Music/Studio, contatto e lingua */
@media(max-width:900px){
/* crit:start @media(max-width:900px) */
  .nav-links{display:none}
  .menu-toggle{display:inline-flex}
/* crit:end */
}

/* ---------- mobile ---------- */
@media(max-width:760px){
/* crit:start @media(max-width:760px) */
  .hero-field,.backdrop,.menu-dialog{background-image:url('assets/hero-poster-800.webp')}   /* poster leggero: sotto la tela WebGL si vede per un attimo */
  .nav{padding:18px 20px}
  .nav-brand{width:93px}
  .nav-links,.booking-link,.nav>.worlds{display:none}
  .worlds--menu{display:flex;position:absolute;left:var(--gutter);top:22px;margin:0;color:#fff;mix-blend-mode:difference}
  .menu-toggle{display:inline-flex}
  .nav-right{gap:10px}
  .circle{width:48px;height:48px}
  .menu-toggle{width:44px;height:44px}
  .intro-spacer{height:120svh}
  .stage{--shift:0vw;--fade:.72}
  .about{padding-bottom:30svh}
  .plate{padding-top:var(--section)}
  .about-copy{margin-left:0}
  .stage{min-height:480px}
  .hero-meta{top:96px;left:20px;right:20px;font-size:10px}
  .hero-meta span:first-child{max-width:185px}
  .hero-meta span:last-child{max-width:90px;text-align:right}
  .wordmark{width:94%}
  .hero-bottom{left:20px;right:20px;bottom:28px}
  .hero-tag{font-size:10px}
  .scroll-link{gap:10px;font-size:10px}
  .portrait-layer img{width:190%;max-width:none;left:-45%;height:80%}
  .portrait-word{left:20px;right:20px;top:22%}
/* crit:end */
  .chapter p{font-size:16px}
  .chapter{--slide:12px}
  .track{grid-template-columns:72px minmax(0,1fr);gap:2px 14px;padding:10px;border-radius:22px}
  .track-go{display:none}
  .track-title{font-size:clamp(16px,5.6vw,30px);overflow-wrap:anywhere}
  .track-label{font-size:13px}
  .players{grid-template-columns:minmax(0,1fr)}
  .studio-intro,.skill,.projects,.steps,.project--featured{grid-template-columns:minmax(0,1fr)}
  .featured-media{max-width:78%;margin:0 auto}
  .gcl-grid{grid-template-columns:minmax(0,1fr)}
  .strip-head{flex-direction:column;align-items:flex-start}
  .lb-prev,.lb-next{top:auto;bottom:80px;margin:0}
  .lb-stage{padding:72px 16px 130px}
  .lb-caption{bottom:auto;top:22px;left:16px;right:80px}
/* crit:start @media(max-width:760px) */
  .studio-title{padding:0 20px}
/* crit:end */
  .skill{gap:8px}
  .project:last-child{grid-column:auto}
  .project:last-child .viz{aspect-ratio:16/10}
  .studio-cta .pill{width:100%}
  .onsite figure,.onsite .tall{grid-column:span 12}
  .icon{width:50px;height:50px}
  .tmh-inner{grid-template-columns:minmax(0,1fr)}
  .tmh-logo{max-width:46%}
  .tmh-pill{letter-spacing:.08em;padding:14px 20px}
  .live-grid{gap:14px;grid-auto-flow:dense}
  .w12,.w7{grid-column:span 12}
  .w6,.w5{grid-column:span 6}
  .live-item.w12 .ht{aspect-ratio:16/9}
  .live-photo .ht,.live-item.tall .ht{aspect-ratio:4/5}
  .live-photo:last-of-type{grid-column:span 12}
  .live-photo:last-of-type .ht{aspect-ratio:5/4}
  .drop{margin-top:0}
  .live-photo.drop{margin-top:28px}
  .live-play{width:36px;height:36px}
  .gap{height:clamp(200px,38vh,340px)}
  .notice{left:12px;right:12px;bottom:12px;gap:10px;padding-left:16px;border-radius:24px;max-width:none}
  .notice p{font-size:12px;white-space:normal}
  .notice .pill{padding:8px 13px}
  footer{flex-wrap:wrap;font-size:11px}
  footer img{width:85px}
  .close-video{top:-60px}
  .close-menu{right:20px;top:16px}
}

@media(prefers-reduced-motion:reduce){
/* crit:start @media(prefers-reduced-motion:reduce) */
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro-spacer{display:none}
  .stage{position:relative;height:100svh}
  .about{background:var(--night);padding-bottom:clamp(60px,8vw,130px)}
  .about-copy{margin-left:0}
  .hero-logo{opacity:1!important;transform:none!important}
  .portrait-layer,.portrait-words,.portrait-anchor{display:none}
/* crit:end */
}