/*
 * Warmuppers: solo ciò che il prototipo non ha (ARCHITETTURA.md §6.3).
 * sito.css è il CSS originale e non si tocca: qui si aggiunge, con le sue variabili
 * (--lime --violet --deep --paper --muted --line) e il monospace delle etichette.
 * Si carica dopo sito.css: a parità di specificità vince questo file.
 */

/* ---------- Moduli: consenso, campo esca, stato, invio in corso ---------- */

/* consenso nella fascia newsletter lime (e nel modulo del quiz, se usato) */
.signup label.signupConsent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 0;
  color: var(--violet);
  font-size: 13px;
  line-height: 1.45;
}
/* casella disegnata coi colori della fascia: bordo viola, spunta lime su viola */
.signup .signupConsent input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 2px solid var(--violet);
  border-radius: 0;
  background: #ffffff45;
  cursor: pointer;
}
.signup .signupConsent input:checked {
  background: var(--violet);
}
.signup .signupConsent input:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  border: solid var(--lime);
  border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg);
}
.signup .signupConsent input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
.signupConsent a,
.quizLead label a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.signupConsent a:hover,
.quizLead label a:hover {
  text-decoration-thickness: 2px;
}
.quizLead label a {
  color: var(--lime);
}

/* Fuoco dei link in linea (consensi, corpo di articoli e privacy). L'anello globale di
   sito.css (3px a 4px di distanza) passa sopra le lettere vicine: qui il link si
   evidenzia a colori invertiti, dentro il suo riquadro, senza toccare il testo intorno.
   Il contorno trasparente resta per i colori forzati di Windows, dove gli sfondi spariscono. */
.signupConsent a:focus-visible,
.quizLead label a:focus-visible,
.articleBody > div a:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  background: var(--violet);
  color: var(--lime);
  text-decoration-thickness: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.quizLead label a:focus-visible,
.articleBody > div a:focus-visible {
  background: var(--lime);
  color: var(--deep);
}

/* Da desktop la fascia è su due colonne allineate in basso e la riga email + bottone
   sta alla pari col titolo, come nel prototipo. Il consenso resta nel flusso (un testo
   lungo fa crescere la fascia, non finisce sotto il piede) ma il form ne scende di una
   riga nel padding: margine negativo pari a 12px + una riga del consenso (13px × 1,45).
   Col consenso di una riga l'impaginazione è quella del prototipo; ogni riga in più
   alza la riga email invece di uscire dalla fascia. */
@media (width > 900px) {
  .newsletter .signup {
    margin-bottom: calc(-12px - 13px * 1.45);
  }
  .newsletter .signup label.signupConsent {
    margin: 12px 0 0;
  }
}

/* campo esca antispam: fuori schermo, fuori dal tab, invisibile ai lettori di schermo */
form input.campoEsca {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* riga di stato: vuota non occupa spazio */
.signupStato {
  margin: 12px 0 0;
  font: 700 12px/1.5 monospace;
  letter-spacing: .06em;
}
.signupStato:empty {
  display: none;
}
.signup .signupStato {
  color: var(--violet);
  letter-spacing: .06em;
}
.signup .signupStato.errore {
  color: #8f1d14;
}
.quizLead .signupStato {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.quizLead .signupStato.errore {
  color: #ff9a8c;
}
.quizLead .signupStato.ok {
  color: var(--lime);
}

/* invio in corso: bottone spento */
form[aria-busy="true"] button {
  opacity: .6;
  cursor: progress;
  pointer-events: none;
}

/* ---------- Articolo in bozza (visibile solo con la sessione del pannello) ---------- */

.draftBadge {
  display: inline-block;
  margin-left: 18px;
  padding: 5px 10px 4px;
  background: var(--lime);
  color: var(--deep);
  font: 900 11px monospace;
  letter-spacing: .12em;
  vertical-align: 1px;
}

/* ---------- Pagine nuove: privacy, conferma, 404 ---------- */

/* invito sotto la PageHero (conferma e 404) */
.pageHeroInner > .solidButton {
  margin-top: 34px;
}

/* informativa: stessa griglia e stessa tipografia dell'articolo, testo nella colonna larga */
.legalBody > div {
  grid-column: 2;
}
.legalBody p.lead {
  font-size: 22px;
}
.legalBody h2 {
  margin: 58px 0 20px;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.legalBody ul {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: square;
}
.legalBody li {
  margin: 0 0 10px;
  padding-left: 4px;
  color: #d5d7db;
  font-size: 18px;
  line-height: 1.7;
}
.legalBody li::marker {
  color: var(--lime);
}
/* due paragrafi di fila (privacy, o articoli scritti dal pannello): nel prototipo non
   capita mai e il preflight azzera i margini, così sembrerebbero uno solo. La coppia
   attacco + paragrafo del prototipo resta attaccata com'è. */
.articleBody > div > p:not(.lead) + p {
  margin-top: 1em;
}
.articleBody > div a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.articleBody > div a:hover {
  text-decoration-thickness: 2px;
}

@media (width <= 900px) {
  .legalBody > div {
    grid-column: 1;
  }
  .legalBody p.lead {
    font-size: 19px;
  }
  .legalBody h2 {
    margin: 40px 0 16px;
    font-size: 24px;
  }
  .legalBody li {
    font-size: 17px;
    line-height: 1.6;
  }
  .pageHeroInner > .solidButton {
    margin-top: 26px;
  }
}

/* ---------- Home: «Da leggere» senza la storia principale ---------- */

/* se la storia principale è in bozza o non esiste più, le brevi prendono tutta la
   larghezza invece di lasciare vuota la colonna di destra */
.editorialGrid > .storyBriefs:first-child {
  grid-column: 1 / -1;
}

/* ---------- Caroselli con tante voci (sorpassi e drop dal pannello) ---------- */

/* Nel prototipo i puntini non si stringono mai: da 9 voci a 390px la riga dei controlli
   sforava e le frecce uscivano dallo schermo. Qui i puntini si stringono solo quando
   manca spazio (con le voci del prototipo non cambia nulla); da 8 voci il bottone perde
   il padding e il puntino si centra dentro il suo bottone, così anche a 320px il puntino
   attivo (17px) non copre i vicini. Le frecce restano intere: fanno la stessa cosa dei
   puntini, con un bersaglio da 44px. */
.carouselControls .slideDots {
  min-width: 0;
}
.carouselControls .slideDots button {
  min-width: 0;
}
.carouselControls .slideDots:has(> button:nth-child(8)) button {
  padding-inline: 0;
}
.carouselControls .slideDots:has(> button:nth-child(8)) i {
  max-width: 100%;
  margin-inline: auto;
}

/* ---------- Drop: ritaglio scelto a mano (il valore «auto» segue il tono) ---------- */

.shopSlide .merchCrop.ritaglio1 img {
  transform: translate(0);
}
.shopSlide .merchCrop.ritaglio2 img {
  transform: translate(-33.3333%);
}
.shopSlide .merchCrop.ritaglio3 img {
  transform: translate(-66.6666%);
}
.shopSlide .merchCrop.ritaglioIntera img {
  width: 100%;
  object-fit: cover;
  transform: none;
}

/* ---------- Drop: prodotti veri dello shop (app/shop.php) ---------- */

/* la foto del prodotto riempie il riquadro: niente ritaglio a tre pannelli dei concept */
.shopSlideProdotto .shopSlideFoto {
  position: absolute;
  inset: 0;
  display: block;
}
.shopSlideProdotto .shopSlideFoto img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: none;
}
.shopSlideProdotto .shopSlideVisual > span {
  z-index: 1;
}
/* prezzo: lime e monospace come le etichette, il vecchio barrato */
.shopSlideCopy > span.shopPrezzo {
  margin: 0 0 22px;
  color: var(--lime);
  font: 700 20px/1.3 monospace;
}
.shopSlideCopy > span.shopPrezzo del {
  margin-right: 8px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
}
@media (width <= 900px) {
  .shopSlideCopy > span.shopPrezzo {
    margin-bottom: 14px;
    font-size: 17px;
  }
}

/* ---------- Piede: credito dell'agenzia (credito_marketipo() in guscio.php) ---------- */

.footerCredito a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footerCredito a:hover {
  color: var(--lime);
}
@media (width <= 900px) {
  .footerCredito {
    display: block;
    margin-top: 6px;
  }
  .footerCredito > span[aria-hidden] {
    display: none;
  }
}

/* ---------- «Vai al contenuto»: primo tasto Tab su ogni pagina (anche nello shop) ---------- */

.skip-link {
  position: absolute;
  top: -200px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--lime);
  color: var(--deep);
  font: 800 12px monospace;
  letter-spacing: .06em;
}
.skip-link:focus {
  top: 12px;
}
#contenuto:focus {
  outline: none;
}

/* ---------- Stampa: testo nero su bianco, senza testata, menu e moduli (anche la ricevuta dello shop) ---------- */

@media print {
  html,
  body {
    background: #fff !important;
  }
  body * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .siteHeader,
  .mobileMenu,
  .newsletter,
  .footerTop,
  .footerBottom > div,
  .skip-link,
  .wupCarrello,
  .woocommerce-breadcrumb,
  .woocommerce-product-gallery__trigger,
  .carouselControls {
    display: none !important;
  }
  img {
    max-width: 100% !important;
    break-inside: avoid;
  }
  .footerBottom {
    border-top: 1px solid #000;
  }
}

/* ---------- Home: Instagram con le anteprime (home_social(), card .igCard del prototipo) ---------- */

.socialFotoRail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.socialFotoRail .igCard {
  display: block;
  background: var(--violet);
}
.socialFotoRail .igCard small {
  color: var(--muted);
}
.socialFotoRail .igCard h3 {
  font-size: 17px;
  line-height: 1.2;
}

/* ---------- Home: ultimi video di YouTube (home_youtube(), app/youtube.php) ---------- */

.ytSection {
  padding-bottom: 80px;
}
.ytGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.ytCard {
  display: block;
  min-width: 0;
  padding-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--violet);
  transition: border-color .2s, transform .2s;
}
.ytCard:hover {
  border-color: var(--lime);
  transform: translateY(-4px);
}
.ytThumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
}
.ytThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ytThumb span {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 7px 9px;
  background: var(--lime);
  color: var(--deep);
  font: 900 11px monospace;
}
.ytThumb b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-size: 34px;
  text-shadow: 0 2px 14px #000a;
  opacity: .9;
}
.ytCard small {
  display: block;
  margin: 16px 18px 0;
  color: var(--muted);
  font: 800 12px monospace;
}
.ytCard h3 {
  margin: 10px 18px 0;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
@media (width <= 900px) {
  .socialFotoRail,
  .ytGrid {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .socialFotoRail .igCard {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
  .ytCard {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .ytSection {
    padding-bottom: 48px;
  }
}

/* ---------- Piloti: riepilogo dei risultati e leggende (piloti_riepilogo(), piloti_leggende() in pagine/piloti.php) ---------- */

.riderStats,
.riderLegends {
  padding-bottom: 80px;
}
.riderStatsUpdate,
.riderLegendsIntro {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
}
.riderStatsUpdate {
  font: 700 12px/1.5 monospace;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
}
.riderLegendsIntro {
  max-width: 50ch;
  font-size: 16px;
  line-height: 1.55;
}
.riderStatsNote,
.riderLegendsNote {
  max-width: 72ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* tabella: da desktop righe con i numeri in colonna, da 900 px in giù una card per pilota */
.riderStatsTable {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--violet);
  table-layout: fixed;
}
.riderStatsTable th,
.riderStatsTable td {
  padding: 22px 18px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.riderStatsTable thead th {
  padding-block: 16px;
  border-top: 0;
  color: var(--lime);
  font: 800 11px/1.4 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.riderStatsTable thead th:nth-child(1) {
  width: 20%;
}
.riderStatsTable thead th:nth-child(2) {
  width: 25%;
}
.riderStatsTable thead th:nth-child(3),
.riderStatsTable thead th:nth-child(4),
.riderStatsTable thead th:nth-child(5) {
  width: 11%;
}
.riderStatsTable tbody tr {
  transition: background-color .2s;
}
.riderStatsTable tbody tr:hover {
  background: var(--surface);
}
.riderStatsTable tbody th b,
.riderStatsTable td > b {
  display: block;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: 1;
}
.riderStatsTable tbody th b,
.riderStatsSeason > b {
  color: var(--lime);
}
.riderStatsTable tbody th span {
  display: block;
  margin-top: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.riderStatsTable tbody th small,
.riderStatsTable td > small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font: 700 11px/1.4 monospace;
  letter-spacing: .04em;
}
.riderStatsTable ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.riderStatsTable li {
  color: var(--muted);
  font: 700 12px/1.5 monospace;
}
.riderStatsTable li + li {
  margin-top: 4px;
}
.riderStatsSeason > p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* leggende: card con la foto 4:3, il credito sotto e i numeri */
.legendGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.legendCard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--violet);
  transition: border-color .25s;
}
.legendCard:hover {
  border-color: var(--lime);
}
.legendCard figure {
  margin: 0;
}
.legendCard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
}
.legendCard figcaption {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.legendCard figcaption span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}
.legendCard figcaption small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 700 11px/1.5 monospace;
  overflow-wrap: anywhere;
}
.legendCard figcaption a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legendCard figcaption a:hover {
  color: var(--lime);
}
.legendCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 18px 22px;
}
.legendCopy > p:first-child {
  margin: 0;
  color: var(--lime);
  font: 800 11px/1.5 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legendCopy h3 {
  margin: 10px 0 18px;
  font-size: clamp(26px, 2.2vw, 32px);
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.legendFigures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.legendFigures > div {
  min-width: 0;
}
.legendFigures b {
  display: block;
  color: var(--lime);
  font-size: 30px;
  letter-spacing: -.05em;
  line-height: 1;
}
.legendFigures span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 700 10px/1.4 monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.legendFigures small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.legendYears {
  margin: 14px 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.legendWhy {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.legendWhy b {
  color: var(--lime);
  font: 800 11px/1.5 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legendWhy p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
@media (width <= 1280px) {
  .legendGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width > 900px) and (width <= 1100px) {
  .riderStatsTable th,
  .riderStatsTable td {
    padding-inline: 12px;
  }
}
@media (width <= 900px) {
  .riderStats,
  .riderLegends {
    padding-bottom: 48px;
  }
  .riderStatsUpdate,
  .riderLegendsIntro {
    max-width: none;
    margin-top: 14px;
    text-align: left;
  }
  .riderStatsTable,
  .riderStatsTable tbody,
  .riderStatsTable th,
  .riderStatsTable td {
    display: block;
  }
  .riderStatsTable {
    border: 0;
    background: none;
  }
  .riderStatsTable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .riderStatsTable tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line);
    background: var(--violet);
    transition: border-color .25s;
  }
  .riderStatsTable tbody tr + tr {
    margin-top: 12px;
  }
  .riderStatsTable tbody tr:hover {
    border-color: var(--lime);
    background: var(--violet);
  }
  .riderStatsTable th,
  .riderStatsTable td {
    padding: 16px;
  }
  .riderStatsTable tbody th {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: baseline;
    gap: 6px 12px;
    border-top: 0;
  }
  .riderStatsTable tbody th span,
  .riderStatsTable tbody th small {
    margin-top: 0;
  }
  .riderStatsTitles,
  .riderStatsSeason {
    grid-column: 1 / -1;
  }
  .riderStatsTable td:nth-child(4),
  .riderStatsTable td:nth-child(5) {
    border-left: 1px solid var(--line);
  }
  .riderStatsTable td::before {
    content: attr(data-etichetta);
    display: block;
    margin-bottom: 10px;
    color: var(--lime);
    font: 800 10px/1.4 monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .riderStatsTable tbody th b,
  .riderStatsTable td > b {
    font-size: 28px;
  }
}
@media (width <= 600px) {
  .legendGrid {
    grid-template-columns: 1fr;
  }
}
@media (width <= 420px) {
  .riderStatsTable th,
  .riderStatsTable td {
    padding: 14px 12px;
  }
  .riderStatsTable tbody th span {
    font-size: 18px;
  }
}

/* ---------- Circuiti: le piste da vicino (circuiti_da_vicino() in pagine/circuiti.php) ---------- */

/* dopo la fascia lime dell'atlante: stesso fondo scuro della pagina, card come le leggende dei piloti */
.trackCloseup {
  padding-block: 72px 96px;
}
.trackCloseupUpdate {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font: 700 12px/1.5 monospace;
  letter-spacing: .06em;
  text-align: right;
  text-transform: uppercase;
}
.trackCloseupIntro {
  max-width: 62ch;
  margin: -8px 0 32px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}
.trackCloseupNote {
  max-width: 80ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.trackCloseupGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.trackCloseCard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--violet);
  transition: border-color .25s;
}
.trackCloseCard:hover {
  border-color: var(--lime);
}
.trackCloseCard figure {
  margin: 0;
}
.trackCloseCard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
}
.trackCloseCard figcaption {
  padding: 12px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.trackCloseCard figcaption span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}
.trackCloseCard figcaption small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 700 11px/1.5 monospace;
  overflow-wrap: anywhere;
}
.trackCloseCard figcaption a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.trackCloseCard figcaption a:hover {
  color: var(--lime);
}
.trackCloseBody {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 22px 24px 26px;
  container-type: inline-size;
}
.trackCloseBody > p:first-child {
  margin: 0;
  color: var(--lime);
  font: 800 11px/1.5 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trackCloseBody h3 {
  margin: 10px 0 20px;
  font-size: clamp(30px, 2.6vw, 40px);
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: 1;
  overflow-wrap: anywhere;
}

/* misure: numero grande sopra, etichetta sotto, come i numeri dell'atlante */
.trackCloseSizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 12px;
  margin: 0;
  padding: 16px 0;
  border-block: 1px solid var(--line);
}
.trackCloseSizes > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  min-width: 0;
}
.trackCloseSizes dt {
  margin-top: 8px;
  color: var(--muted);
  font: 700 10px/1.4 monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.trackCloseSizes dd {
  margin: 0;
}
.trackCloseSizes b {
  display: block;
  color: var(--lime);
  font-size: 26px;
  letter-spacing: -.05em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.trackCloseSizes small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* record, vittorie e date: etichetta a sinistra, valore e note a destra */
.trackCloseFacts {
  margin: 0 0 20px;
}
.trackCloseFacts > div {
  display: grid;
  grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr);
  gap: 6px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.trackCloseFacts dt {
  padding-top: 4px;
  color: var(--lime);
  font: 800 10px/1.5 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trackCloseFacts dd {
  min-width: 0;
  margin: 0;
}
.trackCloseFacts b {
  margin-right: 10px;
  color: var(--paper);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.trackCloseFacts small {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.trackCloseFacts span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* la curiosità: in fondo alla card, come il parere del box nell'atlante */
.trackCloseNote {
  display: flex;
  gap: 12px;
  margin-top: auto;
}
.trackCloseNote > svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--lime);
}
.trackCloseNote b {
  color: var(--lime);
  font: 800 11px/1.5 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trackCloseNote p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
@container (width < 500px) {
  .trackCloseSizes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trackCloseFacts > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .trackCloseFacts dt {
    padding-top: 0;
  }
}
@media (width <= 900px) {
  .trackCloseup {
    padding-block: 48px 64px;
  }
  .trackCloseupUpdate {
    max-width: none;
    margin-top: 14px;
    text-align: left;
  }
  .trackCloseupIntro {
    margin: 0 0 24px;
    font-size: 16px;
  }
  .trackCloseupGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (width <= 420px) {
  .trackCloseCard figcaption {
    padding-inline: 16px;
  }
  .trackCloseBody {
    padding: 18px 16px 22px;
  }
  .trackCloseSizes b {
    font-size: 22px;
  }
}

/* ---------- Sorpassi: i sorpassi che hanno fatto la storia (sorpassi_storici() in pagine/sorpassi.php) ---------- */

/* sotto il carosello: card come le leggende dei piloti, foto 16:9 col credito sotto.
   Tre colonne da desktop, due fino a 1100 px, da 900 px in giù una fascia che scorre di lato. */
.overtakeLegends {
  padding-block: 64px 96px;
}
.overtakeLegendsIntro {
  max-width: 50ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}
.overtakeLegendsNote {
  max-width: 80ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.overtakeLegendGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.overtakeLegendCard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--violet);
  transition: border-color .25s;
}
.overtakeLegendCard:hover {
  border-color: var(--lime);
}
.overtakeLegendCard figure {
  margin: 0;
}
.overtakeLegendCard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
}
.overtakeLegendCard figcaption {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--line);
}
.overtakeLegendCard figcaption span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}
.overtakeLegendCard figcaption small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font: 700 11px/1.5 monospace;
  overflow-wrap: anywhere;
}
.overtakeLegendCard figcaption a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.overtakeLegendCard figcaption a:hover {
  color: var(--lime);
}
.overtakeLegendCopy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 20px 18px 22px;
}

/* anno grande e lime, poi gara e data come un'etichetta */
.overtakeLegendCopy > p:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  color: var(--lime);
  font: 800 11px/1.5 monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.overtakeLegendCopy > p:first-child b {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  font-weight: 850;
  letter-spacing: -.05em;
  line-height: 1;
}
.overtakeLegendCopy h3 {
  margin: 14px 0 12px;
  font-size: clamp(24px, 2vw, 30px);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.overtakeLegendRiders {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 700 12px/1.5 monospace;
}
.overtakeLegendStory {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* l'ultima card rimasta da sola nella sua riga la prende tutta: foto a sinistra, testo a destra */
@media (width > 1100px) {
  .overtakeLegendCard:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .overtakeLegendCard:last-child:nth-child(3n + 1) > figure {
    flex: 0 0 50%;
    border-right: 1px solid var(--line);
  }
  .overtakeLegendCard:last-child:nth-child(3n + 1) figcaption {
    border-bottom: 0;
  }
  .overtakeLegendCard:last-child:nth-child(3n + 1) .overtakeLegendCopy {
    justify-content: center;
    padding: 28px 32px;
  }
  .overtakeLegendCard:last-child:nth-child(3n + 1) .overtakeLegendStory {
    max-width: 60ch;
  }
}
@media (width > 900px) and (width <= 1100px) {
  .overtakeLegendGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .overtakeLegendCard:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .overtakeLegendCard:last-child:nth-child(odd) > figure {
    flex: 0 0 50%;
    border-right: 1px solid var(--line);
  }
  .overtakeLegendCard:last-child:nth-child(odd) figcaption {
    border-bottom: 0;
  }
}
@media (width <= 900px) {
  .overtakeLegends {
    padding-block: 40px 64px;
  }
  .overtakeLegendsIntro {
    max-width: none;
    margin-top: 14px;
  }
  .overtakeLegendGrid {
    display: flex;
    gap: 12px;
    margin-right: -18px;
    padding-right: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
  }
  .overtakeLegendCard {
    flex: 0 0 min(85%, 420px);
    scroll-snap-align: start;
  }
}
@media (width <= 420px) {
  .overtakeLegendCard figcaption {
    padding-inline: 14px;
  }
  .overtakeLegendCopy {
    padding: 18px 14px 20px;
  }
  .overtakeLegendCopy > p:first-child b {
    font-size: 26px;
  }
}