:root{
  --sabbia:#D8CEBE; --sabbia-alta:#E6DFD3; --notte:#14181D; --notte-alta:#1E242B;
  --osso:#F2EEE7; --plastilina:#D9481E; --grigio:#7B7568; --inchiostro:#14181D;
  --f-display:"Archivo",system-ui,sans-serif; --f-dato:"Martian Mono",ui-monospace,monospace;
  --gutter:clamp(1.25rem,4vw,4.5rem); --max:1380px; --max-scheda:1380px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; }
body{ margin:0; background:var(--sabbia); color:var(--inchiostro);
  font-family:var(--f-display); font-size:clamp(1rem,.5vw+.9rem,1.1rem); line-height:1.55;
  font-variant-numeric:tabular-nums; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
main{ max-width:var(--max-scheda); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:clamp(3rem,7vw,6rem); }
.etichetta{
  margin:0 0 1.6rem; font-family:var(--f-dato); font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grigio);
  display:flex; align-items:center; gap:.75rem;
}
.etichetta::before{ content:""; width:1.75rem; height:1px; background:currentColor; }
.quante{ margin-left:auto; opacity:.6; }

/* ---- apertura ---- */
.apertura{ position:relative; min-height:78svh; display:grid; align-items:end;
  background:var(--notte); color:var(--osso); overflow:hidden; padding:0; }
.apertura.senza{ min-height:56svh; }
.apertura-foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:50% var(--fy, 35%);
}
@media(max-width:760px){
  .apertura-foto{ object-position:var(--fx, 50%) var(--fy, 35%); }
}
.apertura::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,24,29,.7) 0%,rgba(20,24,29,.1) 40%,rgba(20,24,29,.92) 100%); }
.apertura-testo{ position:relative; z-index:2; width:100%; max-width:var(--max); margin-inline:auto;
  padding:0 var(--gutter) clamp(2rem,6vh,4rem); }
.occhiello{ display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin:0 0 1rem;
  font-family:var(--f-dato); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.medaglia{ display:inline-flex; align-items:center; gap:.45rem; opacity:1; }
.medaglia::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--grigio); }
.medaglia.oro::before{ background:#C8962C; }
.medaglia.argento::before{ background:#9AA0A6; }
.medaglia.bronzo::before{ background:#A9713F; }
.apertura h1{ margin:0; font-weight:700; font-stretch:122%; text-transform:uppercase;
  font-size:clamp(2rem,7vw,5.2rem); line-height:.92; letter-spacing:-.04em; max-width:16ch; }
.misurona{ margin:1rem 0 0; font-weight:700; font-stretch:125%; line-height:.85;
  font-size:clamp(3.4rem,13vw,10rem); letter-spacing:-.05em; color:var(--plastilina); }
.misurona small{ font-size:.22em; margin-left:.25em; letter-spacing:0; }
.primato{ margin:.4rem 0 0; font-family:var(--f-dato); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--plastilina); }

/* ---- il corpo: racconto, video e serie in un blocco solo ---- */
.corpo{ display:grid; gap:clamp(1.5rem,3.5vw,3rem); grid-template-columns:1fr; align-items:start;
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,2.5rem); }
@media(min-width:900px){ .corpo{ grid-template-columns:minmax(0,1.5fr) minmax(18rem,.62fr); } }
.corpo.senza-serie{ grid-template-columns:1fr; }
.colonna{ display:grid; gap:clamp(1.4rem,2.6vw,2.2rem); }
.racconto p{ margin:0 0 1rem; max-width:62ch; }
.racconto p:last-child{ margin-bottom:0; }
.racconto p:first-child{ font-size:clamp(1.12rem,1.9vw,1.5rem); line-height:1.38; letter-spacing:-.018em; }
/* senza testo: video e serie affiancati, a pari altezza visiva */
.corpo.senza-testo{ align-items:stretch; }
.corpo.senza-testo .serie{ position:static; align-self:center; }
.corpo.senza-serie .video-uno.principale{ max-width:960px; width:100%; margin-inline:auto; }

.serie{ background:var(--sabbia-alta); padding:1.3rem 1.4rem 1.4rem; position:sticky; top:5.5rem; }
.serie .etichetta{ margin-bottom:.9rem; }
.salti{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.salti li{
  display:grid; grid-template-columns:1.2rem 1fr auto; align-items:center; gap:.7rem;
  padding:.42rem 0; border-top:1px solid color-mix(in srgb,var(--inchiostro) 12%,transparent);
}
.salti li:first-child{ border-top:0; }
.salti .n{ font-family:var(--f-dato); font-size:.56rem; color:var(--grigio); }
.salti .barra{ height:6px; background:color-mix(in srgb,var(--inchiostro) 8%,transparent); display:block; }
.salti .barra i{ display:block; height:100%; background:color-mix(in srgb,var(--inchiostro) 26%,transparent); }
.salti li.top .barra i{ background:var(--plastilina); }
.salti .valore{ font-weight:600; font-stretch:114%; font-size:1rem; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:.4rem; white-space:nowrap; }
.salti .valore em{ font-style:normal; font-family:var(--f-dato); font-size:.54rem; color:var(--grigio); }
.salti li.nullo .valore,.salti li.saltato .valore{
  font-family:var(--f-dato); font-weight:400; font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grigio); }
.salti li.nullo .valore{ color:var(--plastilina); }

/* ---- la pellicola -------------------------------------------------------
   La sezione resta ferma e il nastro scorre in orizzontale mentre si
   scende: un fotogramma alla volta passa al centro e si accende.        */
.pellicola{ position:relative; background:var(--notte); color:var(--osso); overflow-anchor:none; padding:0; }
.pellicola-fissa{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto;
  /* la colonna è larga quanto lo schermo, non quanto il nastro: altrimenti
     contatore e comandi allineati a destra finivano in fondo al nastro */
  grid-template-columns:minmax(0, 1fr);
  padding-block:clamp(5rem,11vh,7rem) clamp(1.2rem,3vh,2rem);
}
.pellicola-testa,.pellicola-piede{
  display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding-inline:var(--gutter);
}
.pellicola .etichetta{ margin:0; color:#9AA2AC; }
.pellicola-conta{ margin:0; font-family:var(--f-dato); font-size:.62rem; letter-spacing:.14em; color:#9AA2AC; }
.pellicola-conta span{ color:var(--osso); }
.pellicola-nastro{
  display:flex; align-items:center; gap:clamp(1rem,2.2vw,2rem);
  padding-left:calc(50vw - 30vw); padding-right:58vw;
  will-change:transform;
}
.fotogramma{
  position:relative; flex:none; padding:0; overflow:hidden; background:var(--notte-alta);
  /* l'altezza la decide il ritmo, la larghezza le proporzioni della foto */
  height:min(62vh,52vw); width:auto; aspect-ratio:3/2;
  max-width:88vw;
  opacity:.34; filter:saturate(.35);
  transform:scale(.9);
  transition:opacity .6s ease, filter .6s ease, transform .8s cubic-bezier(.16,.84,.24,1);
}
.fotogramma.f1{ height:min(74vh,60vw); }
.fotogramma.f2{ height:min(56vh,46vw); }
.fotogramma.f3{ height:min(68vh,56vw); }
.fotogramma img{ object-fit:contain; }
.fotogramma img{ width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.2s cubic-bezier(.16,.84,.24,1); }
.fotogramma.qui{ opacity:1; filter:none; transform:none; }
.fotogramma.qui img{ transform:scale(1); }
.fotogramma .numero{
  position:absolute; left:.8rem; bottom:.7rem; z-index:2;
  font-family:var(--f-dato); font-size:.55rem; letter-spacing:.12em; color:#fff;
  opacity:0; transition:opacity .4s; text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.fotogramma.qui .numero{ opacity:1; }
.pellicola-barra{ flex:1; max-width:22rem; height:1px; background:rgba(242,238,231,.2); position:relative; }
.pellicola-barra b{ position:absolute; left:0; top:-1px; height:3px; width:0; background:var(--plastilina); }
.pellicola .crediti{ margin:0; font-family:var(--f-dato); font-size:.55rem; letter-spacing:.1em;
  text-transform:uppercase; color:#9AA2AC; }

/* telefono e movimento ridotto: un nastro a scatti, niente blocco */
@media (max-width:760px), (prefers-reduced-motion: reduce){
  .pellicola{ height:auto !important; }
  .pellicola-fissa{ position:static; height:auto; grid-template-rows:auto auto auto; gap:1.2rem;
    padding-block:clamp(3rem,8vh,4.5rem); }
  .pellicola-nastro{
    transform:none !important; overflow-x:auto; padding-right:var(--gutter); scroll-snap-type:x mandatory; scrollbar-width:none;
    padding-inline:var(--gutter); scroll-padding-left:var(--gutter); gap:.7rem;
  }
  .pellicola-nastro::-webkit-scrollbar{ display:none; }
  .fotogramma,.fotogramma.f1,.fotogramma.f2,.fotogramma.f3{
    height:auto; width:84vw; max-width:84vw; aspect-ratio:auto; scroll-snap-align:start;
  }
  .fotogramma img{ height:auto; }
}

/* ---- precedente e successiva ---- */
.vicine{ display:grid; grid-template-columns:1fr; gap:1px;
  background:color-mix(in srgb,var(--inchiostro) 14%,transparent); }
@media(min-width:760px){ .vicine{ grid-template-columns:1fr 1fr; } }
.vicina{
  position:relative; min-height:clamp(14rem,28vw,22rem); display:flex; align-items:flex-end;
  padding:clamp(1.2rem,2.5vw,2rem); text-decoration:none; overflow:hidden;
  background:var(--notte); color:var(--osso);
}
.vicina.vuota{ background:var(--sabbia); }
.vicina .sfondo{
  position:absolute; inset:0; background-size:cover;
  opacity:.4; transition:transform .9s cubic-bezier(.16,.84,.24,1), opacity .4s;
}
.vicina:hover .sfondo{ transform:scale(1.06); opacity:.55; }
.vicina::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,24,29,.2),rgba(20,24,29,.85)); }
.vicina .dentro{ position:relative; z-index:2; display:grid; gap:.3rem; }
.vicina em{ font-style:normal; font-family:var(--f-dato); font-size:.54rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--plastilina); }
.vicina strong{ font-weight:600; font-stretch:114%; font-size:clamp(1.05rem,2vw,1.45rem);
  letter-spacing:-.025em; line-height:1.1; }
.vicina .riga2{ font-family:var(--f-dato); font-size:.56rem; letter-spacing:.08em; opacity:.7; }
.vicina.succ{ text-align:right; justify-content:flex-end; }
.vicina.succ .dentro{ justify-items:end; }

/* ---- video ---- */
.altri-video{ padding-block:0 clamp(2.5rem,5vw,4rem); }
.altri-video .etichetta{ margin-bottom:1rem; }
.video-griglia{ display:grid; gap:1px; grid-template-columns:1fr;
  background:color-mix(in srgb,var(--inchiostro) 14%,transparent); }
@media(min-width:820px){ .video-griglia{ grid-template-columns:repeat(2,1fr); } }
.video-uno{ margin:0; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--notte-alta); }
.video-uno img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* il riproduttore resta com'è: niente ingrandimenti per nascondere i comandi,
   i comandi sono già spenti */
.video-uno iframe{ position:absolute; inset:0; width:100%; height:100%; border:0;
  transform:none; object-fit:initial; }
.video-uno.incorporato iframe{ pointer-events:auto; }
.video-uno .play{ position:absolute; left:1rem; bottom:1rem; z-index:2; display:inline-flex;
  align-items:center; gap:.6rem; padding:.7rem 1rem; color:var(--osso);
  background:rgba(20,24,29,.75); backdrop-filter:blur(8px);
  font-family:var(--f-dato); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; text-align:left; }
.play .tri{ width:0; height:0; border-left:8px solid currentColor;
  border-top:5px solid transparent; border-bottom:5px solid transparent; flex:none; }

/* ---- lente ---- */
.lente{ position:fixed; inset:0; z-index:100; background:rgba(12,15,18,.97);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem;
  padding:clamp(1rem,4vw,3rem); }
.lente[hidden]{ display:none; }
.lente img{ grid-column:2; max-width:100%; max-height:84svh; margin-inline:auto; object-fit:contain; }
.lente button{ color:var(--osso); font-family:var(--f-dato); font-size:1rem;
  width:3rem; height:3rem; border:1px solid rgba(242,238,231,.3); display:grid; place-items:center; }
.lente button:hover{ background:var(--plastilina); border-color:var(--plastilina); }
.lente-chiudi{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); z-index:2; }
.lente-nota{ position:absolute; left:0; right:0; bottom:clamp(.8rem,2vw,1.6rem); margin:0;
  display:flex; justify-content:center; gap:1.5rem; color:rgba(242,238,231,.6);
  font-family:var(--f-dato); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; }
@media(max-width:620px){
  .lente{ grid-template-columns:1fr; }
  .lente img{ grid-column:1; }
  .lente-prec{ position:absolute; left:1rem; top:50%; }
  .lente-succ{ position:absolute; right:1rem; top:50%; }
}

/* ---- la striscia di tutte le gare, in fondo alla scheda ---- */
.striscia{ background:var(--notte); color:var(--osso); padding:clamp(2.5rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.5rem);
  border-top:1px solid rgba(244,239,230,.08); }
.striscia-testa{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
  padding-inline:var(--gutter); }
.striscia-testa .etichetta{ margin:0; }
.striscia-nastro{
  display:flex; align-items:flex-end; overflow-x:auto; overflow-y:visible;
  padding:9.5rem var(--gutter) .4rem; scrollbar-width:thin; scrollbar-color:rgba(244,239,230,.25) transparent;
  scroll-behavior:smooth;
}
.striscia-anno{ flex:none; display:grid; gap:.5rem; padding:0 1.4rem 0 .7rem;
  border-left:1px solid rgba(244,239,230,.14); }
/* centrata quando sta tutta nello schermo; quando è più lunga scorre da sinistra
   come prima (i margini automatici non tagliano l'inizio, a differenza di center) */
.striscia-anno:first-child{ margin-left:auto; }
.striscia-anno:last-child{ margin-right:auto; }
.striscia-testa{ justify-content:center; gap:1.6rem; }
.tacche{ display:flex; align-items:flex-end; gap:.32rem; height:80px; }
.tacca{
  position:relative; display:block; width:9px; height:var(--h); flex:none;
  background:rgba(244,239,230,.28); transition:background .25s, transform .25s; transform-origin:bottom;
  outline:none;
}
.tacca.m-oro{ background:rgba(198,161,91,.55); }
.tacca.m-argento{ background:rgba(169,173,178,.6); }
.tacca.m-bronzo{ background:rgba(169,113,63,.6); }
.tacca.muta{ opacity:.55; cursor:default; }
.tacca:hover,.tacca:focus-visible{ background:var(--osso); transform:scaleY(1.08); }
.tacca.qui{ background:var(--plastilina); box-shadow:0 0 0 2px var(--notte), 0 0 0 3px var(--plastilina); }
.striscia-numero{ font-family:var(--f-dato); font-size:.55rem; letter-spacing:.12em; color:var(--grigio); }

/* la scheda che appare sopra la tacca */
.tacca .info{
  position:absolute; left:50%; bottom:calc(100% + .7rem); transform:translate(-50%, 6px);
  width:13rem; padding:.55rem; background:#17171A; border:1px solid rgba(244,239,230,.12);
  display:grid; gap:.3rem; pointer-events:none; opacity:0; z-index:5;
  transition:opacity .2s, transform .2s;
}
.tacca .info img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.tacca .info b{ font-weight:500; font-size:.82rem; line-height:1.25; color:var(--osso); }
.tacca .info span{ font-family:var(--f-dato); font-size:.52rem; letter-spacing:.06em; color:var(--grigio); }
.tacca:hover .info,.tacca:focus-visible .info{ opacity:1; transform:translate(-50%, 0); }
@media(max-width:760px){
  .striscia-nastro{ padding-top:1.5rem; }
  .tacca .info{ display:none; }
}

/* una foto che porta altrove: si riconosce dal segno in alto a destra */
.fotogramma.esterno{ display:block; text-decoration:none; }
.fotogramma .fuori{
  position:absolute; right:.7rem; top:.7rem; z-index:2;
  width:2rem; height:2rem; display:grid; place-items:center;
  background:rgba(14,14,16,.72); color:var(--osso);
  font-family:var(--f-dato); font-size:.7rem;
  opacity:0; transform:translateY(-4px); transition:opacity .35s, transform .35s;
}
.fotogramma.qui .fuori, .fotogramma.esterno:hover .fuori{ opacity:1; transform:none; }

/* scaricare in alta dalla lente */
.lente-scarica{ margin-left:auto; font-family:var(--f-dato); font-size:.55rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--plastilina); text-decoration:none;
  border-bottom:1px solid rgba(198,161,91,.5); padding-bottom:2px; }
.lente-scarica:hover{ color:var(--osso); border-color:var(--osso); }
.lente-nota{ display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }