/* ============================================================================
   VINILE — IMPALCATURA DI SITO
   Quello che vale su ogni pagina: variabili di movimento, griglia, testata,
   piè di pagina, barra sticky, e la linea oraria che tiene insieme le pagine.

   Convive con `../ds-bundle/styles.css`, che porta i token --vnl-* e i
   componenti. Qui non si ridefinisce nessun token del design system: si usa.

   La homepage (homepage-club.html) ha ancora la sua copia di queste regole
   dentro il file. È voluto: è l'artefatto approvato il 27 agosto e non lo
   si tocca per un refactor. Quando la homepage passerà su questo foglio,
   le due copie vanno riconciliate in un solo passaggio dichiarato.
   ========================================================================== */

:root {
  --z-rail: 90;
  --z-sticky: 100;
  --z-header: 200;
  --z-menu: 300;

  /* Curve: decelerazione naturale. Niente rimbalzi. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-tap: 120ms;
  --t-state: 260ms;
  --t-layout: 420ms;
  --t-enter: 720ms;

  --page-x: clamp(1.25rem, 5vw, 5rem);
  --bleed: min(1400px, 100%);
  /* Distanza fra il bordo della finestra e l'inizio del testo della pagina.
     Le fasce che escono dalla griglia la usano per restare allineate. */
  --edge: max(var(--page-x), calc((100vw - 1400px) / 2 + var(--page-x)));

  /* Altezza della testata fissa: serve a scroll-padding e alle barre sticky,
     che devono fermarsi sotto di essa e non sparirci dietro. */
  --header-h: 4.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 3rem); }
body {
  margin: 0;
  /* Deriva tonale lentissima sull'altezza: la pagina non è una lastra unica. */
  background:
    linear-gradient(180deg,
      var(--vnl-surface-0) 0%, #121010 26%, var(--vnl-surface-0) 48%,
      #111013 72%, var(--vnl-surface-0) 100%);
  background-attachment: fixed;
}

.surface-1 { background: rgba(255, 255, 255, 0.022); }
.surface-1, .surface-0 { position: relative; }

/* Alone ambientale: caldo dove si mangia, freddo dove si balla. */
.glow { position: relative; isolation: isolate; }
.glow::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block: -10% auto; block-size: 90%; inset-inline: 0;
  background: radial-gradient(60% 70% at var(--gx, 20%) 30%, var(--gc, transparent) 0%, transparent 70%);
}
.glow--warm { --gc: rgba(232, 120, 40, 0.10); --gx: 16%; }
.glow--cold { --gc: rgba(40, 90, 200, 0.10); --gx: 82%; }
#root { min-height: 100vh; }

.wrap { width: var(--bleed); margin-inline: auto; padding-inline: var(--page-x); }

/* Apertura di sezione: titolo a sinistra, frase a destra, sulla stessa base. */
.lede {
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
  display: grid; align-items: end;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  column-gap: clamp(1.25rem, 4vw, 4rem); row-gap: var(--vnl-space-md);
}
.lede__head { display: flex; flex-direction: column; gap: var(--vnl-space-sm); align-items: flex-start; }
.lede p { color: var(--vnl-text-muted); margin: 0 0 0.4rem; line-height: 1.6; max-width: 60ch; }

/* Titolo a sinistra, collegamento a destra, sulla stessa linea di base. */
.sec-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--vnl-space-lg); flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 5vh, 2.75rem);
}
/* `Display` con occhiello rende DUE fratelli, occhiello e titolo. Dentro una
   riga con `justify-content: space-between` questo li spara ai due estremi:
   l'occhiello a sinistra e il titolo a destra, staccati. Serve un contenitore,
   esattamente come `.lede__head` sulla homepage. */
.sec-row__head { display: flex; flex-direction: column; gap: var(--vnl-space-sm); align-items: flex-start; }

.sec-row__link {
  color: var(--vnl-text); text-decoration: none; position: relative; padding-block: 0.3rem;
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-body-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
  display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap;
}
.sec-row__link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--vnl-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-state) var(--ease-out);
}
.sec-row__link:hover::after, .sec-row__link:focus-visible::after { transform: scaleX(1); }
.sec-row__link i { font-style: normal; color: var(--vnl-brand); transition: transform var(--t-state) var(--ease-out); }
.sec-row__link:hover i { transform: translateX(0.25rem); }

/* ------------------------------------------------------------------ header */

/* Sul negozio si carica il foglio di GeneratePress, che mette un clearfix
   (`::after { content: ""; display: table }`) sulla testata. In un flex lo
   pseudo-elemento e' un elemento in piu': prendeva 24 px di gap e spostava
   MENU a sinistra. */
.site-header::before, .site-header::after { content: none; }

.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: var(--vnl-space-lg);
  padding: var(--vnl-space-md) var(--page-x);
  border-bottom: 1px solid transparent;
  transition: background var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out);
}
/* Sulle pagine interne non c'è un video sotto la testata: senza fondo il
   marchio bianco finirebbe su una fotografia chiara. La testata parte già
   agganciata e lo scorrimento non la cambia. */
.site-header[data-stuck="true"], .site-header[data-solid="true"] {
  background: rgba(14, 13, 13, 0.9); backdrop-filter: blur(16px);
  border-bottom-color: var(--vnl-border);
}
.site-header__logo { display: flex; align-items: center; flex: 0 0 auto; }

.site-nav { display: flex; gap: var(--vnl-space-lg); margin-inline-start: auto; }
.site-nav a {
  position: relative; color: var(--vnl-text); text-decoration: none; padding-block: 0.4rem;
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-body-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
}
.site-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--vnl-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-state) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
/* La pagina in cui ti trovi resta segnata: su un sito di più pagine è
   informazione, non decorazione. */
.site-nav a[aria-current="page"] { color: var(--vnl-brand); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--vnl-brand); }

.burger {
  display: none; margin-inline-start: auto; cursor: pointer;
  background: none; border: 1px solid var(--vnl-border-strong); color: var(--vnl-text);
  padding: 0.6rem 0.9rem; font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption);
  font-weight: 600; text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
}

.drawer {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--vnl-surface-0);
  display: flex; flex-direction: column; justify-content: center; gap: var(--vnl-space-lg);
  padding: var(--page-x);
  animation: drawer-in var(--t-layout) var(--ease-out-expo) both;
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(1rem); } }
.drawer a {
  color: var(--vnl-text); text-decoration: none;
  font-family: var(--vnl-font-display); font-weight: 700; text-transform: uppercase;
  font-size: var(--vnl-size-display-sm); letter-spacing: var(--vnl-tracking-display);
  animation: drawer-item var(--t-layout) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
@keyframes drawer-item { from { opacity: 0; transform: translateY(0.75rem); } }
.drawer a[aria-current="page"] { color: var(--vnl-brand); }
.drawer__close { position: absolute; top: var(--vnl-space-md); right: var(--page-x); }

/* --------------------------------------------------------- linea oraria */

/* Sulla homepage segna dove sei nella pagina. Qui segna dove sei nel sito:
   i quattro momenti sono quattro pagine, e la linea è la navigazione fra
   loro. Stesso oggetto, stesso gesto, un livello più su. */
.timeline {
  position: sticky; top: var(--header-h); z-index: var(--z-rail);
  background: rgba(14,13,13,0.9); backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--vnl-border);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.timeline__inner { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.timeline__inner::-webkit-scrollbar { display: none; }
.timeline__step {
  flex: 1 0 auto; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem var(--vnl-space-md) 0.8rem; text-decoration: none;
  border-inline-end: 1px solid rgba(255,255,255,0.07); position: relative;
  transition: background var(--t-state) var(--ease-out);
}
.timeline__step:last-child { border-inline-end: 0; }
.timeline__step:hover { background: var(--vnl-surface-1); }
.timeline__step b {
  font-family: var(--vnl-font-display); font-weight: 800; font-size: var(--vnl-size-body-sm);
  letter-spacing: var(--vnl-tracking-display); font-variant-numeric: tabular-nums;
  color: var(--vnl-text-muted); transition: color var(--t-state) var(--ease-out);
}
.timeline__step span {
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide); color: var(--vnl-text-faint);
  transition: color var(--t-state) var(--ease-out);
}
.timeline__step::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--vnl-brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-layout) var(--ease-out);
}
.timeline__fill {
  position: absolute; inset-block-end: 0; inset-inline: 0; height: 2px;
  background: var(--vnl-brand); transform-origin: left;
  transform: scaleX(var(--p, 0)); transition: transform 120ms linear;
}
.timeline__step[data-on="true"] b { color: var(--vnl-brand); }
.timeline__step[data-on="true"] span { color: var(--vnl-text); }
.timeline__step[data-on="true"]::after { transform: scaleX(1); }
/* Un momento che stasera non c'è — la pista di domenica — resta visibile e
   spento. È informazione: dire che non c'è vale più che nasconderlo. */
.timeline__step[data-off="true"] { opacity: 0.42; }
.timeline__step[data-off="true"] b { text-decoration: line-through; }

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

/* Le pagine interne non hanno il filmato: si aprono con una testata, che
   cambia famiglia a seconda di cosa deve fare la pagina.
     --foto   una fotografia a piena larghezza (il locale, la serata)
     --nuda   solo tipografia (il programma, i contatti): su una pagina
              di servizio una fotografia grande è un ostacolo, non un'apertura */
.pagehead { position: relative; padding-block-start: calc(var(--header-h) + clamp(2rem, 7vh, 4.5rem)); }
.pagehead__kicker {
  margin: 0 0 var(--vnl-space-sm); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide); color: var(--vnl-text-muted);
}
.pagehead__kicker a { color: var(--vnl-text-muted); text-decoration: none; }
.pagehead__kicker a:hover { color: var(--vnl-brand); }
.pagehead__kicker i { font-style: normal; color: var(--vnl-text-faint); }
.pagehead__sub { color: var(--vnl-text-muted); margin: var(--vnl-space-md) 0 0; max-width: 56ch; line-height: 1.62; }

/* `isolation: isolate` non e' decorativo: senza, i due livelli a z-index
   negativo (fotografia e velo) finiscono DIETRO lo sfondo del body, che e'
   dipinto, e la testata resta nera. Serve un contesto di impilamento
   proprio, come lo hanno le card della homepage. */
.pagehead--foto {
  padding-block-start: 0; min-height: clamp(26rem, 62svh, 40rem);
  display: flex; align-items: flex-end; overflow: hidden;
  position: relative; isolation: isolate;
}
.pagehead--foto .pagehead__media { position: absolute; inset: 0; z-index: -2; }
.pagehead--foto .pagehead__media img { width: 100%; height: 108%; object-fit: cover; display: block; position: absolute; inset-block-start: -4%; }
/* Il velo è calcolato, non stimato. Il testo occupa la fascia fra il 5% e il
   52% dal basso; lì il gradiente non scende mai sotto 0,86. Il caso peggiore
   che una fotografia può presentare è un pixel bianco pieno: sotto un velo a
   0,80 su #0E0D0D il fondo composito è #3E3D3D, e su quello

     titolo bianco pieno   10,83:1
     testo attenuato 0,64   5,53:1

   Con il velo precedente (0,42 nella banda del testo) perfino il bianco pieno
   stava a 2,84:1: sotto la soglia AA per qualunque corpo. Non era una scelta
   estetica, era un difetto.

   Sopra il 72% il velo si apre fino a 0,40, perché lassù non c'è testo e la
   fotografia deve potersi vedere. */
.pagehead--foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(14,13,13,0.96) 0%, rgba(14,13,13,0.90) 38%,
    rgba(14,13,13,0.80) 60%, rgba(14,13,13,0.40) 100%);
}
/* `--vnl-text-faint` di sistema (bianco al 50%) resta a 4,04:1 anche sotto il
   velo pieno: sulla fotografia serve più opaco. È l'unico punto del sito in cui
   un token semantico viene ritarato, e vale solo dentro la testata fotografica:
   il token esiste per essere ritarato quando il fondo cambia natura. */
.pagehead--foto { --vnl-text-faint: rgba(255, 255, 255, 0.72); }
.pagehead--foto .wrap { padding-block: clamp(2rem, 6vh, 3.5rem); width: var(--bleed); }

.pagehead--nuda { border-block-end: 1px solid var(--vnl-border); padding-block-end: clamp(1.5rem, 4vh, 2.5rem); }

/* -------------------------------------------------------- piè di pagina */

.site-footer { padding-block: clamp(2.5rem, 7vh, 4rem); }
.site-footer__row { display: flex; flex-wrap: wrap; gap: var(--vnl-space-lg); align-items: center; justify-content: space-between; }
.site-footer small { color: var(--vnl-text-faint); font-size: var(--vnl-size-caption); }
.footer-rule { color: var(--vnl-border); }

/* ------------------------------------------------------- barra sticky */

.action-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-sticky);
  display: none; gap: 2px; background: var(--vnl-border); border-top: 1px solid var(--vnl-border);
  transform: translateY(100%); transition: transform var(--t-layout) var(--ease-out);
}
.action-bar[data-shown="true"] { transform: translateY(0); }
.action-bar > * { flex: 1 1 0; }

/* ------------------------------------------------- micro-interazioni */

.vnl-btn { transition: transform var(--t-tap) var(--ease-out), background-color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out), color var(--t-state) var(--ease-out); }
.vnl-btn:hover { transform: translateY(-2px); }
.vnl-btn:active { transform: translateY(0) scale(0.985); }

/* ------------------------------------------------------------ moduli

   Vivono qui e non in una pagina sola: il preventivo si chiede sia dai
   contatti sia dalla pagina degli eventi privati, ed erano due copie dello
   stesso modulo. Una sola implementazione, due punti di ingresso.
   -------------------------------------------------------------------- */

  /* --------------------------------------------------------- modulo */

  .modulo { display: grid; gap: var(--vnl-space-md); }
  .campi { display: grid; gap: var(--vnl-space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .campo { display: flex; flex-direction: column; gap: 0.4rem; }
  /* I campi liberi prendono la riga intera: accanto a un campo numerico
     alto due righe la griglia resterebbe sfrangiata. */
  .campo--largo { grid-column: 1 / -1; }
  .campo span {
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide); color: var(--vnl-text-muted);
  }
  .campo input, .campo select, .campo textarea {
    background: var(--vnl-surface-1); border: 1px solid var(--vnl-border);
    color: var(--vnl-text); padding: 0.7rem 0.85rem;
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-body);
    transition: border-color var(--t-state) var(--ease-out);
  }
  .campo textarea { min-height: 6rem; resize: vertical; }
  .campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--vnl-brand);
  }
  /* Il segnaposto deve reggere lo stesso contrasto del testo: il grigio
     chiaro «per eleganza» è la ragione numero uno per cui un modulo non si
     legge. Qui sta al 64% di bianco, come il testo attenuato. */
  .campo input::placeholder, .campo textarea::placeholder { color: var(--vnl-text-muted); opacity: 1; }
  .modulo__foot { display: flex; gap: var(--vnl-space-md); align-items: center; flex-wrap: wrap; }
  .modulo__nota { margin: 0; color: var(--vnl-text-faint); font-size: var(--vnl-size-caption); line-height: 1.5; max-width: 44ch; }

  /* Conferma: sostituisce il modulo, non ci si aggiunge sotto. */
  .fatto {
    border: 1px solid var(--vnl-brand); padding: var(--vnl-space-lg);
    display: flex; flex-direction: column; gap: var(--vnl-space-sm); align-items: flex-start;
  }
  .fatto p { margin: 0; color: var(--vnl-text-muted); line-height: 1.6; max-width: 48ch; }
  .fatto b { color: var(--vnl-text); }

  /* Avviso di proposta: il modulo non spedisce finché il gestionale non c'è. */
  .avviso {
    margin-top: var(--vnl-space-sm); padding: 0.6rem 0.85rem;
    border: 1px dashed rgba(232, 73, 16, 0.7);
    color: var(--vnl-text-muted); font-size: var(--vnl-size-caption); line-height: 1.5;
  }
  .avviso b { color: var(--vnl-brand); font-weight: 600; }

/* ------------------------------------------------------ dato da confermare */

/* Un sito di proposta contiene dati che il cliente deve ancora validare.
   Segnarli in pagina, invece che in un documento a parte, è l'unico modo
   perché la verifica avvenga davvero: chi guarda la pagina li vede.
   La classe si toglie alla pubblicazione, non si riscrive il blocco. */
/* inline-block: su un elemento di blocco il filetto correrebbe per tutta la
   colonna e sembrerebbe un errore di impaginazione invece di un'annotazione. */
.tbd { display: inline-block; border-block-end: 1px dashed rgba(232, 73, 16, 0.7); cursor: help; }

/* --------------------------------------------------------- rivelazione */

/* Lo stato chiuso vive su `.is-armed`, che JS mette SOLO su ciò che sta
   tutto sotto la piega. Ciò che è già in vista non viene mai nascosto, e se
   l'osservatore non parte nessuno arma niente: la pagina resta quella
   finita. Il moto è un di più su una pagina già visibile. */
.anim .reveal.is-armed { opacity: 0.001; transform: translateY(1rem); }
.anim .reveal.is-armed.is-in {
  opacity: 1; transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* --------------------------------------------------------- moto ridotto */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .drawer, .drawer a { animation: none !important; }
  .timeline__fill { transition: none !important; }
  .vnl-btn:hover, .vnl-btn:active { transform: none; }
  .anim .reveal, .anim .reveal.is-armed {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .pagehead--foto .pagehead__media img { transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 60rem) {
  :root { --header-h: 3.9rem; }
  .site-nav, .site-header__cta { display: none; }
  .burger { display: block; }
  .action-bar { display: flex; }
  body { padding-bottom: 4rem; }
  .timeline__step { padding-inline: var(--vnl-space-sm); }
  .lede { grid-template-columns: 1fr; align-items: start; }
  .lede p { margin-bottom: 0; max-width: 54ch; }
}

/* ---------------------------------------------------------------------------
   I collegamenti

   Il design system non ha mai avuto una regola generale su `a`: nel sito
   vecchio ci pensava il foglio di GeneratePress, e quando l'abbiamo tolto
   dalle nostre pagine i collegamenti senza classe sono tornati al blu e al
   viola del browser. Si vedeva nel pie' di pagina.

   Due regole, non una. Il COLORE si eredita ovunque — basta a togliere il blu
   del browser e non tocca niente altro. Il FILETTO si mette solo dentro al
   testo corrente, dove serve a distinguere un collegamento da una parola: nei
   menu e sulle schede il collegamento e' gia' riconoscibile dalla sua forma.
   ------------------------------------------------------------------------ */

/* Dentro :where() la regola pesa zero: toglie il blu del browser ma cede a
   qualunque classe. Con la specificita' piena (classe + elemento) batteva
   `.vnl-btn--contrast`, e «Lista» nella barra in fondo era bianco su bianco. */
:where(.vnl-root a) { color: inherit; }

.vnl-root :is(p, li, dd, figcaption, blockquote) a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.vnl-root :is(p, li, dd, figcaption, blockquote) a:hover,
.vnl-root :is(p, li, dd, figcaption, blockquote) a:focus-visible {
  color: var(--vnl-brand);
  text-decoration-color: var(--vnl-brand);
}

/* Il pie' di pagina: le voci sono un menu, non testo corrente. */
.site-footer nav a {
  color: var(--vnl-text-muted);
  text-decoration: none;
  font-size: var(--vnl-size-body-sm);
}
.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--vnl-text);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* La messa a fuoco da tastiera deve vedersi, sempre. */
.vnl-root a:focus-visible,
.vnl-root button:focus-visible {
  outline: 2px solid var(--vnl-brand);
  outline-offset: 2px;
}

/* ===========================================================================
   IL PIÈ DI PAGINA

   Prima era una riga: marchio, quattro voci, indirizzo. Un piede di pagina di
   un sito che vende biglietti ha tre mestieri, e ne faceva mezzo — dire chi
   c'è dietro, dare le vie d'uscita, chiudere la pagina.

   Quattro colonne, ognuna con una domanda sola. Il marchio tiene la prima e
   pesa il doppio, perché è l'unica che contiene una frase da leggere; le
   altre tre sono elenchi e si accontentano.

   Sotto, una riga sola separata da un filo: la società e la firma. È il posto
   dove si va a cercare i segni che il sito è di qualcuno.
   ======================================================================== */

.site-footer { padding-block: clamp(2.5rem, 7vh, 4rem) clamp(1.5rem, 4vh, 2.5rem); }

.piede {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 40rem) {
  .piede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  /* Il marchio pesa il doppio: è l'unica colonna con una frase dentro. */
  .piede { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.piede__cosa {
  margin: var(--vnl-space-md) 0 0;
  max-width: 34ch;
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm);
  line-height: var(--vnl-leading-body);
}

/* ------------------------------------------------------------- i social

   I marchi ufficiali, estratti dagli asset dei tre brand e non ridisegnati:
   un logo fatto a occhio ha sempre le proporzioni sbagliate, e chi conosce
   quel marchio se ne accorge.

   Riquadri quadrati, come la lente della biglietteria. 44 pixel perché è la
   misura minima di un bersaglio da dito, e il marchio dentro ne occupa 20 —
   il resto è aria, che è quello che rende un'icona leggibile invece che
   fitta. */
.piede__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vnl-space-sm);
  list-style: none;
  margin: var(--vnl-space-lg) 0 0;
  padding: 0;
}

.piede__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--vnl-border);
  color: var(--vnl-text-muted);
  text-decoration: none;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}

/* Senza il marchio (un social nuovo, un tracciato non estratto) resta il
   nome: il riquadro si allarga invece di tagliarlo. */
.piede__social a:not(:has(.vnl-social)) {
  width: auto;
  padding: 0 0.9em;
  font-size: var(--vnl-size-caption);
  font-weight: 600;
  letter-spacing: var(--vnl-tracking-wide);
  text-transform: uppercase;
}

.vnl-social { display: block; }

.piede__social a:hover,
.piede__social a:focus-visible {
  color: var(--vnl-brand);
  border-color: var(--vnl-brand);
}

/* ------------------------------------------------------------ le colonne */

.piede__titolo {
  margin: 0 0 var(--vnl-space-md);
  font-family: var(--vnl-font-body);
  font-size: var(--vnl-size-caption);
  font-weight: 600;
  letter-spacing: var(--vnl-tracking-wide);
  text-transform: uppercase;
  color: var(--vnl-text-faint);
}

.piede__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--vnl-space-sm);
}

.piede__col a {
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm);
  text-decoration: none;
  transition: color 180ms ease-out;
}

.piede__col a:hover,
.piede__col a:focus-visible { color: var(--vnl-brand); }

.piede__dove {
  margin: 0 0 var(--vnl-space-md);
  font-style: normal;
  color: var(--vnl-text);
  font-size: var(--vnl-size-body-sm);
  line-height: 1.5;
}

/* ---------------------------------------------------------------- la coda */

.piede__coda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vnl-space-sm) var(--vnl-space-lg);
  align-items: baseline;
  justify-content: space-between;
  margin-block-start: clamp(2rem, 5vh, 3rem);
  padding-block-start: var(--vnl-space-lg);
  border-block-start: 1px solid var(--vnl-border);
}

.piede__societa,
.piede__firma {
  margin: 0;
  color: var(--vnl-text-faint);
  font-size: var(--vnl-size-caption);
}

/* La partita IVA in cifre tabulari: undici numeri in fila si leggono meglio
   se hanno tutti la stessa larghezza, e non ballano fra un tema e l'altro. */
.piede__societa { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/* Una riga vuota non deve lasciare un buco: se la società non è compilata,
   la firma si prende tutta la riga. */
.piede__societa:empty { display: none; }

.piede__firma a {
  color: var(--vnl-text-muted);
  text-decoration: none;
  border-block-end: 1px solid var(--vnl-border);
  transition: color 180ms ease-out, border-color 180ms ease-out;
}

.piede__firma a:hover,
.piede__firma a:focus-visible {
  color: var(--vnl-brand);
  border-color: var(--vnl-brand);
}

/* Il cuore è l'unico colore in una riga tutta grigia: non è decorazione, è
   il punto in cui la riga smette di essere un dato e diventa una firma. */
.piede__cuore {
  color: var(--vnl-brand);
  font-style: normal;
  padding-inline: 0.1em;
}
/* Le immagini dentro al testo d'archivio (serate, pagine generiche) non
   escono mai dalla colonna: molte sono `<img>` nudi a 1920 px. */
.serata-testo img, .pagina__testo img { max-width: 100%; height: auto; }