/* ==========================================================
   Fuzia Jammali – foglio di stile
   Palette: #f8f8f8 sfondo e testi chiari · #111111 nero · #ffffff
   Font: Poiret One (titoli) · Nunito Light (testo) · Nunito SemiBold (titoli delle news)
   Impaginazione desktop: scala proporzionale al design (cqw).
   Ogni sezione definisce --u = larghezza del design di riferimento.
   ========================================================== */

@font-face{font-family:"Poiret One";font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/poiret-one-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poiret One";font-weight:400;font-style:normal;font-display:swap;
  src:url("../assets/fonts/poiret-one-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-weight:300;font-style:normal;font-display:swap;
  src:url("../assets/fonts/nunito-latin-ext-300-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-weight:300;font-style:normal;font-display:swap;
  src:url("../assets/fonts/nunito-latin-300-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-weight:600;font-style:normal;font-display:swap;
  src:url("../assets/fonts/nunito-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-weight:600;font-style:normal;font-display:swap;
  src:url("../assets/fonts/nunito-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-weight:300;font-style:italic;font-display:swap;
  src:url("../assets/fonts/nunito-latin-ext-300-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito";font-weight:300;font-style:italic;font-display:swap;
  src:url("../assets/fonts/nunito-latin-300-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f8f8f8;
  --ink:#111111;
  --white:#ffffff;
  --font-title:"Poiret One","Josefin Sans",sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-weight:300;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --k = scala dell'impaginazione (1 = come nel design). Più basso = tutto più piccolo. */
.page{container-type:inline-size;max-width:1920px;margin:0 auto;background:var(--bg);--k:.85}
@media (min-width:1700px){.page{--k:.74}}

/* ---------- testata e hero ---------- */
.site-header{--u:calc(100cqw*var(--k)/1096);height:calc(106*var(--u));display:flex;align-items:center;justify-content:center}
.logo{height:calc(78*var(--u));width:auto}
/* selettore lingua IT | EN (resta nascosto finché esiste la versione inglese) */
.site-header{position:relative}
.lang{position:absolute;right:max(16px,calc(100cqw*(1 - var(--k))/2));top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.35em;
  font:300 max(12px,calc(11*var(--u)))/1 var(--font-body);letter-spacing:.14em}
.lang[hidden]{display:none}
.lang a{padding:.5em .25em;color:var(--ink);text-decoration:none;opacity:.5;transition:opacity .2s}
.lang a:hover,.lang a:focus-visible,.lang a[aria-current]{opacity:1}

.hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#8d9096}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;cursor:pointer}
/* schermi più larghi di 1920 px: il video resta a tutta larghezza ma non supera l'altezza dello schermo (taglia solo un po' sopra e sotto) */
@media (min-width:1921px){
  .hero{aspect-ratio:auto;height:min(56.25vw,calc(100vh - 137px))}
  .hero__video{object-fit:cover;object-position:50% 25%}
}
.hero__sound{position:absolute;right:max(14px,1.6%);top:max(14px,2.8%);width:44px;height:44px;padding:11px;border:1px solid rgba(255,255,255,.7);
  border-radius:50%;background:rgba(17,17,17,.35);color:var(--white);cursor:pointer;transition:background .25s}
.hero__sound:hover{background:rgba(17,17,17,.6)}
.hero__sound svg{width:100%;height:100%;display:block}
.hero__sound .i-on,.hero__sound[aria-pressed="true"] .i-off{display:none}
.hero__sound[aria-pressed="true"] .i-on{display:block}

/* ---------- sezioni a composizione libera ---------- */
.sec{position:relative;height:calc(var(--hh)*var(--u));--ox:calc(100cqw*(1 - var(--k))/2)}
.it{position:absolute;margin:0;
  left:calc(var(--x)*var(--u) + var(--ox));
  top:calc((var(--y) - var(--y0))*var(--u));
  width:calc(var(--w,0)*var(--u))}
.it:not([style*="--w"]){width:auto}
figure.it,.slider{height:calc(var(--h)*var(--u))}
figure.it img,.slider>img{width:100%;height:100%;object-fit:cover}

.bgband{position:absolute;left:0;right:0;top:calc((var(--y) - var(--y0))*var(--u));height:calc(var(--h)*var(--u))}
.bgband img{display:block;width:100%;height:100%;object-fit:cover;object-position:left center}

/* ---------- titoli ---------- */
.t,.body{z-index:2}
.t{pointer-events:none}   /* i titoli non devono coprire i click su ciò che sta sotto (es. i pallini dello slider) */
.t{font-family:var(--font-title);font-weight:400;text-transform:uppercase;white-space:nowrap;letter-spacing:.03em;
  font-size:calc(var(--fs)*var(--u)*var(--fit,1));line-height:calc(var(--lh)*var(--u));
  top:calc((var(--y) - var(--y0) - var(--fs)*.115)*var(--u))}
.t--box{top:calc((var(--y) - var(--y0))*var(--u))}
.t .l{display:block;min-height:calc(var(--lh)*var(--u))}
.bx{display:block;width:fit-content;background:var(--ink);color:var(--bg);line-height:.94;
  padding:0 var(--bpr,var(--bp,.2em)) 0 var(--bpl,var(--bp,.2em));margin-left:calc(-1*var(--bpl,var(--bp,.2em)))}
.t--band .bx{padding-block:.06em;margin-block:-.06em}   /* bande un po' più alte, senza spostare le righe */

/* ---------- testi ---------- */
.body{font-family:var(--font-body);font-weight:300;font-size:calc(1.3cqw*var(--k));line-height:1.6;letter-spacing:.13em;white-space:nowrap;color:var(--ink)}
.body--dark{color:#14110f}
/* "Il dialogo tra opposti": su desktop la fascia è scura, quindi "Tra" e il testo vanno in chiaro (su telefono stanno su fondo bianco) */
@media (min-width:801px){
  .l--lt{color:var(--bg)}
  .body--dark{color:var(--bg)}
}
.body cite{font-style:italic}
blockquote.body{margin:0}
.body{top:calc((var(--y) - var(--y0))*var(--u))}

/* ---------- slider ---------- */
.slider>img{transition:opacity .45s ease}
.slider>img{cursor:pointer}
.slider__arrow{position:absolute;top:50%;width:calc(20*var(--u));height:calc(20*var(--u));margin-top:calc(-10*var(--u));padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.72);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.slider__arrow:hover{background:#fff}
.slider__arrow svg{width:55%;height:55%}
.slider__arrow--prev{left:calc(8*var(--u))}
.slider__arrow--next{right:calc(8*var(--u))}
.slider__dots{position:absolute;left:calc(64*var(--u));top:calc(100% + 1*var(--u));display:flex}
.slider__dots button{position:relative;width:calc(14*var(--u));height:calc(14*var(--u));padding:0;border:0;background:none;cursor:pointer}
.slider__dots button::before{content:"";position:absolute;left:50%;top:50%;width:calc(3.6*var(--u));height:calc(3.6*var(--u));
  margin:calc(-1.8*var(--u)) 0 0 calc(-1.8*var(--u));border-radius:50%;background:var(--ink);opacity:.45}
.slider__dots button[aria-selected="true"]::before{opacity:1}


/* ---------- stampa / news ----------
   Sezione a flusso (non a composizione libera): le card arrivano da data/news.json.
   1 unità = 1/1600 della larghezza pagina, come nel layout di riferimento. */
.news{--u:calc(100cqw/1600);padding:calc(85*var(--u)) 0 calc(150*var(--u))}
.news[hidden]{display:none}
.news__in{width:calc(1204*var(--u));margin:0 auto}
.news__bar{height:calc(20*var(--u));background:var(--ink)}
.news__title{margin:calc(34*var(--u)) 0 0;font:400 calc(34*var(--u))/1 var(--font-title);letter-spacing:.12em;text-transform:uppercase}
.news__list{display:grid;grid-template-columns:repeat(3,calc(329*var(--u)));justify-content:space-between;
  gap:calc(90*var(--u)) 0;margin-top:calc(40*var(--u))}
.news__card{position:relative;display:flex;flex-direction:column;min-width:0}
.news__img{width:100%;aspect-ratio:1;object-fit:cover;background:#e9e9e7}
.news__head{margin:calc(21*var(--u)) 0 0;font-weight:600;font-size:max(12.5px,calc(17*var(--u)));line-height:1.3}
.news__head a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(17,17,17,.55)}
.news__head a:hover{text-decoration-color:var(--ink)}
.news__src{display:block}
.news__text{margin:1.3em 0 0;font-size:max(12.5px,calc(17*var(--u)));line-height:1.3;white-space:pre-line}
.js .news__card{animation:newsIn 1.4s var(--ease) both}
@keyframes newsIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .news__card{animation:none}}

/* ---------- footer / contatti ---------- */
.foot{background:var(--ink);color:var(--bg);overflow:hidden}
.foot__photo{position:absolute;right:0;top:0;height:100%;width:calc(197*var(--u) + var(--ox));object-fit:cover;object-position:center top;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}
.t--sm{letter-spacing:.06em}
.form{position:relative;height:calc(198*var(--u))}
.form label{display:block}
.form input:not(.hp),.form textarea{display:block;width:100%;height:calc(32*var(--u));margin:0 0 calc(9*var(--u));padding:calc(12*var(--u)) 0 0;
  background:transparent;border:0;border-bottom:calc(.8*var(--u)) solid #6f6f6d;border-radius:0;resize:none;overflow:hidden;
  color:var(--bg);font:300 calc(1.2cqw*var(--k))/1.4 var(--font-body);letter-spacing:.14em}
.form ::placeholder{color:#cfcfcd;opacity:1}
.form input:focus,.form textarea:focus{outline:none;border-bottom-color:var(--bg)}
.form button{position:absolute;right:0;top:calc(140*var(--u));padding:calc(2*var(--u)) 0;border:0;background:none;color:var(--bg);
  font:400 calc(10*var(--u))/1 var(--font-title);letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.form button:hover{text-decoration:underline}
.form__msg{position:absolute;left:0;top:calc(190*var(--u));margin:0;font-size:calc(1cqw*var(--k));letter-spacing:.08em}
.form__note{position:absolute;left:0;right:0;top:calc(163*var(--u));margin:0;font-size:max(10px,calc(.9cqw*var(--k)));line-height:1.45;letter-spacing:.04em;color:#cfcfcd}
.form__note a,.legal a{color:inherit;text-underline-offset:.2em}
.legal{margin:0;font-size:max(10px,calc(.9cqw*var(--k)));letter-spacing:.06em;color:#cfcfcd;white-space:nowrap}
.legal a{text-decoration:none}
.legal a:hover,.legal a:focus-visible{text-decoration:underline}
.hp{position:absolute;left:-9999px;opacity:0}
.social{display:flex;gap:calc(14*var(--u))}
.ic{display:block;width:calc(14*var(--u));height:calc(14*var(--u));background:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ic--instagram{--ico:url("../assets/icons/instagram.svg")}
.mail{font-size:calc(1.05cqw*var(--k));letter-spacing:.1em;text-decoration:none;white-space:nowrap}

/* ---------- foto a filo pagina ---------- */
figure.bleed-l{left:0;width:calc(var(--w)*var(--u) + var(--ox))}
.grp{position:absolute;inset:0;pointer-events:none}
.grp>*{pointer-events:auto}

/* ==========================================================
   MOVIMENTO (attivo solo con JS e senza "riduci movimento")
   Solo: titoli grandi, immagini a tutta larghezza, gruppi di foto come blocco unico.
   ========================================================== */
:root{--ease:cubic-bezier(.19,1,.22,1);--dur:2.4s}

/* titoli grandi: ogni riga scende dall'alto dentro la sua maschera */
.js h2.t:not(.t--sm) .l{clip-path:inset(-.25em -.2em -.1em -.2em)}
.js h2.t:not(.t--sm) .rv{display:block;transform:translateY(-115%);opacity:0;
  transition:transform var(--dur) var(--ease),opacity 1.1s ease;transition-delay:calc(var(--i,0)*.28s)}
.js h2.t.is-in .rv{transform:none;opacity:1}

/* immagini a tutta larghezza: si aprono dall'alto verso il basso (nessuno zoom) */
.bgband__in{position:absolute;inset:0;overflow:hidden}
.js .bgband__in{clip-path:inset(0 0 100% 0);transition:clip-path 2.6s var(--ease)}
.js .bgband.is-in .bgband__in{clip-path:inset(0)}

/* gruppi di foto e foto singole: un unico blocco che compare */
.js .grp,.js .solo{opacity:0;transform:translateY(24px);transition:opacity 1.6s ease,transform 2s var(--ease)}
.js .grp.is-in,.js .solo.is-in{opacity:1;transform:none}


/* ==========================================================
   MOBILE (fino a 800 px)
   Stessa logica del desktop: composizione scalata, coordinate dedicate
   (--mx --my --mw --mh, e --mfs/--mlh per i titoli) in index.html.
   Larghezza di riferimento 390 px; sui tablet la composizione si ferma a 520 px e resta centrata.
   ========================================================== */
@media (max-width:800px){
  .sec,.site-header{--um:calc(min(100cqw,520px)/390)}
  .sec{--ox:calc((100cqw - min(100cqw,520px))/2);height:calc(var(--mhh)*var(--um))}

  /* testata e video */
  .site-header{height:calc(64*var(--um))}
  .logo{height:calc(42*var(--um))}
  .lang{right:max(12px,calc((100cqw - min(100cqw,520px))/2 + 12px));font-size:calc(12*var(--um))}

  /* posizioni */
  .it{left:calc(var(--mx)*var(--um) + var(--ox));top:calc(var(--my)*var(--um))}
  .it[style*="--mw"]{width:calc(var(--mw)*var(--um))}
  figure.it,.slider{height:calc(var(--mh)*var(--um))}
  figure.bleed-l{left:0;width:calc(var(--mw)*var(--um) + var(--ox))}
  .bgband{top:calc(var(--my)*var(--um));height:calc(var(--mh)*var(--um))}

  /* titoli */
  .t{font-size:calc(var(--mfs)*var(--um)*var(--fit,1));line-height:calc(var(--mlh)*var(--um));
    top:calc((var(--my) - var(--mfs)*.115)*var(--um))}
  .t--box{top:calc(var(--my)*var(--um))}
  .t .l{min-height:calc(var(--mlh)*var(--um))}

  /* testi: vanno a capo da soli */
  .body{font-size:calc(13*var(--um));line-height:1.7;letter-spacing:.1em;white-space:normal;top:calc(var(--my)*var(--um))}
  .d{display:none}

  /* slider */
  .slider__arrow{width:calc(36*var(--um));height:calc(36*var(--um));margin-top:calc(-18*var(--um))}
  .slider__arrow--prev{left:calc(8*var(--um))}
  .slider__arrow--next{right:calc(8*var(--um))}
  .slider__dots{left:calc(342*var(--um)/2 - 84*var(--um));top:calc(100% + 2*var(--um))}
  .slider__dots button{width:calc(24*var(--um));height:calc(24*var(--um))}
  .slider__dots button::before{width:calc(6*var(--um));height:calc(6*var(--um));margin:calc(-3*var(--um)) 0 0 calc(-3*var(--um))}

  /* stampa / news: una card per riga */
  .news{--u:calc(min(100cqw,520px)/390);padding:calc(56*var(--u)) 0 calc(90*var(--u))}
  .news__in{width:calc(342*var(--u))}
  .news__bar{height:calc(10*var(--u))}
  .news__title{margin-top:calc(22*var(--u));font-size:calc(26*var(--u))}
  .news__list{grid-template-columns:1fr;gap:calc(56*var(--u));margin-top:calc(26*var(--u))}
  .news__head,.news__text{font-size:calc(15*var(--u))}
  .news__head{margin-top:calc(16*var(--u))}
  
  /* footer */
  .form{height:calc(330*var(--um))}
  .form input:not(.hp),.form textarea{height:calc(46*var(--um));margin-bottom:calc(8*var(--um));padding-top:calc(16*var(--um));
    font-size:calc(13*var(--um));border-bottom-width:1px}
  .form button{top:calc(226*var(--um));font-size:calc(14*var(--um))}
  .form__msg{top:calc(302*var(--um));font-size:calc(11*var(--um))}
  .form__note{top:calc(254*var(--um));font-size:calc(10.5*var(--um))}
  .legal{font-size:calc(10.5*var(--um));white-space:normal}
  .social{gap:calc(22*var(--um))}
  .ic{width:calc(24*var(--um));height:calc(24*var(--um))}
  .mail{font-size:calc(11*var(--um));top:calc(var(--my)*var(--um))}
  .foot__photo{left:0;right:auto;top:calc(700*var(--um));width:100%;height:calc(440*var(--um));object-position:center 35%;
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}
}

/* parallasse dentro le due foto grandi: l'immagine è un po' più alta del riquadro e scorre più lenta della pagina
   (valore --pp impostato da js/motion.js; ampiezza in motion.js, costante PAR) */
.js .bgband,.js figure.solo.bleed-l{overflow:hidden}
.js .bgband img[data-par],.js figure.it img[data-par]{position:absolute;left:0;top:-9%;width:100%;height:118%;
  transform:translate3d(0,var(--pp,0px),0)}