*, *::before, *::after { box-sizing: border-box; }

    :root{
      --bg:#000;
      --fg:#fff;
      --muted:rgba(255,255,255,.4);
      --pad: clamp(14px, 2.2vw, 28px);
      --gap:4px;
      /*--section-pad: 24px;    vertical rhythm between sections */
      /*--section-pad-m: 16px;  mobile vertical rhythm */
      --font:"Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --ff-display: "Funnel Display", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      --t20:clamp(14px,1.05vw,20px);
      --t96:clamp(44px,4.8vw,96px);
      --lh23:23px;
      --lh110:110.4px;
    }

    html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);overflow-x:hidden;}
    html{
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

    /* Small privacy notice */
    .privacy-note{
      position: fixed;
      right: clamp(10px, 2vw, 24px);
      bottom: clamp(10px, 2vw, 24px);
      max-width: 320px;
      background: rgba(0,0,0,.85);
      color: var(--fg);
      border: 1px solid rgba(255,255,255,.15);
      padding: 12px 14px;
      font-size: 12px;
      line-height: 1.4;
      z-index: 9999;
      backdrop-filter: blur(6px);
    }
    .privacy-note__actions{
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .privacy-note__btn{
      font-size: 12px;
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.4);
      background: transparent;
      color: var(--fg);
      cursor: pointer;
    }
    .privacy-note__btn:hover{
      background: rgba(255,255,255,.08);
    }

    /* Consistent vertical rhythm */
    header.hero{margin-bottom: var(--section-pad); overflow: visible;}
    section{margin: 0;}
    section + section{margin-top: var(--section-pad);} /* equal spacing between all sections */

    /* Full-bleed media blocks already have internal 4px frame; keep outer spacing consistent */
    .bleed.frame,
    .bleed.panel,
    .bleed{margin-top: 0;}

    /* Caption spacing should match the global rhythm and align with frames */
    .caption{padding-top: 0; padding-bottom: 0;}

    img{width:100%;display:block;}
    video{width:100%;height:auto;display:block;}
    .hero-video{width:100%;height:auto;display:block;}
    .hero-video--narrow{
      width:min(820px, 72vw);
      aspect-ratio: 4 / 5;
      object-fit: cover;
      margin: 0 auto;
    }

    .bleed{
      width:100%;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      transform:none;
    }
    .frame{padding:var(--gap);background:#000;}
    .grid-frame{
      display: block;
      width: 100%;
      padding: 0;
      background: transparent;
      overflow: hidden;
    }

    /* ---------------- NAVBAR ---------------- */
    .nav{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      z-index:9999;
      background:transparent;
      border-bottom:0;
      height:auto;
      pointer-events:none;
    }
    .nav__inner{
      height:auto;
      max-width:1240px;
      margin:0 auto;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:0 var(--pad);
      text-align:center;
    }
    .nav__title{
      font-family:var(--ff-display);
      font-weight:800;
      font-size:clamp(34px, 6vw, 96px);
      line-height:1.15;
      letter-spacing:.02em;
      color:var(--fg);
      text-transform:uppercase;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      margin-top:0;
      pointer-events:auto;
      text-decoration:none;
    }

    /* ---------------- HEADER ---------------- */
    .hero{
      position:relative; overflow: visible;
    }
    .hero-topmark{
      position: fixed;       /* stays visible across the whole page */
      top: 10px;
      left: 10px;
      font-size: var(--t96);
      font-weight: 800;
      line-height: var(--lh110);
      z-index: 9999;
      pointer-events: auto;  /* clickable */
      cursor: pointer;
      display: inline-block;
      color: var(--fg);
      text-decoration: none;
    }
    .hero-topmark:hover{
      text-decoration: none;
    }
    .hero-meta{padding:110px 10px 24px;}

    .meta-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:80px;
    }

    .label{
      color:var(--muted);
      font-size:var(--t20);
      text-transform:uppercase;
      line-height:var(--lh23);
    }

    .value{
      font-size:var(--t20);
      line-height:var(--lh23);
      margin-top:6px;
    }

    .press-awards{
      margin-top:18px;
      font-size:var(--t20);
      text-transform:uppercase;
      line-height:var(--lh23);
    }
    .press-awards a{
      color: inherit;
      text-decoration: none;
    }

    .press-awards a:hover{
      text-decoration: underline;
    }


    /* ---------------- TEXT BANDS ---------------- */
    .caption{
      padding: 14px 10px;
      font-size: var(--t20);
      text-transform: uppercase;
      line-height: var(--lh23);
    }

    .text-left{
    max-width:1266px;
    text-indent: 0;
    }
    .text-right{
    max-width:1266px;
    margin-left:auto;
    text-indent: 0;
    }

    @media (min-width: 992px){
    .text-left,
    .text-right{
    text-indent: 200pt;
    }
    }

    /* ---------------- MEDIA ---------------- */
    .grid-3{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap: 8px;
      padding:0;
      background:#000;
    }

    
    .grid-3equal{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* tutte uguali */
    gap: 8px;
    background: #000;
    }

    .grid-3equal img{
      width:100%;
      height:100%;
      aspect-ratio: 16 / 9;  /* stessa altezza, look cinematografico */
      object-fit: cover;
      display:block;
      background:#000;
    }

    .grid-3-tall{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* tutte uguali */
    gap: 8px;
    background: #000;
    }

    .grid-3-tall img,
    .grid-3-tall video{
      width:100%;
      height:100%;
      aspect-ratio: 9 / 16 ;  /* stessa altezza, look cinematografico */
      object-fit: cover;
      display:block;
      background:#000;
    }

    .grid-3-imgs{
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* tutte uguali */
      gap: 8px;
      background: #000;
      align-items: stretch;
    }

    .grid-3-item{
      aspect-ratio: 14 / 16;  /* stessa altezza, look cinematografico */
      background:#000;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .grid-3-imgs img,
    .grid-3-imgs video{
      width:100%;
      height:100%;
      object-fit: contain;
      display:block;
      background:#000;
    }

    /* 3 immagini: sinistra grande, centro stretta, destra grande */
    .grid-cover-3{
      display: grid;
      grid-template-columns: 1fr minmax(36px, 4vw) 1fr; /* dorso più stretto → laterali più larghe */
      gap: 0;                 /* tighter gap between the 3 images */
      align-items: stretch;
    }

    /* stesse altezze + crop pulito */
    .grid-cover-3 img{
      width: auto;          /* ⬅️ NON 100% */
      height: 100%;         /* ⬅️ TUTTE prendono l’altezza del box */
      max-width: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
      margin: auto;         /* centra orizzontalmente */
      background: #000;
    }

    /* se vuoi fissare un “taglio” identico e stabile (consigliato) */
    .grid-cover-3{
      aspect-ratio: 16 / 10;    /* cambia se vuoi: 3/2, 4/3, ecc. */
    }

    .grid-50{
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 8px;
      padding: 0;
      background: #000;
      align-items: stretch; /* forces equal column height */
    }

    .grid-50 img,
    .grid-50 video{
      width: 100%;
      height: 100%;           /* critical: same height */
      object-fit: cover;      /* crop instead of stretching */
    }

    .grid-65-35{
      display: grid;
      grid-template-columns: 65% 35%;
      gap: 8px;
      padding: 0;
      background: #000;
      align-items: stretch; /* forces equal column height */
    }

    .grid-65-35 img,
    .grid-65-35 video{
      width: 100%;
      height: 100%;           /* critical: same height */
      object-fit: cover;      /* crop instead of stretching */
    }

    .grid-35-65{
      display: grid;
      grid-template-columns: 35% 65%;
      gap: 8px;
      padding: 0;
      background: #000;
      align-items: stretch; /* forces equal column height */
    }

    .grid-35-65 img,
    .grid-35-65 video{
      width: 100%;
      height: 100%;           /* critical: same height */
      object-fit: cover;      /* crop instead of stretching */
    }

    .grid-60-40{
      display: grid;
      grid-template-columns: 55% 45%;
      gap: 8px;
      padding: 0;
      background: #000;
      align-items: stretch; /* forces equal column height */
    }

    .grid-60-40 img{
      width: 100%;
      height: 100%;           /* critical: same height */
      object-fit: cover;      /* crop instead of stretching */
    }

    .panel.orange{background:#E74516;}
    .panel.green{background:#B5BC2C;}

    /* ---------------- FOOTER ---------------- */
    footer{padding:40px 10px;}
    .footer-grid{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:end;
    }
    .footer-grid div{text-transform:uppercase;font-size:var(--t20);}
    .center{text-align:center;}
    .muted{color:var(--muted);}
    .muted a{
      color: inherit;
      text-decoration: none;
    }

    .muted a:hover{
      text-decoration: underline;
    }

    /* Footer video links styling */
    .footer-grid .center a{
      font-family: var(--font);
      font-size: var(--t20);
      text-transform: uppercase;
      color: var(--fg);
      text-decoration: none;
    }

    .footer-grid .center a:hover{
      text-decoration: underline;
    }

    .footer-next{
      color: var(--fg);
      text-decoration: none;
      text-transform: uppercase;
      font-size: var(--t20);
      position: fixed;
      bottom: max(12px, env(safe-area-inset-bottom, 0px));
      z-index: 9999;
    }

    /* Sticky bottom bar behind prev/next links */
    body::after{
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(var(--t20) + 22px);
      background: #000;
      z-index: 9990;
      pointer-events: none;
    }

    @media (max-width: 899px){
      body::after{
        display: none;
      }
      .footer-next{
        bottom: max(6px, env(safe-area-inset-bottom, 0px));
      }
    }
    .footer-grid > div:first-child .footer-next{
      left: 10px;
    }
    .footer-grid > div:last-child .footer-next{
      right: 10px;
    }

    .footer-next:hover{
      text-decoration: underline;
    }


    /* ---------------- MOBILE ---------------- */
    @media(max-width:991px){
      /* Prevent SC from covering header content on mobile */
      .hero-topmark{
        font-size: clamp(28px, 10vw, 44px);
        line-height: 1;
        top: 8px;
        left: 10px;
      }

      .hero-meta{
        padding-top: 72px; /* creates room under SC */
      }

      .grid-cover-3{
        grid-template-columns: 1fr;
        aspect-ratio: auto;
      }

      .grid-cover-3 img{
        height: auto;
      }

      /* opzionale: il dorso più “compatto” su mobile */
      .grid-cover-3 img:nth-child(2){
        max-height: 240px;
        object-fit: cover;
      }
    

      .hero-meta{padding:72px 10px 10px;}
      /* .hero-topmark{position:static;padding:10px;} */
      .meta-grid{grid-template-columns:1fr;gap:18px;}
      .grid-3,.grid-50,.grid-65-35,.grid-35-65{grid-template-columns:1fr;}
      .footer-grid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "center center"
          "prev next";
        align-items: end;
        gap: 20px;
      }

      /* map the three footer children to the grid areas */
      .footer-grid > div:nth-child(1){ grid-area: prev; text-align: left; }
      .footer-grid > div:nth-child(2){ grid-area: center; text-align: center; }
      .footer-grid > div:nth-child(3){ grid-area: next; text-align: right; }

      .press-awards a{
        text-decoration: underline;
      }

      .muted{
        text-decoration: underline;
      }

      .footer-grid .center a{
        text-decoration: underline;
      }

      .footer-next{
        text-decoration: underline;
      }

      header.hero{margin-bottom: var(--section-pad-m);} 
      section + section{margin-top: var(--section-pad-m); } 
    }


    

/* ===== ACCESSIBILITÀ / SEO =====
   Titolo del progetto presente per crawler e screen reader, non a schermo. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}