.home {
  position: relative;
  overflow: hidden;
  padding-bottom: 0px;
}


/* =========================================================
   HOME — titolo in alto + elenco progetti a righe colorate.
   Ogni riga è un link a pagina intera: titolo, anno e tag a
   sinistra, a destra la forma del progetto in bianco con
   mix-blend-mode: difference (il suo colore è sempre l'opposto
   di quello della riga).
   ========================================================= */

  
   
.home__title {
  margin: 0;
  padding: 40px var(--side-padding);
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 60px;
  line-height: 105%;
}

.home__title em {
  font-style: italic;
}

/* --- riga di progetto --- */

.project-row {
  --u: 1px; /* unità delle forme: su mobile scende e le forme si riducono insieme */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 24px;
  /* lo sfondo colorato va da bordo a bordo, ma testo e forma restano
     allineati alla colonna da 1728px come il resto del sito */
  padding-inline: max(var(--side-padding), calc((100% - var(--content-max-width)) / 2 + var(--side-padding)));
  background: var(--row-bg);
  color: #000;
  text-decoration: none;
  padding: 30px 40px 30px 40px;
}

.project-row:focus-visible {
  outline: 3px solid #000;
  outline-offset: -3px;
}

.project-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28em; /* spazio tra nome e anno */
  font-family: var(--font-serif);
  font-size: 45px;
  line-height: 90%;
  letter-spacing: -0.045em;
}

.project-row__name {
  font-style: italic;
  font-weight: 500;
}

.project-row__year {
  font-weight: 400;
}

.project-row__tags {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 120%;
  text-transform: uppercase;
}

/* --- colori delle righe --- */

.project-row--oico     { --row-bg: #ff6b00; }
.project-row--alos     { --row-bg: #C0EBC1; }
.project-row--human    { --row-bg: #05a4ff; }
.project-row--language { --row-bg: #e8e8e8; }
.project-row--torpedo  { --row-bg: #e91d1b; } 
.project-row--cibo     { --row-bg: #00ff1e; }

/* --- forma a destra: bianca + difference --- */

.project-row__shape {
  flex-shrink: 0;
  background: #ffffff;
  mix-blend-mode: difference;
}

.project-row--oico .project-row__shape {
  width: calc(34 * var(--u));
  height: calc(60 * var(--u));
}

.project-row--alos .project-row__shape {
  width: calc(60 * var(--u));
  height: calc(60 * var(--u));
}

.project-row--human .project-row__shape {
  width: calc(68 * var(--u));
  height: calc(59 * var(--u));
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.project-row--language .project-row__shape {
  width: calc(70 * var(--u));
  height: calc(35 * var(--u));
  border-radius: calc(35 * var(--u)) calc(35 * var(--u)) 0 0;
}

.project-row--torpedo .project-row__shape {
  width: calc(68 * var(--u));
  height: calc(68 * var(--u));
  /* stella a 8 punte su base quadrata */
  clip-path: polygon(
    50% 0%, 64.5% 14.9%, 85.3% 14.7%, 85.1% 35.5%,
    100% 50%, 85.1% 64.5%, 85.3% 85.3%, 64.5% 85.1%,
    50% 100%, 35.5% 85.1%, 14.7% 85.3%, 14.9% 64.5%,
    0% 50%, 14.9% 35.5%, 14.7% 14.7%, 35.5% 14.9%
  );
}

.project-row--cibo .project-row__shape {
  width: calc(70 * var(--u));
  height: calc(42 * var(--u));
}

/* --- mobile --- */

@media (max-width: 860px) {
  .home__title {
    padding: 24px var(--side-padding) 32px;
    font-size: 38px;
  }

  .project-row {
    --u: 0.7px;
    padding: 30px 40px 30px 40px;
    padding-inline: 24px
  }

  .project-row__shape{
    display: none;
}
  .project-row__tags {
    margin-top: 10px;
    font-size: 16px;
  }

  .project-row__title {
    font-size: 32px;
  }
}