/* ---------- fondo pagina: nero pieno ----------
   Il sito usava diversi neri caldi (#000, #000, #000...).
   Qui diventa nero assoluto ovunque. */
html, body{ background-color: #000 !important }

:root{
  --bacci-nero: #000;
  --bacci-max: 1200px;              /* larghezza massima del contenuto */
  --bacci-gutter: max(20px, 5vw);   /* margine laterale */
  --bacci-fab: 96px;                /* spazio in basso a sinistra per i due tondi fissi */
  --bacci-head: 68px;               /* altezza della barra in cima, uguale ovunque */
}
@media (min-width: 900px){
  :root{ --bacci-fab: 76px; }
}

/* ---------- contenitore comune ----------
   Tutto il sito parte da qui: testate e piedi di ogni pagina usano
   la stessa colonna, cosi' il logo in alto e il copyright in basso
   cadono sulla stessa verticale. */
.ft-wrap,            /* piede home */
.bft-wrap{           /* piede di tutte le altre */
  max-width: var(--bacci-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bacci-gutter);
  padding-right: var(--bacci-gutter);
}

/* .bacci-wrap la mette il codice sul contenitore della testata, qualunque
   nome abbia in quella landing. Serve il peso forzato perche' diverse
   landing hanno regole piu' specifiche che rimetterebbero i margini loro. */
.bacci-wrap{
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 var(--bacci-gutter) !important;
  width: auto !important;
}

/* ---------- forma unica della testata ----------
   Logo a sinistra, menu al centro, cerchietto a destra.
   Stessa altezza e stessa colonna su ogni pagina. */
.bacci-wrap{
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--bacci-head);
}
/* logo a sinistra, non si schiaccia; il resto scorre al centro */
.bacci-wrap > :first-child{ flex: 0 0 auto; margin-right: auto }

/* La barra che ospita il contenitore non aggiunge spazi suoi: i margini
   e l'altezza li da' il contenitore. Il codice le azzera il padding di
   suo, qui togliamo solo il flex, che altrimenti stringerebbe il wrap. */
header:has(> .bacci-wrap){ display: block }
nav:has(> .bacci-wrap){ display: block }

/* desktop: i nomi restano su una riga, separati da virgola */
@media (min-width: 861px){
  .feat-players .pnames{ display: inline }
  .feat-players .pn{ display: inline }
  .feat-players .pn + .pn::before{ content: ", " }
  .feat-players .pl{ margin-right: 6px }
  .feat-players .amp{ margin-left: 6px }
}

/* ---------- schede Creativities: nessun bordo ----------
   Le linee verticali non cadevano tra tutte le schede, quindi
   sembravano un errore. Via del tutto, su schermo grande e piccolo. */
#creativities .ci,
#creativities .crack > *{ border: 0 !important }

/* la striscia delle schede: meno stacco sopra e niente riga */
#creaTrack,
#creativities .crack{ margin-top: 30px !important; border-top: 0 !important }

/* niente riga nemmeno sopra la sezione */
#creativities{ border-top: 0 !important }

/* la didascalia "FIG. 0x, ..." sotto le foto delle collezioni:
   via su schermo grande e piccolo */
.spread .cap{ display: none !important }

/* ==========================================================
   SOLO CELLULARE (fino a 860px). Il desktop non viene toccato.
   ========================================================== */
@media (max-width: 860px){

  /* un panino solo: sparisce quello della pagina, resta il cerchietto */
  html.bacci-un-panino .hn-burger,
  html.bacci-un-panino .nav-burger,
  html.bacci-un-panino .burger,
  html.bacci-un-panino [class*="burger"]:not(.bhub-btn){ display: none !important }

  /* l'apertura non supera il 95% dell'altezza dello schermo */
  .hero{ height: 95vh !important; min-height: 0 !important; max-height: 95vh !important }

  /* il volantino del manifesto non si legge su uno schermo stretto */
  img[src*="signature-bacchaus-manifesto"]{ display: none !important }

  /* Sezioni collezione: titolo, foto a tutta larghezza, testo, finiture, CTA.
     Tutte e quattro identiche a Officina. Due cose vanno forzate:
     l'ordine, perche' le varianti "rev" (Parato, Tosca) rimetterebbero la
     foto in cima, e l'allineamento, perche' .spread centra i suoi blocchi
     e il titolo finiva a meta' pagina invece che sul margine. */
  .spread{ display: flex !important; flex-direction: column !important; gap: 0 !important;
           align-items: stretch !important;
           padding-left: 0 !important; padding-right: 0 !important }

  .spread .bacci-testa{ order: 1 !important }
  .spread .art{ order: 2 !important }
  .spread .bacci-coda{ order: 3 !important }
  .spread.rev .bacci-testa{ order: 1 !important }
  .spread.rev .art{ order: 2 !important }
  .spread.rev .bacci-coda{ order: 3 !important }

  /* testo sul margine della pagina, come tutte le altre sezioni */
  .spread .bacci-testa,
  .spread .bacci-coda{
    width: 100% !important; max-width: none !important;
    align-self: stretch !important; text-align: left !important;
    padding-left: 2.5vw !important; padding-right: 2.5vw !important;
  }

  /* foto a tutta larghezza: la sezione non ha piu' margini laterali */
  .spread .art{ width: 100% !important; max-width: none !important;
                margin-left: 0 !important; margin-right: 0 !important;
                align-self: stretch !important }

  /* la foto mostra lo strumento intero, non tagliato */
  .spread .plate{ aspect-ratio: 3 / 4 !important; height: auto !important; min-height: 0 !important;
                  background-size: contain !important; background-repeat: no-repeat !important;
                  background-position: center !important }
  .spread .cap{ padding-left: 2.5vw !important; padding-right: 2.5vw !important;
                margin-top: 10px; text-align: left !important }

  .spread .bacci-testa{ margin-bottom: 22px }
  .spread .bacci-coda{ margin-top: 22px }

  /* le miniature spariscono: si cambia colore con le frecce sulla foto */
  .spread .bacci-fins-via{ display: none !important }

  .bacci-fr{
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 44px; height: 44px; border-radius: 50%; padding: 0; line-height: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.24); background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #f1ede6;
    transition: border-color .2s, color .2s;
  }
  .bacci-fr svg{ width: 20px; height: 20px; display: block }
  .bacci-fr:active{ border-color: #d6532b; color: #fff }
  .bacci-fr:focus-visible{ outline: 3px solid #d6532b; outline-offset: 3px }
  .bacci-fr-pre{ left: 2.5vw }
  .bacci-fr-suc{ right: 2.5vw }


  /* prima del bottone: niente riga e niente spazio in piu' */
  .spread .row{ margin-top: 18px !important; padding-top: 0 !important;
                border-top: 0 !important; border: 0 !important }

  /* accessibilita' e lingue dentro la testata del pannello, a destra */
  .bacci-tools{ display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 16px }
  .bacci-tools .a11y-fab,
  .bacci-tools .blang-fab{
    position: static !important; left: auto !important; bottom: auto !important;
    width: 40px !important; height: 40px !important; margin: 0 !important;
    box-shadow: none !important; transform: none !important;
  }
  .bacci-tools .a11y-fab svg,
  .bacci-tools .blang-fab svg{ width: 20px; height: 20px }
  /* i loro pannelli si aprono in alto, non piu' in basso a sinistra */
  html.bacci-strumenti-in-testa .a11y-panel,
  html.bacci-strumenti-in-testa .blang-panel{
    top: 76px; bottom: auto; left: 10px; right: 10px; width: auto; z-index: 100000;
  }
  /* con il pannello aperto restano visibili: ora vivono dentro di lui */
  html.bacci-modal .bacci-tools .a11y-fab,
  html.bacci-modal .bacci-tools .blang-fab{ display: flex !important }
  html.bacci-modal .bacci-tools .a11y-panel,
  html.bacci-modal .a11y-panel[data-open="1"],
  html.bacci-modal .blang-panel[data-open="1"]{ display: block !important }

  /* Sezioni Leonardo, Marleo, Tosca: prima il titolo e il testo, poi la
     foto sotto, larga quanto la pagina e intera, con l'altezza che si
     adatta da sola. Su desktop la foto resta di sfondo a destra. */
  .feat-hero{
    display: flex !important; flex-direction: column !important;
    min-height: 0 !important; justify-content: flex-start !important;
    padding-top: 90px !important; padding-bottom: 40px !important;
  }
  .feat-hero .feat-htext{ order: 1; position: static !important }
  .feat-hero .feat-bg{
    order: 2; position: static !important;
    width: 100% !important; max-width: none !important; height: auto !important;
    object-fit: contain !important; margin-top: 26px;
  }
  /* "Played by ..." dopo la foto: etichetta su una riga, nomi di seguito
     separati da virgola, non incolonnati */
  .feat-hero .feat-players{ order: 3; position: static !important; margin-top: 18px;
                            display: block !important; text-align: left }
  .feat-players .pl{ display: block; margin-bottom: 8px }
  .feat-players .pnames{ display: inline }
  .feat-players .pn{ display: inline }
  .feat-players .pn + .pn::before{ content: ", " }
  .feat-players .amp{ display: inline; margin-left: 6px }

  /* dalla seconda in poi lo stacco sopra si riduce */
  .featphoto ~ .featphoto .feat-hero{ padding-top: 30px !important }

  /* rivenditori: cinque righe da due, nome centrato sotto il logo */
  .dlogos{ display: grid !important; grid-template-columns: 1fr 1fr !important;
           gap: 26px 18px !important; justify-content: stretch !important }
  .dlogos .ditem{ align-items: center !important; text-align: center !important }
  .dlogos .ditem span{ text-align: center !important; display: block; width: 100% }
  .dlogos .ditem img{ height: clamp(48px, 13vw, 68px) !important }

  /* piede: indirizzo su tutta la larghezza, senza andare a capo a meta' */
  .ft-cols{ display: grid !important; grid-template-columns: 1fr !important; gap: 26px !important }
  .ft-col{ width: 100% !important; max-width: none !important }
  .ft-col p{ max-width: none !important }
  .ft-col:nth-child(3){ display: none !important }   /* Explore */

  /* social in riga, separati dal puntino, come i link legali */
  .ft-soc, .bft-soc{ display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
                     gap: 10px !important; align-items: center !important }
  .ft-soc a + a::before,
  .bft-soc a + a::before{ content: "\00B7"; margin-right: 10px; color: #8f887b }
  .bft-cols{ display: none !important }
  .bft-col{ width: 100% !important; max-width: none !important }
  .bft-col p{ max-width: none !important }

  /* "Bacci Guitars" e "Handmade in Tuscany, Italy" su due righe */
  .ft-acapo{ display: block; font-size: 0; line-height: 0; height: 0 }

  /* i link legali piu' stretti fra loro */
  .bft-bar{ grid-template-columns: 1fr !important; justify-items: start !important; gap: 14px !important }
  .bft-bar > .bft-legal,
  .bft-bar > .bft-unit:last-child{ justify-self: start !important }
  .bft-legal, .ft-legal2{ line-height: 1.25 !important; gap: 8px !important; row-gap: 2px !important }

  /* indice delle collezioni: meno stacco sopra, e via "Choose your world" */
  .sh{ padding-top: 30px !important }
  .sh h2{ display: none !important }

  /* la riga sotto Creativities va su quattro righe, senza i puntini */
  .cfoot .cf-l{ display: block }
  .cfoot .cf-s{ display: none }

  /* "No script. Just Bruno.": i video scorrono di lato */
  .lab-grid{ display: block !important }
  .bacci-slider{ display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
                 -webkit-overflow-scrolling: touch; scrollbar-width: none;
                 margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
                 padding: 0 2.5vw }
  .bacci-slider::-webkit-scrollbar{ display: none }
  .bacci-slider > *{ flex: 0 0 82%; scroll-snap-align: center }
}

/* ---------- desktop: i video di Bruno, 3 colonne dentro la colonna ----------
   Prima uscivano a tutta finestra con il trucco dei margini negativi.
   Adesso che tutto il sito si ferma a 1200, stanno dentro come il resto. */
@media (min-width: 861px){
  .lab-grid{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    width: 100% !important;
    max-width: none;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .lab-grid > *{ width: auto; max-width: none }
}
@supports (height: 100svh){
  @media (max-width: 860px){
    .hero{ height: 95svh !important; max-height: 95svh !important }
  }
}

/* ---------- piede: fascia scorrevole ---------- */
/* Venti pagine hanno una loro regola footer{} con padding, bordi e
   allineamenti tutti diversi, scritti quando ognuna aveva il suo piede.
   Ora il piede e' condiviso, quindi quelle regole vanno neutralizzate,
   altrimenti lo stesso footer si vede diverso da pagina a pagina.
   Gli spazi li danno .bft-wrap sopra e .bft-bar sotto. */
footer.bft-foot{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid #f1ede6 !important;   /* la riga in cima resta */
  text-align: left !important;
  background: #000 !important;
  color: #f1ede6;
  font-size: 16px;
  font-family: "pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.bft-marq{ display:block; border-top:1px solid #f1ede6; border-bottom:1px solid #f1ede6; overflow:hidden; padding:20px 0; white-space:nowrap; text-decoration:none }
.bft-marq .t{ display:inline-block; animation:bftsx 32s linear infinite; font-family:"pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(30px,5.4vw,72px); color:#f1ede6 }
.bft-marq .t span{ color:#8f887b }
.bft-marq .t b{ color:#d6532b }
.bft-marq:hover .t{ color:#d6532b }
@keyframes bftsx{ 0%{transform:translate(0)} to{transform:translate(-50%)} }

/* ---------- piede: contatti e colonne ---------- */
.bft-wrap{ padding-top:clamp(52px,7vh,92px) }
/* Il blocco dei menu a destra era stretto quanto una colonna sola, con
   meta' pagina vuota accanto alla mail: le voci andavano a capo a ogni
   parola. Adesso prende piu' spazio di quello che gli sta a sinistra. */
.bft-top{ display:grid; grid-template-columns:0.95fr 1.65fr; gap:clamp(26px,3vw,46px); align-items:start; padding-bottom:clamp(48px,7vh,84px) }
.bft-sub{ max-width:60ch; margin:0; font-size:15px; line-height:1.7; color:#8f887b }
.bft-mail{ display:inline-flex; align-items:center; gap:12px; margin-top:28px; font-size:clamp(20px,2.4vw,30px); font-weight:700; color:#fff; text-decoration:none; transition:color .25s; word-break:break-word }
.bft-mail:hover{ color:#d6532b }
.bft-mail .ar{ font-weight:400 }
/* cinque colonne da quando esistono anche gli strumenti: prima erano
   quattro, e strumenti e modelli finivano mescolati nella stessa. */
.bft-cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px }
.bft-ct{ font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:#fff; margin-bottom:16px }
.bft-col p{ font-size:13.5px; line-height:1.7; color:#8f887b; margin:0 0 14px }
.bft-addr p{ font-size:13.5px; line-height:1.7; color:#8f887b; margin:0 0 4px }
/* l'indirizzo sta sotto la mail, cosi' le quattro colonne dei link
   rispecchiano esattamente i gruppi del menu */
.bft-addr{ margin-top:30px }
/* L'indirizzo non deve spezzarsi in mezzo, ma "white-space:nowrap" sul
   paragrafo intero era troppo: dentro una griglia una riga che non si
   puo' spezzare diventa la larghezza minima della colonna, la colonna
   non si stringe piu' e la pagina sfonda di lato. Era quella la barra
   di scorrimento orizzontale.

   Adesso l'indirizzo puo' andare a capo, ma solo alle giunture: ogni
   pezzo (la ragione sociale, la via, il CAP con la citta') resta intero
   per conto suo. Cosi' non si legge mai "Via Stat. Fioren-" a fine riga
   e la pagina non si allarga mai. */
.bft-ln{ white-space:nowrap }

/* le celle della griglia possono stringersi sotto il loro contenuto:
   senza questo, un testo lungo allarga la colonna e con lei la pagina */
.bft-top > *,
.bft-cols > *,
.bft-bar > *{ min-width: 0 }
.bft-vat{ font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px }
/* Indirizzo di fila su una riga, partita IVA sulla riga sotto.
   Ovunque, schermo grande e piccolo. */
.bft-ln{ display:inline-block }
.bft-sep{ display:inline }
.bft-nav{ display:flex; flex-direction:column; gap:11px }
/* i social stanno sotto la mail, in riga, separati dal puntino:
   una colonna da tre voci accanto alle altre lasciava un buco */
.bft-lead .bft-soc{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center;
  gap:10px; margin-top:26px }
.bft-lead .bft-soc a + a::before{ content:"\00B7"; margin-right:10px; color:#8f887b }
.bft-soc a,.bft-nav a{ font-size:13.5px; color:#8f887b; text-decoration:none; transition:color .2s }
.bft-soc a:hover,.bft-nav a:hover{ color:#d6532b }
/* modello senza pagina: si legge ma non si clicca, come nel menu */
.bft-vuota{ font-size:13.5px; color:#4a453e; cursor:default }

/* ---------- piede: striscia legale ---------- */
.bft-bar{
  max-width: var(--bacci-max);
  margin: 0 auto;
  padding: 22px var(--bacci-gutter) calc(30px + var(--bacci-fab));
  border-top: 1px solid rgba(255,255,255,.13);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .05em; line-height: 1.5; color: #f1ede6;
}
/* dentro il contenitore il margine c'e' gia': non raddoppiarlo */
.bft-wrap .bft-bar,
.ft-wrap .bft-bar{ max-width:none; margin:0; padding-left:0; padding-right:0 }

.bft-left{ display:flex; align-items:center; gap:12px; justify-self:start }
.bft-bar > .bft-legal{ justify-self:center }
.bft-bar > .bft-unit:last-child{ justify-self:end }
/* la firma CosaCore e' un link: scritta a sinistra, marchio a destra */
.bft-cc{ text-decoration:none; color:#f1ede6; transition:color .25s }
.bft-cc:hover,.bft-cc:hover .bft-cosa{ color:#d6532b }
.bft-cc:focus-visible{ outline:3px solid #d6532b; outline-offset:3px }
.bft-unit{ display:flex; align-items:center; gap:12px; color:#f1ede6 }
.bft-logo{ height:22px; width:auto; display:block }
.bft-cosa{ font-family:"pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800; text-transform:lowercase; line-height:.82; font-size:14px; letter-spacing:-.01em; color:#f1ede6; text-align:left }
.bft-legal{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; color:#8f887b }
.bft-legal a{ color:#8f887b; text-decoration:none; transition:color .25s }
.bft-legal a:hover{ color:#d6532b }
.bft-dot{ color:#8f887b }

/* ---------- spazio per i tondi fissi in basso a sinistra ---------- */
.bhub-foot,.hn-foot{ padding-bottom:calc(30px + var(--bacci-fab)) }

@media (max-width: 900px){
  .bft-top{ grid-template-columns:1fr; gap:42px; padding-bottom:30px }
  .bft-cols{ grid-template-columns:1fr 1fr; gap:28px 20px }
}
@media (max-width: 760px){
  .bft-bar{ flex-direction:column; align-items:flex-start; gap:14px }
}

/* --- Played by the musicians: la striscia dei nomi va sopra le foto, ovunque --- */
.playersblock{ display:flex; flex-direction:column }
.playersblock .marq{ order:-1; margin-top:0 !important; margin-bottom:40px !important }
.playersblock .players{ order:0; padding-top:60px }
@media (max-width:860px){
  .pl-acapo{ display:block }
}


/* ==========================================================
   CRAFTED FOR ONE — il blocco che chiude ogni pagina prodotto.
   Sostituisce i form: una sola azione, il ticket, piu' una via
   d'uscita verso Bruno per chi non e' ancora pronto a pagare.

   Perche' e' l'unico punto colorato della pagina: su un sito tutto
   nero, il calore serve a dire "il succo e' qui". Il colore e'
   quello del marchio, e l'unica animazione che conta e' la linea
   che attraversa i tre passaggi, che disegna il processo mentre
   lo si legge. Chi ha chiesto meno movimento non ne vede nessuno.
   ========================================================== */
.cfo{ position:relative; overflow:hidden; background:#000;
      border-top:1px solid rgba(255,255,255,.13);
      padding:clamp(84px,12vh,150px) max(20px,5vw) }

/* alone caldo dietro al blocco: stacca dal nero senza mettere un riquadro */
.cfo::before{ content:""; position:absolute; z-index:0; left:50%; top:-18%;
  width:min(1200px,130vw); height:min(760px,90vh); transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(214,83,43,.26), rgba(214,83,43,.08) 42%, transparent 70%);
  pointer-events:none }
.cfo-in{ position:relative; z-index:1; max-width:var(--bacci-max,1280px);
         margin:0 auto; text-align:center }

.cfo-k{ font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
        font-size:11px; letter-spacing:.26em; text-transform:uppercase;
        color:#d6532b; margin:0 0 22px }
.cfo-t{ font-family:"pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size:clamp(42px,8vw,120px); font-weight:700; letter-spacing:-.04em;
        line-height:.88; text-transform:uppercase; color:#f1ede6; margin:0 }
.cfo-lead{ max-width:52ch; margin:26px auto 0; font-size:16px; line-height:1.7; color:#c7c1b6 }

/* ---------- i tre passaggi ---------- */
.cfo-steps{ position:relative; list-style:none; padding:30px 0 0;
            margin:30px auto 0; max-width:1000px;
            display:grid; grid-template-columns:repeat(3,1fr);
            gap:clamp(20px,3vw,40px); text-align:left }
/* la riga grigia e, sopra, quella color ruggine che la percorre */
.cfo-steps::before,.cfo-steps::after{ content:""; position:absolute; top:0; left:0; height:1px }
.cfo-steps::before{ width:100%; background:rgba(255,255,255,.16) }
.cfo-steps::after{ width:0; background:#d6532b;
  transition:width 1.5s cubic-bezier(.2,.7,.2,1) .25s }
.cfo.vista .cfo-steps::after{ width:100% }

.cfo-n{ display:block; font-family:"pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight:700; font-size:clamp(36px,4.4vw,62px); line-height:.88;
        letter-spacing:-.035em; color:#d6532b }
.cfo-steps h3{ font-size:19px; font-weight:700; letter-spacing:-.01em; text-transform:uppercase;
               color:#f1ede6; margin:16px 0 8px }
.cfo-steps p{ margin:0; font-size:14px; line-height:1.65; color:#8f887b }
/* i due numeri che decidono l'acquisto: l'anticipo e il tempo */
.cfo-hi{ color:#f1ede6; font-weight:700 }

/* ---------- le due azioni ---------- */
.cfo-row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
          gap:14px; margin-top:clamp(42px,5vh,64px) }
.cfo-go,.cfo-ask{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 34px; border-radius:999px; text-decoration:none;
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s,transform .2s,box-shadow .3s }
.cfo-go{ background:#d6532b; color:#fff; border:1px solid #d6532b;
         box-shadow:0 14px 44px rgba(214,83,43,.38) }
.cfo-go:hover{ background:#c0481f; border-color:#c0481f; transform:translateY(-2px);
               box-shadow:0 18px 54px rgba(214,83,43,.52) }
.cfo-go .ar{ transition:transform .25s }
.cfo-go:hover .ar{ transform:translateX(4px) }
.cfo-ask{ background:transparent; color:#f1ede6; border:1px solid rgba(255,255,255,.4) }
.cfo-ask:hover{ border-color:#f1ede6; background:rgba(255,255,255,.06) }
.cfo-go:focus-visible,.cfo-ask:focus-visible{ outline:3px solid #d6532b; outline-offset:3px }

/* sotto il blocco non ci va nessuna riga: la striscia del piede attacca
   direttamente. Vale solo dove c'e' il blocco commissioni. */
/* La riga sopra "Get in touch" la mette il piede, una volta sola.
   La marquee ne aveva una sua e sulle pagine senza il blocco commissioni
   se ne vedevano due, una sotto l'altra. */
footer.bft-foot > .bft-marq{ border-top:0 }

.cfo-note{ margin:20px auto 0; font-size:13px; line-height:1.6; color:#8f887b; max-width:44ch }

/* ---------- entrata: sale e si accende, un pezzo alla volta ---------- */
.cfo-rv{ opacity:0; transform:translateY(20px);
         transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
.cfo.vista .cfo-rv{ opacity:1; transform:none }
.cfo .cfo-k{ transition-delay:0s }
.cfo .cfo-t{ transition-delay:.08s }
.cfo .cfo-lead{ transition-delay:.18s }
.cfo-steps li:nth-child(1){ transition-delay:.34s }
.cfo-steps li:nth-child(2){ transition-delay:.50s }
.cfo-steps li:nth-child(3){ transition-delay:.66s }
.cfo .cfo-row{ transition-delay:.80s }
.cfo .cfo-note{ transition-delay:.90s }

@media (max-width:860px){
  .cfo{ padding:64px 0 !important }
  /* un solo passaggio per riga: la linea diventa verticale, a sinistra */
  .cfo-steps{ grid-template-columns:1fr; gap:26px; margin-top:30px;
              padding:0 0 0 22px }
  .cfo-steps::before,.cfo-steps::after{ top:0; left:0; width:1px; height:100% }
  .cfo-steps::before{ height:100% }
  .cfo-steps::after{ height:0; width:1px; transition:height 1.5s cubic-bezier(.2,.7,.2,1) .25s }
  .cfo.vista .cfo-steps::after{ height:100%; width:1px }
  .cfo-n{ font-size:26px }
  .cfo-steps h3{ margin-top:10px }
  .cfo-row{ flex-direction:column; gap:12px; margin-top:38px }
  .cfo-go,.cfo-ask{ width:100%; padding:17px 20px }
}

/* chi ha chiesto meno movimento vede tutto fermo e gia' al suo posto */
@media (prefers-reduced-motion: reduce){
  .cfo-rv{ opacity:1 !important; transform:none !important; transition:none !important }
  .cfo-steps::after{ transition:none !important; width:100%; height:1px }
  .cfo-go:hover{ transform:none }
}




/* ==========================================================
   FOTO DELLE COLLEZIONI, tutte alla stessa altezza.

   Prima il riquadro aveva una proporzione fissa e la foto veniva
   ingrandita all'82% della sua larghezza. Funzionava solo con le foto
   circa 2:3: le Marlita intere sono 1:3,5 e sfondavano il riquadro in
   altezza, quindi si vedeva un pezzo di manico e basta.

   Adesso il riquadro ha un'altezza fissa e la foto e' alta quanto lui,
   con la larghezza che si adatta da sola. Cosi' ogni strumento e' alto
   uguale in tutte le sezioni, qualunque proporzione abbia la foto, e
   non serve piu' un'eccezione per Marlita.
   Il desktop soltanto: da cellulare vale quello che avevamo gia' fatto.
   ========================================================== */
@media (min-width:861px){
  .spread .art .plate{
    aspect-ratio: auto !important;
    height: clamp(440px, 72vh, 760px) !important;
    background-size: auto 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  /* le miniature seguono la stessa logica: strumento intero, non tagliato */
  .spread .fins .f{
    background-size: auto 92% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}
.spread .q{ padding-top: 34px !important }
.spread .q:before{
  top: -6px !important;
  left: -14px !important;
  z-index: 0;
}
.spread .q .qt,
.spread .q .w{ position: relative; z-index: 1 }


/* --- "Played by" sotto la citazione delle sezioni collezione --- */
/* i nomi separati dal puntino, come nelle landing */
/* lo spazio dopo un codice esadecimale in CSS viene mangiato, serve a
   chiudere il codice: il puntino restava attaccato al nome dopo.
   Con i margini lo spazio e' garantito da tutte e due le parti. */
.spread .q .playedby .pn + .pn::before{ content: "\00B7"; margin: 0 .55em }
.spread .q .playedby .amp{ margin-left: 8px; color: #8f887b }
.spread .q .playedby{
  display: block;
  margin-top: 10px;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #d6532b;
  position: relative;
  z-index: 1;
}


/* --- la foto al centro della sua meta', in tutte e quattro le sezioni ---
   Il riquadro prendeva tutta la colonna e l'immagine ci galleggiava dentro,
   quindi nelle sezioni a specchio lo strumento finiva schiacciato verso il
   bordo. Qui il riquadro ha una larghezza sua ed e' centrato con i margini
   automatici: dove sta la colonna non conta piu'. */
@media (min-width:861px){
  .spread .art{ display: block }
  .spread .art .plate{
    width: min(100%, 560px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background-position: center center !important;
  }
  .spread .art .cap{ text-align: center }
}


/* ==========================================================
   SEZIONI COLLEZIONE: due meta' esatte.

   Erano dentro una griglia da dodici colonne, con la foto su cinque e il
   testo su sei, e nelle sezioni a specchio restava una colonna vuota in
   piu'. Risultato: la foto non cadeva mai al centro della sua meta', e
   ogni rattoppo sulle colonne ne spostava un'altra.

   Qui la sezione e' divisa in due parti uguali. La foto riempie la sua
   meta' e l'immagine e' centrata dentro: lo strumento cade esattamente
   a un quarto e a tre quarti della pagina, e la versione dritta e quella
   a specchio sono l'una lo specchio dell'altra per costruzione.
   ========================================================== */
@media (min-width:861px){
  /* Tutte e quattro le sezioni uguali: testo a sinistra, foto a destra.
     Tre quinti al testo, due quinti alla foto. La classe "rev", che
     scambiava i lati su Parato e Tosca, qui non conta piu': era lei a
     creare le differenze di allineamento fra una sezione e l'altra. */
  .spread,
  .spread.rev{
    grid-template-columns: 3fr 2fr !important;
    gap: clamp(30px,4vw,70px) !important;
    align-items: center !important;
  }
  .spread .tx,
  .spread.rev .tx { grid-column: 1 !important; grid-row: 1 !important; order: 0 !important }
  .spread .art,
  .spread.rev .art{ grid-column: 2 !important; grid-row: 1 !important; order: 0 !important }

  .spread .art .plate{
    width: 100% !important;
    margin: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
  }
}


/* --- i testi usano tutta la colonna ---
   Sottotitolo e citazione avevano una larghezza massima loro, 34 e 48
   caratteri, decisa quando la colonna era stretta. Con la colonna larga
   quel limite fa restare il testo a meta' e allargare non serve a niente.
   Qui il limite salta e il testo arriva fino al bordo della sua parte. */
@media (min-width:861px){
  .spread .tx .lead,
  .spread .tx .q,
  .spread .tx .q .qt,
  .spread .tx .q .playedby,
  .spread .tx p{ max-width: none !important }
}


/* --- sezioni collezione: niente riga fra le miniature e i dati tecnici --- */
.spread .specs{
  border-top: 0 !important;
  padding-top: 0 !important;
}


/* ==========================================================
   UNA SOLA LARGHEZZA PER TUTTA LA PAGINA.

   La testata sta dentro .bacci-wrap, cioe' 1280 pixel al massimo con i
   suoi margini laterali. Il resto della pagina invece usava .pad, che
   aveva gli stessi margini ma nessun limite di larghezza: su uno schermo
   grande il contenuto si allargava oltre la testata. Bruno e Tosca
   andavano anche oltre, con il loro 90% fino a 1340.

   Qui tutti i contenitori prendono la stessa misura della testata, cosi'
   il logo in alto, il testo delle sezioni e il copyright in fondo cadono
   sulla stessa verticale a qualunque larghezza di schermo.

   Le sezioni che vanno da bordo a bordo (apertura, sfondi fotografici)
   restano tali: si allinea il loro contenuto, non lo sfondo.
   ========================================================== */
.pad,
.bruno .binn,
.tosca .inn{
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  padding-left: var(--bacci-gutter) !important;
  padding-right: var(--bacci-gutter) !important;
}

/* un .pad dentro un altro .pad raddoppierebbe il margine */
.pad .pad{
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* sezioni a tutta larghezza: sfondo pieno, contenuto in colonna */
.expf .c,
.toscab .c,
.featphoto .feat-hero,
.feathero .fh-in{
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--bacci-gutter) !important;
  padding-right: var(--bacci-gutter) !important;
  width: 100%;
}

/* l'apertura: la griglia del titolo sulla stessa colonna della testata */
.hero{
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--bacci-gutter) !important;
  padding-right: var(--bacci-gutter) !important;
}


/* ==========================================================
   LA COLONNA DEL SITO, UNA SOLA REGOLA.

   Su schermo grande il contenuto si ferma a 1200 pixel ed e' centrato.
   Su schermo piccolo occupa il 95% della larghezza, cioe' resta un 2,5%
   di margine per lato. Le due cose stanno in due righe sole:

       width: 95%            quanto occupa quando lo schermo e' stretto
       max-width: 1200px     dove si ferma quando lo schermo e' largo

   Il passaggio fra le due avviene da solo intorno ai 1263 pixel, senza
   bisogno di un punto di rottura scritto a mano.

   Le sezioni restano larghe quanto lo schermo: qui si allinea il loro
   contenuto, non il loro sfondo.
   ========================================================== */
.bacci-wrap,
.bft-wrap,
.pad,
.bruno .binn,
.tosca .inn,
.cfo-in,
.expf .c,
.toscab .c,
.feathero .fh-in{
  width: 95% !important;
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* le sezioni che li contengono vanno da bordo a bordo */
.cfo,
.crea,
.manifesto,
.dealers,
.lab,
.sig{ padding-left: 0 !important; padding-right: 0 !important }

/* un contenitore dentro l'altro non deve stringere due volte */
.pad .pad,
.bft-wrap .bft-bar,
.ft-wrap .bft-bar{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* --- apertura e ritratti: sfondo a tutta finestra, testo in colonna ---
   Avevo stretto la sezione intera, e cosi' finivano ingabbiati anche il
   video e la fotografia di sfondo, che invece devono andare da bordo a
   bordo. Qui la sezione torna larga quanto la finestra e si allinea solo
   il testo, che si ferma ai 1200 pixel come il resto del sito. */
.hero,
.featphoto .feat-hero{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* il testo dentro l'apertura: stessa colonna della testata */
.hero .top,
.hs-text .ht-in,
.featphoto .feat-hero .feat-htext{
  width: 95% !important;
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* i due tondi in basso partono dal bordo della colonna, non dello schermo */
.hero-ui{ left: max(2.5%, calc((100% - var(--bacci-max)) / 2)) !important }

/* Il titolone era misurato sulla finestra (21vw), quindi su schermo largo
   sfondava la colonna. Ora e' misurato sulla colonna stessa: riempie i
   1200 pixel esatti e non un pixel di piu'. */
.hero h1{
  font-size: min(21vw, calc(var(--bacci-max) * 0.168)) !important;
}
.ht-big{
  font-size: min(8.6vw, calc(var(--bacci-max) * 0.115)) !important;
  max-width: none !important;
}

/* Il titolone dell'apertura in italiano NON ha una misura sua, e non deve
   averla: le due lingue devono vedersi uguali. Ha rischiato di averla il
   21 agosto, quando diceva "UN LIUTAIO, NON UNA FABBRICA" e la A finale
   finiva fuori dallo schermo del telefono. La soluzione non e' stata
   rimpicciolire il carattere ma cambiare la frase, ed e' la strada giusta
   anche la prossima volta: se un titolo italiano non ci sta, e' il titolo
   a essere lungo, non la pagina a essere stretta. */

/* Sui telefoni piu' stretti "Erede dell'Amrita" sfonda per una decina di
   pixel dove "Heir of the Amrita" ci stava. Qui la frase non si tocca:
   e' il nome di un modello. */
@media (max-width: 400px){
  html[lang="it"] .feat-htext h2{ font-size: 12.8vw }
}


/* --- Signature: lo sfondo va da bordo a bordo, il testo sta in colonna ---
   La sezione ha anche la classe .pad, quindi la regola della colonna la
   stringeva tutta, sfondo fotografico compreso. Qui torna larga quanto
   la finestra e la colonna la tiene il suo contenitore interno. */
.sig.pad{
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.sig-in{
  width: 95% !important;
  max-width: var(--bacci-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}



/* --- niente riga chiara sopra le sezioni dei ritratti ---
   Era il border-top color avorio di .feature.featphoto, quello sopra
   "Leonardo, the baritone" e sopra gli altri tre ritratti. */
.feature.featphoto{ border-top: 0 !important; margin-top: 0 !important }


/* --- la riga grigia sopra il primo ritratto ---
   Non era del ritratto, era il bordo inferiore dell'ultima sezione
   collezione (Tosca). Le righe fra una collezione e l'altra restano,
   sparisce solo quella che chiudeva il gruppo. */
#tosca-collection{ border-bottom: 0 !important }


/* --- la striscia dei nomi che scorre: niente righe, niente spazi --- */
.marq{
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* --- lo spazio fra la citazione di Tosca e la striscia dei nomi ---
   Non era ne' un margine ne' un padding della striscia: era il
   padding-bottom da 120 pixel dell'ultima sezione collezione, che
   restava li' sotto al testo. Via quello, e via anche il margine
   verde di 40 fra la striscia e le foto: lo stacco lo da' il
   padding sopra alla sezione degli artisti, ora 130. */
#tosca-collection{ padding-bottom: 0 !important }


/* ==========================================================
   QUELLO CHE DICONO I MUSICISTI, sotto le foto.

   Stesso linguaggio del resto della pagina: nero, filo di un pixel,
   niente angoli tondi, ruggine per i nomi, mono per le etichette.
   Scorre da solo e si ferma quando ci passi sopra col mouse.

   Sta dentro la sezione "What players say", al posto delle tre schede
   ferme che c'erano prima.
   ========================================================== */
.psay{
  margin-top: 40px;
  overflow: hidden;
  padding-top: 6px;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.psay-track{
  display: flex;
  width: max-content;
  gap: 0;
  animation: psayscroll 68s linear infinite;
}
.psay:hover .psay-track{ animation-play-state: paused }

.psay-card{
  flex: 0 0 auto;
  width: 340px;
  margin: 0;
  padding: 0 32px;
  border-left: 1px solid rgba(255,255,255,.13);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.psay-q{
  margin: 0;
  font-family: "pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.28;
  letter-spacing: -.015em;
  color: #f1ede6;
}
.psay-q::before{
  content: "\201C";
  font-family: Georgia, serif;
  color: #d6532b;
  font-size: 34px;
  line-height: 0;
  vertical-align: -10px;
  margin-right: 3px;
}
.psay-who{ margin-top: auto; display: flex; flex-direction: column; gap: 4px }
.psay-n{
  font-family: "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #d6532b;
}
.psay-r,
.psay-k{
  font-family: "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 10.5px; letter-spacing: .1em; color: #8f887b;
}
.psay-k{ text-transform: uppercase }

@keyframes psayscroll{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }

@media (max-width:860px){
  .psay{ margin-top: 36px; padding-top: 26px }
  .psay-card{ width: 78vw; padding: 0 22px }
  .psay-q{ font-size: 17px }
}

/* chi ha chiesto meno movimento lo scorre a mano invece di subirlo */
@media (prefers-reduced-motion: reduce){
  .psay-track{ animation: none }
  .psay{ overflow-x: auto; -webkit-mask-image: none; mask-image: none }
}


/* ==========================================================
   CHI LI SUONA, il nastro di volti sotto le sei foto grandi.
   Ripreso dal carosello della landing dual-output, riportato nel
   linguaggio della home: foto in bianco e nero che tornano a colori
   quando ci passi sopra, nome in maiuscolo, ruolo in mono, e la
   pastiglia ruggine con le visualizzazioni dove ci sono.
   Scorre da solo, si ferma col mouse sopra.
   ========================================================== */
.proll{
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.proll-track{
  display: flex;
  gap: 14px;
  width: max-content;
  animation: prollscroll 72s linear infinite;
}
.proll:hover .proll-track{ animation-play-state: paused }

.proll-card{
  flex: 0 0 224px;
  width: 224px;
  margin: 0;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #0e0d0c;
}
.proll-card img{
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter .5s, transform .5s;
}
.proll-card:hover img{ filter: none; transform: scale(1.04) }
.proll-g{ position: absolute; inset: 0; background: linear-gradient(transparent 50%, #000e) }
.proll-card figcaption{ position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2 }
.proll-card figcaption b{
  display: block; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
}
.proll-card figcaption span{
  font-family: "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #cfc9c0;
}
.proll-v{
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-family: "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 10px; letter-spacing: .08em; font-weight: 700;
  color: #0b0a09; background: #d6532b; padding: 4px 8px;
}

@keyframes prollscroll{ 0%{ transform: translateX(0) } 100%{ transform: translateX(-50%) } }

@media (max-width:860px){
  .proll{ margin-top: 28px }
  .proll-card{ flex: 0 0 150px; width: 150px }
  .proll-card figcaption b{ font-size: 12px }
}

/* chi ha chiesto meno movimento lo scorre a mano */
@media (prefers-reduced-motion: reduce){
  .proll-track{ animation: none }
  .proll{ overflow-x: auto; -webkit-mask-image: none; mask-image: none }
}


/* --- le sei foto grandi: nome e ruolo come nel nastro sotto ---
   Prima c'era il solo nome in mono piccolo. Adesso usano la stessa
   scala del nastro: nome in maiuscolo bianco, ruolo in mono grigio,
   cosi' le due file si leggono come una cosa sola. */
.players .sheet .sc figcaption{
  position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2;
}
.players .sheet .sc figcaption b{
  display: block; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .01em; color: #fff;
  font-family: "pragmatica","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.players .sheet .sc figcaption span{
  display: block; margin-top: 2px;
  font-family: "Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #cfc9c0;
}
@media (max-width:860px){
  .players .sheet .sc figcaption b{ font-size: 12px }
  .players .sheet .sc figcaption span{ font-size: 9px }
}


/* ==========================================================
   1. I DUE NASTRI SI TRASCINANO, col dito e col mouse.

   Prima scorrevano con una animazione CSS su translateX: bello ma
   intoccabile, il dito ci scivolava sopra senza spostare niente.
   Adesso il contenitore e' scorrevole per davvero e a spingerlo e'
   una funzione, un pixel per volta. Cosi' sul telefono si trascina
   da solo, con l'inerzia del sistema, e col mouse si afferra.
   Il codice sta in fondo alla home.
   ========================================================== */
.proll,
.psay{
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.proll::-webkit-scrollbar,
.psay::-webkit-scrollbar{ width: 0; height: 0; display: none }
.proll.tira,
.psay.tira{ cursor: grabbing; -webkit-user-select: none; user-select: none }
/* mentre si trascina, foto e link non devono reagire al rilascio */
.proll.tira a, .proll.tira img,
.psay.tira  a, .psay.tira  img{ pointer-events: none }
/* il movimento adesso lo da' la funzione, non piu' l'animazione */
.proll-track,
.psay-track{ animation: none !important }


/* ==========================================================
   2. I BOTTONI SONO QUADRATI.

   Il resto della casa e' fatto di angoli vivi: le foto, le schede,
   le linee da un pixel. Le pastiglie da 999 pixel di raggio erano
   rimaste dentro da una vita precedente del sito.
   ========================================================== */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.btn, .btn, .cta, a.cta,
.nav-cta, .ncta, .hn-cta, .pill-btn, .float-cta, .bhub-cta,
.cfo-go, .cfo-ask, .cpre,
.techbtn, .watch-btn, .watch, .feat .watch, .cmp-btn, .tour-toggle,
.card .go, .card .note, .lcard .lc-go, .lcard .lpill, .fincard .go,
.fincard .pill, .fincard .oop-tag, .lcard .oop-ribbon, .stage-sp .btn,
.rosw a, .rosw span, .rel a, .roster span, .roster-chips span,
.dks-chip, .qcard .qk, .qcard .chip, .qtrack .qkpi, .rcard .kpi,
.tcard .pill, .dchips span, .feat .dchips span, .sw .chip,
.model .mtag, .model .mtoggle, .model .mtoggle span,
.cap-chips button, .tmodal .ttabs, .tmodal .ttab,
.showcase .toggle, .showcase .toggle button, .showcase .tags,
.gcard .ph .views, .acard .ph .views, .acard .ph .tagph,
.hc-mute, .skip-link,
.a11y-opt, .a11y-reset, .a11y-row .stp button,
.blang-panel a, .blang-panel span.cur, .blang-invito a, .blang-invito button
{ border-radius: 0 !important }

/* Questi restano tondi: sono icone dentro un cerchio, non bottoni con
   una scritta. Squadrarli farebbe una freccia dentro una scatola.
   L'elenco e' corto apposta: qui si rimette il tondo solo dove c'era
   gia', per non arrotondare per sbaglio cose che erano quadre. */
button.a11y-fab, button.blang-fab, button.bvm-x, button.arrow
{ border-radius: 50% !important }


/* ==========================================================
   3. LE DATE DEI CONCERTI: la prima riga non ha il filo sopra.

   Il filo c'era due volte, una dal bordo alto dell'elenco e una dal
   bordo basso di ogni riga. Sopra alla prima resta solo il titolo.
   ========================================================== */
/* Via il filo sopra e via il margine, ma il respiro della prima riga
   resta: sono i 18 che hanno tutte le altre, cosi' la colonna delle
   date parte allineata e non incollata al titolo. */
.tourdates .tour-list{ margin-top: 0 !important; border-top: 0 !important }
.tourdates .tour-list .tour-row:first-child{ padding-top: 18px !important }


/* ==========================================================
   4. LA STRISCIA DEI NOMI, sessanta sopra e sessanta sotto.

   Sul telefono ne aveva centotrenta da una parte e centotrenta
   dall'altra: uno arrivava dal fondo della sezione Tosca, l'altro
   dalla cima della sezione degli artisti. Qui si azzerano tutti e
   due e si mette il numero giusto una volta sola.
   ========================================================== */
.playersblock .marq{ margin-bottom: 40px !important }
.playersblock .players{ padding-top: 130px !important }
@media (max-width:860px){
  /* Lo spazio attorno ai nomi che scorrono adesso e' tutto della striscia
     e di nessun altro: novanta sopra la riga e novanta sotto, contati dal
     testo. Prima arrivava da tre parti diverse, la coda della sezione
     Tosca, la cima della sezione artisti e il suo titolino, e per
     cambiarlo bisognava indovinare quale dei tre stesse parlando. */
  #tosca.featphoto{ padding-bottom: 0 !important }
  .playersblock .marq{
    margin-top: 0 !important; margin-bottom: 0 !important;
    padding-top: 90px !important; padding-bottom: 90px !important;
  }
  .playersblock .players{ padding-top: 0 !important }
  .playersblock .players > .sh{ padding-top: 0 !important }
}


/* ==========================================================
   5. Sul telefono la barra fissa copre il fondo del piede.
   Le voci legali devono restare leggibili sotto di lei.
   ========================================================== */
@media (max-width:860px){
  html.ha-barra body{ padding-bottom: 54px }
  /* La riga legale teneva sotto di se' lo spazio dei tondi fissi
     (30 piu' --bacci-fab, cioe' 126). Adesso lo spazio in fondo lo
     tiene il corpo della pagina per la barra Reserve, quindi qui
     bastano i 30. */
  .bft-bar{ padding-bottom: 30px !important }
}


/* ==========================================================
   7. IL MENU A TUTTO SCHERMO STA NELLA COLONNA DEL SITO.

   Il pannello e' fisso e nero da bordo a bordo, e cosi' deve restare:
   lo sfondo copre tutto. Ma le voci partivano dal 5% dello schermo,
   quindi su un monitor largo il menu era piu' largo della pagina che
   copriva, e riaprendolo e chiudendolo il logo saltava di lato.
   Adesso le righe si fermano ai 1200 come tutto il resto, e il logo
   del pannello cade esattamente sopra quello della testata.

   Vale solo da 861 in su: sul telefono i margini stretti li ha gia'.
   ========================================================== */
@media (min-width:861px){
  .bhub-panel .bhub-head,
  .bhub-panel .bhub-foot,
  .bhub-panel .bhub-ct,
  .bhub-panel .it{
    width: 95% !important;
    max-width: var(--bacci-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box;
  }
}


/* ==========================================================
   6. Sul telefono "Enter Officina", "Enter Parato", "Enter Marlita" e
   "Enter Tosca" prendono tutta la larghezza.

   Erano quattro scritte corte incorniciate, larghe quanto le parole:
   su uno schermo stretto sembravano una nota a margine invece che la
   porta d'ingresso alla collezione. A tutta larghezza si leggono come
   un bottone, e il dito ci arriva senza mirare.
   ========================================================== */
@media (max-width:860px){
  .spread .row{ display: block }
  .spread .row .cta{
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 17px 20px;
  }
}

/* ===== PAGINE DI MODELLO =====
   Dalla home, le due sezioni Leonardo e Marleo portano alla pagina dello
   strumento (/baritone/ e /bass/), che racconta il modello e poi manda
   alle collezioni in cui si puo' avere. Prima erano vicoli ciechi. */
.featphoto .feat-go{display:inline-flex;align-items:center;gap:11px;margin-top:26px;
 font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;
 letter-spacing:.18em;text-transform:uppercase;color:#f1ede6;border:1px solid rgba(255,255,255,.34);
 padding:14px 26px;transition:background .25s,color .25s,border-color .25s}
.featphoto .feat-go .ar{color:#d6532b;transition:transform .3s}
.featphoto .feat-go:hover{background:#f1ede6;color:#0b0a09;border-color:#f1ede6}
.featphoto .feat-go:hover .ar{color:#d6532b;transform:translateX(5px)}
.featphoto .feat-go:focus-visible{outline:3px solid #d6532b;outline-offset:3px}


/* ==========================================================
   IL PREZZO ACCANTO AL BOTTONE, sulla Experience.

   Prima stava due righe piu' sotto, in fondo al blocco. Chi valuta
   un viaggio da quattromila euro il prezzo lo cerca mentre guarda il
   bottone, non dopo averlo gia' premuto o gia' lasciato perdere.
   ========================================================== */
p.cfo-prezzo{
  display: block; width: 100%; margin: 16px 0 0;
  font-family: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8f887b; line-height: 1.6;
}


/* ==========================================================
   Sul telefono il bottone del blocco commissioni a tutta larghezza.
   Non quello fisso in fondo, che e' gia' una barra: questo e' quello
   dentro alla pagina, che a schermo stretto era una scritta incorniciata
   larga quanto le parole e si leggeva come una nota a margine.
   ========================================================== */
@media (max-width:860px){
  .cfo-row{ display: block }
  .cfo-go{
    display: block !important; width: 100% !important;
    text-align: center; box-sizing: border-box;
  }
}


/* ==========================================================
   BACCI:margine-cell
   Sul telefono il contenitore del blocco Reserve stava al 95%
   della finestra: a 390 pixel fanno nove pixer per parte, e i
   bottoni sembravano incollati al bordo. Qui diventano quindici,
   contati, su tutte le pagine che hanno il blocco.
   ========================================================== */
@media (max-width:860px){
  .cfo-in{ width:calc(100% - 30px) !important; max-width:none !important }

  /* I due bottoni erano attaccati: una regola piu' in basso porta la riga
     a display:block, e con block il gap non conta niente. Qui torna una
     colonna vera, con i suoi dodici pixel in mezzo. */
  .cfo .cfo-row{ display:flex !important; flex-direction:column !important;
                 align-items:stretch !important; gap:12px !important }
  .cfo .cfo-go, .cfo .cfo-ask{ display:flex !important; width:100% !important;
                 justify-content:center; text-align:center;
                 box-sizing:border-box; margin:0 !important }
}


/* L'a capo dopo "nothing ever will be." e' voluto, ma solo dove la riga
   ci sta intera: sul telefono spezzerebbe male e lo si toglie. */
@media (max-width:860px){ .cfo-lead br{ display:none } }


/* ==========================================================
   La freccia dei bottoni e' sempre la stessa.
   Il segno e' identico ovunque, U+2192, ma reso con il carattere del
   bottone cambia forma: in pragmatica e' lunga e sottile, in Space Mono
   e' corta e squadrata, in Marcellus ha le grazie. Accanto alla pillola
   si vedeva la differenza. Qui la freccia prende sempre lo stesso
   carattere, e la misura la eredita dalla scritta a cui sta accanto.
   ========================================================== */
.ar, .pill-btn .ic, .cfo-go .ar, .bhub-cta .ar,
.btn .ar, .techbtn .ar, .go .ar, .sb-btn .ar{
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:700;
}