:root{
  --blu-lago: #0F3241;
  --blu-lago-2: #164A5E;
  --ottone: #B8863C;
  --ottone-chiaro: #E4C79A;
  --sfondo: #EEF2F1;
  --carta: #FFFFFF;
  --testo: #1B2A2E;
  --testo-tenue: #5B6E72;
  --bordo: #DDE4E2;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:var(--sfondo);
  color:var(--testo);
}
header{
  background: linear-gradient(135deg, var(--blu-lago) 0%, var(--blu-lago-2) 100%);
  color:#fff;
  padding: 2.6rem 1.5rem 3.4rem;
  position:relative;
  overflow:hidden;
}
header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:34px;
  background: repeating-linear-gradient(
    -6deg,
    transparent 0 22px,
    rgba(255,255,255,0.05) 22px 24px
  );
}
.eyebrow{
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: var(--ottone-chiaro);
  font-size: 1rem;
  margin: 0 0 .3rem;
  letter-spacing: .02em;
}
h1{
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  margin: 0 0 .4rem;
}
.sottotitolo{
  color: #C7D6D9;
  max-width: 46ch;
  line-height: 1.5;
  margin: 0;
}
main{
  max-width: 920px;
  margin: 1.5rem auto 3rem;
  padding: 0 1.2rem;
}
section{
  background: var(--carta);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,50,65,0.10);
  padding: 1.6rem 1.4rem 1.8rem;
  margin-bottom: 1.8rem;
}
.sezione-titolo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem;
  border-bottom: 2px solid var(--ottone);
  padding-bottom:.6rem;
  margin-bottom:1rem;
}
.sezione-titolo h2{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:1.4rem;
  margin:0;
  color: var(--blu-lago);
}
.conteggio{
  color:var(--testo-tenue);
  font-size:.92rem;
}
.filtro{
  width:100%;
  padding:.6rem .8rem;
  border:1px solid var(--bordo);
  border-radius:7px;
  font-size:.95rem;
  margin-bottom: 1rem;
  background:#FAFBFB;
}
.filtro:focus{
  outline:2px solid var(--ottone-chiaro);
  border-color:var(--ottone);
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
thead th{
  text-align:left;
  font-weight:600;
  color: var(--blu-lago);
  border-bottom: 1px solid var(--bordo);
  padding: .5rem .6rem;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
}
thead th:hover{ color: var(--ottone); }
thead th .freccia{ opacity:.35; font-size:.8em; margin-left:.2em; }
tbody td{
  padding: .5rem .6rem;
  border-bottom: 1px solid #F0F2F1;
  vertical-align:top;
}
tbody tr:hover{ background:#F7FAF9; }
.equipaggio-riga td{
  background:#F4F7F6;
  font-weight:600;
  color:var(--blu-lago-2);
  padding-top:.9rem;
}
.posto{
  color:var(--testo-tenue);
  font-variant-numeric: tabular-nums;
  width:2.4em;
}
.vuoto{
  text-align:center;
  color:var(--testo-tenue);
  padding: 1.4rem 0;
  font-style:italic;
}
footer{
  text-align:center;
  color:var(--testo-tenue);
  font-size:.85rem;
  padding: 0 1.2rem 2rem;
}
a.indietro{
  display:inline-block;
  color: var(--ottone-chiaro);
  text-decoration:none;
  font-size:.9rem;
  margin-bottom: 1rem;
}
a.indietro:hover{ text-decoration:underline; }

/* --- pagina iniziale: schede di navigazione verso le tre gare --- */
.schede{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
.scheda{
  display:block;
  background: var(--carta);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,50,65,0.10);
  padding: 1.5rem 1.4rem;
  text-decoration:none;
  color: var(--testo);
  border-left: 5px solid var(--ottone);
  transition: transform .15s ease, box-shadow .15s ease;
}
.scheda:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(15,50,65,0.16);
}
.scheda h2{
  font-family: Georgia, "Times New Roman", serif;
  font-weight:400;
  font-size:1.3rem;
  margin: 0 0 .35rem;
  color: var(--blu-lago);
}
.scheda p{
  margin:0;
  color: var(--testo-tenue);
  font-size:.95rem;
  line-height:1.45;
}
.scheda .freccia-scheda{
  color: var(--ottone);
  font-weight:600;
}

@media (max-width:520px){
  table{ font-size:.85rem; }
  thead th, tbody td{ padding:.4rem .4rem; }
}