/* ============================================================ ALESSIO BIFFI — fondamenta (v2)
   Pagina tutta scura. Non ci sono piu' sezioni chiare, e con loro cade la regola piu'
   fastidiosa della v1: l'oro non rischia mai di finire come testo su fondo chiaro,
   perche' fondi chiari non ce ne sono.

   L'oro e' una SFUMATURA, la stessa del logo: dal bronzo al chiaro. Si usa in due modi,
   e in nessun altro — riempie un pulsante (col testo nero sopra), oppure riempie le
   lettere di un titolo con background-clip. Dove il browser non sa fare background-clip,
   resta l'oro pieno: la pagina non perde niente.

   I titoli sono in Anton: condensato e pesante, il registro delle scritte sui volantini
   di palestra da cui viene il marchio. Il testo da leggere resta in Inter. */

:root {
  /* --- colore */
  --nero: #0B0B0D;
  --nero-2: #121215;        /* tessere */
  --nero-3: #1B1B20;        /* bordi */
  --nero-4: #2A2A31;
  --nero-alto: #08080A;     /* fasce piu' profonde */

  --oro: #D4A62A;           /* l'oro pieno: il ripiego, e il colore dei pulsanti */
  --oro-scuro: #8A6410;
  --oro-chiaro: #F6D77A;
  --oro-sfumato: linear-gradient(118deg, #8A6410 0%, #B8860B 22%, #D4A62A 52%, #F6D77A 86%);

  --osso: #F4F2ED;          /* testo principale */
  --osso-2: #A3A3AD;        /* testo secondario */
  --osso-3: #6E6E7A;        /* minuta */

  /* --- caratteri */
  --titoli: 'Anton', 'Bricolage Grotesque', system-ui, sans-serif;
  --testo: 'Inter', system-ui, -apple-system, sans-serif;

  /* --- misure */
  --colonna: 1120px;
  --stretta: 760px;
  --margine: clamp(20px, 5vw, 44px);
  --respiro: clamp(60px, 9vw, 112px);   /* due sezioni di fila sommano due respiri */
  --raggio: 14px;
  --raggio-g: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nero);
  color: var(--osso);
  font-family: var(--testo);
  font-size: clamp(16px, 1.05vw + 13px, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ------------------------------------------------------------ impianto */
.sezione { position: relative; padding: var(--respiro) var(--margine); }
.colonna { max-width: var(--colonna); margin-inline: auto; }
.colonna-stretta { max-width: var(--stretta); margin-inline: auto; }
/* Una fascia a fondo diverso. Fra due sezioni dello stesso nero il respiro si legge
   come un buco; qui il cambio di tono e i due filetti dicono "e' cominciata un'altra
   cosa", e lo stesso vuoto diventa uno stacco. */
.fonda {
  background: #0E0E13;
  border-top: 1px solid var(--nero-3);
  border-bottom: 1px solid var(--nero-3);
}

/* il filo d'oro fra una sezione e l'altra */
.filo-oro {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--oro-scuro) 18%, var(--oro) 50%, var(--oro-scuro) 82%, transparent);
  opacity: .5;
}

/* ------------------------------------------------------------ tipografia */
h1, h2, h3, .cifra-grande {
  font-family: var(--titoli); font-weight: 400;   /* Anton ha un peso solo, ed e' gia' pesante */
  line-height: .98; letter-spacing: .005em; margin: 0;
  text-transform: uppercase; text-wrap: balance;
}
h1 { font-size: clamp(40px, 9vw, 86px); }
h2 { font-size: clamp(30px, 6vw, 60px); }
h3 { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.05; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* le lettere riempite d'oro: la firma della pagina */
.oro {
  background: var(--oro-sfumato);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .oro { color: var(--oro); -webkit-text-fill-color: var(--oro); }
}

.occhiello {
  font-family: var(--testo); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--oro);
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
}
.occhiello::before { content: ""; width: 26px; height: 2px; background: var(--oro); flex: none; }
.occhiello-centro { justify-content: center; }

.sottotitolo { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--osso-2); }
.minuta { font-size: 14px; line-height: 1.55; color: var(--osso-2); }
.minutissima { font-size: 12.5px; line-height: 1.5; color: var(--osso-3); }

/* ------------------------------------------------------------ pulsanti */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 30px;
  background: var(--oro-sfumato); color: #0B0B0D;
  font-family: var(--testo); font-size: 16px; font-weight: 700;
  text-decoration: none; border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 30px -14px rgba(212,166,42,.9);
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, filter .22s ease;
}
.bottone svg { width: 18px; height: 18px; flex: none; transition: transform .26s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .bottone:hover { transform: translateY(-2px); filter: brightness(1.07); }
  .bottone:hover svg { transform: translateX(4px); }
}
.bottone:focus-visible { outline: 3px solid var(--oro-chiaro); outline-offset: 3px; }
.bottone-grande { min-height: 64px; padding: 0 38px; font-size: 17.5px; }

/* la seconda strada: contorno, mai in concorrenza col pulsante d'oro */
.bottone-filo {
  background: transparent; color: var(--osso);
  border: 1.5px solid var(--nero-4); box-shadow: none;
}
@media (hover: hover) { .bottone-filo:hover { border-color: var(--osso-2); filter: none; } }

/* un collegamento di servizio, sottolineato appena */
.link-piano {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--osso-2); font-size: 15px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--nero-4); padding-bottom: 3px;
}
.link-piano:hover { color: var(--oro); border-bottom-color: var(--oro-scuro); }

/* ------------------------------------------------------------ tessere */
.tessera {
  background: var(--nero-2); border: 1px solid var(--nero-3);
  border-radius: var(--raggio-g); padding: clamp(22px, 3vw, 30px);
}

/* ------------------------------------------------------------ marchio */
.marchio { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; }
.marchio-testo { display: grid; gap: 3px; }
.marchio-nome {
  font-family: var(--titoli); font-size: 17px; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1; color: var(--osso);
}
.marchio-ruolo {
  font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--oro); line-height: 1;
}

/* ------------------------------------------------------------ righe da confermare
   Si vedono, e si cancellano quando Alessio risponde. Grigio piombo: non e' un
   allarme, e' una cosa che manca. */
.da-confermare {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.45;
  background: rgba(255,255,255,.04); border: 1px dashed var(--nero-4); color: var(--osso-2);
}

/* ------------------------------------------------------------ accessibilita' */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.salta { position: absolute; left: var(--margine); top: 8px; z-index: 60; transform: translateY(-200%); transition: transform .2s; }
.salta:focus { transform: none; }