/* prima schermata: solo il logo, che poi si aggancia alla barra */
/* risale sotto la barra: con l'intestazione trasparente il video deve
   arrivare fino in cima, altrimenti li' si vedrebbe il fondo nero */
.landing { height:100vh; margin-top:-56px; position:relative; overflow:hidden;
  background:var(--black); }
.landing-video { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
/* in verticale un 16:9 tagliato lascerebbe vedere solo una striscia
   centrale: meglio mostrarlo intero, per la sua larghezza */
/* velo scuro in basso: WORKS e' bianco e sotto scorre il video */
.landing::after { content:''; position:absolute; left:0; right:0; bottom:0; height:220px;
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); pointer-events:none; }
.works {
  position:absolute; left:24px; bottom:26px; z-index:2;
  font-size:clamp(34px,7vw,86px); font-weight:800; letter-spacing:-0.02em;
  line-height:0.9; text-transform:uppercase;
  color:var(--white); transition:color 160ms ease, opacity 120ms linear;
}
.works:hover { color:var(--red); }
@media (max-width:900px) { .works { left:16px; bottom:20px; } }

.grid { display:grid; grid-template-columns:repeat(3,1fr);
  gap:40px 24px; padding:0 24px 80px; align-items:start; }
.card { position:relative; display:block; }
.card-media { position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ink); }
.card-img, .card-hover { width:100%; height:100%; object-fit:cover; }
.card-img { transition:transform 480ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease; }
.card:hover .card-img { transform:scale(1.03); }
.card-hover { position:absolute; inset:0; opacity:0;
  transition:opacity 200ms ease; pointer-events:none; }
.card.playing .card-hover { opacity:1; }
.card-info { padding:14px 0 0; display:grid; gap:6px; }
.card-title { font-size:22px; font-weight:800; letter-spacing:-0.02em;
  line-height:1; text-transform:uppercase; color:var(--white);
  transition:color 160ms ease; }
.card:hover .card-title { color:var(--red); }
.card-meta { font-size:10px; font-weight:700; letter-spacing:normal;
  text-transform:uppercase; color:var(--muted); }
.card-tags .chip { margin-right:10px; }
.card[hidden] { display:none; }
.empty { padding:60px 24px 90px; color:var(--muted);
  font-size:11px; font-weight:700; letter-spacing:normal; text-transform:uppercase; }
@media (max-width:900px) {
  .grid { grid-template-columns:repeat(2,1fr); }
  .grid, }
@media (max-width:560px) {
  /* due colonne anche sul telefono: a piena larghezza non era piu' una griglia */
  .grid { grid-template-columns:repeat(2,1fr); gap:22px 12px; padding:0 12px 60px; }
  .card-title { font-size:15px; }
  .card-meta { font-size:8px; letter-spacing:normal; }
  .card-tags { display:none; }
}
@media (max-width:760px) { .card-hover { display:none; } }
@media (prefers-reduced-motion:reduce) { .card-hover { display:none; } }
@media (max-width:760px) {
  /* niente schermata alta quanto il viewport: il video sta in alto alla sua
     altezza naturale e WORKS gli va subito sotto, senza vuoto nero */
  .landing { height:auto; overflow:visible; }
  .landing-video { position:static; width:100%; height:auto;
    aspect-ratio:16/9; object-fit:cover; }
  .landing::after { display:none; }
  .works { position:static; display:block; padding:16px 16px 4px;
    font-size:clamp(30px,11vw,46px); }
}