/* ============================================================ Loudsat */
:root {
  --nero: #0c0a0a;
  --nero-2: #161212;
  --rosso: #c41618;
  --rosso-scuro: #8e0f11;
  --crema: #ede3cf;
  --crema-2: #cfc5b1;
  --grigio: #8a8178;
  --display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --mono: "Special Elite", "Courier New", monospace;
  --testo: "Barlow", system-ui, sans-serif;
  --max: 1080px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nero);
  color: var(--crema);
  font-family: var(--testo);
  font-size: 1.1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1; }

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--rosso); color: #fff; padding: .5rem 1rem; text-decoration: none;
}
.skip:focus { left: 8px; }

/* ------------------------------------------------------------ header */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(12, 10, 10, .85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(237, 227, 207, .08);
}
.top__brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; font-family: var(--display);
  font-size: 1.4rem; letter-spacing: .08em; text-transform: uppercase;
}
.top__brand img { width: 44px; height: 44px; }
.top__nav { display: flex; gap: 1.6rem; }
.top__nav a {
  font-family: var(--mono); font-size: .95rem; letter-spacing: .04em;
  text-decoration: none; color: var(--crema-2);
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.top__nav a:hover, .top__nav a:focus-visible { color: var(--crema); border-color: var(--rosso); }
.top__nav a.ig { color: var(--rosso); }
.top__toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: .5rem;
  flex-direction: column; gap: 5px;
}
.top__toggle span { display: block; width: 26px; height: 3px; background: var(--crema); }

@media (max-width: 720px) {
  .top__toggle { display: flex; }
  .top__nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--nero-2); border-bottom: 2px solid var(--rosso);
    display: none;
  }
  .top__nav.open { display: flex; }
  .top__nav a { padding: 1rem clamp(1rem, 4vw, 2.5rem); border-bottom: 1px solid rgba(237, 227, 207, .08); font-size: 1.1rem; }
}

/* ------------------------------------------------------------ hero */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - 64px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1rem 4rem;
  overflow: hidden;
}
.hero__logo {
  width: min(92vw, 720px);
  margin: -8% 0 -10%;
  filter: drop-shadow(0 10px 40px rgba(196, 22, 24, .35));
}
.hero__tag {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem;
  margin: .5rem 0 0; font-family: var(--mono); font-size: 1.05rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--crema-2);
}
.hero__tag span + span::before { content: "/"; margin-right: .9rem; color: var(--rosso); }
.hero__from {
  margin: .6rem 0 0; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .3em; text-transform: uppercase; color: var(--rosso);
}
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 2rem; }
.hero__down {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  text-decoration: none; color: var(--grigio); font-size: 1.6rem;
  animation: bounce 1.8s infinite;
}
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .hero__down { animation: none; } }

/* schizzi di sfondo */
.splat {
  position: absolute; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--rosso) 0%, rgba(196, 22, 24, .55) 40%, transparent 72%);
  opacity: .35; filter: blur(2px); pointer-events: none;
}
.splat--a { width: 520px; height: 520px; top: -180px; left: -160px; }
.splat--b { width: 380px; height: 380px; bottom: -120px; right: -100px; opacity: .25; }
.splat--c { width: 420px; height: 420px; top: 10%; right: -160px; opacity: .18; }

/* ------------------------------------------------------------ bottoni */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.5rem; border: 2px solid var(--crema);
  font-family: var(--display); font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--crema); background: transparent;
  transform: rotate(-1deg); transition: transform .15s, background .15s, color .15s;
}
.btn:hover, .btn:focus-visible { transform: rotate(0) scale(1.03); background: var(--crema); color: var(--nero); }
.btn--primary { background: var(--rosso); border-color: var(--rosso); color: #fff; transform: rotate(1deg); }
.btn--primary:hover, .btn--primary:focus-visible { background: #e0191c; border-color: #e0191c; color: #fff; }
.btn--light { border-color: var(--nero); color: var(--nero); }
.btn--light:hover, .btn--light:focus-visible { background: var(--nero); color: var(--crema); }
.btn--mail { text-transform: none; letter-spacing: .04em; }
.btn--small { padding: .5rem .9rem; font-size: .9rem; }

/* ------------------------------------------------------------ sezioni */
.block { scroll-margin-top: 64px; position: relative; isolation: isolate; padding: clamp(4rem, 9vw, 7rem) 1rem; overflow: hidden; }
.block__in { max-width: var(--max); margin: 0 auto; }
.block--dark { background: var(--nero-2); }
.block--red { background: var(--rosso); color: var(--nero); }
.block--red .kicker { color: var(--nero); }
.block--red .kicker::before { background: var(--nero); }
.block--red h2 em { color: var(--crema); -webkit-text-stroke: 0; }
.block--red .prose a { color: var(--nero); }

.kicker {
  margin: 0 0 1rem; font-family: var(--mono); font-size: 1rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rosso); display: flex; align-items: center; gap: .8rem;
}
.kicker::before { content: ""; width: 40px; height: 3px; background: var(--rosso); }

h2 {
  font-family: var(--display); font-size: clamp(2.6rem, 7vw, 5rem);
  text-transform: uppercase; letter-spacing: .02em; margin-bottom: 2rem;
  transform: rotate(-1.2deg); transform-origin: left bottom;
}
h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--rosso); }

.prose { max-width: 62ch; font-size: 1.15rem; }
.prose p { margin: 0 0 1.1rem; }
.prose strong { color: #fff; }
.block--red .prose strong { color: var(--nero); }

.facts {
  list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
}
.facts li {
  padding: 1.2rem 1.4rem; border: 1px solid rgba(237, 227, 207, .15);
  background: var(--nero-2); transform: rotate(-.6deg);
}
.facts li:nth-child(2) { transform: rotate(.8deg); }
.facts li:nth-child(3) { transform: rotate(-.4deg); }
.facts b { display: block; font-family: var(--display); font-size: 2.6rem; color: var(--rosso); line-height: 1; }
.facts span { font-family: var(--mono); font-size: .95rem; color: var(--crema-2); }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 3px solid var(--rosso); }
.timeline li { position: relative; padding: 0 0 2.2rem 2rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -10px; top: .45rem;
  width: 17px; height: 17px; border-radius: 50%; background: var(--rosso);
  box-shadow: 0 0 0 5px var(--nero-2);
}
.timeline time { font-family: var(--mono); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--crema-2); }
.timeline h3 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: .03em; margin: .3rem 0 .5rem; }
.timeline p { margin: 0; max-width: 60ch; color: var(--crema-2); }
.tag {
  display: table; margin: 0 0 .6rem; padding: .15rem .6rem;
  background: var(--rosso); color: #fff; font-family: var(--mono); font-size: .85rem; letter-spacing: .05em;
  transform: rotate(-2deg);
}

/* date */
.dates { list-style: none; padding: 0; margin: 0; }
.dates li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center;
  padding: 1rem 0; border-bottom: 1px solid rgba(237, 227, 207, .12);
}
.dates time { text-align: center; font-family: var(--display); line-height: 1; }
.dates time b { display: block; font-size: 2.4rem; color: var(--rosso); }
.dates time span { font-family: var(--mono); font-size: .9rem; text-transform: uppercase; }
.dates h3 { font-family: var(--display); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .03em; }
.dates p { margin: .2rem 0 0; color: var(--crema-2); }
.dates__empty { font-family: var(--mono); color: var(--crema-2); margin: 1rem 0 0; }
.dates:not(:empty) + .dates__empty { margin-top: 2rem; }

/* contatti */
.contact { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* galleria (per quando ci saranno le foto) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.gallery img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ------------------------------------------------------------ footer */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem;
  padding: 2rem 1rem; font-family: var(--mono); font-size: .95rem; color: var(--grigio);
  border-top: 1px solid rgba(237, 227, 207, .08);
}
.foot img { width: 40px; height: 40px; opacity: .8; }
.foot p { margin: 0; }
.foot a { color: var(--crema-2); }

/* ------------------------------------------------------------ comparsa */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }