/* =============================================================================
   Vinile — il CSS delle singole pagine.

   Recuperato dai blocchi <style> dei prototipi approvati. Sta separato da
   sito.css, che porta solo l'impalcatura condivisa: cosi' si vede a colpo
   d'occhio cosa e' di tutte le pagine e cosa e' di una sola.
   ========================================================================== */


/* ===== IL PROGRAMMA ==================================================== */

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

  .prog-head__grid {
    display: grid; gap: clamp(1.25rem, 4vw, 3rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: end;
  }
  /* Il conteggio è un dato, non un vezzo: dice quanto è densa la stagione
     prima ancora di scorrere. Allineato in basso col titolo. */
  .prog-count {
    display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap;
    margin: 0; padding: 0; list-style: none;
  }
  .prog-count div {
    font-family: var(--vnl-font-display); font-weight: 800; line-height: 0.9;
    font-size: clamp(2rem, 4.5vw, 3.25rem); color: var(--vnl-text);
    font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
  }
  .prog-count span {
    display: block; margin-top: 0.4rem;
    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);
  }

  /* -------------------------------------------------------------- filtri */

  /* Sticky sotto la testata: scorrendo quaranta serate il filtro deve restare
     raggiungibile, altrimenti si usa una volta sola e poi si scorre e basta. */
  .filtri {
    position: sticky; top: var(--header-h); z-index: var(--z-rail);
    background: rgba(14,13,13,0.92); backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--vnl-border);
    margin-block-end: clamp(1.5rem, 4vh, 2.5rem);
  }
  .filtri__row {
    display: flex; align-items: center; gap: var(--vnl-space-sm);
    padding-block: 0.75rem; overflow-x: auto; scrollbar-width: none;
  }
  .filtri__row::-webkit-scrollbar { display: none; }
  .filtri__lab {
    flex: 0 0 auto; margin-inline-end: var(--vnl-space-sm);
    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);
  }
  .filtro {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    background: none; border: 1px solid var(--vnl-border); color: var(--vnl-text-muted);
    padding: 0.42rem 0.85rem;
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
    transition: color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out),
                background var(--t-state) var(--ease-out);
  }
  .filtro:hover { color: var(--vnl-text); border-color: var(--vnl-border-strong); }
  .filtro[aria-pressed="true"] {
    background: var(--vnl-brand); border-color: var(--vnl-brand); color: var(--vnl-on-brand);
  }
  .filtri__n {
    margin-inline-start: auto; flex: 0 0 auto; padding-inline-start: var(--vnl-space-md);
    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);
    font-variant-numeric: tabular-nums;
  }

  /* ------------------------------------------------------ testa settimana */

  .wk {
    display: flex; align-items: baseline; gap: var(--vnl-space-md);
    padding-block: clamp(1.5rem, 4vh, 2.25rem) 0.6rem;
  }
  .wk b {
    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);
    white-space: nowrap;
  }
  .wk i { flex: 1 1 auto; height: 1px; background: var(--vnl-border); }

  /* ---------------------------------------------------------- la serata */

  /* Una riga, non una card. Il numero del giorno regge la colonna sinistra e
     dà il ritmo verticale; tutto il resto è testo. */
  .serata {
    display: grid; align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: clamp(0.9rem, 2.5vw, 2rem);
    padding-block: clamp(1rem, 2.6vh, 1.4rem);
    border-block-start: 1px solid var(--vnl-border);
    text-decoration: none; color: inherit; position: relative;
    transition: background var(--t-state) var(--ease-out);
  }
  /* Il rientro negativo fa sì che il fondo dell'hover esca dalla colonna di
     testo senza spostare il testo: la riga si accende, non si muove. */
  .serata { padding-inline: var(--vnl-space-md); margin-inline: calc(var(--vnl-space-md) * -1); }
  .serata:hover, .serata:focus-visible { background: var(--vnl-surface-1); }
  .serata:last-of-type { border-block-end: 1px solid var(--vnl-border); }

  .serata__day {
    font-family: var(--vnl-font-display); font-weight: 800; line-height: 0.82;
    font-size: clamp(2.1rem, 3.6vw, 3rem); letter-spacing: -0.035em;
    color: rgba(255,255,255,0.24); font-variant-numeric: tabular-nums;
    min-width: 2.2ch; text-align: right;
    transition: color var(--t-layout) var(--ease-out);
  }
  .serata:hover .serata__day { color: rgba(255,255,255,0.42); }
  .serata__wd {
    display: block; margin-top: 0.4rem;
    font-family: var(--vnl-font-body); font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em; color: var(--vnl-text-faint);
    letter-spacing: var(--vnl-tracking-wide);
  }
  .serata__body { min-width: 0; }
  .serata__format {
    margin: 0 0 0.25rem;
    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-brand);
  }
  .serata__title {
    margin: 0 0 0.3rem; font-family: var(--vnl-font-display); font-weight: 700;
    font-size: var(--vnl-size-display-sm); letter-spacing: var(--vnl-tracking-display);
    text-transform: uppercase; line-height: 1.08; color: var(--vnl-text);
  }
  .serata__cast { margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.5; }
  .serata__cast b { color: var(--vnl-text); font-weight: 600; }

  .serata__chips { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
  .chip {
    font-family: var(--vnl-font-body); font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em;
    padding: 0.24rem 0.42rem; border: 1px solid currentColor; white-space: nowrap;
    color: var(--vnl-text); background: rgba(14,13,13,0.45);
  }
  /* Il momento che non c'è resta visibile e spento: «niente pista» è
     l'informazione che serve prima di uscire di casa. */
  .chip[data-off="true"] { color: var(--vnl-text-faint); border-color: rgba(255,255,255,0.16); background: none; }

  .serata__go {
    font-style: normal; color: var(--vnl-brand); font-size: 1.1rem;
    transition: transform var(--t-state) var(--ease-out);
  }
  .serata:hover .serata__go, .serata:focus-visible .serata__go { transform: translateX(0.3rem); }

  /* ------------------------------------------------- la serata con l'ospite */

  /* Esce dalla riga e prende la fotografia. È il criterio editoriale della
     knowledge base: in risalto ci va la serata con l'ospite, non la prossima
     in ordine di data. Poche, quindi restano un'eccezione leggibile. */
  .speciale {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(16rem, 34vh, 22rem);
    padding: var(--vnl-space-lg);
    margin-block: var(--vnl-space-md);
    text-decoration: none; color: inherit;
    box-shadow: inset 0 0 0 2px var(--vnl-brand);
  }
  .speciale__bg { position: absolute; inset: 0; z-index: -2; }
  .speciale__bg img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(0.48) saturate(0.95); transform: scale(1.02);
    transition: filter var(--t-layout) var(--ease-out), transform 900ms var(--ease-out);
  }
  .speciale::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.86) 38%, rgba(14,13,13,0.5) 100%);
  }
  .speciale:hover .speciale__bg img, .speciale:focus-within .speciale__bg img {
    filter: brightness(0.62) saturate(1.05); transform: scale(1.06);
  }
  .speciale__flag {
    position: absolute; inset-block-start: 0; inset-inline-start: 0;
    background: var(--vnl-brand); color: var(--vnl-on-brand);
    padding: 0.3rem 0.7rem;
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
  }
  .speciale__date {
    margin: 0 0 0.35rem;
    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);
    font-variant-numeric: tabular-nums;
  }
  .speciale__title {
    margin: 0 0 0.4rem; font-family: var(--vnl-font-display); font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.03em;
    text-transform: uppercase; line-height: 0.98; color: var(--vnl-text); text-wrap: balance;
  }
  .speciale__cast { margin: 0 0 var(--vnl-space-sm); color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); }
  .speciale__cast b { color: var(--vnl-text); font-weight: 600; }
  .speciale__foot { display: flex; align-items: center; gap: var(--vnl-space-md); flex-wrap: wrap; }
  .speciale__go {
    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-brand);
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .speciale__go span { transition: transform var(--t-state) var(--ease-out); }
  .speciale:hover .speciale__go span { transform: translateX(0.25rem); }

  /* La ricorrenza prende altezza, corpo e le righe diagonali del marchio.
     Halloween e Capodanno si programmano con mesi di anticipo e si riempiono
     prima di tutto il resto: in pagina devono pesare piu' di un ospite.
     Il fondo si allarga per lasciare posto alle righe, che stanno sul bordo. */
  .speciale--ric {
    min-height: clamp(20rem, 46vh, 30rem);
    padding-block-end: calc(var(--vnl-space-lg) + 18px);
  }
  .speciale--ric .speciale__title { font-size: clamp(2.6rem, 7vw, 4.5rem); }
  .speciale__stripes {
    position: absolute; inset-inline: 0; inset-block-end: 0; color: var(--vnl-brand);
  }

  /* ------------------------------------------------ le serate con un nome */

  .ricorrenze { padding-block: clamp(3rem, 8vh, 4.5rem); }
  .ric__grid {
    display: grid; gap: 2px; background: var(--vnl-border);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  .ric {
    background: var(--vnl-surface-1); padding: var(--vnl-space-lg);
    display: flex; flex-direction: column; gap: var(--vnl-space-xs); text-decoration: none;
  }
  .ric b {
    font-family: var(--vnl-font-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.02em;
    color: var(--vnl-text); line-height: 1.05;
  }
  .ric span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); }
  .ric em {
    font-style: normal; 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); margin-top: auto; padding-top: var(--vnl-space-md);
  }
  /* Solo quelle gia' in calendario sono un collegamento. Le altre dicono che
     il programma non c'e' ancora, invece di portare a una pagina vuota. */
  .ric--pronta { transition: background var(--t-state) var(--ease-out); }
  .ric--pronta:hover { background: var(--vnl-surface-2); }
  .ric--pronta em { color: var(--vnl-brand); }

  /* ---------------------------------------------------------- stato vuoto */

  /* Progettato, non un errore. Oggi il sito del locale dice «Non ci sono
     eventi per oggi!» e si ferma lì: il vuoto deve dire cosa fare adesso. */
  .vuoto {
    border: 1px solid var(--vnl-border); padding: clamp(2rem, 6vw, 3.5rem);
    display: flex; flex-direction: column; gap: var(--vnl-space-md); align-items: flex-start;
    margin-block: clamp(1.5rem, 4vh, 2.5rem);
  }
  .vuoto p { margin: 0; color: var(--vnl-text-muted); max-width: 52ch; line-height: 1.6; }

  /* Fascia di stagione: normalmente spenta, si accende da giugno a settembre. */
  .season {
    display: flex; flex-wrap: wrap; gap: var(--vnl-space-sm) var(--vnl-space-md);
    align-items: baseline; padding: var(--vnl-space-md) var(--vnl-space-lg);
    border: 1px solid var(--vnl-brand); margin-block-end: clamp(1.5rem, 4vh, 2.5rem);
  }
  .season b {
    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-brand);
  }
  .season span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); }

  /* --------------------------------------------------------- coda pagina */

  .coda { padding-block: clamp(3rem, 8vh, 5rem); }
  .coda__grid {
    display: grid; gap: 2px; background: var(--vnl-border);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  .coda__cell {
    background: var(--vnl-surface-1); padding: var(--vnl-space-lg);
    display: flex; flex-direction: column; gap: var(--vnl-space-xs); text-decoration: none;
    transition: background var(--t-state) var(--ease-out);
  }
  .coda__cell:hover { background: var(--vnl-surface-2); }
  .coda__cell b {
    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); color: var(--vnl-text);
  }
  .coda__cell span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.5; }
  .coda__cell em {
    font-style: normal; color: var(--vnl-brand); font-family: var(--vnl-font-body);
    font-size: var(--vnl-size-caption); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--vnl-tracking-wide); margin-top: auto; padding-top: var(--vnl-space-sm);
  }

  /* Nel prototipo questi tre paragrafi erano inline: nel tema diventano
     classi, perche' il PHP non ha un oggetto style da passare in giro. */
  .sere__nota,
  .dove__testo {
    margin: var(--vnl-space-md) 0 0; color: var(--vnl-text-muted);
    line-height: 1.64; max-width: 40ch;
  }
  .dove__testo { margin-block-end: var(--vnl-space-lg); }
  .sere__cta,
  .dove__azioni {
    margin: var(--vnl-space-lg) 0 0;
    display: flex; gap: var(--vnl-space-sm); flex-wrap: wrap;
  }
  .giorno dd a { color: inherit; text-decoration-color: var(--vnl-border); }
  .giorno dd a:hover { color: var(--vnl-brand); }

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

  @media (max-width: 60rem) {
    .prog-head__grid { grid-template-columns: 1fr; }
    .filtri { top: var(--header-h); }
  }
  @media (max-width: 46rem) {
    /* I chip scendono sotto il testo: quattro colonne su 430px non ci stanno.
       Aree nominate e non collocazione automatica: con quattro figli in una
       griglia a tre colonne l'automatismo manderebbe la freccia a capo da
       sola, in una riga sua, sotto il numero del giorno. */
    .serata {
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "day body go"
        "day chips chips";
      column-gap: var(--vnl-space-md); row-gap: 0.5rem;
      align-items: start;
    }
    .serata__when  { grid-area: day; }
    .serata__body  { grid-area: body; }
    .serata__chips { grid-area: chips; justify-content: flex-start; }
    .serata__go    { grid-area: go; }
    .serata__day { font-size: 2rem; }
  }

/* ===== LA SERATA ======================================================= */

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

  .ev-head__badges { display: flex; gap: var(--vnl-space-xs); flex-wrap: wrap; margin-bottom: var(--vnl-space-md); }
  .ev-head__title {
    margin: 0 0 var(--vnl-space-sm); font-family: var(--vnl-font-display); font-weight: 800;
    /* Tetto a 5rem: sopra i 96px la pagina urla invece di comporre. */
    font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.96; letter-spacing: -0.03em;
    text-transform: uppercase; color: var(--vnl-text); text-wrap: balance; max-width: 16ch;
  }
  .ev-head__when {
    margin: 0 0 var(--vnl-space-md); display: flex; gap: var(--vnl-space-md); flex-wrap: wrap;
    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); color: var(--vnl-text);
    font-variant-numeric: tabular-nums;
  }
  .ev-head__when i { font-style: normal; color: var(--vnl-text-faint); }
  .ev-head__cast { margin: 0 0 var(--vnl-space-lg); color: var(--vnl-text-muted); font-size: var(--vnl-size-lead, 1.1rem); line-height: 1.55; max-width: 46ch; }
  .ev-head__cast b { color: var(--vnl-text); font-weight: 600; }
  .ev-head__actions { display: flex; gap: var(--vnl-space-sm); flex-wrap: wrap; }

  /* ------------------------------------------------------ come si entra */

  /* Non card: un elenco di definizioni con filetti. Le regole sono poche e si
     leggono in fila; incasellarle in riquadri le farebbe sembrare opzioni. */
  .porta { padding-block: clamp(2.5rem, 7vh, 4rem); }
  .porta__grid {
    display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start;
  }
  .porta__intro p { color: var(--vnl-text-muted); margin: var(--vnl-space-md) 0 0; line-height: 1.62; max-width: 42ch; }
  .regole { margin: 0; }
  .regola { border-block-start: 1px solid var(--vnl-border); padding-block: var(--vnl-space-md); }
  .regola:last-child { border-block-end: 1px solid var(--vnl-border); }
  .regola dt {
    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);
    color: var(--vnl-text); margin-bottom: 0.35rem;
  }
  .regola dd { margin: 0; color: var(--vnl-text-muted); line-height: 1.6; max-width: 54ch; }
  .regola--tbd dt { color: var(--vnl-text-muted); }
  .regola__flag {
    display: inline-block; margin-inline-start: 0.5rem; vertical-align: middle;
    font-family: var(--vnl-font-body); font-size: 0.625rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--vnl-brand); border: 1px solid var(--vnl-brand); padding: 0.15rem 0.4rem;
  }
  /* Il modo più diretto di non farsi sorprendere alla porta è chiedere prima.
     Il contatto sta qui, non solo nella pagina contatti. */
  .porta__ask {
    margin-top: var(--vnl-space-lg); padding: var(--vnl-space-md) var(--vnl-space-lg);
    border: 1px solid var(--vnl-border); display: flex; flex-wrap: wrap;
    gap: var(--vnl-space-sm) var(--vnl-space-md); align-items: center;
  }
  .porta__ask p { margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); }
  .porta__ask a { color: var(--vnl-brand); text-decoration: none; font-weight: 600; }
  .porta__ask a:hover { text-decoration: underline; }

  /* ----------------------------------------------------------- scaletta */

  .scaletta { padding-block: clamp(2.5rem, 7vh, 4rem); }
  .tappa {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(1.1rem, 3vh, 1.6rem);
    border-block-start: 1px solid var(--vnl-border);
  }
  .tappa:last-child { border-block-end: 1px solid var(--vnl-border); }
  .tappa__ora {
    font-family: var(--vnl-font-display); font-weight: 800; font-size: var(--vnl-size-display-sm);
    letter-spacing: var(--vnl-tracking-display); color: var(--vnl-brand);
    font-variant-numeric: tabular-nums; line-height: 1.1;
  }
  .tappa[data-off="true"] .tappa__ora { color: var(--vnl-text-faint); text-decoration: line-through; }
  .tappa__t {
    margin: 0 0 0.3rem; 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); color: var(--vnl-text);
  }
  .tappa[data-off="true"] .tappa__t { color: var(--vnl-text-muted); }
  .tappa__d { margin: 0; color: var(--vnl-text-muted); line-height: 1.6; max-width: 56ch; }
  .tappa__d b { color: var(--vnl-text); font-weight: 600; }

  /* ------------------------------------------------------------ gallery */

  .galleria { padding-block: clamp(2.5rem, 7vh, 4rem); }
  .galleria__bleed { padding-inline-start: var(--edge); }
  .galleria__scroller {
    display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 22vw, 210px);
    gap: 2px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .galleria__scroller::-webkit-scrollbar { display: none; }
  .galleria__frame {
    position: relative; aspect-ratio: 1 / 1; scroll-snap-align: start; margin: 0;
    background: var(--vnl-surface-1); overflow: hidden;
  }
  .galleria__frame img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(0.8) brightness(0.86);
    transition: filter var(--t-layout) var(--ease-out), transform var(--t-layout) var(--ease-out);
  }
  .galleria__frame:hover img { filter: none; transform: scale(1.04); }

  /* ------------------------------------------------------ altre serate */

  .altre { padding-block: clamp(3rem, 8vh, 5rem); }
  .altre__grid {
    display: grid; gap: var(--vnl-space-md);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  /* -------------------------------------------------------- non trovata */

  .persa { padding-block: clamp(5rem, 18vh, 9rem); }
  .persa p { color: var(--vnl-text-muted); margin: var(--vnl-space-md) 0 var(--vnl-space-lg); max-width: 48ch; line-height: 1.6; }

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

  @media (max-width: 60rem) {
    .porta__grid { grid-template-columns: 1fr; }
    .tappa { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--vnl-space-md); }
  }

/* ===== IL LOCALE ======================================================= */

/* --------------------------------------------------------- manifesto */

  /* L'unico blocco del sito in cui la tipografia sta da sola. Colonna larga,
     corpo grande, nessuna fotografia: dopo una testata a piena schermata
     serve un cambio di passo, non un'altra immagine. */
  .manifesto { padding-block: clamp(3.5rem, 11vh, 6.5rem); }
  /* Classe, non `.manifesto p`: con il selettore di elemento la frase di
     chiusura ereditava il corpo display, perche' `.manifesto p` ha
     specificita' piu' alta di `.manifesto__coda`. */
  .manifesto__claim {
    margin: 0 auto; max-width: 24ch;
    font-family: var(--vnl-font-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.6rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -0.025em;
    color: var(--vnl-text); text-wrap: balance;
    /* La colonna era centrata ma il testo dentro restava allineato a sinistra:
       il blocco sembrava spostato. Colonna e testo devono essere d'accordo. */
    text-align: center;
  }
  .manifesto__claim b { color: var(--vnl-brand); font-weight: 700; }
  .manifesto__coda {
    max-width: 56ch; margin: clamp(1.75rem, 5vh, 2.75rem) auto 0;
    color: var(--vnl-text-muted); line-height: 1.68; text-align: center;
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-body);
    text-transform: none; letter-spacing: normal; font-weight: 400;
  }

  /* ---------------------------------------------------------- mosaico */

  /* Celle disuguali per scelta: la sala grande e la pista pesano più
     dell'aperitivo, e la griglia lo dice senza doverlo scrivere.
     Sotto i 60rem il mosaico diventa una colonna e le proporzioni tornano
     tutte uguali: su un telefono la gerarchia la fa l'ordine, non l'area. */
  .spazi { padding-block: clamp(3rem, 9vh, 5rem); }
  .mosaico {
    display: grid; gap: 2px; background: var(--vnl-border);
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(9rem, 17vh, 13rem);
  }
  .tessera {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: var(--vnl-space-lg); background: var(--vnl-surface-1);
    text-decoration: none; color: inherit;
  }
  .tessera:nth-child(1) { grid-column: span 4; grid-row: span 2; }
  .tessera:nth-child(2) { grid-column: span 2; grid-row: span 1; }
  .tessera:nth-child(3) { grid-column: span 2; grid-row: span 1; }
  .tessera:nth-child(4) { grid-column: span 2; grid-row: span 2; }
  .tessera:nth-child(5) { grid-column: span 4; grid-row: span 2; }
  .tessera__bg { position: absolute; inset: 0; z-index: -2; }
  .tessera__bg img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: brightness(0.5) saturate(0.92); transform: scale(1.02);
    transition: filter var(--t-layout) var(--ease-out), transform 900ms var(--ease-out);
  }
  .tessera::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to top, rgba(14,13,13,0.94) 0%, rgba(14,13,13,0.72) 46%, rgba(14,13,13,0.3) 100%);
  }
  .tessera:hover .tessera__bg img { filter: brightness(0.64) saturate(1.04); transform: scale(1.06); }
  .tessera__n {
    position: absolute; inset-block-start: var(--vnl-space-md); inset-inline-end: var(--vnl-space-md);
    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);
    font-variant-numeric: tabular-nums;
  }
  .tessera__t {
    margin: 0 0 0.3rem; 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); color: var(--vnl-text); line-height: 1.06;
  }
  .tessera__d { margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.5; max-width: 40ch; }

  /* ----------------------------------------------------------- vintage */

  .vintage { padding-block: clamp(3rem, 9vh, 5rem); }
  .vintage__grid {
    display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  }
  .vintage__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
  .vintage__media img { width: 100%; height: 112%; object-fit: cover; display: block; position: absolute; inset-block-start: -6%; }
  .vintage__body { display: flex; flex-direction: column; gap: var(--vnl-space-md); align-items: flex-start; }
  .vintage__body p { margin: 0; color: var(--vnl-text-muted); line-height: 1.66; max-width: 46ch; }
  /* Doppia classe: `.vintage__body p` ha specificita' piu' alta e vincerebbe
     sul colore, spegnendo l'arancione del pay-off. Stesso inciampo del
     manifesto piu' su: un selettore di elemento dentro un blocco batte sempre
     la classe del singolo figlio. */
  .vintage__body .vintage__claim {
    font-family: var(--vnl-font-display); font-weight: 700; text-transform: lowercase;
    font-size: var(--vnl-size-display-sm); letter-spacing: 0.01em; color: var(--vnl-brand);
  }

  /* ------------------------------------------------------------ numeri */

  .numeri { padding-block: clamp(2.5rem, 7vh, 4rem); }
  .numeri__grid {
    display: grid; gap: 2px; background: var(--vnl-border);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .numero { background: var(--vnl-surface-1); padding: var(--vnl-space-lg); }
  .numero b {
    display: block; font-family: var(--vnl-font-display); font-weight: 800; line-height: 0.9;
    font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.03em; color: var(--vnl-text);
    font-variant-numeric: tabular-nums;
  }
  .numero span {
    display: block; margin-top: 0.5rem; color: var(--vnl-text-muted);
    font-size: var(--vnl-size-body-sm); line-height: 1.5;
  }

  /* ----------------------------------------------------------- le sere */

  .sere { padding-block: clamp(3rem, 9vh, 5rem); }
  .sere__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .giorni { margin: 0; display: grid; gap: 0; }
  .giorno {
    display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--vnl-space-md);
    padding-block: 0.85rem; border-block-start: 1px solid var(--vnl-border); align-items: baseline;
  }
  .giorno:last-child { border-block-end: 1px solid var(--vnl-border); }
  .giorno dt {
    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); color: var(--vnl-text);
  }
  .giorno dd { margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.5; }
  .giorno[data-chiuso="true"] dt { color: var(--vnl-text-faint); }
  .giorno[data-chiuso="true"] dd { color: var(--vnl-text-faint); }
  .giorno dd i { font-style: normal; color: var(--vnl-brand); }

  /* ----------------------------------------------------------- chiusura */

  .dove { padding-block: clamp(3rem, 9vh, 5rem); }
  .dove__grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }

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

  @media (max-width: 60rem) {
    .mosaico { grid-template-columns: 1fr; grid-auto-rows: clamp(11rem, 26vh, 15rem); }
    .tessera:nth-child(n) { grid-column: span 1; grid-row: span 1; }
    .vintage__grid, .sere__grid, .dove__grid { grid-template-columns: 1fr; }
    .giorno { grid-template-columns: 6.5rem minmax(0, 1fr); }
  }

/* ===== EVENTI PRIVATI ================================================== */

/* ------------------------------------------------------- il selettore */

  /* Appiccicato sotto la testata: la scelta dell'occasione governa mezza
     pagina, e deve restare cambiabile mentre si legge. */
  .occ-bar {
    position: sticky; top: var(--header-h); z-index: var(--z-rail);
    background: rgba(14,13,13,0.92); backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--vnl-border);
  }
  .occ-bar__row {
    display: flex; align-items: center; gap: var(--vnl-space-sm);
    padding-block: 0.75rem; overflow-x: auto; scrollbar-width: none;
  }
  .occ-bar__row::-webkit-scrollbar { display: none; }
  .occ-bar__lab {
    flex: 0 0 auto; margin-inline-end: var(--vnl-space-sm);
    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);
  }
  .occ {
    flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    background: none; border: 1px solid var(--vnl-border); color: var(--vnl-text-muted);
    padding: 0.42rem 0.85rem;
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption); font-weight: 600;
    text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide);
    transition: color var(--t-state) var(--ease-out), border-color var(--t-state) var(--ease-out),
                background var(--t-state) var(--ease-out);
  }
  .occ:hover { color: var(--vnl-text); border-color: var(--vnl-border-strong); }
  .occ[aria-selected="true"] {
    background: var(--vnl-brand); border-color: var(--vnl-brand); color: var(--vnl-on-brand);
  }

  /* --------------------------------------------------------- il pannello */

  .pannello { padding-block: clamp(2.5rem, 7vh, 4rem); }
  .pannello__grid {
    display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  }
  .pannello__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
  .pannello__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pannello__body { display: flex; flex-direction: column; gap: var(--vnl-space-md); align-items: flex-start; }
  .pannello__t {
    margin: 0; font-family: var(--vnl-font-display); font-weight: 800; text-transform: uppercase;
    font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.04; letter-spacing: -0.025em;
    color: var(--vnl-text); text-wrap: balance; max-width: 18ch;
  }
  .pannello__d { margin: 0; color: var(--vnl-text-muted); line-height: 1.66; max-width: 46ch; }
  /* `display: grid` sopra vince su [hidden]: senza questa riga le quattro
     occasioni si vedevano tutte insieme e la barra non cambiava niente. */
  .pannello__grid[hidden] { display: none; }
  /* «Tutto su addio al celibato o nubilato» non va a capo (nowrap del
     bottone) e a 390 px allargava la pagina a 417: qui puo' andare a capo. */
  .pannello__body .vnl-btn { white-space: normal; text-align: center; max-width: 100%; }
  /* Il cambio è una dissolvenza corta: il pannello si sostituisce, non entra
     da fuori. Un movimento più lungo farebbe sembrare lento un clic. */
  .pannello__grid { animation: pannello-in 320ms var(--ease-out) both; }
  @keyframes pannello-in { from { opacity: 0; transform: translateY(0.5rem); } }
  @media (prefers-reduced-motion: reduce) {
    .pannello__grid { animation: none; }
  }

  /* ------------------------------------------------------- cosa c'è dentro */

  /* Non riquadri: una fila di voci separate da filetti. Sono cinque cose che
     il locale ha già, e l'elenco è il punto — non ognuna una card. */
  .compreso { padding-block: clamp(3rem, 8vh, 4.5rem); }
  .compreso__grid {
    display: grid; gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .voce {
    padding: var(--vnl-space-lg) var(--vnl-space-lg) var(--vnl-space-lg) 0;
    border-block-start: 1px solid var(--vnl-border);
  }
  .voce b {
    display: block; margin-bottom: 0.4rem;
    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);
    color: var(--vnl-text);
  }
  .voce span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.55; }

  /* --------------------------------------------------------- come funziona */

  /* I numeri qui sono legittimi: è una sequenza vera, e l'ordine è
     l'informazione. È l'unico punto numerato del sito. */
  .passi { padding-block: clamp(3rem, 8vh, 4.5rem); }
  .passi__grid { display: grid; gap: 2px; background: var(--vnl-border);
                 grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .passo { background: var(--vnl-surface-1); padding: var(--vnl-space-lg); }
  .passo i {
    font-style: normal; display: block; margin-bottom: var(--vnl-space-md);
    font-family: var(--vnl-font-display); font-weight: 800; line-height: 1;
    font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.03em;
    color: var(--vnl-brand); font-variant-numeric: tabular-nums;
  }
  .passo b {
    display: block; margin-bottom: 0.4rem;
    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);
    color: var(--vnl-text);
  }
  .passo span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.55; }

  /* -------------------------------------------------------------- costo */

  .costo { padding-block: clamp(3rem, 8vh, 4.5rem); }
  .costo__grid {
    display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start;
  }
  .costo__intro p { margin: var(--vnl-space-md) 0 0; color: var(--vnl-text-muted); line-height: 1.64; max-width: 40ch; }
  .fattori { margin: 0; }
  .fattore {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vnl-space-md);
    align-items: baseline; padding-block: 0.85rem;
    border-block-start: 1px solid var(--vnl-border);
  }
  .fattore:last-child { border-block-end: 1px solid var(--vnl-border); }
  .fattore dt {
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-body); font-weight: 600;
    color: var(--vnl-text);
  }
  .fattore dd {
    margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm);
    text-align: right; white-space: nowrap;
  }
  .costo__nota {
    margin-top: var(--vnl-space-lg); padding: var(--vnl-space-md) var(--vnl-space-lg);
    border: 1px dashed rgba(232, 73, 16, 0.7);
    color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.6;
  }
  .costo__nota b { color: var(--vnl-brand); font-weight: 600; }

  /* ---------------------------------------------------------- preventivo */

  .preventivo { padding-block: clamp(3rem, 8vh, 5rem); }
  .preventivo__grid {
    display: grid; gap: clamp(1.75rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start;
  }
  .preventivo__head { display: flex; flex-direction: column; gap: var(--vnl-space-sm); align-items: flex-start; margin-bottom: var(--vnl-space-lg); }
  .preventivo__head p { margin: 0; color: var(--vnl-text-muted); line-height: 1.62; max-width: 50ch; }

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

  @media (max-width: 60rem) {
    .pannello__grid, .costo__grid, .preventivo__grid { grid-template-columns: 1fr; }
    .voce { padding-inline-end: 0; }
  }

/* ===== CONTATTI ======================================================== */

/* ------------------------------------------------------ scelta rapida */

  /* Tre bottoni-ancora in testa: chi arriva qui da una CTA sa già cosa vuole,
     e deve poterci saltare senza scorrere le altre due porte. */
  .scelta { display: grid; gap: 2px; background: var(--vnl-border); margin-top: clamp(1.5rem, 4vh, 2.5rem);
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .scelta a {
    background: var(--vnl-surface-1); padding: var(--vnl-space-lg);
    display: flex; flex-direction: column; gap: var(--vnl-space-xs);
    text-decoration: none; transition: background var(--t-state) var(--ease-out);
  }
  .scelta a:hover { background: var(--vnl-surface-2); }
  .scelta b {
    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); color: var(--vnl-text);
  }
  .scelta span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); line-height: 1.5; }
  .scelta em {
    font-style: normal; color: var(--vnl-brand); font-family: var(--vnl-font-body);
    font-size: var(--vnl-size-caption); font-weight: 600; text-transform: uppercase;
    letter-spacing: var(--vnl-tracking-wide); margin-top: auto; padding-top: var(--vnl-space-sm);
  }

  /* --------------------------------------------------------- impianto */

  /* Colonna appiccicata a destra: i dati del locale non spariscono mai.
     `align-items: start` è necessario perché position: sticky funzioni in
     una griglia: senza, la cella si stira e non c'è niente da appiccicare. */
  .contatti { padding-block: clamp(2.5rem, 7vh, 4rem); }
  .contatti__grid {
    display: grid; gap: clamp(1.75rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
  }
  .contatti__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }

  /* ------------------------------------------------------------ porta */

  .porta { padding-block: clamp(2rem, 6vh, 3.25rem); border-block-start: 1px solid var(--vnl-border); }
  .porta:first-child { border-block-start: 0; padding-block-start: 0; }
  .porta__head { display: flex; flex-direction: column; gap: var(--vnl-space-sm); align-items: flex-start; margin-bottom: var(--vnl-space-lg); }
  .porta__head p { margin: 0; color: var(--vnl-text-muted); line-height: 1.62; max-width: 52ch; }
  .porta__chi {
    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);
  }

  /* Il contatto diretto viene prima del modulo: al telefono si risponde
     adesso, un modulo aspetta. Metterlo dopo sarebbe metterlo in coda. */
  .diretto { display: flex; gap: 2px; background: var(--vnl-border); margin-bottom: var(--vnl-space-lg); flex-wrap: wrap; }
  .diretto a {
    flex: 1 1 12rem; background: var(--vnl-surface-1); padding: var(--vnl-space-md) var(--vnl-space-lg);
    text-decoration: none; display: flex; flex-direction: column; gap: 0.2rem;
    transition: background var(--t-state) var(--ease-out);
  }
  .diretto a:hover { background: var(--vnl-surface-2); }
  .diretto small {
    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);
  }
  .diretto b {
    font-family: var(--vnl-font-body); font-size: var(--vnl-size-body); font-weight: 600;
    color: var(--vnl-text); font-variant-numeric: tabular-nums;
  }

  /* ----------------------------------------------------------- scheda */

  .scheda { background: var(--vnl-surface-1); padding: var(--vnl-space-lg); display: grid; gap: var(--vnl-space-lg); }
  .scheda__mappa {
    display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    background: var(--vnl-surface-2); text-decoration: none;
  }
  /* Senza una mappa dentro, il 4:3 era un riquadro marrone vuoto sopra
     l'indirizzo. Finche' manca l'immagine la scheda e' alta quanto il testo. */
  .scheda__mappa:not(:has(img)) { aspect-ratio: auto; }
  .scheda__mappa:not(:has(img)) .scheda__pin { position: static; background: none; }
  .scheda__mappa img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.55) saturate(0.85); transition: filter var(--t-layout) var(--ease-out); }
  .scheda__mappa:hover img { filter: brightness(0.7) saturate(1); }
  /* L'immagine e' un rendering statico dei tile di OpenStreetMap (zoom 16,
     centrato sulle coordinate del locale): la licenza chiede l'attribuzione. */
  .scheda__osm { position: absolute; inset-block-start: 0; inset-inline-end: 0; padding: 0.15rem 0.4rem;
                 background: rgba(14,13,13,0.7); color: var(--vnl-text-muted); font-size: 0.7rem; line-height: 1.4; }
  .scheda__pin {
    position: absolute; inset-block-end: 0; inset-inline: 0; padding: var(--vnl-space-md);
    background: linear-gradient(to top, rgba(14,13,13,0.95), transparent);
    display: flex; flex-direction: column; gap: 0.2rem;
  }
  .scheda__pin b { 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); color: var(--vnl-text); }
  .scheda__pin span { color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); }
  .scheda__go { color: var(--vnl-brand); font-family: var(--vnl-font-body); font-size: var(--vnl-size-caption);
                font-weight: 600; text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide); margin-top: 0.3rem; }

  .orari { margin: 0; display: grid; }
  .orari div {
    display: flex; justify-content: space-between; gap: var(--vnl-space-md);
    padding-block: 0.5rem; border-block-start: 1px solid var(--vnl-border);
  }
  .orari div:first-child { border-block-start: 0; }
  .orari dt { font-family: var(--vnl-font-body); font-size: var(--vnl-size-body-sm); font-weight: 600; color: var(--vnl-text); }
  .orari dd { margin: 0; color: var(--vnl-text-muted); font-size: var(--vnl-size-body-sm); text-align: right; }
  .orari div[data-chiuso="true"] dt, .orari div[data-chiuso="true"] dd { color: var(--vnl-text-faint); }

  .scheda__tit {
    margin: 0 0 var(--vnl-space-sm); 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);
  }

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

  @media (max-width: 60rem) {
    .contatti__grid { grid-template-columns: 1fr; }
    /* Appiccicare la scheda sotto i moduli non ha senso: in colonna finirebbe
       a fondo pagina, dove non serve più a niente. */
    .contatti__aside { position: static; }
  }
/* ===========================================================================
   LA PAGINA DI CONTENUTO

   Dodici pagine rendevano nude: testo da bordo a bordo, nessuna testata, la
   prima riga sotto la barra fissa. Non mancava una grafica — mancava
   un'IMPAGINAZIONE, che e' un'altra cosa: una colonna che si legge, un ritmo
   fra le sezioni, e un posto per il modulo che non sia in mezzo al testo.

   Niente di nuovo nel linguaggio. Queste pagine devono sembrare parte del
   sito, non un secondo sito: stessi caratteri, stessa tavolozza, stessa
   testata delle pagine che il template ce l'avevano gia'.
   ======================================================================== */

.pagina {
  padding-block: clamp(2rem, 6vh, 3.5rem) clamp(3.5rem, 10vh, 6rem);
}

/* La colonna di lettura. 64 caratteri: sotto i 45 si legge a scatti, sopra i
   75 l'occhio perde la riga tornando a capo. */
.pagina__testo {
  max-width: 64ch;
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body);
  line-height: var(--vnl-leading-body);
}

.pagina__testo > :first-child { margin-block-start: 0; }
.pagina__testo > :last-child { margin-block-end: 0; }

.pagina__testo p {
  margin: 0 0 var(--vnl-space-md);
}

/* I titoletti: bianchi contro il grigio del testo, e con lo spazio sopra
   TRIPLO di quello sotto. E' quello che fa capire, senza leggere, che un
   titolo appartiene a cio' che viene dopo e non a cio' che chiude. */
.pagina__testo :is(h2, h3) {
  margin: var(--vnl-space-xl) 0 var(--vnl-space-sm);
  font-family: var(--vnl-font-display);
  line-height: 1.12;
  letter-spacing: var(--vnl-tracking-display);
  color: var(--vnl-text);
  text-wrap: balance;
}

.pagina__testo h2 { font-size: var(--vnl-size-display-sm); }
.pagina__testo h3 { font-size: var(--vnl-size-body); text-transform: uppercase; letter-spacing: var(--vnl-tracking-wide); }

.pagina__testo :is(ul, ol) {
  margin: 0 0 var(--vnl-space-md);
  padding-inline-start: 1.2em;
}

.pagina__testo li { margin-block-end: var(--vnl-space-xs); }

.pagina__testo a { color: var(--vnl-brand); }

/* Le immagini dentro il testo escono dalla colonna: una fotografia stretta
   quanto una riga di prosa sembra un francobollo, e qui dentro ci sono i
   menu delle serate, che si devono poter leggere. */
.pagina__testo :is(img, figure) {
  display: block;
  width: 100%;
  max-width: min(100%, 46rem);
  height: auto;
  margin-block: var(--vnl-space-lg);
  border: 1px solid var(--vnl-border);
}

.pagina__testo figure img { margin-block: 0; border: 0; }

.pagina__testo figcaption {
  margin-block-start: var(--vnl-space-sm);
  font-size: var(--vnl-size-caption);
  color: var(--vnl-text-faint);
}

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

   Un modulo non si legge, si compila. Sta in una fascia sua, staccata da una
   linea: chi e' venuto a informarsi si ferma prima, chi e' venuto a chiedere
   la trova senza cercarla. */
.pagina__modulo {
  margin-block-start: clamp(2.5rem, 7vh, 4rem);
  padding-block-start: clamp(2rem, 5vh, 3rem);
  border-block-start: 1px solid var(--vnl-border);
  max-width: 52rem;
}

.pagina__chiedi {
  margin: 0 0 var(--vnl-space-xs);
  font-family: var(--vnl-font-display);
  font-size: var(--vnl-size-display-sm);
  line-height: 1.12;
  letter-spacing: var(--vnl-tracking-display);
  color: var(--vnl-text);
}

.pagina__quando {
  margin: 0 0 var(--vnl-space-lg);
  color: var(--vnl-text-muted);
  font-size: var(--vnl-size-body-sm);
}

/* Sotto i 56rem la colonna e' gia' tutta la larghezza: il limite in
   caratteri non serve piu' e toglierlo evita una riga corta in mezzo a due
   margini larghi. */
@media (max-width: 56rem) {
  .pagina__testo { max-width: none; }
}