@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=Space+Grotesk:wght@500;600&display=swap');

/* Palette “brutalismo istituzionale” */
:root{
  --bg:#121314;          /* cemento scuro */
  --txt:#e8e8e6;         /* testo chiaro caldo */
  --muted:#b9b9b7;       /* grigio di servizio */
  --line:#2a2b2c;        /* linee sottili */
  --accent:#d4b800;      /* giallo desaturato */
}

/* Reset minimo */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Tipografia */
h1,h2,h3{
  font-family:"Space Grotesk", sans-serif;
  letter-spacing:.02em;
  margin:0 0 .4rem;
}
h1{ font-size:clamp(40px,6vw,64px); font-weight:600; }
h2{ font-size:clamp(22px,3vw,28px); font-weight:600; color:var(--txt); }
p{
  margin:.6rem 0;
  color:var(--txt);
}

/* Layout helper */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:72px 20px;
}
.center{ text-align:center; }
.hr{
  height:1px;
  background:var(--line);
  margin:28px 0;
}

/* Nav + footer */
.nav{
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center;
  margin:10px 0 0;
}
.nav a{
  color:var(--muted);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12.5px;
}
.nav a:hover{ color:var(--txt); }

.footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  font-size:12.5px;
  color:var(--muted);
  text-align:center;
}

/* Pulsanti */
.btn{
  display:inline-block;
  padding:12px 20px;
  border:1px solid var(--accent);
  color:var(--accent);
  text-decoration:none;
  transition:.2s linear;
  letter-spacing:.02em;
}
.btn:hover{
  background:var(--accent);
  color:var(--bg);
}

/* Classi compatibili che usiamo nei .astro */
.text-accent{ color:var(--accent); }
.border-accent{ border-color:var(--accent); }
.hover\:bg-accent:hover{ background:var(--accent); }
.hover\:text-oliveblack:hover{ color:var(--bg); }

/* Hero */
.hero{
  display:grid;
  gap:26px;
  justify-items:center;
  padding:10vh 0 8vh;
}
.hero img{
  width:140px;
  opacity:.92;
}
.hero p{
  max-width:680px;
  color:var(--muted);
}