/* ═══════════════════════════════════════════════════════════════════
   Taglio Maestro · il banco che si percorre
   ───────────────────────────────────────────────────────────────────
   Scritto da zero sulle misure prese dai quattro riferimenti
   (DIREZIONE-misurata.md). Tre regole, e non se ne aggiungono altre:

   1. UN AMBIENTE SOLO. Il fondo non cambia a scatti da una sezione
      all'altra: è una superficie continua che **cambia luce** mentre la
      percorri, dal buio dell'insegna al marmo del banco alla carta del
      listino. Le sezioni non hanno un fondo proprio. Non esistono
      lastre, riquadri, schede.
   2. DUE REGISTRI, NIENTE IN MEZZO. Display enorme (interlinea 1,05,
      crenatura −0,03em) ed etichetta da 14 px maiuscola. Fra i due c'è
      un salto di quattro volte, e nessun corpo intermedio a fare da
      cuscino. È la costante misurata su tutti e quattro i riferimenti.
   3. UN ACCENTO SOLO. La ceralacca. La terracotta è stata tolta dalla
      circolazione: due rossi si contendono la scena e non indica più
      niente né l'uno né l'altro.

   E una cosa che non c'è: **nessun WebGL, nessuna particella, nessuno
   shader.** Primal Pastures — il riferimento più vicino a una
   macelleria — non usa nemmeno un canvas.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* la superficie, nei suoi momenti di luce */
  --ba-notte:#16130e;
  --ba-penombra:#241f18;
  --ba-marmo:#f5f2ea;
  --ba-carta:#efe9dc;

  --ba-inchiostro:#211e19;
  /* ⚠️ Era #6f685c, e sul marmo faceva 4,93:1 — appena sopra il minimo.
     Con la filigrana sotto scendeva a 3,88:1 sulla carta del patto,
     cioè sotto. Un secondario che sta al limite non ha margine per
     niente: né per una filigrana, né per uno schermo tarato male, né
     per chi legge in bottega con la luce del mattino addosso. */
  --ba-bruno:#5f584c;
  --ba-ceralacca:#8e2a1d;
  --ba-luce-testo:#f6f2e7;
  /* il foglio: la carta bianca dei cartellini e delle schede appoggiate */
  --ba-foglio:#fffdf8;
  /* la terracotta accesa sul buio: il taglio scelto sulla bestia, il
     corsivo e la porta sopra il video. Più chiara dell'accento scuro,
     perché su una fotografia scura l'accento da solo non si stacca. */
  --ba-terracotta-viva:#e07a63;
  --ba-terracotta-luce:#f0866c;

  --ba-filo:rgba(33,30,25,.16);
  --ba-filo-chiaro:rgba(246,242,231,.18);

  /* ⚠️ L'INCHIOSTRO SEGUE LA LUCE. Se il fondo è uno solo e cambia
     mentre lo percorri, il colore del testo non può stare scritto
     nella sezione: al passaggio fra una postazione e l'altra la coda
     di quella che esce si trova sul fondo di quella che entra, e
     diventa illeggibile — è successo davvero, il paragrafo del patto
     finiva in inchiostro scuro sul nero della chiusa. Qui il fondo e
     l'inchiostro cambiano insieme, nello stesso mezzo secondo. */
  --ba-ink:#211e19;
  --ba-ink-2:#5f584c;
  --ba-ink-3:#5f584c;
  --ba-ink-forte:#211e19;
  --ba-accento:#8e2a1d;
  --ba-filo-vivo:rgba(33,30,25,.16);

  --ba-display:'Bodoni Moda', Georgia, serif;
  --ba-testo:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ⚠️ sopra i 1600px il margine cresce con la finestra: la colonna del
     testo non supera 76rem e restava incollata a sinistra, con più di metà
     schermo vuota a 2560. Fino a 1600 il valore è quello di sempre. */
  --ba-margine:max(clamp(1.5rem,6vw,7rem), calc((100vw - 100rem) / 2));
  --ba-respiro:clamp(5rem,13vh,10rem);
}

html.ba-scuro,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]){
  --ba-ink:#f6f2e7;
  --ba-ink-2:rgba(246,242,231,.72);
  --ba-ink-3:rgba(246,242,231,.55);
  --ba-ink-forte:#f6f2e7;
  --ba-accento:#d8654e;
  --ba-filo-vivo:rgba(246,242,231,.18);
}

*,*::before,*::after{ box-sizing:border-box; border-radius:0; }
html{ overflow-x:clip; scrollbar-color:rgba(142,42,29,.4) transparent; scrollbar-width:thin; }
body{ margin:0; overflow-x:clip; font-family:var(--ba-testo); font-weight:350;
  color:var(--ba-ink); background:var(--ba-notte); -webkit-font-smoothing:antialiased; }
img,svg,video{ max-width:100%; display:block; }
/* ⚠️ img con width/height (per il CLS): senza height:auto l’altezza resta quella
   dell’attributo e l’immagine si schiaccia — la bestia usciva 473×726 invece di
   473×312. Le regole che danno un’altezza sono più specifiche e vincono. */
img{ height:auto; }
a{ color:inherit; text-underline-offset:.2em; text-decoration-thickness:1px; }
/* le superfici che non abbiamo disegnato portano comunque la bottega: la
   selezione prende l'accento della luce in cui sta (ceralacca sul chiaro,
   terracotta sul buio), e il testo resta del suo colore */
::selection{ background:color-mix(in srgb, var(--ba-accento) 26%, transparent); color:inherit; }
:focus-visible{ outline:2px solid var(--ba-ceralacca); outline-offset:4px; }

/* il primo tasto Tab porta al contenuto, non attraverso la testata */
.ba-salta{ position:fixed; top:.75rem; left:.75rem; z-index:100;
  padding:.875rem 1.1rem; background:var(--ba-luce-testo); color:var(--ba-inchiostro);
  font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; transform:translateY(-180%);
  transition:transform .2s cubic-bezier(.16,1,.3,1); }
.ba-salta:focus{ transform:none; }
main:focus{ outline:none; }

/* ── la superficie continua ──────────────────────────────────────── */
.ba-superficie{ position:fixed; inset:0; z-index:-1; background:var(--ba-notte); }

/* ═══════════════════════════════════════════════════════════════════
   CINQUE PAGINE, UN DOCUMENTO SOLO
   ───────────────────────────────────────────────────────────────────
   Il sito ha **una superficie sola, fissa dietro tutto**, che cambia
   colore mentre scorri: è l'idea che tiene insieme una pagina lunga
   diecimila pixel, e dentro la pagina funziona. Fra una pagina e
   l'altra però c'era lo stacco bianco del browser e la superficie
   ripartiva da zero — mentre in fondo a ogni pagina c'è scritto,
   letteralmente, «PRIMA · Com'è fatto il sistema — POI · Come vende il
   sito — E INFINE · Quanto costa».

   Con le transizioni di vista la testata e la superficie **restano**, e
   il fondo passa dal colore di chiusura di una al colore di apertura
   dell'altra. Il percorso smette di avere giunture anche fra i
   capitoli.

   ⚠️ Additivo e innocuo: dove non è supportato non succede niente,
   nessun fallback da scrivere. E il movimento ridotto lo spegne.
   ⚠️ Da riprovare sul montaggio in NectarBlocks: lì la navigazione
   passa da WordPress e potrebbe non essere della stessa origine. */
@view-transition { navigation: auto; }
.ba-testata { view-transition-name: testata; }
.ba-superficie { view-transition-name: superficie; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .45s;
  animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-group(superficie) { animation-duration: .6s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  /* il taglio acceso sulla bestia cambia colore, non cresce */
  .ba-segno{ transition:background .4s, box-shadow .4s; }
}

/* ── i due registri, e niente in mezzo ───────────────────────────── */
/* ⚠️ Niente `text-wrap:balance`: interferisce con SplitText, che qui
   spezza i titoli in righe per farle entrare da sotto una maschera.

   ⚠️ E l'interlinea: **la scatola del Bodoni Moda è alta 1,53em**
   (salita 1,13 + discesa 0,40) mentre l'inchiostro ne occupa 1,00. Il
   Georgia, per confronto, sta in 1,14. Vuol dire che un `line-height`
   di 1,05 su questo carattere *rende* come un 1,4 su un carattere
   normale: i titoli sembravano spaziati anche se il numero diceva di
   no. Misurato con `measureText`, non a occhio. Per un display serve
   scendere sotto l'unità. */
.ba-display{ font-family:var(--ba-display); font-weight:500;
  font-size:clamp(3rem,6.4vw,5.8rem); line-height:.92; letter-spacing:-.03em;
  margin:0; }
/* la riga tagliata da SplitText: la maschera è il suo involucro.
   ⚠️ Con l'interlinea sotto l'unità la scatola della maschera diventa
   più bassa dell'inchiostro e taglierebbe salite e discese mentre la
   riga entra. Il riquadro si allarga col padding e si riprende col
   margine: cresce quello che ritaglia, non quello che impagina. */
.ba-verso{ will-change:transform; }
/* ⚠️ Il nome non sta in nessun file: lo crea SplitText 3.13 per la
   maschera di ogni verso (`mask:'lines'` + `linesClass:'ba-verso'` →
   `ba-mask-verso-mask`). Una ricerca degli stili morti per testo la
   segna inutilizzata, e togliendola i titoli perdono le code del Bodoni.
   Misurata viva il 15/09: 14 maschere in home, 12 su «Il sito». */
.ba-mask-verso-mask{
  padding:.16em 0 .22em; margin:-.16em 0 -.22em; }
.ba-display em{ font-style:italic; font-weight:400; color:var(--ba-accento); }
/* ⚠️ Con l'interlinea del display sotto l'unità la scatola si stringe
   attorno all'inchiostro, e l'etichetta sopra finiva addosso alla
   prima riga. Lo spazio che prima veniva dall'interlinea larga adesso
   va messo a mano, che è anche il posto giusto per deciderlo. */
.ba-etichetta + .ba-display,
.ba-etichetta + .ba-colpo,
.ba-etichetta + .ba-detti{ margin-top:clamp(.7rem,1.6vh,1.3rem); }
.ba-etichetta{ font-size:.875rem; font-weight:600; line-height:1.5; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ba-ink-3); margin:0; }
.ba-testo{ font-size:clamp(1.05rem,1.15vw,1.18rem); line-height:1.72; max-width:46ch;
  color:var(--ba-ink-2); margin:1.6rem 0 0; }
.ba-testo b{ font-weight:600; color:var(--ba-ink-forte); }
.ba-cifra{ font-family:var(--ba-display); font-weight:600; line-height:1.04;
  font-size:clamp(1.8rem,3.2vw,2.9rem); color:var(--ba-accento); letter-spacing:-.01em; }
.ba-eu{ font-family:var(--ba-testo); font-weight:500; font-size:.78em;
  letter-spacing:0; margin-left:.06em; }
/* ⚠️ `.3em` di una cifra da 28px sul telefono faceva 8,6px: un minimo in rem */
.ba-cifra small{ font-family:var(--ba-testo); font-weight:400; font-size:max(.3em,.6875rem);
  letter-spacing:.16em; text-transform:uppercase; color:var(--ba-ink-3); margin-left:.5rem; }

/* il cambio di luce dura mezzo secondo: l'inchiostro e i fili lo
   accompagnano, se no si vede lo scalino */
body,.ba-display,.ba-display em,.ba-etichetta,.ba-testo,.ba-testo b,
.ba-cifra,.ba-cifra small,.ba-riga,.ba-riga-nome,.ba-riga-rep,.ba-listino,
.ba-fatti,.ba-fatti li,.ba-fatti b,.ba-conto-detto,.ba-scheda,.ba-scheda-nome,
.ba-scheda-cotture,.ba-piede,.ba-porta{
  transition:color .55s ease-in-out, border-color .55s ease-in-out; }

/* ── la porta: l'unico elemento cliccabile ricorrente ─────────────── */
.ba-porta{ display:inline-flex; align-items:baseline; gap:.9rem; text-decoration:none;
  font-size:.875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  line-height:1.5; padding-bottom:.6rem; border-bottom:1px solid var(--ba-filo-vivo);
  transition:gap .35s cubic-bezier(.16,1,.3,1), border-color .55s ease-in-out, color .35s; }
.ba-porta::after{ content:"→"; letter-spacing:0; font-size:1.1em; }
/* ⚠️ 44px di area sensibile, su tutte le pagine: si usa col pollice, e
   spesso con le mani non pulite. Cresce l'area, non il disegno: il filo
   resta sotto la parola e la testata non si alza (comanda il marchio). */
.ba-testata nav a{ padding-block:.78rem; }
.ba-porta{ padding-top:.62rem; padding-bottom:.66rem; }
.ba-porta:hover{ gap:1.5rem; color:var(--ba-accento); border-color:var(--ba-accento); }
.ba-porte{ display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem); margin-top:2.6rem; }

/* ── la postazione ───────────────────────────────────────────────── */
.ba-postazione{ position:relative; padding:var(--ba-respiro) var(--ba-margine); }
.ba-largo{ position:relative; z-index:1; max-width:min(76rem,100%); }

/* ── le filigrane ─────────────────────────────────────────────────
   Le incisioni comprate, finalmente fuori dalla cantina. Tre regole,
   perché una filigrana fatta male è peggio di nessuna filigrana:

   1. ENORMI E TAGLIATE. Escono dal bordo della postazione, che le
      ritaglia. Un'incisione piccola e centrata è un francobollo: si
      legge come un'icona messa lì per riempire.
   2. NEL VUOTO, NON SOTTO IL TESTO. Ogni postazione ha una metà che
      respira: la filigrana sta lì.
   3. APPENA. Si deve *sentire* che c'è, non vedere cos'è.

   ⚠️ L'opacità non può essere una sola per tutte. La bilancia ha
   superfici piene e al 5% si legge; la mannaia e il tritacarne sono
   tratteggi sottili e alla stessa opacità sparivano del tutto. Ogni
   incisione ha la sua, misurata guardandola. Ma è la **stessa** sul
   chiaro e sullo scuro: alzarla al buio faceva diventare la filigrana
   del patto un macchinario in piena vista proprio mentre quella
   postazione se ne andava. Sul fondo scuro cambia solo l'inversione,
   perché il tratto nero lì non esiste.

   ⚠️ E tutte hanno il bordo sfumato. Il bordo della postazione le
   taglia con una riga dritta, e su fondo scuro quella riga si vedeva
   come un blocco rettangolare in mezzo al nulla. */
/* ⚠️ È la postazione a tagliarle. Senza, il tratto sborda nella
   postazione accanto e finisce sotto il testo di un'altra. */
.ba-postazione:has(.ba-filigrana){ overflow:clip; }
/* ⚠️ Le misure vere stanno anche negli attributi width/height del tag,
   e non è pignoleria: senza, l'immagine è un box alto zero finché non
   arriva, il caricatore pigro non la vede mai entrare in vista e la
   filigrana non si carica proprio. È successo: erano tre `<img>` con
   `naturalWidth: 0` e nessuno se ne accorgeva, perché una filigrana
   che manca non rompe niente — semplicemente non c'è. */
.ba-filigrana{ position:absolute; z-index:0; pointer-events:none; user-select:none;
  height:auto; max-width:none;
  /* ⚠️ un max-height NON ricalcola la larghezza: la scatola resta larga e si
     accorcia, e la figura si schiaccia (la lama di l-app, 218×1080 invece di
     218×1417). contain la ridisegna nella scatola con la sua proporzione. */
  object-fit:contain;
  -webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 100%);
  mask-image:radial-gradient(ellipse 62% 62% at 50% 50%, #000 34%, transparent 100%);
  transition:opacity .55s ease-in-out, filter .55s ease-in-out; }
html.ba-scuro .ba-filigrana,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-filigrana{ filter:invert(1); }

/* la bilancia a due piatti, nel vuoto in mezzo al listino.
   Superfici piene: è quella che regge l'opacità più bassa. */
.ba-fil-bilancia{ right:-16vw; top:50%; translate:0 -50%; width:min(86vw,74rem);
  opacity:.055; }

/* il tritacarne, nel terzo di destra che il patto lascia libero.
   ⚠️ Ribaltato di proposito: sul corpo della macchina c'è inciso
   «No 323 · UNIVERSAL MEAT CHOPPER», e a filigrana si leggeva. Tre
   parole in inglese sul fondo di una pagina per macellai italiani
   dicono «immagine presa da una libreria». Allo specchio le lettere
   tornano a essere quello che devono essere: tratto.
   (`scale` è la proprietà a sé, non `transform`: così non litiga con
   la parallasse che la regia scrive in `transform`.) */
.ba-fil-tritacarne{ right:-7vw; top:9%; width:min(46vw,40rem); opacity:.085; }

/* la mannaia della chiusa: la stessa del marchio, in grande.
   ⚠️ Sborda in basso e a destra, mai in alto: il taglio in alto
   cadeva esattamente sulla cucitura fra il patto e la chiusa e si
   vedeva come una riga dritta in mezzo al nulla. In basso il taglio
   coincide con la fine della pagina, e non lo nota nessuno. */
.ba-fil-mannaia{ right:-9vw; top:30%; width:min(34vw,30rem); rotate:11deg; opacity:.06; }

@media (max-width:860px){
  .ba-fil-bilancia{ right:-38vw; width:158vw; opacity:.045; }
  .ba-fil-tritacarne{ right:-24vw; top:14%; width:92vw; opacity:.065; }
  .ba-fil-mannaia{ right:-16vw; width:64vw; opacity:.05; }
}

/* ── testata ─────────────────────────────────────────────────────── */
.ba-testata{ position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.6rem var(--ba-margine);
  transition:transform .5s cubic-bezier(.16,1,.3,1), padding .5s, background-color .35s ease; }
.ba-testata img{ height:52px; width:auto; transition:height .5s cubic-bezier(.16,1,.3,1); }
.ba-testata nav{ display:flex; align-items:center; gap:clamp(1.2rem,2.6vw,2.6rem); }
.ba-testata nav a{ font-size:.8rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:rgba(246,242,231,.66);
  transition:color .3s; }
.ba-testata nav a:hover{ color:var(--ba-luce-testo); }
.ba-testata.ba-ritirata{ transform:translateY(-115%); }
/* scendendo la testata si stringe: è l'unico modo di dare il senso del
   movimento a una barra fissa senza farla saltellare */
.ba-testata.ba-stretta{ padding-block:.9rem; }
.ba-testata.ba-stretta img{ height:38px; }
/* ⚠️ stretta vuol dire che sotto c'è già il contenuto. Senza fondo,
   risalendo, marchio e voce di menu si posavano sui titoli: a 390px il
   lockup stava sopra «Fiorentina». Il fondo segue la luce della testata. */
.ba-testata.ba-stretta{ background-color:color-mix(in srgb, var(--ba-notte) 97%, transparent); }
.ba-testata.ba-stretta.ba-chiara{ background-color:color-mix(in srgb, var(--ba-marmo) 97%, transparent); }
.ba-testata.ba-chiara nav a{ color:var(--ba-bruno); }
.ba-testata.ba-chiara nav a:hover{ color:var(--ba-ceralacca); }
@media (max-width:860px){ .ba-testata nav a:not(.ba-vai){ display:none; } }

/* ═══ 1 · L'INSEGNA ════════════════════════════════════════════════ */
.ba-insegna{ padding-top:0; padding-bottom:var(--ba-respiro); }
.ba-veduta{ position:relative; height:min(72vh,44rem); overflow:hidden;
  margin-inline:calc(var(--ba-margine) * -1); }
.ba-veduta video{ width:100%; height:100%; object-fit:cover;
  filter:brightness(.74) saturate(.9) contrast(1.05); }
.ba-veduta::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,19,14,.55) 0%, rgba(22,19,14,.05) 34%,
    rgba(22,19,14,.75) 88%, var(--ba-notte) 100%); }
.ba-insegna-testo{ margin-top:clamp(2.6rem,6vh,4.6rem); }
.ba-insegna .ba-display{ font-size:clamp(3.2rem,7.2vw,6.4rem); max-width:16ch; }

/* ── il colpo ─────────────────────────────────────────────────────
   Stessa scala del titolo, ma è un'altra cosa: è la risposta. Arriva
   dopo, parola per parola da sotto una fascia, con la ceralacca. */
.ba-colpo{ margin:.06em 0 0; max-width:16ch;
  font-family:var(--ba-display); font-weight:500;
  font-size:clamp(3.2rem,7.2vw,6.4rem); line-height:.92; letter-spacing:-.03em; }
.ba-colpo em{ font-style:italic; font-weight:400; color:var(--ba-accento); }
html.mv .ba-colpo{ opacity:0; }

/* i due strati del colpo: la forma in inchiostro, il colore che arriva
   dopo. Stessa riga, stesso posto, uno sopra l'altro. */
.ba-colpo{ position:relative; }
.ba-colpo-strato{ display:block; will-change:clip-path; }
.ba-colpo-cera{ position:absolute; inset:0; }
.ba-colpo-fondo em{ color:var(--ba-ink); }
.ba-colpo-cera em{ color:var(--ba-accento); }

/* ═══ 2 · IL BANCO · il listino ════════════════════════════════════ */
.ba-listino{ position:relative; margin-top:clamp(2.6rem,6vh,4.4rem);
  border-top:1px solid var(--ba-filo-vivo); }

/* ── i fili tirati a mano ─────────────────────────────────────────
   Quando DrawSVG c'è, i bordi del listino se ne vanno e al loro posto
   arriva un tratto storto che si tira. Se non c'è, restano i bordi e
   non se ne accorge nessuno. */
html.tirati .ba-listino,
html.tirati .ba-riga{ border:0; }
.ba-filo{ position:absolute; left:0; right:0; height:6px; overflow:visible;
  pointer-events:none; }
.ba-filo-su{ top:-3px; }
.ba-filo-giu{ bottom:-3px; }
.ba-filo path{ fill:none; stroke:var(--ba-filo-vivo); stroke-width:1;
  stroke-linecap:round; transition:stroke .55s ease-in-out; }
.ba-riga{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,3rem); align-items:baseline; padding-block:clamp(1.1rem,2.4vh,1.7rem);
  border-bottom:1px solid var(--ba-filo-vivo); }
.ba-riga-nome{ font-family:var(--ba-display); font-weight:500; line-height:1.06;
  font-size:clamp(1.25rem,2.1vw,1.75rem); }
.ba-riga-rep{ display:block; font-family:var(--ba-testo); font-weight:600; font-size:.875rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ba-ink-3); margin-bottom:.4rem; }
/* ═══ IL QUADRO · il peso, detto sopra il ceppo ════════════════════
   L'unica postazione che blocca lo scorrimento, e l'unica col fondo
   suo: il video sta sotto tutto, il velo sopra, il testo sopra ancora.
   ⚠️ Il velo non è decorazione — senza, un fotogramma chiaro del ceppo
   si porta via il testo. */
.ba-quadro{ position:relative; min-height:100svh; overflow:clip;
  display:grid; align-content:center;
  padding-block:clamp(4rem,10vh,7rem); }
.ba-quadro-fondo{ position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(.92) contrast(1.06); }
.ba-quadro-velo{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(13,11,8,.94) 0%, rgba(13,11,8,.8) 42%,
    rgba(13,11,8,.3) 80%, rgba(13,11,8,.56) 100%); }
/* ⚠️ Il quadro ha un fondo suo e non segue la luce dell'ambiente: il
   testo sta sopra un video scuro qualunque cosa faccia la superficie,
   quindi il suo inchiostro è chiaro e basta — come lo schermo del
   telefono, che è chiaro anche quando intorno è notte. Senza questo,
   nel mezzo secondo in cui la luce cambia il testo diventa scuro sul
   video e sparisce. */
.ba-quadro-dentro{ position:relative; z-index:2; max-width:min(58rem,100%);
  color:var(--ba-luce-testo); }
.ba-quadro-dentro .ba-etichetta{ color:rgba(246,242,231,.62); }
.ba-quadro-dentro .ba-porta{ border-color:rgba(246,242,231,.28); }
.ba-quadro-dentro .ba-porta:hover{ color:var(--ba-terracotta-viva); border-color:var(--ba-terracotta-viva); }

/* le tre affermazioni si danno il cambio mentre la sezione è ferma:
   stanno una sopra l'altra, e la griglia tiene l'altezza della più alta */
.ba-detti{ display:grid; margin-top:clamp(1.6rem,4vh,2.6rem);
  min-height:clamp(9rem,26vh,16rem); }
.ba-detto{ grid-area:1 / 1; margin:0; align-self:start;
  font-family:var(--ba-display); font-weight:500;
  font-size:clamp(2.2rem,4.6vw,4.1rem); line-height:.95; letter-spacing:-.028em;
  max-width:18ch; }
.ba-detto em{ font-style:italic; font-weight:400; color:var(--ba-terracotta-viva); }
.ba-quadro .ba-porte{ margin-top:clamp(1.4rem,3vh,2.2rem); }
@media (max-width:860px){
  .ba-quadro{ min-height:0; }
  .ba-detti{ display:block; min-height:0; }
  .ba-detto{ margin-bottom:clamp(1.6rem,4vh,2.4rem); max-width:none; }
}

/* ═══ 3 · LA BESTIA ════════════════════════════════════════════════ */
.ba-bestia{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,5vw,5rem); align-items:center; }
@media (max-width:960px){ .ba-bestia{ grid-template-columns:1fr; } }
/* ⚠️ L'incisione è alta: senza un tetto si spezza in due schermate e
   la bestia si vede a metà. Il rapporto è 1400:924, quindi il tetto
   si mette sulla larghezza. */
.ba-incisione{ position:relative; width:100%; max-width:calc(54vh * 1.515);
  margin-inline:auto;
  /* la lampada: dove punta, e quanto è larga. Le muove la regia. */
  --fx:47%; --fy:29%; --frx:11%; --fry:15%; }
.ba-incisione img{ width:100%; display:block;
  filter:invert(1) sepia(.2) saturate(.55) brightness(1.15); }

/* ⚠️ Niente bolli. I cerchi colorati sopra l'incisione erano la cosa
   più brutta della pagina. Qui la bestia sta in penombra e il taglio
   di cui si parla è l'unico pezzo *acceso*: due copie sovrapposte,
   quella sopra ritagliata da un alone che si sposta. */
.ba-inc-buia{ position:relative; z-index:1; opacity:.5; }
/* ⚠️ La pozza sta SOTTO il disegno — l'incisione ha il fondo
   trasparente, quindi la luce le passa attraverso. Con la sola copia
   accesa sopra, il tratteggio fitto del fianco diventava una macchia
   bianca: si vedeva una torcia, non un taglio. Il colore fa quello che
   la luminosità da sola non faceva. */
.ba-faro-pozza{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse var(--frx) var(--fry) at var(--fx) var(--fy),
    rgba(158,44,28,.95) 0%, rgba(142,42,29,.5) 52%, transparent 100%); }
/* ⚠️ specificità: `.ba-incisione img` (una classe + un tipo) batte
   `.ba-inc-faro` (una classe sola). Senza il genitore davanti, la
   copia accesa perdeva l'assoluto e finiva in colonna sotto la
   bestia — una macchia bianca sospesa nel vuoto. */
.ba-incisione .ba-inc-faro{ position:absolute; inset:0; z-index:2; opacity:.75;
  filter:invert(1) sepia(.2) saturate(.55) brightness(1);
  /* ⚠️ `ellipse` e non `circle`: un cerchio in radial-gradient vuole un
     raggio in pixel, le percentuali le accetta solo l'ellisse. E va
     bene così — l'alone prende la forma del taglio che illumina. */
  -webkit-mask-image:radial-gradient(ellipse var(--frx) var(--fry) at var(--fx) var(--fy),
    #000 40%, rgba(0,0,0,.3) 76%, transparent 100%);
  mask-image:radial-gradient(ellipse var(--frx) var(--fry) at var(--fx) var(--fy),
    #000 40%, rgba(0,0,0,.3) 76%, transparent 100%); }

.ba-tela{ position:absolute; inset:0; z-index:3; width:100%; height:100%; }
.ba-zona{ fill:transparent; stroke:none; cursor:pointer; }
.ba-zona:focus-visible{ outline:none; stroke:var(--ba-accento); stroke-width:2; stroke-dasharray:6 5; }
/* la pila: il vero e la sua ombra nella stessa cella, l'altezza la
   detta il più lungo dei due e non cambia mai più */
.ba-pila{ display:grid; }
.ba-pila > *{ grid-area:1 / 1; }
.ba-ombra{ visibility:hidden; pointer-events:none; }
/* ── dove sono i tagli ────────────────────────────────────────────
   ⚠️ Un punto non è un bollo. I bolli bocciati erano cerchi colorati
   grandi quanto il taglio, sopra il disegno; questo è mezzo carattere e
   dice soltanto «qui c'è qualcosa». Sotto il faro non si vede nemmeno,
   perché è la luce a dire qual è quello scelto. */
.ba-segni{ position:absolute; inset:0; z-index:2; pointer-events:none; }
/* ⚠️ Il primo tentativo era un punto chiaro: sopra un'incisione fatta
   di tratteggio bianco spariva del tutto, cioè non serviva a niente.
   Ceralacca e un alone scuro attorno: così stacca dal disegno a
   qualunque densità di tratto. */
.ba-segno{ position:absolute; width:6px; height:6px; translate:-50% -50%;
  border-radius:50%; background:rgba(224,122,99,.72);
  box-shadow:0 0 0 3px rgba(18,15,11,.62);
  transition:background .4s, box-shadow .4s, scale .4s cubic-bezier(.16,1,.3,1); }
.ba-segno.ba-acceso{ background:var(--ba-terracotta-luce); scale:1.85;
  box-shadow:0 0 0 3px rgba(18,15,11,.5); }

/* ⚠️ I nomi stanno sotto la bestia, dentro la sua colonna. Prima
   erano una riga a piena larghezza dopo tutt'e due le colonne, e
   finivano lontanissimi dall'incisione che devono spiegare — chi
   guardava il disegno non li vedeva nemmeno. */
.ba-lato{ display:flex; flex-direction:column; }
.ba-bestia-voce{ margin-top:clamp(1.4rem,3vh,2.2rem); }
.ba-nomi{ display:flex; flex-wrap:wrap;
  gap:.4rem clamp(.9rem,1.8vw,1.6rem); margin-top:.8rem;
  padding-top:.9rem; border-top:1px solid var(--ba-filo-vivo); }
.ba-nome{ appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--ba-testo); font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.6;
  color:var(--ba-ink-3); transition:color .3s; }
.ba-nome:hover{ color:var(--ba-luce-testo); }
/* i nomi dei tagli sono alti 20px: l'area sensibile si allarga senza
   spostare niente, e resta dentro lo spazio fra una riga e l'altra */
.ba-nome{ position:relative; }
.ba-nome::before{ content:""; position:absolute; inset:-.3rem -.55rem; }
.ba-nome.ba-acceso{ color:var(--ba-terracotta-viva); }
@media (max-width:960px){ .ba-nomi{ gap:.4rem 1.2rem; } }
/* ⚠️ col dito, 44px. Le righe distavano 27px e le aree da 30 si
   accavallavano: un tocco fra due righe cadeva su tutt'e due. Col
   puntatore grosso le righe si allargano a 44 di passo, e l'area
   sensibile cresce esattamente fino a toccare quella del vicino.
   ⚠️ Sta DOPO la regola a 960px: il suo `gap` è una scorciatoia e
   riscriveva il `row-gap` messo prima, a parità di specificità. */
@media (pointer: coarse){
  .ba-nomi{ row-gap:1.5rem; }
  .ba-nome::before{ inset:-.75rem -.6rem; }
}

.ba-scheda{ margin-top:clamp(2rem,5vh,3.4rem);
  padding-top:1.6rem; border-top:1px solid var(--ba-filo-vivo); }
.ba-scheda-nome{ font-family:var(--ba-display); font-weight:500; line-height:.98;
  font-size:clamp(1.9rem,3.4vw,2.8rem); color:var(--ba-accento); margin:0 0 1rem; }
.ba-scheda-uso{ margin:0; }
.ba-scheda-cotture{ display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; margin-top:1.4rem;
  font-size:.875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ba-ink-3); }

/* ═══ 4 · L'APP ════════════════════════════════════════════════════ */
.ba-app{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2.5rem,6vw,6rem); align-items:center; }
@media (max-width:960px){ .ba-app{ grid-template-columns:1fr; justify-items:start; } }
.ba-fatti{ list-style:none; margin:clamp(2rem,5vh,3rem) 0 0; padding:0;
  border-top:1px solid var(--ba-filo-vivo); }
.ba-fatti li{ padding-block:clamp(.9rem,2vh,1.3rem); border-bottom:1px solid var(--ba-filo-vivo);
  font-size:clamp(1.05rem,1.15vw,1.18rem); line-height:1.6; color:var(--ba-ink-2); }
.ba-fatti b{ color:var(--ba-ink-forte); font-weight:600; }

.ba-telefono{ position:relative; width:min(266px,64vw); aspect-ratio:9/19.5; padding:9px;
  border-radius:44px; flex:none;
  background:linear-gradient(155deg,#3a3630 0%,#0c0b0a 22%,#0a0908 62%,#2a2621 100%);
  box-shadow:inset 0 0 0 1.5px rgba(246,242,231,.12), 0 44px 84px -26px rgba(0,0,0,.55); }
.ba-isola{ position:absolute; top:20px; left:50%; translate:-50% 0; width:62px; height:18px;
  border-radius:12px; background:#050404; z-index:3; }
.ba-schermo{ position:relative; height:100%; border-radius:36px; overflow:hidden;
  background:var(--ba-marmo); }
/* le schermate stanno una sopra l'altra, tutte a pieno schermo */
.ba-quadretto{ position:absolute; inset:0; padding:2.9rem 1rem 1.2rem;
  display:flex; flex-direction:column; }
.ba-quadretto[data-quadretto="2"],.ba-quadretto[data-quadretto="3"]{ opacity:0; }
.ba-schermo-tocco{ margin-inline:-.5rem; padding-inline:.5rem;
  background:rgba(142,42,29,.07); }
.ba-schermo-nuovo{ color:var(--ba-ceralacca); }
.ba-schermo-cifra{ font-family:var(--ba-display); font-weight:600; line-height:1;
  font-size:2.2rem; color:var(--ba-ceralacca); margin:.6rem 0 .1rem; }
.ba-schermo-cifra .ba-eu{ font-size:.7em; }
.ba-schermo-sotto{ margin:0 0 1rem; font-size:.72rem; color:var(--ba-bruno); }
/* le etichette dello schermo disegnato a 11 px: a 9,6 col telefono in mano
   non si leggevano (15/09) */
.ba-schermo-occhio{ font-size:.6875rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ba-bruno); margin:0 0 .2rem; }
.ba-schermo-titolo{ font-family:var(--ba-display); font-weight:500; font-size:1.15rem;
  line-height:1.08; margin:0 0 .8rem; color:var(--ba-inchiostro); }
.ba-schermo-riga{ display:flex; justify-content:space-between; gap:.6rem; padding:.62rem 0;
  border-bottom:1px solid var(--ba-filo); font-size:.78rem; color:var(--ba-inchiostro); }
.ba-schermo-riga:last-of-type{ border-bottom:0; }
.ba-schermo-riga b{ font-weight:600; }
.ba-schermo-piede{ margin:auto 0 0; padding-top:1rem; font-size:.6875rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ba-ceralacca); }

/* ═══ 5 · IL PATTO · il conto ══════════════════════════════════════
   Scritto con le righe del listino del banco (.ba-riga). L'unica cosa
   in più è la colonna di mezzo: cosa comprende. */
.ba-conto{ margin-top:clamp(2.4rem,5vh,3.6rem); }
.ba-conto-voce{ margin-top:clamp(2.6rem,5vh,3.6rem); }
.ba-conto .ba-listino{ margin-top:.9rem; }
/* niente etichetta di reparto ripetuta riga per riga: lo dice già
   l'intestazione del gruppo, e ripeterla è solo rumore */
.ba-conto-riga .ba-riga-nome{ padding-top:.15rem; }
.ba-conto-riga{ grid-template-columns:minmax(9rem,15rem) minmax(0,1fr) auto;
  gap:clamp(1rem,2.4vw,2.6rem); align-items:baseline; }
@media (max-width:860px){
  .ba-conto-riga{ grid-template-columns:minmax(0,1fr) auto; }
  .ba-conto-detto{ grid-column:1 / -1; margin-top:.6rem; }
}
.ba-conto-detto{ margin:0; font-size:.98rem; line-height:1.62; color:var(--ba-ink-2);
  max-width:44ch; transition:color .55s ease-in-out; }
.ba-conto-detto b{ font-weight:600; color:var(--ba-ink-forte); }

/* ⚠️ Sei righe con la cifra tutta della stessa misura e senza unità:
   800 € e 40 € sembravano la stessa cosa, e il conto non si capiva
   più. Due correzioni, tutte e due necessarie:
   1. OGNI CIFRA DICE LA SUA UNITÀ. L'avviamento non ne aveva nessuna —
      era un numero nudo accanto a uno «al mese».
   2. LA MISURA È LA SCALA. Dentro ogni gruppo il corpo cresce col
      gradino: la salita si legge prima di leggere i numeri. */
.ba-conto-riga .ba-cifra{ display:block; text-align:right; white-space:nowrap; }
.ba-conto-riga .ba-cifra small{ display:block; margin:.25rem 0 0;
  font-size:.72rem; letter-spacing:.16em; }
.ba-conto-riga .ba-cifra[data-scala="1"]{ font-size:clamp(1.5rem,2.4vw,2.15rem); }
.ba-conto-riga .ba-cifra[data-scala="2"]{ font-size:clamp(1.8rem,3vw,2.65rem); }
.ba-conto-riga .ba-cifra[data-scala="3"]{ font-size:clamp(2.1rem,3.6vw,3.2rem); }
/* ═══ la sfilata: il cartellino che segue il dito sul listino ══════
   Una scheda da rivista: carta bianca, angoli appena smussati, la
   stampa in alto e sotto reparto, nome e prezzo. Sta sopra tutto e non
   intercetta niente — il dito deve continuare a parlare con le righe.
   ⚠️ Gli angoli tondi sono un'eccezione dichiarata: il foglio azzera
   `border-radius` su tutto proprio per non finire in un sito di
   riquadri stondati. Qui però non è un riquadro di impaginazione, è
   una scheda che galleggia, e su quella un angolo smussato è giusto. */
.ba-sfilata{ position:fixed; top:0; left:0; z-index:60; margin:0;
  width:clamp(236px,21vw,330px);
  opacity:0; visibility:hidden; pointer-events:none;
  background:var(--ba-foglio); padding:.6rem .6rem .2rem; border-radius:7px;
  box-shadow:0 30px 64px -22px rgba(20,16,10,.3),
             0 3px 10px -3px rgba(20,16,10,.12);
  outline:1px solid rgba(33,30,25,.09); outline-offset:-1px; }
.ba-sfilata-vetro{ position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:4px; background:var(--ba-carta); }
.ba-sfilata-vetro img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; visibility:hidden; }

.ba-sfilata-targa{ display:block; padding:.85rem .35rem .9rem; }
.ba-sfilata-rep{ display:block; font-family:var(--ba-testo); font-weight:600;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.4; color:var(--ba-bruno); margin-bottom:.3rem; }
.ba-sfilata-nome{ display:block; font-family:var(--ba-display); font-weight:500;
  line-height:1.04; font-size:1.12rem; color:var(--ba-inchiostro);
  text-wrap:balance; }
.ba-sfilata-prezzo{ display:block; margin-top:.55rem; padding-top:.55rem;
  border-top:1px solid rgba(33,30,25,.12);
  font-family:var(--ba-display); font-weight:600; line-height:1;
  font-size:1.6rem; color:var(--ba-ceralacca); white-space:nowrap; }
.ba-sfilata-prezzo .ba-eu{ font-size:.72em; }
/* «al kg» resta: su un cartellino da banco il prezzo senza unità non
   vuol dire niente */
.ba-sfilata-prezzo small{ font-family:var(--ba-testo); font-weight:600;
  font-size:.38em; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ba-bruno); margin-left:.45rem; }

/* ═══ la scala del canone ══════════════════════════════════════════
   ⚠️ Una scala sola, non tre scatole. Prima erano tre riquadri con un
   contorno per uno e un vuoto in mezzo: sembravano tre cose distinte,
   e infatti «scollegati e distanti». Adesso le colonne si toccano,
   divise da un filo, e il contorno è **un tratto unico** che sale a
   gradini e gira attorno a tutt'e tre. Quello che cambia da una
   colonna all'altra è l'altezza da cui parte: la salita è nel
   disegno, non nella distanza. */
.ba-scala{ position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin-top:clamp(2.6rem,5vh,3.6rem); }
/* ⚠️ Sopra la carta, non sotto: con lo `z-index:0` il riempimento dei
   gradini copriva il tratto e la scalinata disegnata non si vedeva
   più. È un filo di un pixel lungo i bordi, non copre niente. */
.ba-scalinata{ position:absolute; inset:0; z-index:2;
  width:100%; height:100%; overflow:visible; pointer-events:none; }
.ba-scalinata path{ fill:none; stroke:var(--ba-filo-vivo); stroke-width:1;
  stroke-linejoin:miter; transition:stroke .55s ease-in-out; }

/* l'alzata: la prima colonna parte più in basso, l'ultima dal tetto */
.ba-gradino{ position:relative; z-index:1;
  padding:calc(var(--alza) + clamp(1.5rem,2.4vw,2.1rem))
          clamp(1.4rem,2.2vw,1.9rem) clamp(1.5rem,2.4vw,2.1rem); }
.ba-gradino[data-passo="1"]{ --alza:4rem; --carta:rgba(255,253,247,.34); }
.ba-gradino[data-passo="2"]{ --alza:2rem; --carta:rgba(255,253,247,.62); }
.ba-gradino[data-passo="3"]{ --alza:0rem; --carta:rgba(255,253,247,.9); }
html.ba-scuro .ba-gradino[data-passo="1"],
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo="1"]{ --carta:rgba(246,242,231,.028); }
html.ba-scuro .ba-gradino[data-passo="2"],
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo="2"]{ --carta:rgba(246,242,231,.052); }
html.ba-scuro .ba-gradino[data-passo="3"],
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo="3"]{ --carta:rgba(246,242,231,.076); }

/* ⚠️ Lo stacco. Erano carta su carta e non si staccavano dalla pagina.
   Adesso ogni gradino ha la sua, e **la tonalità sale col gradino**:
   più si sale, più la carta è chiara. È la stessa idea della
   superficie che cambia luce, applicata a tre colonne — e fa da terzo
   segnale della salita, dopo l'altezza e il corpo della cifra.
   Il riempimento parte dal gradino, non dal bordo della cella: la
   cella è alta quanto tutto il blocco e l'alzata è solo padding. */
.ba-gradino::before{ content:""; position:absolute; z-index:-1;
  left:0; right:0; top:var(--alza); bottom:0;
  background:var(--carta); transition:background .55s ease-in-out; }

/* ⚠️ LA SCHEDA SOTTO IL DITO PRENDE UN GRADINO DI CARTA IN PIÙ.
   I tre gradini sono una **scelta commerciale** — tre cartellini che si
   leggono confrontandoli — e non rispondevano a niente. Non un
   sollevamento con l'ombra (sarebbe un altro sito): questo progetto
   ragiona per luci, non per ombre, e la carta più chiara qui vuol già
   dire «più vicino» — è il terzo segnale della salita, dopo l'altezza e
   il corpo della cifra. Passandoci sopra, il gradino sale di un tono.
   ⚠️ Svelta a entrare, lenta a uscire: `.3s` sta sulla regola del
   passaggio, `.55s` resta su quella di base. Così la risposta al dito è
   immediata ma il ritorno non strappa — e il cambio di luce della
   sezione, che è l'altro lettore di questa transizione, resta a .55s. */
.ba-gradino[data-passo="1"]:hover{ --carta:rgba(255,253,247,.56); }
.ba-gradino[data-passo="2"]:hover{ --carta:rgba(255,253,247,.82); }
.ba-gradino[data-passo="3"]:hover{ --carta:rgba(255,253,247,1); }
html.ba-scuro .ba-gradino[data-passo="1"]:hover,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo="1"]:hover{ --carta:rgba(246,242,231,.058); }
html.ba-scuro .ba-gradino[data-passo="2"]:hover,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo="2"]:hover{ --carta:rgba(246,242,231,.084); }
html.ba-scuro .ba-gradino[data-passo="3"]:hover,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo="3"]:hover{ --carta:rgba(246,242,231,.115); }
.ba-gradino:hover::before{ transition:background .3s ease-in-out; }
@media (hover: none) { .ba-gradino:hover::before{ transition:background .55s ease-in-out; } }
/* senza DrawSVG resta una cornice vera, e non se ne accorge nessuno */
html:not(.tirati) .ba-gradino{ border:1px solid var(--ba-filo-vivo); }

/* il gradino consigliato: si vede che è quello, senza
   distintivi da abbonamento — solo la carta un po' più chiara e il
   filo di ceralacca in cima */
/* ⚠️ Il riempimento parte dal **gradino**, non dal bordo della cella:
   la cella è alta quanto tutto il blocco e l'alzata è solo padding,
   quindi mettendo lo sfondo sulla cella la carta chiara e il filo di
   ceralacca spuntavano sopra il contorno disegnato. */
/* il gradino consigliato si riconosce dal filo di
   ceralacca in cima, non da un distintivo */
.ba-gradino-vivo::before{ box-shadow:inset 0 2px 0 0 var(--ba-ceralacca); }
html.ba-scuro .ba-gradino-vivo::before,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino-vivo::before{ box-shadow:inset 0 2px 0 0 var(--ba-accento); }
.ba-gradino-segno{ margin:0 0 1.2rem; min-height:2.4em;
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.5; color:var(--ba-accento); }

.ba-gradino-nome{ font-family:var(--ba-display); font-weight:500; line-height:1;
  font-size:clamp(1.5rem,2.5vw,2.05rem); margin:0 0 .5rem; }
.ba-gradino .ba-cifra{ display:block; }
.ba-gradino .ba-cifra small{ display:block; margin:.3rem 0 0 0; }
.ba-gradino-idea{ font-family:var(--ba-display); font-style:italic;
  font-size:clamp(1rem,1.4vw,1.18rem); line-height:1.45; color:var(--ba-ink-2);
  margin:1rem 0 0; transition:color .55s ease-in-out; }

/* cosa aggiunge questo gradino: senza, si guarda solo il prezzo e
   allora vince sempre il più basso */
.ba-gradino-piu{ margin:1.6rem 0 .9rem; padding-top:1.2rem;
  border-top:1px solid var(--ba-filo-vivo);
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ba-ink-3); transition:color .55s ease-in-out, border-color .55s ease-in-out; }
.ba-dentro{ list-style:none; margin:0; padding:0;
  font-size:.94rem; line-height:1.5; color:var(--ba-ink-2);
  transition:color .55s ease-in-out; }
.ba-dentro li{ position:relative; padding:.34rem 0 .34rem 1.5rem; }
.ba-dentro li::before{ content:"—"; position:absolute; left:0; top:.34rem;
  color:var(--ba-accento); }
.ba-dentro b{ font-weight:600; color:var(--ba-ink-forte); }
.ba-gradino-quando{ margin:1.4rem 0 0; padding-top:1rem;
  border-top:1px dashed var(--ba-filo-vivo);
  font-size:.92rem; line-height:1.6; font-style:italic; color:var(--ba-ink-2);
  transition:color .55s ease-in-out, border-color .55s ease-in-out; }
.ba-scala-coda{ margin-top:1.6rem; max-width:none; }

@media (max-width:860px){
  .ba-scala{ grid-template-columns:1fr; margin-top:clamp(2rem,4vh,2.8rem); }
  .ba-gradino{ --alza:0rem !important;
    padding:clamp(1.4rem,3vh,1.9rem) clamp(1.2rem,4vw,1.6rem); }
  /* in pila la scala di tono non dice più «si sale»: una sola carta */
  .ba-gradino[data-passo]{ --carta:rgba(255,253,247,.5); }
  html.ba-scuro .ba-gradino[data-passo],
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"]) .ba-gradino[data-passo]{ --carta:rgba(246,242,231,.05); }
  .ba-gradino-segno{ min-height:0; }
  .ba-gradino-segno:empty{ display:none; }
}

/* un filo più marcato apre ogni gruppo: sono due conti, non sei righe */
.ba-conto-voce{ margin-top:clamp(3rem,6vh,4.4rem); }
.ba-conto .ba-listino{ border-top-width:2px; }
.ba-banco-coda{ display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:1.5rem; margin-top:2.6rem; }

/* ═══ la chiusa ════════════════════════════════════════════════════ */
.ba-chiusa{ min-height:70vh; display:grid; align-content:center; }
.ba-piede{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  margin-top:clamp(3rem,8vh,6rem); padding-top:1.6rem;
  border-top:1px solid var(--ba-filo-vivo);
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ba-ink-3); }

/* ── stati di partenza della regia (gemelli di RIVELA in banco.js) ── */
html.mv .ba-display,
html.mv .ba-etichetta,
html.mv .ba-testo,
html.mv .ba-porte,
html.mv .ba-riga,
html.mv .ba-fatti li,
html.mv .ba-conto-detto,
html.mv .ba-gradino,
html.mv .ba-scheda,
html.mv .ba-piede{ opacity:0; }

/* ═══════════════════════════════════════════════════════════════════
   LA LUCE SENZA MOTORE
   ───────────────────────────────────────────────────────────────────
   La luce è uno STATO, non un movimento. Il fondo è uno solo e lo
   ricolora GSAP (`[data-superficie]`), e l'inchiostro lo ribalta
   `html.ba-scuro`: ma con prefers-reduced-motion `banco.js` si ferma
   prima di partire,
html:not(.ba-luce) :is([data-luce="notte"],[data-luce="penombra"])`: ma con prefers-reduced-motion `banco.js` si ferma
   prima di partire,
e lo stesso se GSAP non arriva. Fino al 15/09 in
   quel caso la superficie restava notte e l'inchiostro scuro: «La
   saracinesca si abbassa alle 19:30» nero su nero,
i nomi del banco
   spariti,
marchio e menù bianchi sul marmo. Nessuna misura lo vedeva,
perché niente era a opacità zero: era solo del colore del fondo.
   Adesso il motore dichiara `html.ba-luce` quando parte davvero; senza,
ogni postazione si colora da sé col suo `data-luce`,
e quelle scure
   prendono le variabili e le regole di `html.ba-scuro`.
   ⚠️ UNA FONTE SOLA. Le regole scure non sono copiate qui: ogni regola
   `html.ba-scuro …` porta nel suo stesso elenco il gemello
   `html:not(.ba-luce) :is([data-luce="notte"],
[data-luce="penombra"]) …`,
con le stesse dichiarazioni. Una regola nuova vuole i due selettori
   insieme,
e `strumenti/luce.py` segnala quella che resta senza. */
html:not(.ba-luce) [data-luce="notte"]{ background-color:var(--ba-notte); }
html:not(.ba-luce) [data-luce="penombra"]{ background-color:var(--ba-penombra); }
html:not(.ba-luce) [data-luce="marmo"]{ background-color:var(--ba-marmo); }
html:not(.ba-luce) [data-luce="carta"]{ background-color:var(--ba-carta); }
html:not(.ba-luce) [data-luce]{ color:var(--ba-ink); }
/* la testata sta fuori dalle postazioni: senza motore non sa su che luce
   si trova, quindi porta un fondo suo, quello della notte */
html:not(.ba-luce) .ba-testata{ background-color:color-mix(in srgb, var(--ba-notte) 97%, transparent); }

/* la riga sotto gli avviamenti: le rate e l'offerta di lancio (21/09/2026) */
.ba-conto-nota{ margin:1rem 0 0; max-width:52ch; font-size:.95rem; line-height:1.55; color:var(--ba-ink-2); }
.ba-conto-nota b{ color:var(--ba-ink-forte); font-weight:600; }
.ba-conto-nota a{ color:var(--ba-accento); text-underline-offset:.2em; }

/* i link del piede (privacy, cookie) prendono il colore del testo intorno */
.ba-piede a{ color:inherit; text-underline-offset:.2em; }