/* =============================================================
   lusso.css — palette "Notte e champagne" e caratteri del marchio:
   Marcellus per titoli e testi brevi, Albert Sans per il testo.
   Si carica per ultimo in ogni pagina e ridefinisce solo quello
   che cambia: togliendo questo file si torna all'aspetto di prima.
   ============================================================= */
:root{
  --notte:       #0E0E10;   /* fondo principale */
  --notte-alta:  #17171A;
  --sabbia:      #111113;   /* le sezioni che erano chiare: ora scure, appena diverse */
  --sabbia-alta: #1B1B1F;
  --inchiostro:  #F4EFE6;   /* il testo sulle sezioni ex chiare */
  --osso:        #F4EFE6;   /* avorio */
  --grigio:      #8F8A82;
  --plastilina:  #C6A15B;   /* l'accento: oro champagne */
  --oro:         #C6A15B;
  --oro-scuro:   #A8874A;
  --argento:     #A9ADB2;

  /* indicazioni del marchio: Optima Nova Light per i titoli, qui nella sua
     alternativa libera Marcellus; Albert Sans per il testo e le etichette */
  --f-vetrina: "Marcellus", "Optima", "Candara", serif;
  --f-display: "Albert Sans", system-ui, -apple-system, sans-serif;
  --f-testo:   "Albert Sans", system-ui, -apple-system, sans-serif;
  --f-dato:    "Albert Sans", system-ui, -apple-system, sans-serif;
}

/* le cifre in colonna restano allineate anche senza il monospaziato */
.salti, .medagliere, .prog-misura, .gara-misura, .pellicola-conta, .conto, .conta,
.sala-conta, .lente-nota, .bio-numeri, .serie, .misura-g, .tacca, .gara-data{
  font-variant-numeric:tabular-nums lining-nums;
}

body{ font-weight:400; }
::selection{ background:var(--oro); color:#0E0E10; }

/* ---- Marcellus: titoli grandi e testi brevi ---- */
.hero h1, h2.titolo, .vetrina-testo h2, .stacco-misura, .stacco-testo h2,
.piede h2, .menu-voci a, .manifesto-costola, .podio-titolo,
.prog-misura, .gara-misura, .misura-g, .marchio,
.apertura h1, .misurona, .vicina strong,
.intro h1, .scheda-gara h2, .scheda-gara .misura, .legale h1, .ed-libro h1, .bio-testa h1{
  font-family:var(--f-vetrina) !important;
  font-weight:400 !important;
  font-stretch:normal !important;
  letter-spacing:.02em !important;
}
/* Marcellus ha più corpo di Poiret One: i titoli tornano un po' più contenuti */
h2.titolo{ font-size:clamp(1.9rem,4.1vw,3.4rem); line-height:1.1; }
.hero h1{ letter-spacing:.03em !important; line-height:.95; }
.marchio{ line-height:1; }
.menu-voci a{ font-size:clamp(1.6rem,5vw,3rem); }
.manifesto-costola{ opacity:.22; }
.prog-misura{ font-size:clamp(1.2rem,2.4vw,1.75rem); }
.gara-misura{ font-size:1.65rem; }

/* le etichette, prima in monospaziato: Albert Sans in maiuscoletto spaziato */
.eyebrow, .etichetta, .hero-claim, .scorri, .link-tutto, .bottone, .pista-nota, .conta,
.lettera-campi label span, .lettera button[type=submit], .lettera-dopo, .tacca-cursore .parola{
  font-weight:500;
}

/* ---- titoli medi in Albert Sans ---- */
.gara h3, .brand-corpo strong, .tratto b, .voce-fuori b, .lista-secca strong,
.grande h3, .pilastri b, .scheda dd, .salti .valore{
  font-weight:500; font-stretch:normal; letter-spacing:.005em;
}

/* ---- accento oro: testo scuro sopra l'oro pieno ---- */
.bottone:not(.vuoto), .stacco-azioni button, .consenso button#consenso-si{
  background:var(--oro) !important; border-color:var(--oro) !important; color:#0E0E10 !important;
}
.bottone:not(.vuoto):hover, .stacco-azioni button:hover{ background:var(--oro-scuro) !important; }
.pista-frecce button:hover:not(:disabled), .gare-frecce button:hover:not(:disabled),
.vetrina-guida .frecce button:hover, .lente button:hover{ color:#0E0E10; }

/* filetto oro-argento sotto i link principali */
.link-tutto, .apri, .apri-scheda{ border-bottom:1px solid transparent !important;
  border-image:linear-gradient(90deg,var(--oro),var(--argento)) 1 !important; }

/* ---- segnaposti che erano color sabbia ---- */
.gara figure, .lista-secca .mini, .voce-fuori figure, .pezzo, .fotogramma{ background:var(--sabbia-alta) !important; }

/* ---- loghi della rassegna stampa su fondo scuro ---- */
.press-nastro img{ mix-blend-mode:screen !important; filter:grayscale(1) invert(1) !important; opacity:.55 !important; }

/* ---- serie e barre ---- */
.serie{ background:var(--sabbia-alta); outline:1px solid rgba(244,239,230,.08); }
.salti li.nullo .valore{ color:var(--oro); }
.elenco li.stop{ border-top-color:rgba(198,161,91,.6) !important; }

/* ---- consenso ---- */
.consenso{ background:#0E0E10 !important; border-top:1px solid rgba(198,161,91,.35); }
.consenso a{ color:var(--oro) !important; }

/* serie dei salti in home: il numero sta sopra la barra, e sulla migliore è scuro */
.serie i{ position:relative; isolation:isolate; }
.serie i b{ z-index:-1; }
.serie i.best{ color:#0E0E10; font-weight:600; }

/* =============================================================
   Il cielo. Ogni stella ha il suo ritmo: nasce, si accende, si
   spegne, con durate e ritardi tutti diversi. Quelle più grandi
   aprono anche un riflesso a croce, come un bagliore.
   I punti li genera js/cielo.js: in CSS resta solo il modo in cui
   si comportano.
   ============================================================= */
.cielo{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen; contain:strict;
}
.cielo i{
  position:absolute; display:block; border-radius:50%;
  width:var(--d); height:var(--d); background:var(--c, #F4EFE6);
  opacity:0; will-change:opacity, transform;
  animation:brilla var(--t) ease-in-out var(--r) infinite;
}
@keyframes brilla{
  0%,  100%{ opacity:0;            transform:scale(.6); }
  45%      { opacity:var(--max);    transform:scale(1); }
  55%      { opacity:var(--max);    transform:scale(1); }
}

/* il riflesso a croce, solo sulle più grandi */
.cielo i.bagliore::before,
.cielo i.bagliore::after{
  content:""; position:absolute; left:50%; top:50%; background:inherit;
  transform:translate(-50%,-50%);
}
.cielo i.bagliore::before{ width:calc(var(--d) * 7); height:1px; }
.cielo i.bagliore::after{ width:1px; height:calc(var(--d) * 7); }

@media (prefers-reduced-motion: reduce){
  .cielo i{ animation:none; opacity:calc(var(--max) * .6); transform:none; }
}

/* ---- il contatto per media e management: oro pieno, con la busta ---- */
.bottone.contatto{
  padding:1.1rem 1.7rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--oro) 40%,transparent), 0 10px 30px -12px color-mix(in srgb,var(--oro) 70%,transparent);
}
.bottone.contatto::before{
  content:""; width:1.05em; height:1.05em; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='m3.5 6 8.5 7 8.5-7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='m3.5 6 8.5 7 8.5-7'/%3E%3C/svg%3E") center/contain no-repeat;
}
.menu-piede .menu-contatto{ color:var(--oro); opacity:1; border-bottom:1px solid var(--oro); padding-bottom:.15rem; }
.menu-piede:has(.menu-contatto){ opacity:1; }
.menu-piede:has(.menu-contatto) a:not(.menu-contatto){ opacity:.6; }

/* ---- sottovoci del menu (Educational → Correre in Aria, Athleticon) ---- */
.menu-sotto{ list-style:none; margin:.1rem 0 .45rem; padding:0 0 0 calc(.6rem * 2.4 + 1rem); display:flex; flex-wrap:wrap; gap:.2rem 1.6rem; }
.menu-voci .menu-sotto a{ font-size:clamp(1.05rem,2.4vw,1.6rem); line-height:1.2; opacity:.55; }
.menu-voci .menu-sotto a::before{ content:"—"; margin-right:.55rem; opacity:.5; color:var(--oro); }
.menu-voci .menu-sotto a:hover, .menu-voci .menu-sotto a:focus-visible{ opacity:1; color:var(--oro); }

/* ---- tutte le pagine come la home: i titoli in Marcellus ----
   Elenchi (notizie, podcast, collaborazioni, fashion), schede, articoli,
   pagine legali: il titolo della pagina e i titoli di sezione usano lo
   stesso carattere dei titoli della home; il resto resta in Albert Sans. */
h1:not(.h1-lettering), .arch-testa h1, .col-testa h1, .art-testa h1, .vid-apertura h1,
.col-gruppo, .legale h2, .premi-titolo, .momento h3{
  font-family:var(--f-vetrina) !important;
  font-weight:400 !important;
  font-stretch:normal !important;
  letter-spacing:.02em !important;
}

/* ---- menu aperto: le due lineette diventano una X ---- */
#chiudi-menu i{
  position:relative; width:24px; height:24px; border:0;
}
#chiudi-menu i::before, #chiudi-menu i::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor;
  transition:transform .45s cubic-bezier(.7,0,.2,1) .15s;
}
#chiudi-menu i::before{ transform:rotate(45deg); }
#chiudi-menu i::after{ transform:rotate(-45deg); }
.menu[data-aperto="0"] #chiudi-menu i::before, .menu[data-aperto="0"] #chiudi-menu i::after{ transform:rotate(0); transition-delay:0s; }
#chiudi-menu:hover{ color:var(--oro); }
.menu-testa .marchio{ color:inherit; transition:color .25s; }
.menu-testa .marchio:hover{ color:var(--oro); }

/* ---- voce del menu che fa solo da titolo (Educational): stessa riga delle altre, niente link ---- */
.menu-voci .menu-titolo{
  display:flex; align-items:baseline; gap:1rem; color:inherit; cursor:default;
  font-family:var(--f-vetrina) !important; font-weight:400 !important; letter-spacing:.02em !important;
  font-size:clamp(1.6rem,5vw,3rem); line-height:1.12; opacity:.62;
}