/* LO STILE DI CASA — le regole votate nel laboratorio, in un posto solo.
 *
 * Va linkato **dopo** il <style> di ogni pagina: qui non c'è niente di nuovo da
 * inventare, ci sono le otto scelte del round 2 applicate sopra a quel che c'era.
 * Il perché di ognuna sta in STILE.md.
 *
 *   A4  titoli di servizio in maiuscoletto spaziato
 *   B2  ritmo compatto
 *   B3  a fasce alternate
 *   D4  bottoni di solo testo sottolineato
 *   E3  campi a pillola piena
 *   G2  l'attesa è uno scheletro
 *   H5  il numero grande è colorato
 *   I5  il movimento è con la molla
 */

:root{
  --molla: cubic-bezier(.34, 1.4, .5, 1);
  --fascia: color-mix(in srgb, var(--rule-soft) 55%, transparent);
  /* round 6 · la seconda tinta: l'ambra resta l'azione e il numero che conta,
     la pietra prende le quantità di contorno (le barre di volume, gli assi). */
  --pietra:#5c6672;
}

/* ─── A4 · i titoli di servizio ───────────────────────────────────────────
   Solo i titoli di *sezione*: l'h1 di copertina resta il serif grande, e il
   nome di una persona o di una gara dentro un foglio pure. Qui si fa da parte
   la scaffalatura, non il contenuto. */
section h2,
.mdg-fam h3{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.6;
  margin-bottom:10px;
}
section h2 em,
.mdg-fam h3 em{font-style:normal;color:var(--dawn-ink)}

/* ─── B2 + B3 · compatto, e a fasce ───────────────────────────────────────
   Le due scelte vanno insieme: fitto si legge solo se l'occhio ha un appiglio.
   La fascia è tenue apposta — a righe strette una zebra vera stanca. */
table.dati td{padding:5px 8px 5px 0}
table.dati tbody tr:nth-child(odd) td{background:var(--fascia)}
table.dati tbody tr:nth-child(odd) td:first-child{border-radius:6px 0 0 6px}
table.dati tbody tr:nth-child(odd) td:last-child{border-radius:0 6px 6px 0}
table.dati td{border-bottom:0}

.riga{padding:6px 8px;border-bottom:0;border-radius:7px}
#elenco > .riga:nth-child(odd){background:var(--fascia)}
.riga .pt b{font-size:1.15rem}

.pal td{padding:6px 8px 6px 0}
.foglio table td{padding:6px 8px 6px 0}

/* ─── D4 · i bottoni sono testo sottolineato ──────────────────────────────
   Niente scatole: è un sito da leggere. Restano scatole solo i filtri, che
   sono interruttori e non azioni, e la X che chiude un foglio. */
.piu,
.lk a,
.pagina,
.mdg-tutte,
.albo .tutti{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:8px 2px !important;
  min-height:38px;
  width:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start !important;
  color:var(--dawn-ink) !important;
  font-weight:700;
  border-bottom:2px solid color-mix(in srgb, var(--dawn) 55%, transparent) !important;
  text-decoration:none;
}
.piu{min-height:40px}
.piu:hover,
.lk a:hover,
.pagina:hover,
.mdg-tutte:hover,
.albo .tutti:hover{color:var(--ink) !important;border-bottom-color:var(--ink) !important}
.lk{gap:20px}
.piu{margin:14px 0 34px}
.pagina{margin-top:16px}

/* ─── E3 · i campi sono pillole piene ─────────────────────────────────────
   Il fondo pieno dice "qui si scrive" meglio di un contorno sottile. */
.cerca input,
.filtro input,
input.cx,
.menu select{
  background:var(--rule-soft);
  border:1px solid transparent;
  border-radius:999px;
  padding-left:17px;
  padding-right:17px;
}
.cerca input:focus,
.filtro input:focus,
input.cx:focus,
.menu select:focus{background:#fff;border-color:var(--rule)}

/* ─── G2 · l'attesa è uno scheletro ───────────────────────────────────────
   Barre nella forma di quel che sta arrivando, invece di una frase. */
@keyframes onda{0%{background-position:100% 0}100%{background-position:-100% 0}}
.scheletro{margin:6px 0 2px}
.scheletro i{
  display:block;height:12px;border-radius:6px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--rule-soft) 30%,#fff 50%,var(--rule-soft) 70%);
  background-size:200% 100%;
  animation:onda 1.4s linear infinite;
}
/* nell'elenco degli atleti le barre hanno l'altezza di una riga vera */
.scheletro.elenco i{height:27px;margin-bottom:10px;border-radius:7px}
.scheletro i:nth-child(1){width:64%}
.scheletro i:nth-child(2){width:92%}
.scheletro i:nth-child(3){width:78%}
.scheletro i:nth-child(4){width:88%}
.scheletro i:nth-child(5){width:52%}

/* ─── H5 · il numero grande è colorato ────────────────────────────────────
   I numeri sono il contenuto di questo sito: che si vedano. */
.num .v,
.riga .pt b,
.mdg-testa b,
.mdg-fam .ft span b,
.rec .c .tm,
.foglio .sq b{color:var(--dawn-ink)}
.num .v small{color:var(--ink-3)}

/* ─── I5 · il movimento è con la molla ────────────────────────────────────
   Una curva sola per tutto il sito, e le righe che arrivano a cascata. */
@keyframes su-molla{from{opacity:0;transform:translateY(10px) scale(.985)}}
.foglio{animation:su-molla .42s var(--molla) both !important}
.velo.on .foglio{animation:su-molla .42s var(--molla) both}

#corpoRighe tr,
.mdg-fam{animation:su-molla .34s var(--molla) both}
#corpoRighe tr:nth-child(1){animation-delay:0s}
#corpoRighe tr:nth-child(2){animation-delay:.03s}
#corpoRighe tr:nth-child(3){animation-delay:.06s}
#corpoRighe tr:nth-child(4){animation-delay:.09s}
#corpoRighe tr:nth-child(5){animation-delay:.12s}
#corpoRighe tr:nth-child(n+6){animation-delay:.15s}
.mdg-fam:nth-child(1){animation-delay:0s}
.mdg-fam:nth-child(2){animation-delay:.05s}
.mdg-fam:nth-child(3){animation-delay:.1s}
.mdg-fam:nth-child(n+4){animation-delay:.15s}

@media(prefers-reduced-motion:reduce){
  .foglio,.velo.on .foglio,#corpoRighe tr,.mdg-fam{animation:none !important}
  .scheletro i{animation:none}
  /* chi ha chiesto meno movimento non vuole nemmeno il rimbalzo sotto il dito */
  button:active,.row:active,.lk a:active,.piu:active,.pagina:active,
  .mdg-tutte:active,.albo .tutti:active,.chip a:active{transform:none}
}

/* ═════════════════════════════════════════════════════════════════════════
   IL VERDETTO DEL TASTE-SKILL (13/08/2026) — nove voci su dieci passate.
   Sono regole di igiene, non di stile: nessuna cambia la faccia del sito.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── cifre · le colonne di numeri stanno in colonna ──────────────────────
   In Inter proporzionale l'1 è più stretta dell'8: in una classifica i due
   punti dei minuti ballano da una riga all'altra e l'occhio non scende più
   dritto. `.tnum` esisteva già ma andava messa a mano, voce per voce. Qui
   vale per tutto quello che è, per definizione, un numero. */
table.dati td,
table.dati th,
.riga,
.pal td,
.albo .an,
.albo .vv .tt,
.num .v,
.rec .c .tm,
.foglio .sq b,
.anni button,
.mdg-testa b,
.mdg-fam .ft span b{font-variant-numeric:tabular-nums}

/* ─── premuto · qualcosa deve muoversi sotto il dito ──────────────────────
   Sul telefono l'hover non esiste: si tocca un filtro e per il tempo che la
   mappa impiega a ridisegnarsi non succede niente, e si tocca di nuovo. La
   molla di casa è la stessa di tutto il resto. */
button:active,
.row:active,
.lk a:active,
.piu:active,
.pagina:active,
.mdg-tutte:active,
.albo .tutti:active,
.chip a:active{transform:translateY(1px) scale(.985)}
/* la transizione va riscritta per intero (non si somma a quella della pagina):
   dentro ci sono anche fondo, bordo e colore, che erano l'`all .12s` di prima */
button,
.row,
.lk a,
.piu,
.pagina,
.mdg-tutte,
.albo .tutti{transition:transform .1s var(--molla),background-color .12s,border-color .12s,color .12s}
/* i comandi della mappa sono roba di Leaflet: li lasciamo stare */
.leaflet-container button:active,
.leaflet-control button:active{transform:none}

/* ─── a capo · niente parole orfane ───────────────────────────────────────
   Nel pannello della mappa (390px) e nella testata di una scheda i titoli in
   serif andavano a capo dove capitava, spesso lasciando una parola sola in
   ultima riga. Chi non conosce la proprietà la ignora e basta. */
h1,h2,h3,
.pn h1,.sk h2,.hero h1,.foglio h2{text-wrap:balance}
p,.lede,.dice,.nota,.mia .d{text-wrap:pretty}

/* ─── tastiera · si deve vedere dove si è ─────────────────────────────────
   C'era una sola regola di fuoco per pagina (le righe dell'elenco). Tutto il
   resto — testata, filtri, campi, "vedi tutte" — spariva sotto il Tab. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--dawn-ink);outline-offset:2px;border-radius:5px}
.filtri button:focus-visible,
.anni button:focus-visible,
.chip button:focus-visible{outline-offset:3px}

/* il salto al contenuto: invisibile finché non lo si raggiunge col Tab */
.salta{position:absolute;left:-9999px;top:0;z-index:5000;background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:0 0 11px 0;font-size:.72rem;font-weight:700;text-decoration:none;
  letter-spacing:.06em}
.salta:focus{left:0}

/* ─── ancore · non finire sotto la testata ────────────────────────────────
   La testata è fissa: `#punti` atterrava sul titolo tagliato a metà. */
h1[id],h2[id],h3[id],h4[id],
section[id],details[id],article[id]{scroll-margin-top:66px}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ═════════════════════════════════════════════════════════════════════════
   IL VERDETTO DEL ROUND 6 (13/08/2026) — il colore e i pezzi che si toccano.
   Regola del round: niente colore che non dica qualcosa.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── C5 · uomini e donne si dicono con una forma ─────────────────────────
   Il ♂ blu e la ♀ rossa erano l'unico posto del sito dove il colore voleva
   dire una persona. Pieno = il campo maschile, vuoto = quello femminile: si
   legge anche da daltonici e in bianco e nero. */
.albo .vv .nn::before{
  content:'' !important;
  display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:7px;vertical-align:middle;box-sizing:border-box;
  border:1.5px solid var(--ink-3);
}
.albo .vv.m .nn::before{background:var(--ink-3)}
.albo .vv.f .nn::before{background:none}
/* la chiave sta una volta sola, in cima all'albo, non su ogni riga */
.albo .at::after{
  content:' · ● uomini  ○ donne';
  font-size:.92em;letter-spacing:.06em;color:var(--ink-4);font-weight:600;
}

/* ─── H4 · la striscia degli anni: quello scelto è grande ─────────────────
   Quattordici edizioni facevano tre file di pillole prima del contenuto. Ora
   è una riga sola che si scorre col dito: l'anno acceso è in serif grande,
   gli altri arretrano. Meno inchiostro, e dove sei si vede da lontano. */
.anni,
.chip.anni{
  display:flex;align-items:baseline;gap:14px;flex-wrap:nowrap;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  max-height:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
}
.anni::-webkit-scrollbar,
.chip.anni::-webkit-scrollbar{display:none}
/* la vecchia sfumatura era in fondo a tre file: ora la striscia è una riga
   sola e la sfumatura sta a destra. Il JS che accende `.sfuma` misura
   l'altezza, quindi in riga non la accende più: la regola resta per sicurezza. */
.chip.anni.sfuma{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
}
.anni button,
.chip.anni button{
  flex:0 0 auto;
  background:none;border:0;border-radius:0;padding:4px 0;min-height:34px;
  font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--ink-4);
  font-variant-numeric:tabular-nums;cursor:pointer;
  transition:color .12s,font-size .12s;
}
.anni button.on,
.chip.anni button.on{
  font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1;
  color:var(--ink);background:none;border:0;
}
/* sulla pagina di una gara l'etichetta non è sempre un anno secco: dove ci
   sono più percorsi diventa «2025 · vertova camminata», e a 1,75rem sarebbe
   un titolo. Lì l'acceso cresce di meno, e il suo conto resta piccolo. */
.chip.anni button.on{font-size:1.3rem}
.chip.anni button.on i{font-size:.62rem;margin-left:6px;color:var(--ink-4)}
.anni button:hover,
.chip.anni button:hover{color:var(--ink-2)}
/* le tre letture di sempre (record, albo, fedelissimi) non sono un anno:
   restano pillole, o la striscia perde il suo unico significato */
.chip.anni .sempre{
  border:1px solid var(--rule) !important;border-radius:999px !important;
  padding:7px 13px !important;font-size:.7rem !important;font-family:var(--sans) !important;
  background:var(--fascia);color:var(--ink)
}
.chip.anni .sempre.on{background:var(--dawn-ink);border-color:var(--dawn-ink) !important;color:var(--bg);font-size:.7rem !important}
.chip.anni .sep{width:1px;height:20px;margin:0 4px;background:var(--rule);flex:0 0 auto}

/* ─── J2 · in cima alla scheda un numero grande e due di lato ─────────────
   Tre celle uguali dicevano che le tre cose pesano uguale, e non è vero: la
   distanza è quel che si cerca, dislivello e mese la accompagnano.
   Vale **solo nel pannello della mappa**, che è il posto con tre celle: il
   riquadro di /donne ne ha quattro e resta la griglia che era. */
.pn .num{
  grid-template-columns:1.5fr 1fr;
  grid-template-rows:auto auto;
}
.pn .num div:first-child{grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center}
.pn .num div:first-child .v{font-size:2.5rem;line-height:.92}
.pn .num div:first-child .v small{font-size:.68rem}
.pn .num div:nth-child(n+2) .v{font-size:1.12rem}
.pn .num div:nth-child(n+2) .v.mese{font-size:.92rem}

/* ─── I2 · la testata più bassa ───────────────────────────────────────────
   Dieci pixel in meno, su ogni pagina e sempre: su un telefono la testata
   fissa era il 9% dello schermo. Le pagine che ci appendono qualcosa di
   appiccicato (la ricerca degli atleti, la striscia degli anni) leggono
   `--hd`, che scende con lei. */
.hd{padding-top:8px !important;padding-bottom:8px !important}
:root{--hd:44px}

/* ─── la testata su schermo stretto ───────────────────────────────────────
   Quattro voci più il tasto della ricerca fanno 500px: a 360 la barra
   sbordava e si portava dietro tutta la pagina in orizzontale. La striscia
   della navigazione diventa una riga sola che si scorre col dito, come le
   strisce di scelta — e `min-width:0` è la riga che conta: senza, un flex
   item non scende mai sotto la larghezza del suo contenuto. */
@media(max-width:700px){
  .hd{gap:12px;padding-left:16px;padding-right:16px}
  .hd .wm{flex:0 0 auto}
  .hd nav{
    min-width:0;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    gap:13px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent);
  }
  .hd nav::-webkit-scrollbar{display:none}
  .hd nav > *{flex:0 0 auto}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVISIONE 42 · ATLANTE EDITORIALE
   La direzione eredita il laboratorio di casa e la disciplina Mercatorum:
   farina, inchiostro, rame raro, fogli opachi, segnaletica precisa, movimento
   che spiega. Non e' un nuovo tema: e' la stessa casa resa piu' proprietaria.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --farina:#faf8f3;
  --farina-2:#f4f0e7;
  --farina-3:#ece6d9;
  --bruno:#17150f;
  --bruno-2:#4f4b40;
  --rame:#b06d16;
  --rame-scuro:#81500f;
  --carta:#fdfbf6;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --r-sm:7px;
  --r-md:12px;
  --r-lg:16px;
  --ombra-foglio:0 14px 34px -25px rgba(23,21,15,.42);
  --ombra-foglio-alta:0 22px 54px -28px rgba(23,21,15,.52);
  --inchiostro:cubic-bezier(.22,.8,.28,1);
  --nav-mobile:58px;
  --registro:color-mix(in srgb,var(--ink) 7%,transparent);
  color-scheme:light;
}

html{scrollbar-gutter:stable;scroll-behavior:smooth}
body{accent-color:var(--dawn-ink);text-rendering:optimizeLegibility}
body.pagina-archivio{
  background-color:var(--farina);
  background-image:
    linear-gradient(90deg,transparent calc(50% - 481px),var(--registro) calc(50% - 480px),
      var(--registro) calc(50% - 479px),transparent calc(50% - 478px)),
    linear-gradient(90deg,transparent calc(50% + 478px),var(--registro) calc(50% + 479px),
      var(--registro) calc(50% + 480px),transparent calc(50% + 481px));
}
body.pagina-archivio::before{
  content:"45° 41′ N  ·  ARCHIVIO OROBICO  ·  DAL 2013";
  position:fixed;left:18px;top:88px;z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:600 9px/1 var(--mono);letter-spacing:.13em;color:var(--ink-4);
  pointer-events:none;
}

[hidden]{display:none !important}
::selection{background:color-mix(in srgb,var(--dawn) 35%,var(--farina));color:var(--ink)}
:focus-visible{outline:2px solid var(--dawn-ink) !important;outline-offset:3px}

/* Il telaio: foglio pubblico, non barra SaaS. */
.hd{
  min-height:52px;
  background:color-mix(in srgb,var(--farina) 96%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border-bottom-color:color-mix(in srgb,var(--ink) 12%,transparent);
}
.hd::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  transform:scaleX(0);transform-origin:left;background:var(--dawn);
  animation:riga-inchiostro .46s var(--inchiostro) .08s forwards;
}
@keyframes riga-inchiostro{to{transform:scaleX(1)}}
.hd .wm{letter-spacing:-.025em}
.hd .wm em{color:var(--rame-scuro)}
.hd nav{font-family:var(--mono);letter-spacing:.055em}
.hd nav a{position:relative;color:var(--ink-3);transition:color .16s var(--inchiostro)}
.hd nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:1px;height:2px;background:var(--dawn);
  transform:scaleX(0);transform-origin:left;transition:transform .2s var(--inchiostro)
}
.hd nav a:hover::after,.hd nav a.act::after{transform:scaleX(1)}
.hd nav a.act{border-bottom-color:transparent !important}
.hd .cnt{font-family:var(--mono);letter-spacing:.045em}

.wrap{position:relative;max-width:960px;padding-left:32px;padding-right:32px}
.hero{position:relative}
.pagina-archivio .hero::before{
  display:block;margin-bottom:11px;
  font:700 .6rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4)
}
.pagina-stagioni .hero::before{content:"Archivio / stagioni"}
.pagina-donne .hero::before{content:"Archivio / presenze"}
.pagina-analisi .hero::before{content:"Archivio / quattro letture"}
.pagina-gara .hero::before{content:"Scheda / gara"}
.hero h1,h1{text-wrap:balance;letter-spacing:-.035em}
.hero h1 em,h1 em{color:var(--rame-scuro)}
.lede,.riga1{max-width:62ch;color:var(--bruno-2)}

/* Segnaletica e numeri: il mono misura, il serif racconta. */
.kick,.sez,section h2,.mdg-fam h3,figcaption,.num .k,.tipo,.grp,
.cap,.conta b,.rec .c .q,.fascia-rec .rec i,.fascia-rec .rec .etich,
.foglio .sq,.albo .at,.dl dt,.pezzo h3{
  font-family:var(--mono) !important;
  letter-spacing:.12em !important;
}
.num .v,.rec .c .tm,.mdg-testa b,.riga .pt b{color:var(--rame-scuro)}
.tnum,.num .v,.tm,.ann{font-variant-numeric:tabular-nums lining-nums}

/* Fogli morbidi, senza muri di cartoline. */
figure,.scatola,.curva-sua{
  background:var(--carta) !important;
  border-color:color-mix(in srgb,var(--ink) 11%,transparent) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--ombra-foglio);
}
figure{position:relative}
figure::before{
  content:"";position:absolute;left:14px;top:-1px;width:54px;height:2px;background:var(--dawn)
}
.num{
  background:transparent !important;border-color:color-mix(in srgb,var(--ink) 12%,transparent) !important;
  border-radius:var(--r-md) !important;box-shadow:none !important
}
.num>div{background:color-mix(in srgb,var(--carta) 82%,transparent) !important}

/* Campi e filtri restano pillole perche' sono comandi di scelta, ma diventano
   una barra editoriale: stato leggibile e contorno quasi assente. */
.cerca input,.filtro input,input.cx,.menu select,.controlli select,.confronta select{
  background:var(--farina-2) !important;
  border-color:transparent !important;
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--ink) 12%,transparent);
  transition:background .16s,border-color .16s,box-shadow .16s;
}
.cerca input:focus,.filtro input:focus,input.cx:focus,.menu select:focus,.controlli select:focus,.confronta select:focus{
  background:var(--carta) !important;border-color:var(--dawn-ink) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dawn) 14%,transparent)
}
.filtri button,.sessi button,.anni button,.schede button,.chip button,.perc-strip a{
  transition:color .16s var(--inchiostro),background .16s var(--inchiostro),
    border-color .16s var(--inchiostro),transform .16s var(--inchiostro)
}
.filtri button,.sessi button{min-height:40px !important}
.pagina-atleti .riga{min-height:40px}
.pagina-gara table.dati .chi{
  display:inline-flex;align-items:center;min-height:40px;padding:12px 0 !important;margin:-12px 0 !important
}
.filtri button:hover,.sessi button:hover,.anni button:hover,.chip button:hover,.perc-strip a:hover{
  border-color:var(--ink-3);color:var(--ink);transform:translateY(-1px)
}
.filtri button.on,.sessi button.on,.anni button.on,.chip button.on,.perc-strip a.on{
  background:var(--ink) !important;border-color:var(--ink) !important;color:var(--farina) !important
}
.schede{position:relative}
.schede::after{
  content:"Indice";margin-left:auto;align-self:center;padding-right:4px;
  font:600 .58rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)
}

/* Righe vive: una linea d'inchiostro indica la relazione senza trasformare
   ogni risultato in una card. */
.riga,.row,table.dati tbody tr{transition:background .14s,color .14s}
.riga,.row{position:relative}
.riga::after,.row::after{
  content:"";position:absolute;left:0;top:5px;bottom:5px;width:2px;background:var(--dawn);
  transform:scaleY(0);transform-origin:top;transition:transform .18s var(--inchiostro)
}
.riga:hover::after,.riga:focus-within::after,.row:hover::after,.row:focus-visible::after,.row.on::after{transform:scaleY(1)}
.riga:hover,table.dati tbody tr:hover td{background:color-mix(in srgb,var(--dawn) 7%,var(--farina)) !important}
table.dati th{font-family:var(--mono);letter-spacing:.09em;border-bottom-color:color-mix(in srgb,var(--ink) 16%,transparent)}
table.dati td{transition:background .14s}

/* La mappa diventa una tavola dell'atlante: carta neutra, percorsi netti,
   controlli quadrati e un solo foglio laterale opaco. */
.pagina-mappa #map{background:var(--farina-2)}
.pagina-mappa .leaflet-tile-pane{
  filter:grayscale(.9) sepia(.16) saturate(.62) contrast(.88) brightness(1.08)
}
.pagina-mappa .leaflet-control-zoom{
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent) !important;
  border-radius:var(--r-sm) !important;box-shadow:var(--ombra-foglio) !important;overflow:hidden
}
.pagina-mappa .leaflet-control-zoom a{background:var(--carta);color:var(--ink);border-color:var(--rule-soft)}
.pagina-mappa .leaflet-control-attribution{font-family:var(--mono);color:var(--ink-3)}
.pagina-mappa .pn{
  border-radius:var(--r-md);background:color-mix(in srgb,var(--carta) 97%,transparent);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--ombra-foglio-alta)
}
.pagina-mappa .pn .top{
  background-image:linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),var(--registro) calc(100% - 1px));
  background-size:25% 100%
}
.pagina-mappa .pn .kick{display:flex;justify-content:space-between;gap:10px}
#risultatiCount{color:var(--rame-scuro);white-space:nowrap}
.pagina-mappa .row.on{background:color-mix(in srgb,var(--dawn) 8%,var(--carta));border-left-color:transparent}
.pagina-mappa .sk{background:var(--carta)}
.pagina-mappa .sk .shd{border-top:3px solid var(--sw)}
.leaflet-popup.pop .leaflet-popup-content-wrapper{background:var(--carta) !important;border-radius:var(--r-md) !important}
.leaflet-popup.pop .leaflet-popup-tip{background:var(--carta) !important}

/* Le pagine di archivio non devono avere tutte la stessa cadenza. */
.pagina-stagioni #curva,.pagina-donne #curva{margin-top:14px}
.pagina-stagioni .capitolo,.pagina-donne h2,.pagina-analisi section{
  position:relative;border-top-color:color-mix(in srgb,var(--ink) 14%,transparent) !important
}
.pagina-analisi section{counter-increment:lettura;padding-top:24px}
.pagina-analisi section::before{
  content:"0" counter(lettura);position:absolute;right:0;top:21px;
  font:500 .62rem/1 var(--mono);letter-spacing:.08em;color:var(--rame-scuro)
}
.pagina-analisi{counter-reset:lettura}
.pagina-analisi .controlli{position:relative}
.pagina-analisi .controlli::before{
  content:"scegli";position:absolute;z-index:2;left:17px;top:7px;
  font:700 .52rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--rame-scuro);pointer-events:none
}
.pagina-analisi .controlli select{padding-top:20px !important}
.pagina-donne .gare .gr:hover{background:color-mix(in srgb,var(--dawn) 6%,transparent)}
.pagina-donne .gare .ba i{background:var(--dawn-ink) !important}
.pagina-stagioni .anni{position:sticky;top:52px;z-index:300;padding:8px 0;background:color-mix(in srgb,var(--farina) 94%,transparent);backdrop-filter:blur(6px)}

/* Scheda gara: titolo da copertina, comandi locali vicini al contenuto. */
.pagina-gara .hero{border-bottom:0;padding-bottom:10px}
.pagina-gara .tipo i{box-shadow:0 0 0 4px color-mix(in srgb,var(--sw) 15%,transparent)}
.pagina-gara h1 .apri{position:relative;text-decoration-thickness:1px;text-underline-offset:8px}
.pagina-gara .fascia-rec .rec{border-radius:var(--r-sm);background:var(--farina-2)}
.pagina-gara .chip.anni{padding-bottom:7px;border-bottom:1px solid var(--rule-soft)}
.pagina-gara .scatola{box-shadow:none;border-top:2px solid color-mix(in srgb,var(--sw) 75%,var(--ink)) !important}

/* Dialoghi: stesso foglio, stessa profondita', stessa via d'uscita. */
.velo{z-index:1600 !important;background:rgba(23,21,15,.48) !important;-webkit-backdrop-filter:blur(2px) !important;backdrop-filter:blur(2px) !important}
.foglio{
  background:var(--carta) !important;border-radius:var(--r-lg) !important;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.66) !important
}
.foglio::before{
  content:"";position:absolute;left:24px;top:0;width:68px;height:3px;background:var(--dawn)
}
.foglio .chiudi{
  width:40px !important;height:40px !important;border:1px solid color-mix(in srgb,var(--dawn-ink) 65%,var(--rule)) !important;
  color:var(--dawn-ink) !important;background:var(--carta) !important
}
.foglio .chiudi:hover{background:var(--farina-2) !important;color:var(--ink) !important}

/* Colophon: finisce il racconto, non ricomincia la navigazione. */
.footer{
  color:var(--ink-3);border-top-color:color-mix(in srgb,var(--ink) 14%,transparent) !important
}
.pagina-archivio .footer::before{
  content:"FINE";display:block;margin-bottom:8px;
  font:700 .55rem/1 var(--mono);letter-spacing:.18em;color:var(--rame-scuro)
}
.footer a{text-decoration-thickness:1px;text-underline-offset:3px}

/* Ordine #65 · la densita' non deve diventare testo minuto. Le informazioni
   secondarie restano compatte, ma superano la soglia da didascalia tecnica. */
.hd nav a,.hd .cnt{font-size:.75rem !important}
.pagina-mappa .pn .kick,
.pagina-mappa .grp,
.pagina-archivio .hero::before,
section h2,.mdg-fam h3{font-size:.7rem !important;line-height:1.45}
.pagina-mappa .filtri button{font-size:.7rem !important}
.pagina-mappa .row span,
.pagina-mappa .row .mt{font-size:.75rem !important;line-height:1.35}
.footer{font-size:.72rem}

@media(max-width:1100px){body.pagina-archivio::before{display:none}}

/* Sotto i 700 px la navigazione globale diventa una soglia inferiore stabile.
   Tutte le cinque destinazioni restano visibili: niente menu, niente tagli. */
@media(max-width:700px){
  html{scrollbar-gutter:auto}
  body.pagina-archivio{padding-bottom:calc(var(--nav-mobile) + env(safe-area-inset-bottom))}
  .hd{min-height:48px;padding:8px 15px !important;overflow:visible;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .hd .wm{font-size:1.08rem}
  .hd nav{
    position:fixed;left:0;right:0;bottom:0;z-index:1300;
    display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 !important;
    width:100%;height:calc(var(--nav-mobile) + env(safe-area-inset-bottom));
    min-width:0;padding:0 4px env(safe-area-inset-bottom);
    overflow:visible !important;background:color-mix(in srgb,var(--carta) 97%,transparent);
    border-top:1px solid color-mix(in srgb,var(--ink) 15%,transparent);
    box-shadow:0 -12px 30px -26px rgba(23,21,15,.7);
    -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
    -webkit-mask-image:none !important;mask-image:none !important
  }
  .hd nav a{
    display:flex;align-items:center;justify-content:center;min-width:0;height:var(--nav-mobile);
    padding:4px 1px 2px !important;border:0 !important;
    font-size:clamp(.6rem,2.7vw,.68rem) !important;letter-spacing:.005em;text-align:center
  }
  .hd nav a::after{left:17%;right:17%;top:0;bottom:auto;height:2px;transform-origin:center}
  .hd nav a.act{color:var(--ink)}
  .pagina-mappa .pn{
    bottom:calc(var(--nav-mobile) + env(safe-area-inset-bottom)) !important;
    height:min(54svh,500px) !important;border-radius:var(--r-lg) var(--r-lg) 0 0
  }
  .pagina-mappa .filtri button{min-height:40px !important}
  .pagina-mappa .leaflet-control-attribution{bottom:calc(var(--nav-mobile) + env(safe-area-inset-bottom))}
  .pagina-mappa .hd nav{z-index:1400}
  .wrap{padding-left:20px;padding-right:20px}
  .pagina-archivio .hero::before{margin-bottom:8px}
  .schede::after{display:none}
  .pagina-atleti .schede{
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);
            mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent)
  }
  .pagina-atleti .schede::-webkit-scrollbar{display:none}
  .pagina-atleti .schede button{flex:0 0 auto}
  .pagina-stagioni .anni{top:48px}
  .foglio{
    border-radius:var(--r-lg) var(--r-lg) 0 0 !important;
    max-height:calc(100dvh - var(--nav-mobile) - env(safe-area-inset-bottom)) !important;
    padding-left:20px !important;padding-right:20px !important
  }
  .foglio::before{left:20px}
  .chip-giu{bottom:calc(var(--nav-mobile) + 10px + env(safe-area-inset-bottom)) !important}
  .pagina-gara .hero{padding-bottom:8px}
}

@media(max-width:420px){
  .pagina-mappa .pn .kick{font-size:.68rem !important}
  .pagina-mappa .pn h1{font-size:1.75rem}
  .wrap{padding-left:17px;padding-right:17px}
  .pagina-analisi section::before{display:none}
  .num .v{font-size:clamp(1.3rem,7vw,1.75rem) !important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hd::after{animation:none;transform:none}
  *,*::before,*::after{scroll-behavior:auto !important;transition-duration:.001ms !important;animation-duration:.001ms !important;animation-iteration-count:1 !important}
}