.project-intro {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px; /* gutter tra le 5 colonne */
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: 30px var(--side-padding) 30px;
}

.project-intro__title-block {
  grid-column: 1 / 3;
}

.project-intro__description {
  grid-column: 3 / 6;
}

.project-intro__title-block .project-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 55px;
  line-height: 90%;
  letter-spacing: -2px;
}

.project-intro__title-block .project-year {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 55px;
  line-height: 90%;
  letter-spacing: -1px;
}

.project-intro__title-block .project-tags {
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.project-intro__description {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 135%;
  font-weight: 350;
  max-width: 68ch;
}

/* box immagine standard usato per l'hero e per le altre foto del case study:
   il rapporto 54/25 dà 800px di altezza esattamente quando il box è largo 1728px
   (la larghezza massima del frame) — sotto quella soglia scala in proporzione */
.project-hero {
  max-width: var(--content-max-width);
  margin-inline: auto;
  aspect-ratio: 54 / 25;
  background: var(--black);
  overflow: hidden;
}

.project-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* blocco video 16:9 — funziona sia con <img> (es. una GIF/preview)
   sia con <video> o <iframe> (YouTube/Vimeo embeddato) */
.project-video {
  position: relative;
  max-width: var(--content-max-width);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--black);
  overflow: hidden;
}
 
.project-video img,
.project-video video,
.project-video iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: none;
}
 
.sound-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(13, 13, 13, 0.6);
  color: var(--white);
  backdrop-filter: blur(4px);
}
 
.sound-toggle:hover {
  background: rgba(13, 13, 13, 0.8);
}
 
/* di default il video è muto: mostro l'icona "audio disattivato"
   e nascondo quella "audio attivo" */
.sound-toggle .icon-unmuted {
  display: none;
}
 
/* quando il video ha l'audio attivo, JS aggiunge questa classe al pulsante */
.sound-toggle.is-unmuted .icon-muted {
  display: none;
}
 
.sound-toggle.is-unmuted .icon-unmuted {
  display: block;
}

@media (max-width: 860px) {
  .project-intro {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 40px;
  }

  .project-intro__title-block,
  .project-intro__description {
    grid-column: 1 / -1;
  }

  /* su mobile il rapporto 54/25 è troppo basso e schiaccia l'immagine:
     passa a un formato più verticale */
  .project-hero {
    aspect-ratio: 4 / 3;
  }
}



/* =========================================================
   CURSORE CUSTOM PER PAGINA — versione "a fusione" (difference)
   Non usiamo più cursor: url() (il cursore di sistema non
   supporta mix-blend-mode). Al suo posto, un <div class="cursor-dot">
   vero e proprio segue il mouse via JS (vedi script.js) e si
   "fonde" con quello che ha sotto grazie a mix-blend-mode: difference.
   Aggiungi <div class="cursor-dot" aria-hidden="true"></div> subito
   dopo il tag <body class="page-...">.
   ========================================================= */
 
[class*="page-"] {
  cursor: none; /* nascondiamo la freccia di sistema: la sostituisce il div */
}
 
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  background: white; /* con mix-blend-mode: difference il colore esatto conta poco: */
  mix-blend-mode: difference; /* si "inverte" rispetto a ciò che ha sotto */
  pointer-events: none; /* non deve mai intercettare i click */
  z-index: 9999;
  transform: translate(-50%, -50%); /* centra la forma sul punto del mouse */
}
 
/* OICO — rettangolo verticale, stesso rapporto della card (219.6 × 380.7) */
.page-oico .cursor-dot {
  width: 19px;
  height: 30px;
}
 
/* ALOS — rettangolo quasi quadrato, rapporto 57/65 come la card (262.8 × 299.7) */
.page-alos .cursor-dot {
  width: 28px;
  height: 28px;
}
 
/* HUMAN IMPACT — triangolo equilatero */
.page-human-impact .cursor-dot {
  width: 28px;
  height: 24px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
 
/* IN CIBO VERITAS — rettangolo largo */
.page-in-cibo-veritas .cursor-dot {
  width: 30px;
  height: 18px;
}
 
/* LANGUAGE — emisfera: tonda sopra, piatta sotto, rapporto esatto 2:1 (407.7 × 203.85) */
.page-language .cursor-dot {
  width: 32px;
  height: 16px;
  border-radius: 16px 16px 0 0;
}
 
/* TORPEDO — stella a 8 punte su base quadrata */
.page-torpedo .cursor-dot {
  width: 28px;
  height: 28px;
  background-color: #ffffff; /* Scegli il colore che preferisci */
  clip-path: polygon(
    50% 0%, 64.64% 14.64%, 
    85.36% 14.64%, 85.36% 35.36%, 
    100% 50%, 85.36% 65.36%, 
    85.36% 85.36%, 64.64% 85.36%, 
    50% 100%, 35.36% 85.36%, 
    14.64% 85.36%, 14.64% 65.36%, 
    0% 50%, 14.64% 35.36%, 
    14.64% 14.64%, 35.36% 14.64%
  );
}

/* forma: freccina. Il margine sposta la PUNTA della freccia esattamente
   sul punto del mouse (lo script centra il box sul puntatore, il margine
   compensa di metà larghezza/altezza) */
.page-home .cursor-dot,
.page-about .cursor-dot {
  width: 20px;
  height: 20px;
  border-radius: 16px;
}
 
/* su touch (telefoni/tablet) non c'è un puntatore da seguire */
@media (pointer: coarse) {
  .cursor-dot {
    display: none;
  }
 
  [class*="page-"] {
    cursor: auto;
  }
}
 
/* su touch (telefoni/tablet) non c'è un vero puntatore da seguire:
   nascondiamo il div e ripristiniamo il comportamento normale */
@media (pointer: coarse) {
  .cursor-dot {
    display: none;
  }
 
  [class*="page-"] {
    cursor: auto;
  }
}
 
@media (max-width: 860px) {
  .project-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px var(--side-padding) 24px;
  }
 
  .project-intro__title-block,
  .project-intro__description {
    grid-column: 1 / -1;
  }

  .project-intro__title-block .project-title{
    font-size: 45px;
  }

  .project-intro__title-block .project-year{
    font-size: 45px;
  }
 
 
  .project-hero {
    aspect-ratio: 5 / 3;
  }

.project-intro__description{
 font-family: var(--font-sans);
  font-size: 16px;
  line-height: 135%;
  font-weight: 350;
  max-width: 68ch;
}

}

.project-hero {
  margin-bottom: -1px;
  margin-left: -1px;
}