/* makeveneto.com — "Il comizio": blu notte, rosso, bianco; 7 stelle = 7 province */
@font-face { font-family: "Anton"; src: url("/fonts/anton-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("/fonts/oswald-var.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }

:root {
  color-scheme: dark;
  --blu: #0B1F4B;
  --rosso: #B22234;
  --bianco: #FFFFFF;
  --nebbia: #C9D3EA;
  --f-cond: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-label: "Oswald", "Arial Narrow", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--blu); color: var(--bianco); font: 500 16px/1.4 var(--f-label);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cpath d='M45 33l3.5 8 8.7.8-6.6 5.8 2 8.5L45 51.6l-7.6 4.5 2-8.5-6.6-5.8 8.7-.8z' fill='%23FFFFFF' fill-opacity='.06'/%3E%3C/svg%3E");
}
a { text-decoration: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pagina { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.inner {
  flex: 1; width: 100%; max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center; gap: 26px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(52px, env(safe-area-inset-top, 0px)) 44px;
}
.stelle { display: flex; gap: 14px; color: var(--bianco); }
.stelle svg { width: 30px; height: 30px; }
.province { margin: 8px 0 0; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--nebbia); }
h1 { margin: 0; font: 400 clamp(58px, 13.5vw, 196px)/.88 var(--f-cond); text-transform: uppercase; letter-spacing: .005em; }
h1 span { display: block; }
h1 .slab {
  display: inline-block; background: var(--rosso); color: var(--bianco); padding: .02em .14em .06em; margin: .04em 0;
  transform: rotate(-2deg); box-shadow: .06em .06em 0 var(--bianco);
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.cta p { margin: 0; font: 600 22px/1.2 var(--f-label); text-transform: uppercase; letter-spacing: .06em; }
.btn {
  display: inline-block; font: 400 24px/1 var(--f-cond); letter-spacing: .04em; text-transform: uppercase;
  color: var(--rosso); background: var(--bianco); padding: 16px 24px; box-shadow: 6px 6px 0 var(--rosso);
  transition: transform .1s, box-shadow .1s;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: 4px 4px 0 var(--rosso); }
.btn:focus-visible { outline: 3px solid var(--bianco); outline-offset: 5px; }
.strisce {
  height: calc(84px + env(safe-area-inset-bottom, 0px));
  background: repeating-linear-gradient(180deg, var(--rosso) 0 12px, var(--bianco) 12px 24px);
  border-top: 10px solid var(--blu);
}
@media (max-width: 760px) { .stelle svg { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }