@font-face{font-family:Lato;font-weight:300;font-display:swap;src:url(/assets/lato-light.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-display:swap;src:url(/assets/lato-regular.woff2) format("woff2")}
:root{--fondo:#06070a;--testo:#d3dae5;--tenue:#7f899b;--argento:#e8eef6;--alone:rgba(120,150,200,.6);--linea:rgba(232,238,246,.12)}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;background:var(--fondo)}
body{font:300 17px/1.75 Lato,system-ui,sans-serif;color:var(--testo);background:var(--fondo);min-height:100vh;display:flex;flex-direction:column}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:url(/assets/fondo.jpg) center top/cover no-repeat}
a{color:inherit;text-decoration:none}
main{width:100%;max-width:1040px;margin:0 auto;padding:0 16px;flex:1}
.eroe{text-align:center;padding:56px 0 40px}
.eroe img{height:clamp(150px,30vw,250px);width:auto}
.nome{font-weight:300;text-transform:uppercase;color:var(--argento);letter-spacing:.42em;margin-right:-.42em;font-size:clamp(22px,6.4vw,64px);line-height:1.2;text-shadow:0 0 6px var(--alone),0 0 26px var(--alone)}
.collegamenti{margin-top:28px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.bottone{display:inline-block;border:1px solid var(--linea);border-radius:999px;padding:8px 22px;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--argento);transition:border-color .2s,box-shadow .2s}
.bottone:hover,.bottone:focus-visible{border-color:var(--argento);box-shadow:0 0 18px var(--alone)}
h2{font-weight:300;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--tenue);margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid var(--linea)}
.canzoni{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:32px 24px;margin-bottom:72px}
.canzone img{width:100%;height:auto;aspect-ratio:1;display:block;border-radius:3px;transition:box-shadow .3s,transform .3s}
.canzone:hover img,.canzone:focus-visible img{box-shadow:0 0 28px var(--alone);transform:translateY(-2px)}
.canzone b{display:block;font-weight:400;color:var(--argento);margin-top:12px;font-size:18px}
.dati{font-size:14px;color:var(--tenue);letter-spacing:.04em}
.testata{display:flex;align-items:center;gap:10px;padding:22px 0;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--argento)}
.testata img{height:44px;width:auto}
.brano{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:center;margin:24px 0 48px}
.brano img{width:100%;height:auto;border-radius:3px;box-shadow:0 0 40px rgba(0,0,0,.6)}
.brano h1{font-weight:300;font-size:clamp(34px,5vw,56px);line-height:1.15;color:var(--argento);text-shadow:0 0 18px var(--alone)}
.brano .dati{margin:8px 0 26px}
.video{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:3px;overflow:hidden;cursor:pointer;background:#000 center/cover no-repeat;margin-bottom:10px}
.video::after{content:"";position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:1px solid var(--argento);background:rgba(6,7,10,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23e8eef6'/%3E%3C/svg%3E") center/34px no-repeat;box-shadow:0 0 24px var(--alone);transition:transform .2s}
.video:hover::after,.video:focus-visible::after{transform:scale(1.08)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.nota{font-size:13px;color:var(--tenue);margin-bottom:56px}
.testo{max-width:560px;margin-bottom:80px}
.testo p{margin-bottom:1.5em}
footer{border-top:1px solid var(--linea);padding:24px 16px;text-align:center;font-size:13px;color:var(--tenue);letter-spacing:.06em}
footer a{color:var(--testo)}
@media (max-width:700px){.brano{grid-template-columns:1fr;gap:24px;margin-top:8px}.eroe{padding-top:40px}.canzoni{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.canzone b{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
