/*
 * Podisti Alto Sannio
 *
 * I colori vengono dal logo: rosso per le azioni e per le gare in arrivo,
 * giallo solo come segnale (record, iscrizioni aperte), nero per le date.
 * Il pezzo forte sono i blocchi data, fatti come un pettorale.
 * Barlow Condensed per titoli, tempi e numeri; Barlow per il testo.
 */

:root {
  --carta: #ffffff;
  --fondo: #f4f3f1;
  --inchiostro: #161616;
  --tenue: #67625d;
  --linea: #e3e0dc;
  --rosso: #d7141a;
  --rosso-forte: #a80f14;
  --rosso-velo: #fdecec;
  --giallo: #ffbe00;
  --giallo-velo: #fff4cc;
  --verde: #12783a;
  --verde-velo: #e3f4e9;
  --blocco: #161616;
  --blocco-testo: #ffffff;
  --piede: #161616;
  --piede-testo: #e8e5e1;
  --piede-tenue: #9d9892;
  --ombra: 0 1px 2px rgb(22 22 22 / .06), 0 4px 14px rgb(22 22 22 / .05);

  --titoli: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --corpo: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raggio: 6px;
  --largo: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #121212;
    --fondo: #1b1a19;
    --inchiostro: #f2efeb;
    --tenue: #a49e97;
    --linea: #2e2b29;
    --rosso: #ff4b50;
    --rosso-forte: #ff7276;
    --rosso-velo: #3a1516;
    --giallo: #ffc933;
    --giallo-velo: #3a2e05;
    --verde: #4cc77a;
    --verde-velo: #10301d;
    --blocco: #f2efeb;
    --blocco-testo: #121212;
    --piede: #0b0b0b;
    --ombra: 0 1px 2px rgb(0 0 0 / .4);
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.6 var(--corpo);
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--rosso); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--titoli); line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }

.solo-lettori {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.salta {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--inchiostro); color: var(--carta); padding: .6rem 1rem; border-radius: var(--raggio);
}
.salta:focus { top: 1rem; }

.largo { max-width: var(--largo); margin: 0 auto; padding: 0 1rem; }
.stretto { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 700px) { .largo, .stretto { padding: 0 1.5rem; } }

.tenue { color: var(--tenue); }
.sep { margin: 0 .35em; color: var(--tenue); }
.vuoto { color: var(--tenue); padding: 1.5rem 0; }
.nota { color: var(--tenue); font-size: .9rem; margin-top: .8rem; }

.occhiello {
  font: 600 .82rem/1.2 var(--titoli);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--rosso); margin: 0 0 .5rem;
}

/* ---------------------------------------------------------- testata --- */

.testata {
  border-top: 4px solid var(--rosso);
  border-bottom: 1px solid var(--linea);
  background: var(--carta);
}
.testata-dentro {
  max-width: var(--largo); margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 700px) { .testata-dentro { padding: .75rem 1.5rem; } }

.marchio { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--inchiostro); margin: 0; }
.marchio:hover { color: var(--inchiostro); }
.marchio img { width: 52px; height: auto; flex: none; }
.marchio-nome {
  font: 700 1.2rem/.92 var(--titoli); text-transform: uppercase; letter-spacing: .01em;
}
.marchio-nome span { display: block; }

.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.menu a {
  display: block; padding: .5rem .75rem; text-decoration: none;
  font: 600 1.05rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 3px solid transparent;
}
.menu a[aria-current="page"] { border-bottom-color: var(--rosso); }
.menu-tasto { display: none; }

@media (max-width: 759px) {
  .menu-tasto {
    display: flex; align-items: center; gap: .5rem;
    background: none; border: 1px solid var(--linea); border-radius: var(--raggio);
    color: var(--inchiostro); padding: .55rem .8rem; cursor: pointer;
    font: 600 .95rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .06em;
  }
  .menu-tasto-righe, .menu-tasto-righe::before, .menu-tasto-righe::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative;
  }
  .menu-tasto-righe::before, .menu-tasto-righe::after { content: ""; position: absolute; left: 0; }
  .menu-tasto-righe::before { top: -6px; }
  .menu-tasto-righe::after { top: 6px; }
  .menu ul {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
    flex-direction: column; gap: 0; background: var(--carta);
    border-bottom: 1px solid var(--linea); box-shadow: var(--ombra); padding: .5rem 1rem 1rem;
  }
  .menu-aperto .menu ul { display: flex; }
  .menu a { padding: .9rem .25rem; border-bottom: 1px solid var(--linea); font-size: 1.15rem; }
  .menu a[aria-current="page"] { color: var(--rosso); border-bottom-color: var(--linea); }
  .testata { position: relative; }
}

/* ----------------------------------------------------------- apertura --- */

.apertura {
  background:
    linear-gradient(90deg, var(--rosso) 0 6px, transparent 6px),
    var(--fondo);
  border-bottom: 1px solid var(--linea);
  padding: 2.5rem 0 2.25rem;
}
.apertura-dentro { display: grid; gap: 1.75rem; align-items: end; }
@media (min-width: 900px) { .apertura-dentro { grid-template-columns: 1fr auto; gap: 3rem; } }
.apertura h1 {
  font-size: clamp(2.2rem, 5.6vw, 4rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .95;
}
.apertura h1 span { display: block; color: var(--rosso); }
.apertura-cifre {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; color: var(--tenue); font-size: .95rem;
}
@media (min-width: 900px) {
  .apertura-cifre { flex-direction: column; gap: .9rem; padding-left: 1.75rem; border-left: 1px solid var(--linea); }
}
.apertura-cifre b {
  display: block; color: var(--inchiostro);
  font: 700 2.1rem/1 var(--titoli); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ sezioni --- */

.sezione { margin: 2.75rem auto; }
.sezione-testa {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 2px solid var(--inchiostro); padding-bottom: .45rem; margin-bottom: .25rem;
}
.sezione-testa h2 {
  font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.conta { color: var(--tenue); font-weight: 600; margin-left: .2em; }
.vedi-tutto {
  font: 600 .95rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .05em;
  color: var(--rosso); text-decoration: none; white-space: nowrap;
}
.vedi-tutto::after { content: " →"; }

.intestazione { padding: 2rem 0 1.25rem; }
.intestazione h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 700; text-transform: uppercase; line-height: .98;
}
.intestazione-sotto { color: var(--tenue); margin: .6rem 0 0; }
.briciole { margin: 1.25rem 0 0; font: 600 .9rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .06em; }
.briciole a { color: var(--tenue); text-decoration: none; }
.briciole a::before { content: "← "; }
.briciole a:hover { color: var(--rosso); }

/* -------------------------------------------------- blocco data (pettorale) */

.data-blocco {
  flex: none; width: 3.4rem; text-align: center;
  background: var(--blocco); color: var(--blocco-testo);
  border-radius: 4px; padding: .45rem 0 .4rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.data-blocco b { font: 700 1.75rem/.9 var(--titoli); font-variant-numeric: tabular-nums; }
.data-blocco small {
  font: 600 .72rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .1em;
  margin-top: .25rem; color: var(--giallo);
}
.futura .data-blocco { background: var(--rosso); color: #fff; }
.futura .data-blocco small { color: #fff; opacity: .9; }
.data-blocco.piccolo { width: 2.8rem; padding: .35rem 0 .3rem; }
.data-blocco.piccolo b { font-size: 1.4rem; }
.data-blocco.grande { width: 5.2rem; padding: .7rem 0 .6rem; }
.data-blocco.grande b { font-size: 2.9rem; }
.data-blocco.grande small { font-size: .78rem; }

/* ------------------------------------------------------- elenco gare --- */

.elenco-gare { list-style: none; margin: 0; padding: 0; }
.gara-riga { border-bottom: 1px solid var(--linea); }
.gara-riga > a {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem .25rem; text-decoration: none; color: inherit;
}
.gara-riga > a:hover { background: var(--fondo); color: inherit; }
.gara-riga > a:hover .gara-nome { color: var(--rosso); }
.gara-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.gara-nome { font: 600 1.22rem/1.15 var(--titoli); }
.gara-meta { color: var(--tenue); font-size: .92rem; }
.gara-pas { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; text-align: right; }
.gara-pas b { font: 700 1.5rem/1 var(--titoli); font-variant-numeric: tabular-nums; }
.gara-pas small {
  display: block; font: 600 .72rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue);
}

.chip {
  display: inline-block; font: 600 .74rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .06em;
  padding: .32rem .5rem; border-radius: 99px; background: var(--fondo); color: var(--tenue); white-space: nowrap;
}
.chip-aperte { background: var(--verde-velo); color: var(--verde); }

@media (max-width: 520px) {
  .gara-riga > a { gap: .7rem; }
  .gara-nome { font-size: 1.1rem; }
  .gara-pas .chip { display: none; }
}

/* -------------------------------------------------- ultimi risultati --- */

.griglia-risultati {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.risultato-scheda {
  border: 1px solid var(--linea); border-radius: var(--raggio); background: var(--carta);
  display: flex; flex-direction: column;
}
.risultato-gara {
  display: flex; gap: .75rem; align-items: center; padding: .85rem .9rem;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--linea);
}
.risultato-gara .gara-nome { display: block; font-size: 1.12rem; }
.risultato-gara .gara-meta { display: block; font-size: .85rem; }
.podio { list-style: none; margin: 0; padding: .4rem .9rem; flex: 1; counter-reset: p; }
.podio li {
  display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0;
  border-bottom: 1px dashed var(--linea); font-size: .95rem; counter-increment: p;
}
.podio li:last-child { border-bottom: 0; }
.podio li::before {
  content: counter(p); font: 700 .95rem/1.5 var(--titoli); color: var(--tenue); width: 1rem; flex: none;
}
.podio li a { flex: 1; text-decoration: none; }
.podio .tempo { font: 600 1.05rem/1.4 var(--titoli); font-variant-numeric: tabular-nums; }
.risultato-tutti {
  padding: .65rem .9rem; font: 600 .85rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .06em;
  color: var(--rosso); text-decoration: none; border-top: 1px solid var(--linea);
}

/* ------------------------------------------------------------ notizie --- */

.griglia-notizie {
  display: grid; gap: 1.25rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.notizia-scheda img, .elenco-notizie img {
  aspect-ratio: 16 / 10; object-fit: cover; width: 100%; border-radius: var(--raggio); background: var(--fondo);
}
.notizia-segnaposto {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10;
  background: var(--fondo); border-radius: var(--raggio);
}
.notizia-segnaposto img { width: 28%; opacity: .55; }
.notizia-data { color: var(--tenue); font-size: .85rem; margin: .7rem 0 .2rem; }
.notizia-scheda h3 { font-size: 1.3rem; font-weight: 600; }
.notizia-scheda h3 a, .elenco-notizie h2 a { text-decoration: none; }

.elenco-notizie { list-style: none; margin: 0 0 3rem; padding: 0; }
.elenco-notizie li { border-bottom: 1px solid var(--linea); padding: 1.25rem 0; }
.elenco-notizie article { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .elenco-notizie article { grid-template-columns: 14rem 1fr; } }
.elenco-notizie h2 { font-size: 1.55rem; font-weight: 600; margin-bottom: .4rem; }
.elenco-notizie .notizia-data { margin-top: 0; }
.elenco-notizie p:last-child { margin: 0; color: var(--tenue); }

/* --------------------------------------------------------- calendario --- */

.anni { margin: 0 -1rem; position: sticky; top: 0; z-index: 3; background: var(--carta); border-bottom: 1px solid var(--linea); }
.anni ul {
  list-style: none; margin: 0; padding: .6rem 1rem; display: flex; gap: .3rem;
  overflow-x: auto; scrollbar-width: thin; direction: rtl;
}
.anni li { direction: ltr; }
.anni a {
  display: block; padding: .4rem .7rem; border-radius: 99px; text-decoration: none;
  font: 600 1rem/1 var(--titoli); font-variant-numeric: tabular-nums; color: var(--tenue);
}
.anni a:hover { background: var(--fondo); color: var(--inchiostro); }
.anni a[aria-current="page"] { background: var(--rosso); color: #fff; }
@media (min-width: 700px) { .anni { margin: 0 -1.5rem; } .anni ul { padding: .6rem 1.5rem; } }

.salta-mese { margin: 1rem 0 0; }
.salta-mese a {
  font: 600 .9rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .06em; color: var(--rosso); text-decoration: none;
}
.salta-mese a::after { content: " ↓"; }
.mese { margin: 2rem 0; scroll-margin-top: 4rem; }
.mese h2 {
  font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--inchiostro); padding-bottom: .35rem;
}
.mese h2 span { color: var(--tenue); font-weight: 600; font-size: 1rem; margin-left: .35rem; }

/* --------------------------------------------------------------- gara --- */

.gara-testa { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem 0 .5rem; }
.gara-testa h1 { font-size: clamp(1.9rem, 5.5vw, 3rem); font-weight: 700; line-height: 1; }
.gara-quando { color: var(--tenue); margin: .5rem 0 .75rem; }
.etichette { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.etichette li {
  font: 600 .85rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .05em;
  padding: .42rem .65rem; border: 1px solid var(--linea); border-radius: 99px;
}
.etichette .tenue { font-weight: 500; text-transform: none; letter-spacing: 0; }
.etichette .evidenza { background: var(--giallo-velo); border-color: transparent; }
.etichette .aperte { background: var(--verde-velo); color: var(--verde); border-color: transparent; }
@media (max-width: 520px) {
  .gara-testa { flex-direction: column; gap: .9rem; }
  .data-blocco.grande { width: auto; flex-direction: row; gap: .5rem; padding: .45rem .8rem; align-self: flex-start; }
  .data-blocco.grande b { font-size: 1.6rem; }
  .data-blocco.grande small { margin: 0; font-size: .85rem; }
}

.tabella-scorre { overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; }
.classifica { width: 100%; border-collapse: collapse; font-size: .97rem; }
.classifica th {
  font: 600 .78rem/1.2 var(--titoli); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tenue); text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.classifica td { padding: .6rem .6rem; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.classifica tbody tr:hover { background: var(--fondo); }
.classifica-gara { max-width: 50rem; }
.classifica .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.classifica .ordine { color: var(--tenue); font: 600 1rem/1 var(--titoli); width: 2rem; }
.classifica .tempo { font: 600 1.15rem/1 var(--titoli); }
.atleta-cella a { font-weight: 500; text-decoration: none; }
.atleta-cella small { display: block; color: var(--tenue); font-size: .82rem; white-space: nowrap; }
.dettaglio-telefono { display: none; }

/* Sul telefono sei colonne non ci stanno: restano posizione, nome e tempo,
   e sotto il tempo in piccolo ritmo e piazzamenti. */
@media (max-width: 640px) {
  .classifica .sec { display: none; }
  .classifica td { padding: .65rem .4rem; }
  .classifica .tempo { vertical-align: top; }
  .dettaglio-telefono {
    display: block; margin-top: .3rem; color: var(--tenue);
    font: 500 .78rem/1.3 var(--corpo); white-space: nowrap;
  }
  .storico .atleta-cella small { white-space: normal; }
  .storico .dettaglio-telefono { white-space: normal; max-width: 7.5rem; margin-left: auto; }
}
.data-breve { white-space: nowrap; font: 600 .95rem/1 var(--titoli); text-transform: uppercase; color: var(--tenue); }

.iscritti {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.iscritti a { display: flex; align-items: center; gap: .65rem; text-decoration: none; padding: .35rem; border-radius: var(--raggio); }
.iscritti a:hover { background: var(--fondo); }

.edizioni {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
}
.edizioni a {
  display: flex; flex-direction: column; gap: .2rem; padding: .6rem .75rem;
  border: 1px solid var(--linea); border-radius: var(--raggio); text-decoration: none;
}
.edizioni a:hover { border-color: var(--rosso); }
.edizioni b { font: 700 1.4rem/1 var(--titoli); font-variant-numeric: tabular-nums; }
.edizioni small { color: var(--tenue); font-size: .82rem; }

.allegati { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.volantino { margin: 0; max-width: 22rem; }
.volantino img { border-radius: var(--raggio); border: 1px solid var(--linea); }
.bottone {
  display: inline-block; background: var(--rosso); color: #fff; text-decoration: none;
  font: 600 1rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .06em;
  padding: .8rem 1.1rem; border-radius: var(--raggio);
}
.bottone:hover { background: var(--rosso-forte); color: #fff; }

/* ------------------------------------------------------------- atleti --- */

.avatar {
  width: var(--m, 48px); height: var(--m, 48px); border-radius: 50%; object-fit: cover; flex: none;
  background: var(--fondo);
}
.avatar-iniziali {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fondo); color: var(--tenue); border: 1px solid var(--linea);
  font: 700 calc(var(--m, 48px) * .38)/1 var(--titoli); letter-spacing: .02em;
}

.barra-atleti { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.schede { display: flex; gap: .3rem; }
.schede a {
  text-decoration: none; padding: .5rem .85rem; border-radius: 99px;
  font: 600 1rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .05em; color: var(--tenue);
}
.schede a span { font-variant-numeric: tabular-nums; opacity: .75; margin-left: .2rem; }
.schede a[aria-current="page"] { background: var(--inchiostro); color: var(--carta); }
.cerca input {
  font: inherit; font-size: 1rem; color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--linea); border-radius: var(--raggio); padding: .55rem .8rem; width: min(18rem, 100%);
}
.cerca input:focus { border-color: var(--inchiostro); outline: none; box-shadow: 0 0 0 3px var(--giallo-velo); }

.griglia-atleti {
  list-style: none; margin: 0 0 3rem; padding: 0;
  display: grid; gap: .25rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.griglia-atleti a {
  display: flex; align-items: center; gap: .8rem; padding: .6rem .4rem;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--linea);
}
.griglia-atleti a:hover { background: var(--fondo); }
.griglia-atleti a:hover .atleta-nome { color: var(--rosso); }
.atleta-dati { min-width: 0; }
.atleta-nome { display: block; font: 600 1.15rem/1.15 var(--titoli); }
.atleta-meta { display: block; color: var(--tenue); font-size: .88rem; }

.atleta-testa { display: flex; gap: 1.5rem; align-items: center; padding: 1.5rem 0 .5rem; }
.atleta-testa h1 { font-size: clamp(2.2rem, 6.5vw, 3.6rem); font-weight: 500; text-transform: uppercase; line-height: .95; }
.atleta-testa h1 span { display: block; font-weight: 700; }
.atleta-cifre { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; color: var(--tenue); }
.atleta-cifre b { font: 700 1.35rem/1 var(--titoli); color: var(--inchiostro); font-variant-numeric: tabular-nums; margin-right: .2rem; }
@media (max-width: 520px) { .atleta-testa { flex-direction: column; align-items: flex-start; gap: 1rem; } }

.record {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}
.record li {
  border: 1px solid var(--linea); border-top: 4px solid var(--giallo);
  border-radius: var(--raggio); padding: .85rem 1rem 1rem; display: flex; flex-direction: column;
}
.record li.senza { border-top-color: var(--linea); }
.record-distanza { font: 600 .82rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); }
.record-tempo { font: 700 2.4rem/1.05 var(--titoli); font-variant-numeric: tabular-nums; margin: .35rem 0 .3rem; }
.record-assente { font-size: 1.3rem; font-weight: 500; color: var(--tenue); }
.record-gara { font-weight: 500; font-size: .93rem; text-decoration: none; line-height: 1.3; }
.record-data { color: var(--tenue); font-size: .85rem; }
/* Dopo le regole generali dei record, altrimenti verrebbero sovrascritte. */
@media (max-width: 640px) {
  .record { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .record li { padding: .7rem .75rem .8rem; }
  .record-tempo { font-size: 1.85rem; }
  .record-assente { font-size: 1.1rem; }
  .record-gara { font-size: .85rem; }
}

.anno-storico { border-bottom: 1px solid var(--linea); }
.anno-storico summary {
  list-style: none; cursor: pointer; padding: .85rem .25rem; display: flex; align-items: baseline; gap: .75rem;
}
.anno-storico summary::-webkit-details-marker { display: none; }
.anno-storico summary::before {
  content: "+"; font: 700 1.2rem/1 var(--titoli); color: var(--rosso); width: 1rem;
}
.anno-storico[open] summary::before { content: "−"; }
.anno-storico .anno { font: 700 1.5rem/1 var(--titoli); font-variant-numeric: tabular-nums; }
.anno-storico .tabella-scorre { padding-bottom: 1rem; }
.segno-record {
  display: inline-block; margin-left: .4rem; vertical-align: .15em;
  font: 700 .66rem/1 var(--titoli); letter-spacing: .08em; padding: .22rem .35rem; border-radius: 3px;
  background: var(--giallo); color: #161616;
}

/* --------------------------------------------- testo libero (pagine) --- */

.testo { font-size: 1.08rem; line-height: 1.7; max-width: 68ch; margin-bottom: 3rem; }
.testo h2, .testo h3, .testo h4 { font-family: var(--titoli); margin: 2rem 0 .6rem; line-height: 1.1; }
.testo h2 { font-size: 1.75rem; }
.testo h3 { font-size: 1.4rem; }
.testo h4 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .05em; }
.testo img { border-radius: var(--raggio); margin: 1.25rem 0; }
.testo figure { margin: 1.5rem 0; }
.testo figcaption { color: var(--tenue); font-size: .9rem; margin-top: .4rem; }
.testo ul, .testo ol { padding-left: 1.3rem; }
.testo li { margin: .3rem 0; }
.testo a { color: var(--rosso); }
.testo table { border-collapse: collapse; width: 100%; font-size: .95rem; display: block; overflow-x: auto; }
.testo td, .testo th { border-bottom: 1px solid var(--linea); padding: .5rem .6rem; text-align: left; }
.testo blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem; border-left: 4px solid var(--giallo); color: var(--tenue); }
.testo iframe { max-width: 100%; border: 0; }

/* ------------------------------------------------------------ societa --- */

.societa-attacco { font: 600 clamp(1.3rem, 3vw, 1.7rem)/1.2 var(--titoli); color: var(--tenue); margin: .6rem 0 0; }

.valori {
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.valori li { position: relative; padding-top: .25rem; }
.valori-lettera {
  display: block; font: 700 6.5rem/.8 var(--titoli); color: var(--rosso); margin-bottom: .6rem;
}
.valori li:nth-child(2) .valori-lettera { color: var(--giallo); -webkit-text-stroke: 1px color-mix(in srgb, var(--inchiostro) 15%, transparent); }
.valori li:nth-child(3) .valori-lettera { color: var(--inchiostro); }
.valori h3 { font-size: 1.6rem; text-transform: uppercase; margin-bottom: .4rem; }
.valori p { color: var(--tenue); margin: 0; }

.societa-citazione {
  margin: 1.25rem 0 1.75rem; max-width: 46rem; padding-left: 1.1rem; border-left: 4px solid var(--giallo);
  font: 500 1.25rem/1.45 var(--corpo); font-style: italic;
}
.storia { list-style: none; margin: 0; padding: 0; max-width: 50rem; }
.storia li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--linea); }
.storia-anno { font: 700 2.1rem/1 var(--titoli); color: var(--rosso); font-variant-numeric: tabular-nums; }
.storia-anno small { display: block; font-size: 1.1rem; color: var(--tenue); margin-top: .15rem; }
.storia h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.storia p { margin: 0; color: var(--tenue); }
@media (max-width: 520px) { .storia li { grid-template-columns: 1fr; gap: .4rem; } }

.direttivo {
  margin: 1.25rem 0 0; display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.direttivo dt { font: 600 .8rem/1.2 var(--titoli); text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); margin-bottom: .3rem; }
.direttivo dd { margin: 0 0 .15rem; font: 600 1.25rem/1.3 var(--titoli); }
.direttivo a { text-decoration: none; }

.eventi { display: grid; gap: 1rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.eventi article { border: 1px solid var(--linea); border-top: 4px solid var(--rosso); border-radius: var(--raggio); padding: 1.1rem 1.15rem 1.2rem; }
.eventi h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.eventi p { color: var(--tenue); }
.eventi-cifra { color: var(--inchiostro) !important; }
.eventi-cifra b { font: 700 1.6rem/1 var(--titoli); margin-right: .2rem; }

.mondo { display: grid; gap: 1.5rem 2.5rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mondo h3 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.mondo ul { list-style: none; margin: 0; padding: 0; }
.mondo li { padding: .45rem 0; border-bottom: 1px solid var(--linea); }
.mondo li b { font-weight: 600; display: block; }
.mondo li .tenue { font-size: .9rem; }

.socio { background: var(--fondo); border-radius: var(--raggio); padding: 1.5rem 1.25rem 1.75rem; }
@media (min-width: 700px) { .socio { padding: 2rem 2rem 2.25rem; } }
.socio-attacco { font-size: 1.15rem; max-width: 40rem; margin: 1rem 0 1.5rem; }
.passi { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: passo;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.passi li { counter-increment: passo; background: var(--carta); border-radius: var(--raggio); padding: 1.1rem 1.1rem 1.25rem; border: 1px solid var(--linea); }
.passi li::before {
  content: counter(passo); display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--inchiostro); color: var(--carta);
  font: 700 1.1rem/1 var(--titoli); margin-bottom: .7rem;
}
.passi h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.passi p { color: var(--tenue); }
.bottone-secondario { background: transparent; color: var(--inchiostro); border: 1px solid var(--inchiostro); text-transform: none; letter-spacing: 0; font-family: var(--corpo); font-weight: 500; }
.bottone-secondario:hover { background: var(--inchiostro); color: var(--carta); }
.servizi h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }
.servizi dl { margin: 0; display: grid; gap: .3rem 1.5rem; grid-template-columns: minmax(10rem, max-content) 1fr; }
.servizi dt { font-weight: 600; }
.servizi dd { margin: 0 0 .6rem; color: var(--tenue); }
@media (max-width: 560px) { .servizi dl { grid-template-columns: 1fr; } .servizi dd { margin-bottom: 1rem; } }

/* -------------------------------------------------------- corrisannio --- */

.documenti { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.documenti a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--linea); border-radius: var(--raggio); text-decoration: none; font-weight: 500;
}
.documenti a:hover { border-color: var(--rosso); }
.documenti small { font: 600 .75rem/1 var(--titoli); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.gara-riga-fissa { display: flex; align-items: center; gap: .9rem; padding: .75rem .25rem; }
.regolamento { display: grid; gap: 1.75rem; margin-top: 1.25rem; max-width: 52rem; }
.regolamento h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.regolamento p { color: var(--tenue); }
.presidenti { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.presidenti li { padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.presidenti b { font-weight: 600; display: block; }
.punti { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.punti table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.punti caption { text-align: left; font: 600 .82rem/1.2 var(--titoli); text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); padding-bottom: .4rem; }
.punti td { padding: .38rem 0; border-bottom: 1px solid var(--linea); }
.punti td:last-child { text-align: right; font: 600 1.05rem/1 var(--titoli); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- campionato --- */

.spiega { color: var(--tenue); max-width: 46rem; margin: 1rem 0; }
.avviso {
  max-width: 46rem; padding: .8rem 1rem; border-radius: var(--raggio);
  background: var(--giallo-velo); border-left: 4px solid var(--giallo); font-size: .95rem;
}
.due-colonne { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.colonna-titolo { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08em; margin: 1rem 0 .25rem; }
.colonna-titolo.spazio { margin-top: 2rem; }
.classifica .podio-1 .ordine { color: var(--giallo); }
.classifica .podio-1 .ordine, .classifica .podio-2 .ordine, .classifica .podio-3 .ordine { font-size: 1.25rem; }
.fuori-classifica { margin-top: .75rem; color: var(--tenue); font-size: .93rem; }
.fuori-classifica summary { cursor: pointer; padding: .4rem 0; }
.fuori-classifica ul { list-style: none; margin: .25rem 0 0; padding: 0; columns: 14rem; }
.fuori-classifica li { padding: .2rem 0; }
.fuori-classifica a { text-decoration: none; color: var(--inchiostro); }

/* ----------------------------------------------------------- contatti --- */

.contatti { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 1.5rem; }
.contatti > div { border-top: 4px solid var(--rosso); padding-top: 1rem; }
.contatti h2 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; }
.contatti-voce { font-size: 1.15rem; font-weight: 500; }

/* ------------------------------------------------------------- errore --- */

.pagina-errore { padding: 4rem 1rem 5rem; }
.errore-codice { font: 700 6rem/1 var(--titoli); color: var(--rosso); margin: 0 0 .5rem; }
.pagina-errore h1 { font-size: 2.4rem; text-transform: uppercase; margin-bottom: 1rem; }
.errore-strade { padding-left: 1.2rem; }

/* -------------------------------------------------------------- piede --- */

.piede { background: var(--piede); color: var(--piede-testo); margin-top: 4rem; }
.piede-dentro {
  max-width: var(--largo); margin: 0 auto; padding: 2.75rem 1rem 1.5rem;
  display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
@media (min-width: 700px) { .piede-dentro { padding: 3rem 1.5rem 1.5rem; } }
.piede .marchio { color: var(--piede-testo); margin-bottom: .9rem; }
.piede-marchio p:last-child { color: var(--piede-tenue); font-size: .93rem; max-width: 22rem; }
.piede h2 {
  font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--giallo); margin-bottom: .8rem;
}
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin: .35rem 0; }
.piede a { color: var(--piede-testo); text-decoration: none; }
.piede a:hover { color: var(--giallo); }
.piede-fondo {
  max-width: var(--largo); margin: 0 auto; padding: 1rem;
  border-top: 1px solid #2e2b29; color: var(--piede-tenue); font-size: .85rem;
}
@media (min-width: 700px) { .piede-fondo { padding: 1rem 1.5rem 1.5rem; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}