/* Alessio Valori CCS — foglio di stile unico.
   Le sezioni prendono i colori da --bg e --fg, impostati nell'HTML. */

:root{
  --nero:#000;
  --display:"Archivo Black","Helvetica Neue",Arial,sans-serif;
  --testo:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(16px,3.2vw,40px);
  --gap:clamp(6px,0.9vw,12px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--nero);color:#fff;font-family:var(--testo);
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- barra in alto ---------- */
.bar{position:sticky;top:0;z-index:50;background:var(--nero);
     display:flex;align-items:center;justify-content:space-between;
     gap:16px;padding:0 var(--gutter);min-height:72px;flex-wrap:wrap}
.logo{font-family:var(--display);font-size:clamp(15px,2.2vw,25px);
      letter-spacing:.055em;color:#fff;text-decoration:none;padding:16px 0}
.bar nav{display:flex;gap:clamp(18px,2.6vw,34px);align-items:baseline;
         font-size:clamp(14px,1.4vw,17px);padding-bottom:4px}
.bar nav a{color:#fff;text-decoration:none;padding:12px 0;display:inline-block}
.bar nav a.on{text-decoration:underline;text-underline-offset:6px}
.bar nav a:hover{opacity:.7}

/* ---------- hero ---------- */
.hero{background:var(--nero)}
.hero img{width:100%;height:clamp(220px,42vw,520px);object-fit:cover}
.hero h1{margin:0;padding:clamp(28px,5vw,64px) var(--gutter) clamp(40px,6vw,88px);
         font-family:var(--display);font-size:clamp(44px,9.4vw,140px);
         line-height:.96;letter-spacing:-.02em;color:#fff}

/* ---------- sezione progetto ---------- */
.proj{background:var(--bg);color:var(--fg)}
.wrap{padding:clamp(48px,6.6vw,96px) var(--gutter) 0}
.proj .wrap:last-child{padding-bottom:clamp(56px,11vw,168px)}

.meta{display:grid;grid-template-columns:42fr 58fr;gap:clamp(24px,3vw,44px);
      align-items:start}
.meta h2,.meta .title{margin:0;font-family:var(--display);
      font-size:clamp(26px,4.2vw,52px);line-height:1.06}
.meta .left{display:flex;flex-direction:column;gap:clamp(16px,2.2vw,34px)}
.meta .right{display:flex;flex-direction:column;gap:clamp(14px,1.9vw,30px)}
.meta .right p{margin:0;font-family:var(--display);
      font-size:clamp(16px,2.6vw,34px);line-height:1.16}

/* striscia di quattro fotogrammi */
.strip{margin-top:clamp(40px,7.6vw,120px);
       display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.slot{width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover}
.slot.empty{border:2px dashed currentColor;opacity:.45}

.role{margin:clamp(28px,3.4vw,46px) 0 0;text-align:center;
      font-size:clamp(15px,1.5vw,19px);font-style:italic;font-weight:600}
.proj[style*="#000000"] .role,.proj[style*="#3d3d3d"] .role,
.proj[style*="#7f7f7f"] .role{color:#fff}

.poster{margin-top:clamp(32px,4vw,52px);display:flex;justify-content:center}
.poster img{width:min(736px,100%);height:auto}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;padding:clamp(28px,4.4vw,70px) 0 clamp(24px,3.5vw,56px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent)}
.track{display:flex;width:max-content;animation:scorri 34s linear infinite}
.track span{padding-right:clamp(48px,9vw,120px);white-space:nowrap;
            font-family:var(--display);font-size:clamp(14px,1.7vw,22px)}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}}

/* ---------- piede ---------- */
footer{background:var(--nero);padding:clamp(40px,6vw,80px) var(--gutter);
       display:flex;justify-content:flex-end}
.up{font-family:var(--display);font-size:18px;color:#fff;text-decoration:none;
    padding:14px 18px;border:2px solid #fff;min-height:44px;display:inline-flex;
    align-items:center}
.up:hover{background:#fff;color:#000}

/* ---------- contatti ---------- */
body.dark{background:var(--nero)}
.contatti .wrap{padding:clamp(40px,6vw,80px) var(--gutter) clamp(64px,10vw,140px)}
.contatti h1{margin:0 0 clamp(32px,4.6vw,56px);font-family:var(--display);
      font-size:clamp(46px,10vw,112px);line-height:.98;letter-spacing:-.015em}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
       gap:clamp(24px,3vw,40px)}
.cards>div{display:flex;flex-direction:column;gap:12px}
.lab{font-family:var(--display);font-size:16px;color:#8c8c8c}
.big{font-family:var(--display);font-size:clamp(17px,2vw,24px);color:#fff;
     text-decoration:none;min-height:44px;display:flex;align-items:center;
     gap:12px;word-break:break-word}
.big:hover{opacity:.7}
.big.todo{color:#8c8c8c}
.wa svg{flex:none}

/* ---------- adattamento a schermi stretti ---------- */
@media (max-width:900px){
  .meta{grid-template-columns:1fr;gap:20px}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr}
}
@media (max-width:520px){
  .bar{min-height:64px}
  .strip{grid-template-columns:1fr}
}

.solo{margin-top:clamp(40px,7.6vw,120px);display:flex;justify-content:center;padding:0 var(--gutter)}
.solo img{width:min(480px,72%);height:auto}

/* striscia a tre riquadri */
.strip.tre{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.strip.tre{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.strip.tre{grid-template-columns:1fr}}

/* Kostas: riquadri piu stretti e immagini intere, senza ritaglio */
.strip.tre{max-width:880px;margin-left:auto;margin-right:auto}
.strip.tre .slot{aspect-ratio:auto;height:auto;object-fit:contain}

/* Kostas: tre riquadri di dimensioni identiche, formato unico */
.strip.tre .slot{aspect-ratio:16/9;height:auto;object-fit:cover}

/* Kostas: riquadro panoramico, taglia la scritta sulla prima */
.strip.tre .slot{aspect-ratio:2.05/1;height:auto;object-fit:cover}
.strip.tre .slot:first-child{object-position:center top}