:root{
  --notte:#0B0B0D; --lampione:#E8892B; --nebbia:#8A8F94; --neon:#E9EEF2; --chiaro:#B9BEC3; --riga:#2A2C30;
  --titolo:"Oswald","Bebas Neue","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
  --testo:ui-monospace,"SFMono-Regular","Cascadia Mono","Consolas","Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--notte);color:var(--neon);font-family:var(--testo);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--lampione);text-decoration:none}
a:hover,a:focus-visible{color:var(--neon)}
a:focus-visible{outline:2px solid var(--lampione);outline-offset:4px}
.pagina{max-width:1040px;margin:0 auto;padding:28px 24px 56px}
header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.marchio{font-family:var(--titolo);font-size:26px;letter-spacing:4px;text-transform:uppercase;color:var(--neon);font-stretch:condensed}
.marchio b{font-weight:700}
.marchio span{font-weight:300;color:var(--nebbia)}
nav{display:flex;flex-wrap:wrap;gap:22px;font-size:15px}
section{border-top:1px solid var(--riga);padding-top:44px;margin-top:80px}
.apertura{border-top:0;margin-top:96px;padding-top:0}
.ora{margin:0 0 22px;color:var(--lampione);font-size:18px}
h1{margin:0;font-family:var(--titolo);font-weight:700;font-size:clamp(46px,9vw,112px);line-height:.98;letter-spacing:2px;text-transform:uppercase;font-stretch:condensed}
h1 span{display:block;font-weight:300;color:var(--nebbia)}
.sotto{margin:28px 0 0;max-width:560px;color:var(--chiaro)}
.etichetta{margin:0 0 18px;font-size:13px;letter-spacing:3px;color:var(--nebbia)}
h2{margin:0 0 14px;font-family:var(--titolo);font-weight:700;font-size:38px;letter-spacing:2px;text-transform:uppercase;font-stretch:condensed}
.uscita{display:flex;flex-wrap:wrap;gap:36px;align-items:center}
.copertina{flex:0 0 240px;height:240px;background:#141417;border:1px solid var(--riga);position:relative}
.copertina{display:flex;align-items:center;justify-content:center}
.copertina .ora{margin:0;font-size:56px;letter-spacing:3px;color:var(--lampione)}
.copertina p.t{position:absolute;left:0;right:0;bottom:18px;margin:0;text-align:center;font-size:12px;letter-spacing:5px;color:var(--nebbia)}
.info{flex:999 1 300px;min-width:0}
.info p{margin:0 0 18px;color:var(--chiaro)}
.bottone{display:inline-block;padding:13px 22px;border:1px solid var(--nebbia);color:var(--neon);font-size:15px}
.bottone:hover,.bottone:focus-visible{border-color:var(--lampione);color:var(--lampione)}
.come p{max-width:620px;margin:0 0 16px;color:var(--chiaro)}
.social{display:flex;flex-wrap:wrap;gap:14px 28px;font-size:16px}
footer{border-top:1px solid var(--riga);margin-top:80px;padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--nebbia)}
footer p{margin:0}
@media (max-width:560px){body{font-size:16px}.apertura{margin-top:64px}section{margin-top:64px}.copertina{flex-basis:100%;max-width:300px}}
.nome{color:var(--lampione);font-weight:700;letter-spacing:.04em}
nav a[aria-current]{color:var(--neon)}
.lettera form{display:flex;flex-wrap:wrap;gap:12px;max-width:560px;margin:8px 0 12px}
.lettera input[type=email]{flex:1 1 240px;min-width:0;padding:13px 14px;background:transparent;border:1px solid var(--nebbia);color:var(--neon);font:inherit;font-size:15px}
.lettera input[type=email]::placeholder{color:var(--nebbia)}
.lettera input[type=email]:focus{outline:none;border-color:var(--lampione)}
.lettera button{padding:13px 22px;background:transparent;border:1px solid var(--lampione);color:var(--lampione);font:inherit;font-size:15px;cursor:pointer}
.lettera button:hover,.lettera button:focus-visible{background:var(--lampione);color:var(--notte)}
.piccolo{font-size:13px;color:var(--nebbia)}
.storia p{max-width:620px;margin:0 0 20px;color:var(--chiaro)}
.storia p.firma{color:var(--neon)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

