/* ============================================================
   Padiglione Venezia — stili condivisi (da Figma "Echo design")
   Font: repo /fonts (Libertinus Mono per i display, Geist Mono per i testi piccoli)
   ============================================================ */

@font-face{
  font-family:"Libertinus Mono";
  src:url("fonts/LibertinusMono-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("fonts/GeistMono-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"PP Fraktion Mono";
  src:url("fonts/PPFraktionMono-Regular.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --cream:#f2efe6;
  --white:#ffffff;
  --echo-green:#374543;   /* sfondo sezione Echo (Figma, rev. luglio) */
  --mono-body:"Geist Mono", ui-monospace, monospace;
  --mono-small:"Geist Mono", ui-monospace, monospace;
  --serif-mono:"Libertinus Mono", "Courier New", monospace;
  --fraktion-mono:"PP Fraktion Mono", "Courier New", monospace;
  /* colore del testo quando un bottone/link outline si riempie di bianco:
     le pagine Echo lo sovrascrivono con il verde della sezione */
  --cta-ink:#12222e;
}

*{margin:0; padding:0; box-sizing:border-box;}

body{
  font-family:var(--mono-body);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
}

.container{
  width:min(960px, calc(100% - 64px));
  margin:0 auto;
}

.container-full{
  width:min(1350px, calc(100% - 64px));
  margin:0 auto;
}

.font-weight-normal {
  font-weight: 400;
}

/* ===== Nav ===== */
.site-nav{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:22px 32px 0;
  z-index:5;
}
.site-nav a, .site-nav span{
  color:var(--white); text-decoration:none;
  font-size:14px; letter-spacing:1px; line-height:18px;
}
.site-nav a:hover{text-decoration:underline;}
.site-nav span{cursor:default;}
.site-nav a.active{text-decoration:underline; text-underline-offset:4px;}
.site-nav .links{display:flex; gap:32px; flex-wrap:wrap; justify-content:flex-end;}
.nav-toggle{display:none;}

/* ===== Hamburger (solo mobile) ===== */
@media (max-width:1200px){
  .site-nav{align-items:center;}
  /* vince anche su regole tipo .page > * { z-index:1 } delle singole pagine */
  .site-nav.open{z-index:1000;}
  .site-nav > a{position:relative; z-index:102;}
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px;
    background:none; border:0; padding:0 4px; cursor:pointer;
    position:relative; z-index:102;
  }
  .nav-toggle span{
    display:block; width:22px; height:1.5px;
    background:var(--white);
    transition:transform .3s, opacity .3s;
  }
  .site-nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .site-nav.open .nav-toggle span:nth-child(2){opacity:0;}
  .site-nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .site-nav .links{display:none;}
  .site-nav.open .links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    /* annulla il flex-end della regola desktop: in colonna spingerebbe le voci in basso */
    justify-content:flex-start;
    position:fixed; inset:0; z-index:101;
    background:rgba(10,14,13,.96);
    padding:104px 32px 40px;
  }
  .site-nav.open .links a,
  .site-nav.open .links span{
    font-size:15px; letter-spacing:1.5px; line-height:1;
    padding:16px 0;
  }
  .site-nav.open .links span{opacity:.45;}

  /* Cambio macro-sezione (Padiglione Venezia ⇄ Echo): subito dopo
     le voci del menu, separato da una riga e reso evidente come
     azione di livello diverso */
  .site-nav.open .links a.switch{
    margin-top:56px;
    position:relative;
    padding:18px 20px;
    border:1px solid var(--white);
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; letter-spacing:2.2px; text-transform:uppercase;
  }
  .site-nav.open .links a.switch::before{
    content:""; position:absolute; top:-36px; left:0; right:0;
    height:1px; background:rgba(255,255,255,.35);
  }
  .site-nav.open .links a.switch::after{
    content:"Change section";
    position:absolute; top:-24px; left:0;
    font-size:9px; letter-spacing:2px; text-transform:uppercase;
    opacity:.6;
  }
  .site-nav.open .links a.switch:hover{
    text-decoration:none; background:var(--white); color:var(--cta-ink);
  }
}

/* ===== Body copy ===== */
.body-copy{font-size:14px; line-height:24px;}

/* ===== Sfondo video fisso (parallasse: il video resta fermo, il contenuto scrolla) =====
   Leggermente sovradimensionati oltre il viewport: su iOS Safari lo scroll
   "elastico" oltre i bordi della pagina espone un'area che altrimenti
   mostrerebbe lo sfondo del body invece del video. */
.echo-bg-video{
  position:fixed;
  top:-10%; left:-10%;
  width:120%; height:120%;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
}
/* Nasconde l'icona nativa di play che Safari/WebKit disegna sul video
   quando l'autoplay viene bloccato (es. iOS Low Power Mode), in attesa
   che bg-video.js nasconda l'intero elemento. */
.echo-bg-video::-webkit-media-controls-start-playback-button{
  display:none !important;
  -webkit-appearance:none;
  pointer-events:none;
}
.echo-bg-overlay{
  position:fixed;
  top:-10%; left:-10%;
  width:120%; height:120%;
  background:rgba(0,0,0,.25);
  z-index:-1;
  pointer-events:none;
}

.pavillion-bg {
  background:#3c3c3b url("assets/back-pages.jpg") center top / cover no-repeat;
}

/* ===== Video / media con play ===== */
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0);
  border:1.5px solid var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.play-btn svg{display:block; margin-left:3px;}

/* ===== CTA ===== */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  width:250px; height:50px;
  border: 1.5px solid rgba(255, 255, 255, 255);
  color:var(--white); text-decoration:none;
  font-family:var(--mono-small);
  font-size:14px;
  transition:background .25s, color .25s;
}
.cta:hover{background:rgba(255,255,255,.5); color:rgba(255,255,255,255);}
/* CTA senza pagina di destinazione: stesso look, nessuna interazione */
span.cta{cursor:default;}
span.cta:hover{background:transparent; color:var(--white);}

/* ===== Lettering "Venice Pavilion" ===== */
.venice{padding-top:160px;}
.venice img{display:block; width:100%; max-width:960px; height:auto;}

/* ===== Footer Echo (Figma frame "footer", rev. luglio 2026) =====
   Presente su tutte le pagine della sezione Echo.
   Tutti i loghi sono SVG esportati dal Figma (assets/footer/). */
.echo-footer{
  background:#000;   /* footer sempre su nero, tutta la sezione Echo (Figma) */
  padding:80px 0 24px;
}
.echo-footer img{display:block;}
.echo-footer .f-top{
  display:flex; justify-content:space-between; align-items:flex-start;
}
.echo-footer .f-venezia{width:79px; height:auto;}
.echo-footer .f-biennale{width:177px; height:auto;}
.echo-footer .f-label{
  font-family:var(--mono-small);
  font-size:9.6px; line-height:16px; letter-spacing:.5px;
  color:var(--white);
  margin-top:80px;
}
.echo-footer .f-bper{height:80px; width:auto; margin-top:16px;}
.echo-footer .f-sponsors{
  display:flex; align-items:flex-end; gap:44px;
  height:99px; margin-top:40px;
}
.echo-footer .f-sponsors .f-col{
  display:flex; flex-direction:column;
  justify-content:space-between; align-items:flex-start;
  height:100%;
}
.echo-footer .f-sponsors .f-col .f-label{margin-top:0;}
.echo-footer .f-sponsors .f-divider{
  width:1px; align-self:stretch; margin-top:14px;
  background:rgba(255,255,255,.6);
}
.echo-footer .f-hfarm{height:55px; width:auto;}
.echo-footer .f-cisco{height:51px; width:auto;}
.echo-footer .f-fondaco{height:26px; width:auto;}
.echo-footer .f-strip{margin-top:16px; height:auto;}
.echo-footer .f-strip.istituzionali{width:100%;}
.echo-footer .f-strip.tecnici{width:79.1%;} /* 759.5/960: i loghi finiscono prima del bordo */
.echo-footer .meta{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  margin-top:64px;
  font-family:var(--mono-small);
  font-size:9.6px; line-height:15.4px;
}
.echo-footer .meta a{color:var(--white); text-decoration:none;}
.echo-footer .meta a:hover{text-decoration:underline;}

@media (max-width:900px){
  .echo-footer{padding:56px 0 24px;}
  .echo-footer .f-venezia{width:58px;}
  .echo-footer .f-biennale{width:128px;}
  .echo-footer .f-label{margin-top:56px;}
  .echo-footer .f-bper{height:64px;}
  .echo-footer .f-sponsors{gap:28px;}
  .echo-footer .f-hfarm{height:46px;}
  .echo-footer .f-cisco{height:43px;}
  .echo-footer .f-fondaco{height:22px;}
  .echo-footer .f-strip.tecnici{width:100%;}
  .echo-footer .meta{margin-top:48px;}
}


@media (max-width:900px){
  .site-nav .links{gap:16px;}
  .venice{padding-top:120px;}
}