:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2b2b; --muted:#7a7568;
  --line:#e2ded4; --accent:#3f51b5;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Georgia,'Times New Roman',serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  padding:40px 16px 60px;
}
header{max-width:900px; margin:0 auto 28px;}
header h1{font-size:2rem; margin:0 0 4px;}
header p{color:var(--muted); margin:0; font-size:.95rem;}

.grid{
  max-width:900px; margin:0 auto;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.card{
  display:block;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px;
  text-decoration:none; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(43,43,43,.08);
  border-color:var(--accent);
}
.card h2{font-size:1.1rem; margin:0 0 4px;}
.card p{font-size:.88rem; color:var(--muted); margin:0;}

/* Language cards: illustration as a faded backdrop, text stays readable.
   Add a new card class by listing it in the shared selectors below. */
.card.latino,.card.inglese,.card.greco{position:relative; overflow:hidden;}
.card.latino::before,.card.inglese::before,.card.greco::before{
  content:""; position:absolute; inset:0;
  background:center / cover no-repeat;
  opacity:.2; pointer-events:none;
}
.card.latino::before{background-image:url(latino.svg);}
.card.inglese::before{background-image:url(inglese.svg);}
.card.greco::before{background-image:url(greco.svg);}
.card.latino>*,.card.inglese>*,.card.greco>*{position:relative;}