:root{--red:#ff2a1a;--black:#080808;--cream:#f3ead6;--pad:clamp(20px,5vw,72px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--black);color:var(--cream);font-family:'Archivo',system-ui,sans-serif;font-stretch:110%;line-height:1.5;overflow-x:hidden}
/* grana da pellicola */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.07;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
main{overflow-x:clip}
a{color:inherit}
img,video{display:block;max-width:100%}

/* logo: SVG usato come maschera, prende il colore del testo */
.logo{display:block;aspect-ratio:490/270;background:currentColor;-webkit-mask:url(assets/logo.svg) center/contain no-repeat;mask:url(assets/logo.svg) center/contain no-repeat}
.logo--xl{width:min(100%,560px);color:var(--red);filter:drop-shadow(0 0 40px rgba(255,42,26,.45))}

.kicker{font-size:.8rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.h2{font-size:clamp(2.4rem,8vw,6.5rem);font-stretch:125%;font-weight:900;line-height:.95;text-transform:uppercase;letter-spacing:-.02em}
.h2 span,.cta__big span{color:var(--red)}

.btn{display:inline-block;background:var(--red);color:var(--black);font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:1em 1.8em;border-radius:99px;border:2px solid var(--red);transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-3px) rotate(-2deg);background:var(--cream);border-color:var(--cream)}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--black)}
.btn--sm{padding:.6em 1.2em;font-size:.8rem}
.btn--xl{font-size:clamp(1rem,3vw,1.6rem)}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--pad);background:rgba(8,8,8,.75);backdrop-filter:blur(10px)}
.nav .logo{width:74px;color:var(--cream)}
.nav nav{display:flex;gap:28px;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.nav nav a{text-decoration:none;opacity:.8}
.nav nav a:hover{opacity:1;color:var(--red)}
@media(max-width:760px){.nav nav{display:none}}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(24px,5vw,80px);padding:110px var(--pad) 60px;background:radial-gradient(60% 70% at 80% 40%,rgba(255,42,26,.35),transparent 70%)}
.hero__txt{display:grid;gap:clamp(16px,3vh,32px);justify-items:start}
.hero__claim{font-size:clamp(1.3rem,3.2vw,2.4rem);font-stretch:125%;font-weight:800;text-transform:uppercase;line-height:1.05}
.hero__claim em{font-style:normal;color:var(--red)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__media{position:relative;justify-self:center;width:min(100%,440px);transform:rotate(3deg);transition:transform .4s}
.hero__media:hover{transform:rotate(0)}
.hero__media iframe{width:100%;height:clamp(520px,62vh,620px);border:6px solid var(--cream);border-radius:6px;background:var(--cream);box-shadow:0 0 0 2px var(--red),0 30px 80px rgba(255,42,26,.45)}
.hero__media video{width:100%;aspect-ratio:4/5;object-fit:cover;border:6px solid var(--cream);border-radius:6px;box-shadow:0 0 0 2px var(--red),0 30px 80px rgba(255,42,26,.45)}
.sticker{position:absolute;right:-14px;bottom:-22px;display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:var(--red);color:var(--black);font-weight:900;font-stretch:125%;text-transform:uppercase;text-align:center;font-size:.9rem;line-height:1.1;transform:rotate(-14deg);animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(346deg)}}
@media(max-width:820px){.hero{grid-template-columns:1fr;padding-top:100px}.hero__media{width:min(78%,360px)}}

/* marquee */
.marquee{background:var(--red);color:var(--black);overflow:hidden;white-space:nowrap;transform:rotate(-1.5deg) scale(1.03);margin:20px 0;padding:.5em 0}
.marquee__track{display:inline-flex;animation:mq 22s linear infinite}
.marquee span{font-size:clamp(1.4rem,4vw,2.6rem);font-stretch:125%;font-weight:900;padding-right:.5em}
@keyframes mq{to{transform:translateX(-50%)}}

/* manifesto */
.manifesto{padding:clamp(80px,14vw,200px) var(--pad);max-width:1300px;margin:auto;display:grid;gap:28px}
.manifesto__big{font-size:clamp(2rem,6.5vw,5.2rem);font-stretch:125%;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:-.02em}
.manifesto mark{background:var(--red);color:var(--black);padding:0 .15em;border-radius:.1em}
.manifesto__small{max-width:640px;font-size:clamp(1rem,1.6vw,1.25rem);opacity:.8}

/* cosa succede */
.cosa{background:var(--red);color:var(--black);padding:clamp(60px,10vw,140px) var(--pad)}
.cosa .h2 span{color:var(--cream)}
.cards{list-style:none;padding:0;margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}
.card{background:var(--black);color:var(--cream);padding:28px;border-radius:14px;display:grid;gap:10px;align-content:start;min-height:260px;container-type:inline-size;transition:transform .25s}
.card:nth-child(odd){transform:rotate(-1.2deg)}.card:nth-child(even){transform:rotate(1.2deg)}
.card:hover{transform:rotate(0) translateY(-8px)}
.card b{color:var(--red);font-size:.9rem;letter-spacing:.2em}
.card h3{font-size:min(1.9rem,calc((100cqi - 4px)/11));white-space:nowrap;font-stretch:100%;font-weight:900;text-transform:uppercase;line-height:1}
.card p{opacity:.75}

/* galleria */
.gal{padding:clamp(60px,10vw,140px) var(--pad)}
.gal__grid{margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,22px)}
.gal button{all:unset;cursor:zoom-in;overflow:hidden;border-radius:8px;aspect-ratio:4/5;position:relative;transition:transform .3s}
.gal button:nth-child(4n+2){transform:translateY(36px)}
.gal button:nth-child(4n+4){transform:translateY(60px)}
.gal button:hover,.gal button:focus-visible{transform:rotate(-2deg) scale(1.04);z-index:2;outline:3px solid var(--red)}
.gal img{width:100%;height:100%;object-fit:cover}
.gal__grid{padding-bottom:70px}
@media(max-width:900px){.gal__grid{grid-template-columns:repeat(2,1fr)}.gal button:nth-child(n){transform:none}.gal button:nth-child(even){transform:translateY(30px)}}

/* lightbox */
dialog{border:0;background:rgba(0,0,0,.94);width:100vw;height:100vh;max-width:none;max-height:none;padding:0;color:var(--cream)}
dialog[open]{display:grid;place-items:center}
dialog::backdrop{background:#000}
dialog img{max-height:92vh;max-width:92vw;object-fit:contain;border-radius:6px}
dialog button{position:absolute;all:unset;cursor:pointer;font-size:2rem;padding:16px;color:var(--cream)}
dialog button:hover{color:var(--red)}
.lb__x{top:0;right:0;position:absolute}.lb__p{left:0;top:50%;position:absolute}.lb__n{right:0;top:50%;position:absolute}

/* reel */
.reel{padding:clamp(60px,10vw,140px) var(--pad);background:linear-gradient(var(--black),#1a0402)}
.reel__row{margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);align-items:start}
.reel video{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:12px;background:#000;border:2px solid #2a1210}
.reel video:nth-child(2){margin-top:48px}
@media(max-width:760px){.reel__row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}.reel video{scroll-snap-align:center}.reel video:nth-child(2){margin-top:0}}

/* merch */
.merch{background:var(--cream);color:var(--black);padding:clamp(60px,10vw,140px) var(--pad)}
.merch .h2 span{color:var(--red)}
.merch__grid{margin-top:clamp(32px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.4vw,32px)}
.merch figure{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(45deg,#e8dcc0 0 12px,#f3ead6 12px 24px);border:2px dashed var(--black);transition:transform .25s}
.merch figure:nth-child(odd){transform:rotate(-1.5deg)}.merch figure:nth-child(even){transform:rotate(1.5deg)}
.merch figure:hover{transform:rotate(0) scale(1.03)}
.merch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.merch figcaption{position:absolute;left:14px;bottom:14px;z-index:1;background:var(--red);color:var(--black);font-weight:900;font-stretch:125%;text-transform:uppercase;padding:.4em 1em;border-radius:99px}
.merch figure::before{content:"Foto in arrivo";position:absolute;inset:0;display:grid;place-items:center;font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;opacity:.5}
.merch img{z-index:0}

/* cta */
.cta{text-align:center;padding:clamp(90px,14vw,200px) var(--pad);display:grid;gap:26px;justify-items:center;background:radial-gradient(50% 60% at 50% 60%,rgba(255,42,26,.3),transparent 70%)}
.cta__big{font-size:clamp(2.8rem,11vw,9rem);font-stretch:125%;font-weight:900;line-height:.9;text-transform:uppercase;letter-spacing:-.03em}
.cta__sub{max-width:560px;opacity:.8}

.contact{padding:clamp(60px,9vw,120px) var(--pad);border-top:1px solid #2a2a2a;display:grid;gap:clamp(24px,4vw,48px)}
.contact .h2{font-size:clamp(2rem,6vw,4.5rem)}
.contact__list{display:grid;gap:clamp(24px,4vw,48px);padding:0}
.contact dt{font-size:.8rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-bottom:.4em}
.contact dd{margin:0;font-size:clamp(.8rem,4.2vw,1.8rem);font-stretch:125%;font-weight:800;min-height:1.5em;border-bottom:2px solid #2a2a2a;white-space:nowrap}
.contact dd a{text-decoration:none}.contact dd a:hover{color:var(--red)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:32px var(--pad);border-top:1px solid #2a2a2a;font-size:.85rem}
.foot .logo{width:70px;color:var(--red)}
.foot small{opacity:.6}

/* reveal on scroll */
.js .reveal{opacity:0;translate:0 40px;transition:opacity .8s,translate .8s}
.js .reveal.in{opacity:1;translate:0 0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}.js .reveal{opacity:1;translate:0}}