/* ==== assets/vendor/lenis.css ==== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ==== src/core/tokens.css ==== */
/* ============ TOKENS «Pizza & Rock'n'Roll · Lato A» — colori, font, misure. Vedi DESIGN.md ============ */
:root {
  /* palette */
  --lavagna: #121614;
  --lavagna-2: #1D2420;
  --gesso: #EEEAE0;
  --giallo: #F3E21E;
  --neon: #3BFF8F;
  --verde: #44A578;
  --rosso: #C8352E;
  --rosso-testo: #A82C26;   /* rosso per testo piccolo su gesso/kraft (AA) */
  --kraft: #C9A27A;
  --inchiostro: #17120E;
  --legno: #6E4227;
  --legno-scuro: #3A2416;
  --gesso-70: rgba(238, 234, 224, .7);
  --gesso-15: rgba(238, 234, 224, .15);

  /* ruoli */
  --bg: var(--lavagna);
  --ink: var(--gesso);
  --accent: var(--giallo);

  /* font */
  --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --f-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-num: "Space Grotesk", "DM Sans", system-ui, sans-serif;

  /* scala tipografica */
  --fs-body: clamp(16px, 15px + .25vw, 18px);
  --fs-lead: clamp(17px, 15.5px + .45vw, 21px);
  --fs-label: 12px;
  --fs-h1: clamp(64px, 9.5vw, 168px);
  --fs-h2: clamp(52px, 8vw, 136px);
  --fs-h3: clamp(30px, 3.6vw, 56px);
  --fs-note: clamp(22px, 2.2vw, 34px);

  /* spazi */
  --pad-x: clamp(20px, 4vw, 48px);
  --sec-y: clamp(88px, 13vh, 168px);
  --max: 1440px;
  --gap: clamp(16px, 2vw, 32px);

  /* forme */
  --r-pill: 999px;
  --r-card: 14px;
  --r-media: 6px;
  --shadow-sticker: 0 2px 0 rgba(0, 0, 0, .25), 0 10px 20px rgba(0, 0, 0, .35);

  /* movimento (per le transizioni CSS; in GSAP usare expo.out / power3.inOut / back.out) */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* livelli */
  --z-grain: 40;
  --z-nav: 50;
  --z-bar: 60;
  --z-menu: 80;
  --z-modal: 90;
  --z-pre: 100;

  /* UI */
  --nav-h: 72px;
  --bar-h: 60px;
}
@media (max-width: 899px) {
  :root { --nav-h: 60px; }
}

/* ==== src/core/base.css ==== */
/* ============ BASE: font, reset, utilità comuni (i colori e le misure sono in tokens.css) ============ */
@font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.woff2") format("woff2"), url("../fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2"), url("../fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/InstrumentSerif-RegularItalic.woff2") format("woff2"), url("../fonts/InstrumentSerif-RegularItalic.ttf") format("truetype"); font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Regular.woff2") format("woff2"), url("../fonts/DMSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Medium.woff2") format("woff2"), url("../fonts/DMSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-Bold.woff2") format("woff2"), url("../fonts/DMSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2"), url("../fonts/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }  /* clip: niente sbordi che allargano il viewport mobile; gli sticky funzionano */
body { margin: 0; background: var(--bg, #141210); color: var(--ink, #f4ead6); font-family: var(--f-sans, "DM Sans", system-ui, sans-serif); font-size: var(--fs-body, 17px); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--accent, #F3E21E); color: #141210; }
:focus-visible { outline: 3px solid var(--accent, #F3E21E); outline-offset: 3px; border-radius: 4px; }

/* maschere per SplitText (righe) */
.sl { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
.sw, .sc { display: inline-block; }

html { scroll-padding-top: var(--nav-h, 72px); }
@media (max-width: 899px) { html { scroll-padding-bottom: calc(var(--bar-h, 60px) + 28px + env(safe-area-inset-bottom)); } }

/* grana globale statica (leggerissima, niente blend: costa zero in scroll) */
body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain, 40); pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- componenti comuni ---- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-x); }
.label { font: 500 var(--fs-label)/1.2 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; }
.amp { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--giallo); text-transform: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  font: 700 16px/1.1 var(--f-sans); letter-spacing: .01em; white-space: nowrap; max-width: 100%; transition: transform .18s var(--ease-out), background-color .25s, color .25s, box-shadow .25s; }
.btn:active { transform: scale(.96); }
.btn--wrap { white-space: normal; text-align: center; padding-block: 12px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--giallo); color: var(--inchiostro); box-shadow: 0 0 0 0 rgba(243, 226, 30, 0); }
.btn--primary:hover { box-shadow: 0 0 0 6px rgba(243, 226, 30, .18); }
.btn--ghost { border: 1.5px solid currentColor; color: inherit; }
.btn--ghost:hover { background: var(--gesso); color: var(--inchiostro); border-color: var(--gesso); }
.num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* testo solo per screen reader */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* movimento ridotto: niente parallax/pin pesanti, animazioni brevissime */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
html.is-reduced *, html.is-reduced *::before, html.is-reduced *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }

/* ==== src/sections/00-preloader/section.css ==== */
/* ============ 00 PRELOADER — count-in «UN · DUE · TRE · QUATTRO!» ============
   Overlay visibile dal primo paint (solo con JS attivo). Due metà (alta/bassa) con una copia delle parole ciascuna:
   all'apertura la parola si spacca in due insieme al sipario. Grandezze delle parole in CSS puro (fit-text con le
   larghezze di avanzamento di Anton: UN .972em · DUE 1.378em · TRE 1.284em · QUATTRO! 3.436em; altezza maiuscole .859em).
   TUTTA la sequenza è qui, in keyframes su opacity/transform (girano sul compositor: niente scatti mentre core inizializza
   le sezioni dietro l'overlay). La avvia lo script in linea di section.html aggiungendo .is-run. Tempi (s):
   battuta .22 · entrata parola .12 (expo.out) · uscita .04 · QUATTRO! atterra a .78 → flash giallo .78–.86 + scossone .24 ·
   sipario .86–1.22 (expo.inOut). Lo script segue animationstart/animationend di «cc-pre-open-top».
   Gli `!important` sulle animazioni battono la regola globale di base.css per «riduci movimento» nel solo caso in cui
   l'utente ha riattivato le animazioni a mano (con movimento ridotto vero il count-in non parte proprio). */
html:not(.js) .s-preloader,
html.cc-seen .s-preloader { display: none; }

.s-preloader {
  position: fixed; inset: 0; z-index: var(--z-pre);
  color: var(--gesso); overflow: clip; contain: layout paint;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  /* paracadute: se il JS non parte, l'overlay sparisce da solo e non blocca mai il sito */
  animation: cc-pre-failsafe .3s linear 4s forwards;
}
@keyframes cc-pre-failsafe { to { opacity: 0; visibility: hidden; } }
.s-preloader.is-open { pointer-events: none; }   /* durante il salto invece resta sopra: il tap non deve «passare» alla pagina */
.s-preloader.is-skip { opacity: 0; transition: opacity .2s cubic-bezier(.33, 1, .68, 1) !important; }
.s-preloader.is-skip, .s-preloader.is-skip * { animation-play-state: paused !important; }
.s-preloader.is-gone { visibility: hidden !important; pointer-events: none; }   /* finito ma con un dito ancora giù: resta nel DOM finché non si alza */

.s-preloader .pre-half {
  position: absolute; left: -16px; right: -16px; overflow: clip;
  background: var(--lavagna); will-change: transform;
}
.s-preloader .pre-half--top { top: 0; height: calc(50% + 1px); }
.s-preloader .pre-half--bot { bottom: 0; height: 50%; }
/* lama di luce sul taglio: compare solo quando il sipario si apre */
.s-preloader .pre-half::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--giallo);
  opacity: 0;
}
.s-preloader .pre-half--top::after { bottom: 0; }
.s-preloader .pre-half--bot::after { top: 0; }

/* ogni stage è alto quanto l'overlay: la metà alta ne mostra la parte superiore, la bassa quella inferiore */
.s-preloader .pre-stage { position: absolute; left: 16px; right: 16px; }
.s-preloader .pre-half--top .pre-stage { top: 0; height: calc(200% - 2px); }
.s-preloader .pre-half--bot .pre-stage { bottom: 0; height: 200%; }
/* grana leggerissima (la stessa del body, che qui resta sotto l'overlay) */
.s-preloader .pre-stage::before {
  content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* il flash sborda di 16px ai lati: lo scossone dello stage non deve scoprire una riga scura sul bordo */
.s-preloader .pre-flash { position: absolute; inset: 0 -16px; background: var(--giallo); opacity: 0; }

.s-preloader .pre-words { position: absolute; inset: 0; display: grid; place-items: center; }
.s-preloader .pre-w {
  grid-area: 1 / 1; font-family: var(--f-display); font-weight: 400; line-height: 1; letter-spacing: 0;
  text-transform: uppercase; white-space: nowrap; color: var(--gesso); opacity: 0;
  /* l'occhio delle maiuscole di Anton sta 0,006em sopra il centro del box: lo ricentro sul taglio */
  translate: 0 .006em;
}
/* crescendo: UN · DUE · TRE crescono in altezza, QUATTRO! prende tutta la larghezza */
.s-preloader .pre-w--1 { font-size: min(72vw, 39.6svh); }
.s-preloader .pre-w--2 { font-size: min(50.8vw, 48.9svh); }
.s-preloader .pre-w--3 { font-size: min(54.5vw, 58.2svh); }
.s-preloader .pre-w--4 { font-size: min(26.2vw, 70svh); color: var(--giallo); }
.s-preloader .pre-w--4d { color: var(--inchiostro); }   /* copia scura, visibile solo durante il flash giallo */

/* piede: firma · battute · salta */
.s-preloader .pre-foot {
  position: absolute; left: var(--pad-x); right: var(--pad-x);
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.s-preloader .pre-label {
  font: 500 var(--fs-label)/1.35 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--gesso-70);
}
.s-preloader .pre-label .amp { font-size: 1.3em; line-height: 0; letter-spacing: 0; margin: 0 .08em; }
.s-preloader .pre-beats {
  display: flex; gap: 18px; font: 700 12px/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: 0;
  color: var(--gesso); justify-self: center;
}
.s-preloader .pre-beats li { opacity: .22; }
.s-preloader .pre-skip {
  justify-self: end; display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 20px;
  border: 1px solid var(--gesso-15); border-radius: var(--r-pill); color: var(--gesso);
  font: 500 13px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .16em;
  transition: border-color .2s, background-color .2s;
}
.s-preloader .pre-skip span { font-size: 1.35em; line-height: 0; letter-spacing: 0; transform: translateY(-.04em); }
.s-preloader .pre-skip:hover { border-color: var(--gesso); }
.s-preloader .pre-skip:focus-visible { outline-color: var(--neon); }

@media (max-width: 899px) {
  /* mobile: crescendo che rispetta la larghezza (QUATTRO! da bordo a bordo) */
  .s-preloader .pre-w--1 { font-size: min(51.4vw, 23.3svh); }
  .s-preloader .pre-w--2 { font-size: min(61vw, 34.9svh); }
  .s-preloader .pre-w--3 { font-size: min(65.4vw, 41.9svh); }
  .s-preloader .pre-w--4 { font-size: min(27.4vw, 60svh); }
  .s-preloader .pre-foot { grid-template-columns: 1fr auto; row-gap: 22px; }
  .s-preloader .pre-beats { grid-column: 1 / -1; grid-row: 1; justify-self: start; }
  .s-preloader .pre-label { grid-row: 2; font-size: 12px; }
  .s-preloader .pre-label > span { display: block; }
  .s-preloader .pre-label .pre-dot { display: none; }
  .s-preloader .pre-skip { grid-row: 2; padding: 0 18px; }
}
/* telefoni stretti (≤374): «Salta» sale accanto alle battute, la firma prende tutta la riga (a 320 andava su tre righe) */
@media (max-width: 374px) {
  .s-preloader .pre-beats { grid-column: 1; align-self: center; }
  .s-preloader .pre-skip { grid-row: 1; grid-column: 2; }
  .s-preloader .pre-label { grid-column: 1 / -1; }
}
/* telefono in orizzontale: piede su una riga (firma · battute · salta) e crescendo un po' più basso, così la coda della Q
   di QUATTRO! non tocca le battute */
@media (max-width: 899px) and (max-height: 540px) and (orientation: landscape) {
  .s-preloader .pre-w--1 { font-size: min(51.4vw, 30svh); }
  .s-preloader .pre-w--2 { font-size: min(61vw, 38svh); }
  .s-preloader .pre-w--3 { font-size: min(65.4vw, 46svh); }
  .s-preloader .pre-w--4 { font-size: min(27.4vw, 54svh); }
  .s-preloader .pre-foot { grid-template-columns: 1fr auto 1fr; row-gap: 0; }
  .s-preloader .pre-beats { grid-column: 2; grid-row: 1; justify-self: center; }
  .s-preloader .pre-label { grid-column: 1; grid-row: 1; }
  .s-preloader .pre-skip { grid-column: 3; grid-row: 1; }
}

/* ---------------- la sequenza (avviata da .is-run) ---------------- */
.s-preloader.is-run { animation: cc-pre-gone .01s linear 1.22s forwards !important; }   /* a sipario aperto: invisibile e non cliccabile anche se il JS è in ritardo */
.s-preloader.is-run .pre-w--1 { animation: cc-pre-word .22s linear 0s both !important; }
.s-preloader.is-run .pre-w--2 { animation: cc-pre-word .22s linear .22s both !important; }
.s-preloader.is-run .pre-w--3 { animation: cc-pre-word .22s linear .44s both !important; }
.s-preloader.is-run .pre-w--4 { animation: cc-pre-last .12s cubic-bezier(.16, 1, .3, 1) .66s both !important; }
.s-preloader.is-run .pre-w--4d { animation: cc-pre-flash .9s linear both !important; }        /* acceso solo .78–.86 */
.s-preloader.is-run .pre-flash { animation: cc-pre-flash .9s linear both !important; }
.s-preloader.is-run .pre-stage { animation: cc-pre-shake .24s linear .78s !important; }
.s-preloader.is-run .pre-beats li { animation: cc-pre-beat .22s linear !important; }                   /* fill none: accesa solo nella sua battuta */
.s-preloader.is-run .pre-beats li:nth-child(2) { animation-delay: .22s !important; }
.s-preloader.is-run .pre-beats li:nth-child(3) { animation-delay: .44s !important; }
.s-preloader.is-run .pre-beats li:nth-child(4) { animation: cc-pre-beat4 .01s linear .66s forwards !important; }
.s-preloader.is-run .pre-half::after { animation: cc-pre-blade .01s linear .86s forwards !important; }
.s-preloader.is-run .pre-half--top { animation: cc-pre-open-top .36s cubic-bezier(.87, 0, .13, 1) .86s both !important; }
.s-preloader.is-run .pre-half--bot { animation: cc-pre-open-bot .36s cubic-bezier(.87, 0, .13, 1) .86s both !important; }

@keyframes cc-pre-word {
  0% { opacity: 0; transform: scale(1.3); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  54.55% { opacity: 1; transform: none; }
  81.82% { opacity: 1; }
  100% { opacity: 0; transform: none; }
}
@keyframes cc-pre-last { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
/* flash .78–.86 s dentro un'unica animazione da 0 a .9 s che inizia e finisce a 0: tutto sul compositor. Con un
   keyframe «piatto» (1 → 1) Chrome non la componeva e, col thread principale occupato dall'init delle sezioni, il flash
   saltava; con fill none e ritardo, invece, il giallo restava acceso finché il thread principale non si liberava
   (~270 ms con CPU 4×, misurati con lo screencast) */
@keyframes cc-pre-flash {
  0%, 86.6% { opacity: 0; }
  86.7% { opacity: 1; }
  95.5% { opacity: .86; }
  95.6%, 100% { opacity: 0; }
}
@keyframes cc-pre-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
@keyframes cc-pre-beat { from, to { opacity: 1; color: var(--neon); } }
@keyframes cc-pre-beat4 { from, to { opacity: 1; color: var(--giallo); } }
@keyframes cc-pre-blade { from { opacity: 0; } to { opacity: .9; } }
@keyframes cc-pre-open-top { from { transform: none; } to { transform: translateY(-101%); } }
@keyframes cc-pre-open-bot { from { transform: none; } to { transform: translateY(101%); } }
@keyframes cc-pre-gone { to { visibility: hidden; } }

/* ==== src/sections/01-nav/section.css ==== */
/* ============ 01 NAV — skip link, header, menu-scaletta (mobile), barra fissa (mobile) ============ */

/* (html { overflow-x: clip } ora è in src/core/base.css) */
.s-nav .nav-ico {
  width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; overflow: visible;
}
.s-nav .nav-ico__dot { fill: currentColor; stroke: none; }

/* ---- skip link ---- */
.s-nav .nav-skip {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 12px; z-index: calc(var(--z-pre) + 10);
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  background: var(--giallo); color: var(--inchiostro); font: 700 15px/1 var(--f-sans);
  transform: translateY(calc(-100% - 60px)); transition: transform .3s var(--ease-out);
}
.s-nav .nav-skip:focus-visible { outline-color: var(--gesso); }
/* l'ombra solo quando è in vista: da nascosto non deve «sporcare» il bordo alto (si vedeva sul flash del count-in) */
.s-nav .nav-skip:focus, .s-nav .nav-skip:focus-visible { transform: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--lavagna) 60%, transparent); }

/* ---- header ---- */
.s-nav .nav-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top); color: var(--gesso);
  transition: transform .32s cubic-bezier(.33, 1, .68, 1);
}
.s-nav .nav-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--lavagna) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 -1px 0 var(--gesso-15); transition: opacity .3s linear;
}
.s-nav .nav-head.is-solid::before { opacity: 1; }
.s-nav .nav-head.is-hidden { transform: translateY(-100%); }
.s-nav .nav-head.is-hidden:focus-within { transform: none; }

.s-nav .nav-head__in {
  position: relative; height: var(--nav-h); max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.s-nav .nav-logo { justify-self: start; display: inline-flex; align-items: center; min-height: 48px; border-radius: 6px; }
.s-nav .nav-logo img { height: 48px; width: auto; transition: transform .35s var(--ease-out); }
.s-nav .nav-logo:hover img { transform: rotate(-6deg) scale(1.04); }

/* ancore: Band ★ Scaletta ★ Locale ★ Info (le tre stelline del logo, in ordine verde · gesso · rosso) */
.s-nav .nav-links ul { display: flex; align-items: center; }
.s-nav .nav-links li { display: flex; align-items: center; }
.s-nav .nav-star { width: 9px; height: 9px; margin: 0 18px; flex: none; }
.s-nav .nav-star--verde { fill: var(--verde); }
.s-nav .nav-star--gesso { fill: var(--gesso); }
.s-nav .nav-star--rosso { fill: var(--rosso); }
.s-nav .nav-links a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 2px 0 calc(2px + .16em);
  font: 500 13px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .16em;
  color: color-mix(in srgb, var(--gesso) 78%, transparent); transition: color .2s linear;
}
.s-nav .nav-links a::after {
  content: ""; position: absolute; left: calc(2px + .16em); right: calc(2px + .16em); bottom: 13px; height: 2px; border-radius: 2px;
  background: var(--neon); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .4s var(--ease-out);
}
.s-nav .nav-links a:hover, .s-nav .nav-links a:focus-visible, .s-nav .nav-links a[aria-current] { color: var(--gesso); }
.s-nav .nav-links a:hover::after, .s-nav .nav-links a:focus-visible::after, .s-nav .nav-links a[aria-current]::after {
  transform: scaleX(1); transform-origin: 0 50%;
}

.s-nav .nav-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.s-nav .nav-call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 17px; border-radius: var(--r-pill);
  background: var(--giallo); color: var(--inchiostro); font: 700 15px/1 var(--f-sans); letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--giallo) 0%, transparent);
  transition: box-shadow .25s, transform .18s var(--ease-out), opacity .25s, visibility 0s;
}
/* sul giallo un anello giallo si confonde: gesso, ben visibile sul fondo scuro */
.s-nav .nav-call:focus-visible, .s-nav .nav-bar__call:focus-visible { outline-color: var(--gesso); }
.s-nav .nav-call:hover { box-shadow: 0 0 0 6px color-mix(in srgb, var(--giallo) 20%, transparent); }
.s-nav .nav-call:active { transform: scale(.96); }
.s-nav .nav-call__n { padding-left: 11px; border-left: 1.5px solid color-mix(in srgb, var(--inchiostro) 28%, transparent); font-size: 15px; letter-spacing: .02em; }
.s-nav .nav-ico--phone { transform-origin: 50% 55%; }
.s-nav .nav-call:hover .nav-ico--phone,
.s-nav .nav-call:focus-visible .nav-ico--phone { animation: cc-nav-ring .5s linear; }
@keyframes cc-nav-ring {
  0%, 100% { transform: rotate(0); }
  12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-14deg); }
  25%, 50%, 75% { transform: rotate(14deg); }
}
/* toggle «Animazioni ridotte» (solo desktop; su mobile sta nel menu). Icona: palla con le scie del movimento; premuto
   (animazioni ridotte) le scie spariscono e la palla si accende. Etichetta visibile al passaggio e al focus. */
.s-nav .nav-motion {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-right: 6px; border-radius: 50%;
  color: color-mix(in srgb, var(--gesso) 78%, transparent); border: 1px solid var(--gesso-15);
  transition: color .2s linear, border-color .2s linear, background-color .2s linear;
}
.s-nav .nav-motion .nav-ico { width: 22px; height: 22px; }
.s-nav .nav-motion__lines { transition: opacity .2s linear; }
.s-nav .nav-motion__ball { transition: fill .2s linear; }
.s-nav .nav-motion:hover, .s-nav .nav-motion:focus-visible { color: var(--gesso); border-color: color-mix(in srgb, var(--gesso) 45%, transparent); }
.s-nav .nav-motion[aria-pressed="true"] { color: var(--gesso); border-color: color-mix(in srgb, var(--neon) 55%, transparent); }
.s-nav .nav-motion[aria-pressed="true"] .nav-motion__lines { opacity: 0; }
.s-nav .nav-motion[aria-pressed="true"] .nav-motion__ball { fill: var(--neon); stroke: var(--neon); }
.s-nav .nav-motion__tip {
  position: absolute; top: calc(100% + 10px); right: 0; padding: 9px 13px 8px; border-radius: var(--r-pill); white-space: nowrap;
  background: var(--lavagna-2); color: var(--gesso); box-shadow: inset 0 0 0 1px var(--gesso-15), 0 10px 24px rgba(0, 0, 0, .35);
  font: 500 var(--fs-label)/1 var(--f-sans); text-transform: uppercase; letter-spacing: .16em;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .18s linear, transform .25s var(--ease-out);
}
.s-nav .nav-motion:hover .nav-motion__tip, .s-nav .nav-motion:focus-visible .nav-motion__tip { opacity: 1; transform: none; }
.s-nav .nav-motion__st { color: var(--gesso-70); }
.s-nav .nav-motion__st--on, .s-nav .nav-motion[aria-pressed="true"] .nav-motion__st--off { display: none; }
.s-nav .nav-motion[aria-pressed="true"] .nav-motion__st--on { display: inline; color: var(--neon); }

.s-nav .nav-burger { display: none; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: var(--gesso); margin-right: -10px; }
.s-nav .nav-burger .nav-ico { width: 26px; height: 26px; }

/* ---- menu a tutto schermo: la scaletta stampata e nastrata al palco ---- */
.s-nav .nav-menu {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--gesso); color: var(--inchiostro); overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
  z-index: var(--z-menu);
}
.s-nav .nav-menu:not([open]) { display: none; }
.s-nav .nav-menu::backdrop { background: transparent; }
.s-nav .nav-menu :focus-visible { outline-color: var(--inchiostro); }
.s-nav .nav-menu__sheet {
  position: relative; min-height: 100%; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) var(--pad-x) calc(22px + env(safe-area-inset-bottom));
}
.s-nav .nav-menu__top { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; }
.s-nav .nav-menu__logo { height: 40px; width: auto; }
.s-nav .nav-menu__close { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; margin-right: -10px; color: var(--inchiostro); }
.s-nav .nav-menu__close .nav-ico { width: 26px; height: 26px; }

.s-nav .nav-menu__kicker {
  display: flex; align-items: center; justify-content: space-between; margin-top: clamp(14px, 3.4svh, 34px); padding-bottom: 10px;
  font: 500 var(--fs-label)/1 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; color: color-mix(in srgb, var(--inchiostro) 72%, transparent);
}
.s-nav .nav-menu__stars { display: flex; gap: 7px; }
.s-nav .nav-menu__stars .nav-star { margin: 0; width: 10px; height: 10px; }
.s-nav .nav-menu__stars .nav-star--gesso { stroke: var(--inchiostro); stroke-width: .7; stroke-linejoin: round; }
.s-nav .nav-menu__list { border-top: 2px solid var(--inchiostro); }
.s-nav .nav-menu__list li { border-bottom: 1px solid color-mix(in srgb, var(--inchiostro) 16%, transparent); }
.s-nav .nav-menu__list a {
  display: grid; grid-template-columns: 44px 1fr; align-items: baseline; min-height: 64px;
  padding: clamp(12px, 2.1svh, 18px) 0 clamp(10px, 1.7svh, 14px); border-radius: 4px;
}
.s-nav .nav-menu__n {
  justify-self: start; padding: 4px 6px 3px; margin-left: -6px; border-radius: 4px;
  font-size: 13px; line-height: 1; letter-spacing: .02em; color: var(--rosso-testo);   /* testo piccolo su gesso: AA */
  transform: translateY(-.1em); transition: background-color .2s, color .2s;
}
.s-nav .nav-menu__list a[aria-current] .nav-menu__n { background: var(--inchiostro); color: var(--gesso); }
.s-nav .nav-menu__l { display: block; overflow: clip; padding-bottom: .04em; }
.s-nav .nav-menu__t {
  display: block; font: 400 min(12.9vw, 64px)/.94 var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  transition: transform .35s var(--ease-out);
}
.s-nav .nav-menu__list a:hover .nav-menu__t, .s-nav .nav-menu__list a:focus-visible .nav-menu__t { transform: translateX(8px); }

.s-nav .nav-menu__foot { margin-top: auto; padding-top: clamp(22px, 4svh, 40px); display: grid; gap: 4px; }
.s-nav .nav-menu__call {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin-bottom: 8px;
  border-radius: var(--r-pill); background: var(--giallo); color: var(--inchiostro); border: 1.5px solid var(--inchiostro);
  font: 700 17px/1 var(--f-sans);
}
.s-nav .nav-menu__call .num { font-size: 17px; letter-spacing: .02em; padding-left: 10px; border-left: 1.5px solid color-mix(in srgb, var(--inchiostro) 28%, transparent); }
.s-nav .nav-menu__call:active { transform: scale(.97); }
.s-nav .nav-menu__info a { display: flex; align-items: center; gap: 12px; min-height: 48px; font: 500 16px/1.3 var(--f-sans); border-radius: 4px; }
.s-nav .nav-menu__info a > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--inchiostro) 30%, transparent); }
.s-nav .nav-menu__reduced {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; margin-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--inchiostro) 16%, transparent); font: 500 15px/1.2 var(--f-sans); text-align: left;
  color: var(--inchiostro); border-radius: 4px;
}
.s-nav .nav-switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: var(--r-pill); border: 1.5px solid var(--inchiostro); transition: background-color .2s; }
.s-nav .nav-switch span { position: absolute; top: 3.5px; left: 3.5px; width: 18px; height: 18px; border-radius: 50%; background: var(--inchiostro); transition: transform .25s var(--ease-out), background-color .2s; }
.s-nav .nav-menu__reduced[aria-pressed="true"] .nav-switch { background: var(--inchiostro); }
.s-nav .nav-menu__reduced[aria-pressed="true"] .nav-switch span { transform: translateX(18px); background: var(--giallo); }

/* desktop stretto: le ancore restano centrate e non toccano la pill */
@media (min-width: 900px) and (max-width: 1199px) { .s-nav .nav-star { margin: 0 12px; } }
@media (min-width: 900px) and (max-width: 1023px) { .s-nav .nav-call__n { display: none; } }

/* ---- barra mobile fissa: Chiama · Indicazioni · Instagram ---- */
.s-nav .nav-bar { display: none; }

@media (max-width: 899px) {
  .s-nav .nav-head__in { display: flex; justify-content: space-between; gap: 12px; }
  .s-nav .nav-links { display: none; }
  .s-nav .nav-logo img { height: 40px; }
  .s-nav .nav-call { padding: 0 18px 0 15px; gap: 8px; }
  .s-nav .nav-call__n { display: none; }
  .s-nav .nav-burger { display: grid; }
  .s-nav .nav-motion { display: none; }
  /* quando c'è la barra in basso, il «Chiama» dell'header si fa da parte: uno solo a schermo */
  .s-nav.bar-on .nav-call { opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }

  .s-nav .nav-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
    display: flex; align-items: center; gap: 6px;
    height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) 8px;
    background: color-mix(in srgb, var(--lavagna-2) 95%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 var(--gesso-15);
    transform: translateY(calc(100% + 12px)); visibility: hidden;
    transition: transform .3s cubic-bezier(.32, 0, .67, 0), visibility 0s linear .3s;
  }
  /* il rimbalzo (back.out) non deve mai scoprire il bordo inferiore */
  .s-nav .nav-bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; background: inherit; }
  .s-nav .nav-bar.is-on { transform: none; visibility: visible; transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), visibility 0s; }
  .s-nav .nav-bar__call {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
    border-radius: var(--r-pill); background: var(--giallo); color: var(--inchiostro); font: 700 15px/1 var(--f-sans); white-space: nowrap;
  }
  .s-nav .nav-bar__call:active { transform: scale(.97); }
  .s-nav .nav-bar__n { font-size: 14px; letter-spacing: .01em; padding-left: 9px; border-left: 1.5px solid color-mix(in srgb, var(--inchiostro) 28%, transparent); }
  .s-nav .nav-bar__alt {
    flex: none; width: 70px; height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border-radius: 12px; color: var(--gesso); font: 500 12px/1 var(--f-sans); letter-spacing: 0;
  }
  .s-nav .nav-bar__alt:active { background: var(--gesso-15); }
}
@media (max-width: 370px) {
  .s-nav .nav-bar__n { display: none; }
}

/* ==== src/sections/02-hero/section.css ==== */
/* ============ 02 HERO — «Lato A»: la Nobel-vinile da scratchare + uscita «Si taglia» ============
   Struttura: .s-hero (binario alto in svh) > .s-hero__stage (sticky 100svh) > parole d'uscita + griglia (copy · disco · CTA).
   Disco: .deck (layout, scala d'ingresso) > .move (uscita: x/y/scala) > .tilt (uscita: rotateX) > .ptr (tilt verso il puntatore)
          > .vinyl (solchi, fermo) + .spin (ruota: scritta + pizza + spicchi) + .shine (riflesso, NON ruota col disco). */

.s-hero {
  --deck: min(42vw, calc(100svh - var(--nav-h) - 168px), 640px);
  --h1: min(8vw, 16svh, 115px);
  --word: min(8.4vw, 14svh, 132px);
  position: relative;
  background: var(--lavagna);
  color: var(--gesso);
}
/* il binario per l'uscita esiste solo con JS e movimento pieno */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-reduced) .s-hero { height: 185vh; height: 185svh; }
  html.js:not(.is-reduced) .s-hero__stage { position: sticky; top: 0; }
}

.s-hero__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  overflow: clip;
  isolation: isolate;
}

/* ---------- griglia ---------- */
.s-hero__grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--gap);
  padding-top: var(--nav-h);
}
.s-hero__copy { grid-column: 1 / 7; grid-row: 2; }
.s-hero__ctas { grid-column: 1 / 7; grid-row: 3; }
.s-hero__deckcol {
  grid-column: 7 / 13; grid-row: 1 / 5;
  align-self: center; justify-self: center;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 18px;
}

/* ---------- testi ---------- */
.s-hero__over { color: var(--neon); font-size: 13px; letter-spacing: .18em; }
.s-hero__over-2 { white-space: nowrap; }

.s-hero__title {
  margin: 26px 0 30px;
  font: 400 var(--h1) / .88 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .004em;
}
.s-hero__title .sr-only { text-transform: none; }   /* nome del landmark e dell'H1 letto com'è scritto */
.s-hero__lines, .s-hero__l { display: block; }
.s-hero__l { white-space: nowrap; }
.s-hero__l2 { margin-top: .02em; }
.s-hero__w { display: inline-block; transform-origin: 50% 92%; }
.s-hero__w .sc { transform-origin: 50% 92%; }
.s-hero__amp {
  display: inline-block;
  font-size: 1.16em;
  line-height: 0;
  transform-origin: 50% 70%;
}
.s-hero__amp--d { margin-right: .17em; }
.s-hero__amp--m { display: none; margin-left: .14em; }

.s-hero__lead {
  max-width: 35ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: rgba(238, 234, 224, .8);
  text-wrap: pretty;
}
.s-hero__lead-m { display: none; }

/* ---------- CTA ---------- */
.s-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 38px; }
.s-hero__call { min-height: 60px; padding: 0 28px 0 22px; gap: 14px; }
.s-hero__call svg { width: 22px; height: 22px; }
.s-hero__call-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.s-hero__call-k { font: 700 12px/1 var(--f-sans); letter-spacing: .09em; text-transform: uppercase; }
.s-hero__call-n { font-size: 19px; line-height: 1; letter-spacing: .01em; }
.s-hero__maps { min-height: 60px; padding: 0 26px 0 22px; }
.s-hero__ig {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 6px;
  font: 500 15px/1 var(--f-sans);
  color: rgba(238, 234, 224, .82);
  text-decoration: underline; text-decoration-color: rgba(238, 234, 224, .28); text-underline-offset: 5px; text-decoration-thickness: 1px;
  transition: color .2s, text-decoration-color .2s;
}
.s-hero__ig svg { width: 19px; height: 19px; flex: none; }
.s-hero__ig:hover { color: var(--gesso); text-decoration-color: var(--giallo); }

/* ---------- il disco ---------- */
.s-hero__deck {
  position: relative;
  width: var(--deck);
  aspect-ratio: 1;
  flex: none;
  touch-action: pan-y pinch-zoom; /* scroll verticale e zoom restano SEMPRE del browser */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.s-hero__deck.is-scratching { cursor: grabbing; }
.s-hero__move, .s-hero__tilt, .s-hero__ptr, .s-hero__spin { position: absolute; inset: 0; }
.s-hero__move, .s-hero__tilt, .s-hero__ptr { transform-style: flat; }
.s-hero__spin { border-radius: 50%; }

/* luce calda dietro il disco (statica) */
.s-hero__glow {
  position: absolute; inset: -24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(238, 234, 224, .075), rgba(238, 234, 224, .03) 52%, rgba(238, 234, 224, 0));
  pointer-events: none;
}

/* vinile: fermo (i solchi sono a simmetria radiale: non serve farli girare) */
.s-hero__vinyl {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    /* bordo: piccolo labbro rialzato */
    radial-gradient(circle closest-side, rgba(0,0,0,0) 97.1%, rgba(238,234,224,.2) 97.9%, #0d0f0e 98.7%, #070807 99.6%, rgba(0,0,0,0) 100%),
    /* pause tra le tracce */
    radial-gradient(circle closest-side, rgba(0,0,0,0) 86.4%, #0e100f 86.8%, #0e100f 87.7%, rgba(0,0,0,0) 88.1%),
    radial-gradient(circle closest-side, rgba(0,0,0,0) 92.2%, #0e100f 92.6%, #0e100f 93.3%, rgba(0,0,0,0) 93.7%),
    /* ombra della pizza + fascia liscia dell'etichetta (dove corre la scritta) */
    radial-gradient(circle closest-side, rgba(0,0,0,.65) 69%, rgba(0,0,0,0) 76%),
    radial-gradient(circle closest-side, #111412 0, #111412 80.4%, rgba(238,234,224,.13) 80.8%, rgba(0,0,0,0) 81.4%),
    /* solchi */
    repeating-radial-gradient(circle closest-side, #090a09 0, #090a09 1.1px, #1c201d 1.75px, #090a09 2.7px),
    #0b0c0b;
  box-shadow: 0 38px 80px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(238, 234, 224, .05);
}

/* scritta circolare sul bordo dell'etichetta */
.s-hero__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.s-hero__ring text { font: 500 22px var(--f-sans); fill: rgba(238, 234, 224, .62); letter-spacing: 0; }

/* la pizza: raggio .72 del vinile (box 74,2% × disco 97% della foto) */
.s-hero__pizza, .s-hero__slices, .s-hero__cuts {
  position: absolute;
  left: 12.9%; top: 12.9%; width: 74.2%; height: 74.2%;
}
.s-hero__pizza, .s-hero__sli img {
  max-width: none;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 96.5%, rgba(0,0,0,0) 98.5%);
  mask-image: radial-gradient(circle closest-side, #000 96.5%, rgba(0,0,0,0) 98.5%);
}

/* riflesso a farfalla: NON ruota col disco (lo orienta la luce) */
.s-hero__shine {
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    conic-gradient(from -30deg,
      rgba(238,234,224,0) 0deg, rgba(238,234,224,.06) 10deg, rgba(238,234,224,.2) 22deg, rgba(238,234,224,.5) 29deg, rgba(238,234,224,.56) 30deg, rgba(238,234,224,.5) 31deg, rgba(238,234,224,.2) 38deg, rgba(238,234,224,.06) 50deg, rgba(238,234,224,0) 60deg,
      rgba(238,234,224,0) 180deg, rgba(238,234,224,.06) 190deg, rgba(238,234,224,.2) 202deg, rgba(238,234,224,.5) 209deg, rgba(238,234,224,.56) 210deg, rgba(238,234,224,.5) 211deg, rgba(238,234,224,.2) 218deg, rgba(238,234,224,.06) 230deg, rgba(238,234,224,0) 240deg,
      rgba(238,234,224,0) 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, rgba(0,0,0,0) 80.6%, rgba(0,0,0,.55) 81.6%, #000 90%, rgba(0,0,0,.7) 97%, rgba(0,0,0,0) 99%);
  mask-image: radial-gradient(circle closest-side, rgba(0,0,0,0) 80.6%, rgba(0,0,0,.55) 81.6%, #000 90%, rgba(0,0,0,.7) 97%, rgba(0,0,0,0) 99%);
  mix-blend-mode: normal;
  opacity: .42;
  transform: rotate(-38deg);
}

/* spicchi (creati dal JS lungo i tagli veri della foto): ogni .sl è il riquadro del suo settore (posizione/misure in linea),
   .sli lo ritaglia (overflow: clip) e dentro c'è l'immagine intera traslata con il clip-path del settore */
.s-hero__slices { visibility: hidden; pointer-events: none; }
.s-hero.is-cut .s-hero__slices { visibility: visible; }
.s-hero.is-cut .s-hero__pizza { visibility: hidden; }
.s-hero__sl { position: absolute; }
.s-hero__sli { position: absolute; inset: 0; overflow: clip; }
.s-hero__sli img { position: absolute; }
.s-hero__slices.is-baked .s-hero__sli img { -webkit-mask-image: none; mask-image: none; }  /* 640 px: alone già tolto nell'alfa */
.s-hero.is-cut .s-hero__sli { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
/* pre-riscaldamento (hero in vista, dopo l'intro): layer del disco già pronti e spicchi presenti ma invisibili,
   così il primo «Si taglia» non crea e rasterizza tutto nel frame in cui parte */
.s-hero.is-warm .s-hero__slices { visibility: visible; opacity: .001; }
.s-hero.is-warm.is-cut .s-hero__slices { opacity: 1; }
.s-hero.is-warm :is(.s-hero__move, .s-hero__tilt, .s-hero__vinyl, .s-hero__sl),
.s-hero.is-cut .s-hero__sl { will-change: transform; }
/* copy e CTA usciti (solo opacità, restano nel Tab): niente tap/click invisibili */
.s-hero.is-out :is(.s-hero__copy, .s-hero__ctas) { pointer-events: none; }
.s-hero__cuts { pointer-events: none; }
.s-hero__cut {
  position: absolute; left: 50%; top: 50%;
  width: 48.6%; height: 1.5px; margin-top: -.75px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(238,234,224,0), rgba(238,234,224,.85) 35%, #fff);
  border-radius: 2px;
}

/* braccio */
.s-hero__armwrap { position: absolute; inset: 0; pointer-events: none; transform-origin: 95.5% 2.5%; }
.s-hero__armsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.s-hero__wiki path { opacity: 0; }

/* nota a gesso + suggerimento */
.s-hero__note {
  position: absolute; right: -5%; bottom: -8%;
  font: italic 400 var(--fs-note) / 1 var(--f-serif);
  color: var(--gesso);
  white-space: nowrap;
  pointer-events: none;
}
.s-hero__note-in { display: inline-block; transform: rotate(-4deg); text-align: right; line-height: .96; }
.s-hero__hint {
  margin-top: 30px;
  align-self: flex-start;
  margin-left: 3%;
  font: 500 13px/1.2 var(--f-sans);
  letter-spacing: .05em;
  color: rgba(238, 234, 224, .62);
}
.s-hero__hint-in { display: inline-flex; align-items: center; gap: 10px; }
.s-hero__hint svg { width: 18px; height: 18px; flex: none; color: var(--giallo); }

/* parole d'uscita (solo JS, movimento pieno) */
.s-hero__words {
  position: absolute; inset: 0;
  z-index: 1;
  display: grid; place-items: center;
  pointer-events: none;
}
.s-hero__word {
  grid-area: 1 / 1;
  visibility: hidden;
  font: 400 var(--word) / .86 var(--f-display);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--gesso);
}
.s-hero__dot { color: var(--giallo); }

/* ---------- mobile / tablet ---------- */
@media (max-width: 899px) {
  .s-hero {
    --h1: min(18.6vw, 9.2svh, 112px);
    --word: min(16.4vw, 8.6svh, 96px);
  }
  .s-hero__stage { min-height: 560px; }
  .s-hero__grid {
    display: flex; flex-direction: column;
    padding-top: calc(var(--nav-h) + 14px);
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .s-hero__over { font-size: 12px; letter-spacing: .16em; line-height: 1.45; }
  .s-hero__over-sep { display: none; }
  .s-hero__over-2 { display: block; }
  .s-hero__title { margin: 12px 0 14px; }
  .s-hero__amp--d { display: none; }
  .s-hero__amp--m { display: inline-block; }
  .s-hero__lead { font-size: 17px; line-height: 1.45; max-width: 30ch; }
  .s-hero__lead-d { display: none; }
  .s-hero__lead-m { display: inline; }

  .s-hero__deckcol {
    flex: 1 1 0; min-height: 0;
    width: 100%;
    container-type: size;
    justify-content: center;
    padding-top: 0;
  }
  .s-hero__deck { width: min(84vw, calc(100cqh - 46px), 440px); }
  .s-hero__hint { margin-top: 16px; margin-left: 0; align-self: center; font-size: 14px; letter-spacing: .03em; }
  .s-hero__note { right: -6%; bottom: -3%; font-size: 20px; }

  .s-hero__ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 0; }
  .s-hero__call, .s-hero__maps { min-width: 0; min-height: 56px; padding: 0 12px; gap: 10px; }
  .s-hero__call svg { width: 20px; height: 20px; }
  .s-hero__call-k { font-size: 12px; letter-spacing: .05em; }
  .s-hero__call-n { font-size: 16px; }
  .s-hero__ig { display: none; }
}
/* telefoni stretti (320-374 px): la CTA «Chiama» prende lo spazio che le serve, «Portami lì» si stringe (senza icona);
   in ogni caso niente bottoni tagliati: le etichette possono andare a capo */
@media (max-width: 374px) {
  .s-hero__ctas { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .s-hero__call { padding: 0 10px; gap: 8px; }
  .s-hero__call svg { width: 18px; height: 18px; }
  .s-hero__maps { padding: 0 16px; }
  .s-hero__maps svg { display: none; }
  .s-hero__call, .s-hero__maps { white-space: normal; text-align: center; }
  .s-hero__call-n { white-space: nowrap; }
}
/* binario d'uscita più corto su mobile */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.is-reduced) .s-hero { height: 150vh; height: 150svh; }
}
/* telefono in orizzontale: 1svh è minuscolo (≈4 px), un binario «da verticale» farebbe passare le tre parole in 200 px */
@media (max-width: 999px) and (max-height: 540px) and (orientation: landscape) and (prefers-reduced-motion: no-preference) {
  html.js:not(.is-reduced) .s-hero { height: 175vh; height: 175svh; }
}
/* schermi bassi (iPhone SE e simili) */
@media (max-width: 899px) and (max-height: 700px) {
  .s-hero__title { margin: 10px 0 10px; }
  .s-hero__lead { font-size: 16px; }
  .s-hero__hint { margin-top: 10px; }
  .s-hero__call, .s-hero__maps { min-height: 52px; }
}
/* telefono in orizzontale: due colonne, tutto dentro i ~390px di altezza */
@media (max-width: 999px) and (max-height: 540px) and (orientation: landscape) {
  .s-hero { --h1: min(8.4vw, 16svh); --word: min(8vw, 12svh, 80px); }
  .s-hero__stage { min-height: 0; }
  .s-hero__grid {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    column-gap: 24px; padding-top: calc(var(--nav-h) + 4px); padding-bottom: 12px;
  }
  .s-hero__copy { grid-column: 1; grid-row: 2; }
  .s-hero__ctas { grid-column: 1; grid-row: 3; margin-top: 14px; }
  .s-hero__deckcol { grid-column: 2; grid-row: 1 / 5; align-self: center; container-type: normal; flex: none; }
  .s-hero__deck { width: min(40vw, calc(100svh - var(--nav-h) - 36px)); }
  .s-hero__over-sep { display: inline; }
  .s-hero__over-2 { display: inline; }
  .s-hero__over { font-size: 12px; letter-spacing: .12em; }
  .s-hero__title { margin: 8px 0 8px; }
  .s-hero__lead { font-size: 15px; }
  .s-hero__hint { display: none; }
  .s-hero__note { font-size: 16px; }
}
/* desktop basso */
@media (min-width: 900px) and (max-height: 760px) {
  .s-hero__title { margin: 18px 0 22px; }
  .s-hero__ctas { margin-top: 28px; }
  .s-hero__hint { margin-top: 18px; }
}

/* ---------- stati iniziali dell'intro (niente lampo: valgono prima che il JS prenda il controllo) ----------
   H1 e immagine del disco restano SEMPRE visibili (LCP): il disco parte solo un po' più piccolo e ruotato. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.is-reduced) .s-hero:not(.s-hero--on) :is(.s-hero__over, .s-hero__lead, .s-hero__ctas > *, .s-hero__hint-in, .s-hero__note-in) {
    opacity: 0; transform: translateY(16px);
    animation: s-hero-failsafe .01s 6.5s forwards;
  }
  html.js:not(.is-reduced) .s-hero:not(.s-hero--on) .s-hero__note-in { transform: translateY(16px) rotate(-4deg); animation-name: s-hero-failsafe-note; }
  html.js:not(.is-reduced) .s-hero:not(.s-hero--on) .s-hero__deck { transform: scale(.92); animation: s-hero-failsafe .01s 6.5s forwards; }
  html.js:not(.is-reduced) .s-hero:not(.s-hero--on) .s-hero__spin { transform: rotate(-120deg); animation: s-hero-failsafe .01s 6.5s forwards; }
  html.js:not(.is-reduced) .s-hero:not(.s-hero--on) .s-hero__arm { transform-box: view-box; transform-origin: 95.5px 2.5px; transform: rotate(-24deg); animation: s-hero-failsafe .01s 6.5s forwards; }
  html.js:not(.is-reduced) .s-hero:not(.s-hero--on) .s-hero__amp { transform: scale(.6) rotate(-20deg); animation: s-hero-failsafe .01s 6.5s forwards; }
}
@keyframes s-hero-failsafe { to { opacity: 1; transform: none; } }
@keyframes s-hero-failsafe-note { to { opacity: 1; transform: rotate(-4deg); } }

/* ==== src/sections/03-nastri/section.css ==== */
/* ============ 03 NASTRI — due nastri incrociati (A giallo hazard, B rosso STOP) legati allo scroll ============ */
.s-nastri {
  --tape-h: 64px;
  --tape-fs: 36px;
  --tape-fs-b: 32px;
  --hz: 9px;                 /* altezza delle strisce hazard */
  position: relative;
  z-index: 1;
  height: 248px;
  background: var(--lavagna);
  overflow: clip;            /* i nastri sono larghi 120vw: niente scroll orizzontale */
}
.s-nastri .nastri__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-nastri .nastri__band { position: absolute; inset: 0; }

.s-nastri .nastri__tape {
  position: absolute;
  left: -10vw;
  width: 120vw;
  top: 50%;
  height: var(--tape-h);
  margin-top: calc(var(--tape-h) / -2);
}
.s-nastri .nastri__tape--a { transform: translateY(-6px) rotate(-5deg); z-index: 2; }
.s-nastri .nastri__tape--b { transform: translateY(8px) rotate(4.5deg); z-index: 1; }

/* desktop: una X aperta (l'incrocio cade un po' a sinistra del centro) → il nastro B sotto resta leggibile per ~2/3 della larghezza.
   mobile: i nastri convergono e si sovrappongono solo sul bordo sinistro, perché su 390px una X nasconderebbe quasi tutto B */
/* la striscia: colore del nastro, ombra sul muro, riflesso fisso (la plastica luccica anche quando scorre) */
.s-nastri .nastri__strip {
  position: relative;
  height: 100%;
  overflow: clip;
  background: var(--tape-bg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .22), 0 14px 26px -6px rgba(0, 0, 0, .6);
}
.s-nastri .nastri__strip::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .05) 22%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, .1) 100%);
}
.s-nastri .nastri__tape--a .nastri__strip { --tape-bg: var(--giallo); color: var(--inchiostro); }
.s-nastri .nastri__tape--b .nastri__strip { --tape-bg: var(--rosso); color: var(--gesso); }
/* B: due filetti gesso stampati come sul nastro segnaletico */
.s-nastri .nastri__tape--b .nastri__strip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 5px; pointer-events: none;
  border-top: 1.5px solid color-mix(in srgb, var(--gesso) 70%, transparent);
  border-bottom: 1.5px solid color-mix(in srgb, var(--gesso) 70%, transparent);
}

.s-nastri .nastri__track { height: 100%; }
.s-nastri .nastri__run {
  --tile: 28px;
  position: relative;
  display: flex;
  width: max-content;
  height: 100%;
  margin: 0;
  white-space: nowrap;
}
/* strisce hazard sui bordi del nastro A: si muovono col testo (sono stampate sul nastro) */
.s-nastri .nastri__tape--a .nastri__run::before,
.s-nastri .nastri__tape--a .nastri__run::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--hz); pointer-events: none;
  background-image: linear-gradient(135deg, var(--inchiostro) 25%, transparent 25%, transparent 50%, var(--inchiostro) 50%, var(--inchiostro) 75%, transparent 75%);
  background-size: var(--tile) var(--tile);
}
.s-nastri .nastri__tape--a .nastri__run::before { top: 0; }
.s-nastri .nastri__tape--a .nastri__run::after { bottom: 0; background-position: calc(var(--tile) / 2) 0; }

.s-nastri .nastri__copy {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-left: .5em;
  font: 400 var(--tape-fs)/1 var(--f-display);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.s-nastri .nastri__tape--b .nastri__copy { font-size: var(--tape-fs-b); }
.s-nastri .nastri__it { display: inline-block; padding-top: .04em; }
.s-nastri .nastri__amp { font-family: var(--f-serif); font-style: italic; text-transform: none; font-size: 1.12em; line-height: 0; padding: 0 .04em; }
.s-nastri .nastri__num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .94em; letter-spacing: -.01em; }

/* separatore = le tre stelline del logo (verde · gesso · rosso) con il contorno inchiostro */
.s-nastri .nastri__sep { display: inline-flex; align-items: center; margin: 0 .55em; }
.s-nastri .nastri__sep svg { width: auto; height: .56em; overflow: visible; }
.s-nastri .nastri__sep use { stroke: var(--inchiostro); stroke-width: 2.2px; stroke-linejoin: round; paint-order: stroke; }
.s-nastri .nastri__st--v { fill: var(--verde); }
.s-nastri .nastri__st--g { fill: var(--gesso); }
.s-nastri .nastri__st--r { fill: var(--rosso); }
.s-nastri .nastri__tape--b .nastri__sep use { stroke: var(--inchiostro); }

/* deriva lentissima solo quando la fascia è visibile (classe .is-live messa dal JS). Fuori vista l'animazione NON esiste
   (non solo in pausa): un'animazione di transform anche ferma tiene il layer composito e fa promuovere per «overlap» tutte
   le sezioni che seguono. Il salto della deriva al rientro avviene fuori schermo (margine di 80px). */
.s-nastri.is-anim.is-live .nastri__run { animation: nastri-drift-a var(--dur, 90s) linear infinite; will-change: transform; }
.s-nastri.is-anim.is-live .nastri__tape--b .nastri__run { animation-name: nastri-drift-b; }
.s-nastri.is-live .nastri__track { will-change: transform; }
@keyframes nastri-drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100% / var(--k, 2)), 0, 0); } }
@keyframes nastri-drift-b { from { transform: translate3d(calc(-100% / var(--k, 2)), 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (max-width: 899px) {
  .s-nastri { --tape-h: 48px; --tape-fs: 22px; --tape-fs-b: 21px; --hz: 7px; height: 172px; }
  .s-nastri .nastri__tape--a { transform: translateY(-24px) rotate(-4.5deg); }
  .s-nastri .nastri__tape--b { transform: translateY(26px) rotate(2.5deg); }
  .s-nastri .nastri__run { --tile: 22px; }
}

/* ---- movimento ridotto (anche «riduci movimento» del sistema: la shell mette .is-reduced prima del primo paint):
   nastri quasi dritti, una sola copia che va a capo voce per voce → si leggono tutte e 12 le voci, a ogni larghezza ---- */
html.is-reduced .s-nastri { height: auto; padding: clamp(40px, 5vw, 64px) 0; }
html.is-reduced .s-nastri .nastri__band { position: relative; inset: auto; display: grid; row-gap: clamp(14px, 1.6vw, 22px); }
html.is-reduced .s-nastri .nastri__tape { position: relative; top: auto; left: auto; width: auto; height: auto; margin: 0 -3vw; }
html.is-reduced .s-nastri .nastri__tape--a { transform: rotate(-1.4deg); }
html.is-reduced .s-nastri .nastri__tape--b { transform: rotate(1.1deg); }
html.is-reduced .s-nastri .nastri__strip { height: auto; }
html.is-reduced .s-nastri .nastri__track { height: auto; }
html.is-reduced .s-nastri .nastri__run { width: auto; height: auto; white-space: normal; }
html.is-reduced .s-nastri .nastri__copy[data-clone] { display: none; }
html.is-reduced .s-nastri .nastri__copy {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: .3em;
  width: 100%; height: auto; line-height: 1;
  padding: calc(var(--hz) + .42em) calc(3vw + var(--pad-x));
}
html.is-reduced .s-nastri .nastri__it { white-space: nowrap; }
html.is-reduced .s-nastri .nastri__copy > .nastri__sep:last-child { display: none; }

/* ==== src/sections/04-chi-suona/section.css ==== */
/* ============ 04 CHI SUONA — retro dell'LP su cartone kraft: split-flap 2006→2026, timbro, polaroid, crediti, lavagnetta ============ */
.s-chi-suona {
  /* bordi strappati (profili generati: fibra chiara sopra, kraft sotto) */
  --chi-edge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='30' viewBox='0 0 720 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0.0 17.0 L6.6 17.4 L13.3 17.4 L17.8 17.4 L27.2 14.7 L30.9 17.1 L34.2 20.2 L42.5 20.3 L45.6 19.9 L50.1 22.7 L57.8 19.7 L63.2 16.1 L71.4 15.6 L81.9 13.2 L90.9 9.0 L100.7 9.7 L110.5 9.0 L120.8 10.2 L126.9 9.0 L136.2 9.0 L141.8 13.4 L145.8 12.4 L149.3 15.2 L156.7 15.2 L165.6 13.1 L169.5 13.3 L174.7 17.0 L180.1 19.5 L186.3 21.3 L190.1 23.6 L195.1 24.2 L200.5 20.2 L208.2 18.0 L214.1 17.5 L221.0 17.9 L225.5 15.5 L235.0 14.2 L243.9 17.5 L254.5 19.9 L260.9 21.5 L269.5 19.2 L277.3 17.4 L286.1 14.6 L293.6 17.3 L298.8 19.9 L301.9 17.9 L305.4 15.7 L313.0 13.6 L323.1 17.2 L331.6 17.7 L334.9 14.5 L343.5 12.5 L352.4 12.1 L356.0 13.3 L366.2 15.5 L375.5 18.4 L384.0 20.7 L390.3 21.9 L397.9 21.8 L405.6 21.7 L413.7 24.0 L422.5 22.0 L430.2 20.7 L433.8 16.2 L438.7 17.6 L446.6 20.2 L449.7 18.4 L454.3 16.0 L462.6 15.8 L468.2 17.1 L474.7 19.0 L484.7 17.9 L490.2 15.4 L499.9 17.9 L510.5 16.3 L517.1 15.0 L523.4 16.2 L529.0 18.5 L535.6 9.5 L540.8 9.9 L548.4 12.1 L552.9 14.7 L562.1 17.0 L566.0 14.5 L574.1 14.1 L578.7 16.7 L587.4 18.4 L590.7 16.4 L598.1 19.4 L609.0 16.8 L617.6 15.0 L627.8 14.7 L632.3 23.0 L640.6 20.0 L650.1 20.4 L654.8 22.3 L665.6 21.6 L671.2 23.4 L677.0 19.2 L684.4 19.7 L687.6 19.9 L697.0 17.9 L706.3 16.8 L713.4 17.1 L720.0 17.0 L720 30Z'/%3E%3C/svg%3E");
  --chi-rim-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='30' viewBox='0 0 720 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0.0 12.0 L6.6 12.3 L13.3 12.2 L17.8 12.0 L27.2 12.4 L30.9 12.1 L34.2 17.8 L42.5 16.5 L45.6 17.3 L50.1 17.6 L57.8 17.4 L63.2 12.8 L71.4 13.2 L81.9 8.8 L90.9 6.3 L100.7 4.8 L110.5 6.4 L120.8 8.1 L126.9 6.7 L136.2 7.0 L141.8 8.0 L145.8 10.0 L149.3 10.4 L156.7 11.3 L165.6 10.5 L169.5 10.4 L174.7 13.0 L180.1 17.1 L186.3 18.0 L190.1 20.4 L195.1 18.9 L200.5 17.1 L208.2 14.8 L214.1 15.0 L221.0 12.8 L225.5 11.9 L235.0 9.7 L243.9 14.9 L254.5 17.6 L260.9 16.9 L269.5 17.0 L277.3 13.7 L286.1 10.1 L293.6 14.5 L298.8 16.9 L301.9 15.9 L305.4 11.7 L313.0 9.5 L323.1 14.2 L331.6 14.5 L334.9 11.2 L343.5 9.0 L352.4 8.9 L356.0 9.0 L366.2 11.6 L375.5 15.4 L384.0 16.5 L390.3 17.4 L397.9 18.7 L405.6 18.2 L413.7 20.0 L422.5 19.9 L430.2 17.9 L433.8 12.0 L438.7 13.5 L446.6 17.9 L449.7 14.2 L454.3 11.7 L462.6 12.3 L468.2 12.8 L474.7 16.4 L484.7 12.6 L490.2 12.9 L499.9 15.7 L510.5 12.7 L517.1 12.3 L523.4 11.8 L529.0 13.2 L535.6 6.3 L540.8 7.4 L548.4 9.4 L552.9 12.2 L562.1 11.6 L566.0 11.8 L574.1 11.2 L578.7 12.9 L587.4 14.3 L590.7 13.4 L598.1 14.8 L609.0 14.7 L617.6 11.1 L627.8 9.9 L632.3 20.8 L640.6 15.7 L650.1 18.0 L654.8 17.2 L665.6 16.3 L671.2 20.2 L677.0 15.3 L684.4 14.7 L687.6 16.0 L697.0 14.3 L706.3 11.4 L713.4 14.8 L720.0 11.8 L720 30Z'/%3E%3C/svg%3E");
  --chi-edge-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='30' viewBox='0 0 720 30' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 30) scale(1 -1)' d='M0 30 L0.0 17.0 L10.4 19.9 L14.1 19.9 L21.3 17.0 L27.9 15.3 L31.1 12.9 L37.4 13.7 L43.3 11.5 L51.0 13.5 L61.8 13.2 L67.7 14.4 L73.2 12.2 L82.0 13.6 L90.1 12.2 L95.7 15.1 L99.6 19.7 L104.9 19.8 L115.1 19.6 L121.7 17.3 L129.7 14.8 L136.6 14.1 L145.6 12.1 L152.2 10.0 L158.3 9.1 L161.4 9.0 L164.9 13.3 L168.6 10.9 L175.5 9.0 L182.9 12.1 L188.3 10.3 L196.5 12.8 L201.4 11.0 L204.5 13.7 L210.8 12.2 L220.3 10.3 L230.5 13.1 L236.9 12.5 L244.8 10.4 L248.0 9.3 L256.8 10.2 L265.1 10.4 L269.0 14.1 L278.4 17.7 L284.1 14.6 L293.1 14.4 L296.3 15.8 L307.0 15.5 L314.7 18.9 L319.2 18.8 L330.1 16.7 L340.2 21.8 L345.6 19.8 L351.0 22.2 L357.1 20.8 L363.9 20.4 L369.1 17.2 L374.2 19.4 L378.1 18.7 L385.6 18.1 L390.7 20.1 L401.6 15.6 L407.5 13.6 L411.2 15.7 L419.6 14.6 L430.0 16.0 L440.8 18.8 L443.9 19.2 L452.8 18.6 L460.3 20.1 L468.2 20.1 L472.2 16.9 L476.9 16.5 L484.8 16.8 L491.3 15.9 L500.3 18.9 L510.4 21.6 L514.4 20.0 L524.1 16.5 L532.9 18.3 L537.5 17.4 L543.1 16.9 L550.8 16.4 L556.3 17.6 L560.7 19.5 L571.4 19.3 L577.8 19.6 L588.7 20.1 L592.2 21.8 L598.3 23.1 L608.8 23.1 L618.8 23.4 L629.7 23.9 L636.4 24.2 L642.8 24.1 L652.2 14.8 L656.7 14.2 L661.9 13.3 L669.2 15.9 L680.0 13.0 L687.5 16.4 L696.0 18.6 L699.9 19.6 L703.8 19.5 L707.5 18.9 L718.1 17.9 L720.0 17.0 L720 30Z'/%3E%3C/svg%3E");
  --chi-rim-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='30' viewBox='0 0 720 30' preserveAspectRatio='none'%3E%3Cpath transform='translate(0 30) scale(1 -1)' d='M0 30 L0.0 14.2 L10.4 14.7 L14.1 17.0 L21.3 14.1 L27.9 11.2 L31.1 8.5 L37.4 11.5 L43.3 7.0 L51.0 9.2 L61.8 8.4 L67.7 10.3 L73.2 7.5 L82.0 10.6 L90.1 9.4 L95.7 10.7 L99.6 15.5 L104.9 14.4 L115.1 14.9 L121.7 13.4 L129.7 12.6 L136.6 8.6 L145.6 9.0 L152.2 5.8 L158.3 6.0 L161.4 4.5 L164.9 10.0 L168.6 8.5 L175.5 3.5 L182.9 7.1 L188.3 8.3 L196.5 9.6 L201.4 6.6 L204.5 11.0 L210.8 7.2 L220.3 7.4 L230.5 10.4 L236.9 7.9 L244.8 6.8 L248.0 7.0 L256.8 7.1 L265.1 7.9 L269.0 8.7 L278.4 14.3 L284.1 9.6 L293.1 9.5 L296.3 13.3 L307.0 12.3 L314.7 14.5 L319.2 13.3 L330.1 11.7 L340.2 18.0 L345.6 17.1 L351.0 16.9 L357.1 15.9 L363.9 15.7 L369.1 12.1 L374.2 15.2 L378.1 14.1 L385.6 13.3 L390.7 15.6 L401.6 13.1 L407.5 10.2 L411.2 12.3 L419.6 10.1 L430.0 10.7 L440.8 13.6 L443.9 16.5 L452.8 13.3 L460.3 16.1 L468.2 16.3 L472.2 13.9 L476.9 11.2 L484.8 12.4 L491.3 12.7 L500.3 16.4 L510.4 18.5 L514.4 16.9 L524.1 11.5 L532.9 15.9 L537.5 14.3 L543.1 14.1 L550.8 11.2 L556.3 15.2 L560.7 15.4 L571.4 15.0 L577.8 14.6 L588.7 16.9 L592.2 17.2 L598.3 19.1 L608.8 19.9 L618.8 18.8 L629.7 21.7 L636.4 20.7 L642.8 18.9 L652.2 11.5 L656.7 10.0 L661.9 8.4 L669.2 11.9 L680.0 8.3 L687.5 11.7 L696.0 15.0 L699.9 16.6 L703.8 15.8 L707.5 14.4 L718.1 15.5 L720.0 14.4 L720 30Z'/%3E%3C/svg%3E");
  --edge: 30px;
  --ink: var(--inchiostro);
  --ink-2: color-mix(in srgb, var(--inchiostro) 76%, var(--kraft));
  --rim: color-mix(in srgb, var(--kraft) 52%, var(--gesso));
  --chi-timbro: color-mix(in srgb, var(--rosso-testo) 76%, var(--inchiostro));   /* ≈ #85261F: ~4:1 sul kraft (testo grande) */
  position: relative;
  isolation: isolate;
  color: var(--ink);
  padding: calc(var(--edge) + clamp(76px, 9vw, 136px)) 0 calc(var(--edge) + clamp(72px, 8vw, 124px));
}
.s-chi-suona .chi__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.s-chi-suona :focus-visible { outline-color: var(--inchiostro); }

/* ---- il cartone: bordo «fibroso» più chiaro + kraft, entrambi strappati con una maschera SVG sopra e sotto ---- */
.s-chi-suona .chi__paper {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--rim);
  -webkit-mask: var(--chi-rim-top) left top / 720px var(--edge) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 4px) no-repeat, var(--chi-rim-bot) left bottom / 720px var(--edge) repeat-x;
  mask: var(--chi-rim-top) left top / 720px var(--edge) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 4px) no-repeat, var(--chi-rim-bot) left bottom / 720px var(--edge) repeat-x;
}
.s-chi-suona .chi__paper::before {
  content: ""; position: absolute; inset: 0;
  background:
    /* l'alone ad anello del disco sulla busta (consumo del cartone) */
    radial-gradient(circle closest-side, transparent 0 93%, rgba(255, 244, 222, .16) 95.5%, rgba(255, 244, 222, .05) 97.5%, transparent 99.5%) var(--ring-x, calc(50% + 340px)) var(--ring-y, 60px) / var(--ring, 880px) var(--ring, 880px) no-repeat,
    radial-gradient(ellipse at 18% 8%, rgba(255, 240, 210, .14), transparent 55%),
    radial-gradient(ellipse at 90% 96%, rgba(60, 30, 10, .16), transparent 60%),
    url("../img/chi-kraft.webp") 0 0 / 512px 512px,
    var(--kraft);
  -webkit-mask: var(--chi-edge-top) left top / 720px var(--edge) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 4px) no-repeat, var(--chi-edge-bot) left bottom / 720px var(--edge) repeat-x;
  mask: var(--chi-edge-top) left top / 720px var(--edge) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--edge) + 4px) no-repeat, var(--chi-edge-bot) left bottom / 720px var(--edge) repeat-x;
}

/* ================= LATO 1 ================= */
.s-chi-suona .chi__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}
.s-chi-suona .chi__head { grid-column: 7 / 13; grid-row: 1; align-self: end; }
.s-chi-suona .chi__cal { grid-column: 1 / 7; grid-row: 1 / 3; }
.s-chi-suona .chi__story { grid-column: 7 / 13; grid-row: 2; align-self: start; margin-top: clamp(28px, 3vw, 44px); }

.s-chi-suona .chi__kicker { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(16px, 1.6vw, 24px); color: var(--ink-2); }
.s-chi-suona .chi__stars { width: auto; height: 15px; overflow: visible; flex: none; }
.s-chi-suona .chi__stars use, .s-chi-suona .chi__stars { stroke: var(--inchiostro); stroke-width: 2.4px; stroke-linejoin: round; paint-order: stroke; }
.s-chi-suona .chi__st--v { fill: var(--verde); }
.s-chi-suona .chi__st--g { fill: var(--gesso); }
.s-chi-suona .chi__st--r { fill: var(--rosso); }

.s-chi-suona .chi__title {
  font: 400 var(--fs-h2)/.88 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--ink);
}
.s-chi-suona .chi__tl { display: block; overflow: clip; padding-top: .08em; margin-top: -.08em; }
.s-chi-suona .chi__tl > span { display: block; }
.s-chi-suona .chi__tl + .chi__tl { padding-left: .62em; }

.s-chi-suona .chi__lead { font-size: var(--fs-lead); line-height: 1.52; max-width: 33em; color: var(--ink); text-wrap: pretty; }
.s-chi-suona .chi__quote { margin-top: clamp(26px, 2.6vw, 38px); padding-top: 22px; position: relative; max-width: 30em; }
.s-chi-suona .chi__quote::before { content: ""; position: absolute; left: 0; top: 0; width: 48px; height: 2px; background: var(--ink); }
.s-chi-suona .chi__quote blockquote { margin: 0; }
.s-chi-suona .chi__quote blockquote p { font: italic 400 clamp(28px, 2.6vw, 40px)/1.1 var(--f-serif); color: var(--ink); text-wrap: balance; }
.s-chi-suona .chi__quote figcaption { margin-top: 12px; font: 500 14px/1.4 var(--f-sans); color: var(--ink-2); letter-spacing: .01em; }

/* ---- split-flap «FORNI ACCESI DAL» (tipo il calendario «TODAY IS» del bancone) ---- */
.s-chi-suona .chi__cal { position: relative; justify-self: start; padding: 8px 0 calc(var(--cw) * 1.6); --cw: clamp(68px, 8.4vw, 128px); --g: clamp(7px, .7vw, 10px); }
.s-chi-suona .chi__flap {
  --flap: var(--lavagna-2);
  --flap-hi: color-mix(in srgb, var(--lavagna-2) 92%, var(--gesso));
  --flap-lo: color-mix(in srgb, var(--lavagna-2) 88%, #000);
  --pin: color-mix(in srgb, var(--lavagna) 70%, #000);
  position: relative;
  display: inline-flex; flex-direction: column; gap: var(--g);
  padding: calc(var(--g) * 1.5);
  border-radius: calc(var(--g) * 2);
  background: var(--rosso);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -3px 0 rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .18),
    0 2px 0 rgba(23, 18, 14, .35), 0 30px 46px -18px rgba(23, 18, 14, .65);
  transform: rotate(-1.2deg);
}
/* viti della cornice */
.s-chi-suona .chi__flap::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  background:
    radial-gradient(circle, rgba(0, 0, 0, .45) 0 1.6px, rgba(255, 255, 255, .25) 2.2px 2.8px, transparent 3.2px) left top / 8px 8px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, .45) 0 1.6px, rgba(255, 255, 255, .25) 2.2px 2.8px, transparent 3.2px) right top / 8px 8px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, .45) 0 1.6px, rgba(255, 255, 255, .25) 2.2px 2.8px, transparent 3.2px) left bottom / 8px 8px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, .45) 0 1.6px, rgba(255, 255, 255, .25) 2.2px 2.8px, transparent 3.2px) right bottom / 8px 8px no-repeat;
}
.s-chi-suona .chi__digits { display: flex; gap: var(--g); }
.s-chi-suona .chi__cell {
  position: relative; display: block;
  width: var(--cw); height: calc(var(--cw) * 1.38);
  border-radius: 8px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 6px 10px -4px rgba(0, 0, 0, .5);
  font: 700 calc(var(--cw) * 1.2)/1 var(--f-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--gesso);
}
.s-chi-suona .chi__cell--word {
  width: calc(var(--cw) * 4 + var(--g) * 3); height: calc(var(--cw) * .54);
  font: 400 calc(var(--cw) * .27)/1 var(--f-display);
  letter-spacing: .09em;
  text-transform: uppercase;
  border-radius: 6px;
}
/* cerniera + perni laterali */
.s-chi-suona .chi__cell::after { content: ""; position: absolute; z-index: 4; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: rgba(0, 0, 0, .7); }
.s-chi-suona .chi__cell::before {
  content: ""; position: absolute; z-index: 4; left: -3px; right: -3px; top: calc(50% - 7px); height: 14px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--pin) 0 5px, transparent 5px calc(100% - 5px), var(--pin) calc(100% - 5px));
}
.s-chi-suona .chi__cell--word::before { top: calc(50% - 5px); height: 10px; }
.s-chi-suona .chi__h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
/* il 3D (prospettiva + facce nascoste) esiste SOLO durante il conteggio: a riposo nessun layer composito in più */
.s-chi-suona .chi__flap.is-flapping .chi__cell { perspective: calc(var(--cw) * 4); }
.s-chi-suona .chi__flap.is-flapping .chi__cell--word { perspective: calc(var(--cw) * 6); }
.s-chi-suona .chi__flap.is-flapping .chi__h { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.s-chi-suona .chi__h--t { top: 0; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transform-origin: 50% 100%; background: linear-gradient(180deg, var(--flap-hi), var(--flap)); }
.s-chi-suona .chi__h--b { bottom: 0; border-radius: inherit; border-top-left-radius: 0; border-top-right-radius: 0; transform-origin: 50% 0; background: linear-gradient(180deg, var(--flap), var(--flap-lo)); }
.s-chi-suona .chi__cell { border-radius: 8px; }
.s-chi-suona .chi__h--ft, .s-chi-suona .chi__h--fb { z-index: 2; }
.s-chi-suona .chi__v { position: absolute; left: 0; right: 0; height: 200%; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.s-chi-suona .chi__h--t .chi__v { top: 0; }
.s-chi-suona .chi__h--b .chi__v { top: -100%; }
.s-chi-suona .chi__cell--word .chi__v { padding-top: .06em; }
.s-chi-suona .chi__sh { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.s-chi-suona .chi__h--ft .chi__sh { background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .65)); }
.s-chi-suona .chi__h--fb .chi__sh { background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .15)); }

/* ---- timbro «20 ANNI» ---- */
.s-chi-suona .chi__stamp {
  --sw: clamp(190px, 19vw, 290px);
  position: absolute; z-index: 5; right: calc(var(--cw) * -.78); top: calc(100% + var(--cw) * .1);   /* tutto sul cartone: il testo resta leggibile */
  width: var(--sw); aspect-ratio: 246 / 146;
  color: var(--chi-timbro);
  transform: rotate(-5deg);
  pointer-events: none;
}
.s-chi-suona .chi__ink {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--sw) * .035);
  text-transform: uppercase; text-align: center; line-height: 1;
  border: calc(var(--sw) * .018) solid currentColor; border-radius: calc(var(--sw) * .05);
  outline: calc(var(--sw) * .007) solid currentColor; outline-offset: calc(var(--sw) * -.045);
}
/* le maschere-immagine valgono solo via http(s): in file:// Chrome le blocca (CORS) e l'elemento sparirebbe → classe messa dal JS.
   Secondo strato uniforme al 72%: l’inchiostro resta «vissuto» ma non scende mai sotto il 72% (testo leggibile) */
.s-chi-suona.chi--tex .chi__ink {
  -webkit-mask: url("../img/chi-inchiostro.webp") 0 0 / 240px 240px, linear-gradient(rgba(0, 0, 0, .72) 0 0);
  mask: url("../img/chi-inchiostro.webp") 0 0 / 240px 240px, linear-gradient(rgba(0, 0, 0, .72) 0 0);
}
.s-chi-suona .chi__ink b { font: 700 calc(var(--sw) * .2)/.92 var(--f-num); letter-spacing: -.03em; }
/* «di passione» ≥ 19px bold = testo grande per il contrasto */
.s-chi-suona .chi__ink em { font: normal 700 max(19px, calc(var(--sw) * .074))/1 var(--f-sans); letter-spacing: .22em; margin-right: -.22em; white-space: nowrap; }
.s-chi-suona .chi__ink--ghost { opacity: .2; transform: translate(4px, 3px) rotate(.9deg); }
.s-chi-suona.chi--tex .chi__ink--ghost { -webkit-mask-position: 60px 30px, 0 0; mask-position: 60px 30px, 0 0; }

/* ================= LATO 2: polaroid + crediti ================= */
.s-chi-suona .chi__mid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  margin-top: clamp(64px, 7vw, 112px);
}
.s-chi-suona .chi__photos { grid-column: 1 / 7; position: relative; --pw: clamp(220px, 22.5vw, 330px); height: calc(var(--pw) * 1.62 + 60px); }
.s-chi-suona .chi__credits { grid-column: 8 / 13; }

.s-chi-suona .chi__pola {
  position: absolute; width: var(--pw); margin: 0;
  padding: calc(var(--pw) * .045) calc(var(--pw) * .045) 0;
  background: var(--gesso);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(23, 18, 14, .15), 0 22px 34px -14px rgba(23, 18, 14, .6), 0 3px 6px rgba(23, 18, 14, .18);
}
.s-chi-suona .chi__pola--a { left: 2%; top: 46px; transform: rotate(-4deg); }
.s-chi-suona .chi__pola--b { left: calc(2% + var(--pw) * .88); top: 0; transform: rotate(3deg); z-index: 1; }
.s-chi-suona .chi__shot { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--lavagna); }
.s-chi-suona .chi__shot img { width: 100%; height: 100%; object-fit: cover; }
.s-chi-suona .chi__shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28), inset 0 0 40px rgba(0, 0, 0, .18); background: linear-gradient(150deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 38%); }
.s-chi-suona .chi__pola figcaption { padding: .55em .15em .8em; font: italic 400 max(15px, calc(var(--pw) * .078))/1.1 var(--f-serif); color: var(--ink); }
/* nastro di carta semitrasparente, estremità seghettate */
.s-chi-suona .chi__tape {
  position: absolute; z-index: 2; top: -15px; left: 50%; width: 40%; height: 32px;
  translate: -50% 0; rotate: -3deg;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, .04)),
    color-mix(in srgb, var(--gesso) 64%, transparent);
  clip-path: polygon(0 0, 100% 0, 97% 12%, 100% 25%, 96.5% 38%, 100% 50%, 97% 63%, 100% 76%, 96.5% 88%, 100% 100%, 0 100%, 3% 88%, 0 76%, 3.5% 63%, 0 50%, 3% 38%, 0 25%, 3.5% 12%);
}
.s-chi-suona .chi__tape--b { top: -6px; left: auto; right: -34px; width: 34%; translate: 0 0; rotate: 40deg; }
/* desktop: al passaggio la polaroid si raddrizza appena e si solleva (rotate/translate individuali: si sommano al transform di GSAP) */
@media (hover: hover) and (pointer: fine) {
  .s-chi-suona .chi__pola { transition: rotate .45s var(--ease-out), translate .45s var(--ease-out), box-shadow .45s var(--ease-out); }
  .s-chi-suona .chi__pola:hover { z-index: 3; translate: 0 -8px; box-shadow: 0 1px 0 rgba(23, 18, 14, .15), 0 34px 44px -16px rgba(23, 18, 14, .62), 0 4px 8px rgba(23, 18, 14, .2); }
  .s-chi-suona .chi__pola--a:hover { rotate: 2.5deg; }
  .s-chi-suona .chi__pola--b:hover { rotate: -2deg; }
}

/* crediti del disco come sul retro di un LP */
.s-chi-suona .chi__credits-top { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 16px; border-top: 3px solid var(--ink); }
.s-chi-suona .chi__credits-top::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--ink); }
.s-chi-suona .chi__credits-top h3 { color: var(--ink); }
.s-chi-suona .chi__side { font: italic 400 18px/1 var(--f-serif); color: var(--ink-2); }
.s-chi-suona .chi__dl { margin: 10px 0 0; }
.s-chi-suona .chi__row { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; }
.s-chi-suona .chi__row dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: 12px; min-width: 0; font: 500 12px/1.3 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--ink-2); }
.s-chi-suona .chi__row dt > span { flex: none; }
.s-chi-suona .chi__dots { display: block; flex: 1 1 auto; min-width: 20px; height: 3px; color: var(--ink-2);
  background: radial-gradient(circle at 1.5px 1.5px, currentColor 1px, transparent 1.5px) 0 0 / 7px 3px repeat-x; }
.s-chi-suona .chi__row dd { flex: 0 1 auto; margin: 0; max-width: 66%; text-align: right; font: 400 clamp(20px, 1.75vw, 26px)/1.12 var(--f-serif); color: var(--ink); }
.s-chi-suona .chi__row dd small { display: block; margin-top: 5px; font-size: .64em; font-style: italic; color: var(--ink-2); }
.s-chi-suona .chi__amp { font-style: italic; }

/* ================= CHIUSURA: lavagnetta «PIZZA è…» ================= */
.s-chi-suona .chi__end { margin-top: clamp(84px, 9vw, 140px); }
.s-chi-suona .chi__board { max-width: 1120px; margin: 0 auto; }
.s-chi-suona .chi__frame {
  position: relative;
  padding: 18px 18px 32px;
  border-radius: 8px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, .5) 0 2px, rgba(255, 238, 210, .35) 2.6px 3.6px, rgba(0, 0, 0, .2) 4px, transparent 4.6px) 5px 5px / 10px 10px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, .5) 0 2px, rgba(255, 238, 210, .35) 2.6px 3.6px, rgba(0, 0, 0, .2) 4px, transparent 4.6px) calc(100% - 5px) 5px / 10px 10px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, .5) 0 2px, rgba(255, 238, 210, .35) 2.6px 3.6px, rgba(0, 0, 0, .2) 4px, transparent 4.6px) 5px calc(100% - 5px) / 10px 10px no-repeat,
    radial-gradient(circle, rgba(0, 0, 0, .5) 0 2px, rgba(255, 238, 210, .35) 2.6px 3.6px, rgba(0, 0, 0, .2) 4px, transparent 4.6px) calc(100% - 5px) calc(100% - 5px) / 10px 10px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--legno) 80%, var(--gesso)) 0, var(--legno) 3%, var(--legno) 88%, color-mix(in srgb, var(--legno) 70%, var(--gesso)) 92%, var(--legno-scuro) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, .25), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 4px 8px rgba(23, 18, 14, .3), 0 34px 54px -22px rgba(23, 18, 14, .75);
}
.s-chi-suona .chi__slate {
  position: relative;
  overflow: hidden;
  display: grid; grid-template-columns: 1.35fr 1fr; align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: clamp(340px, 34vw, 480px);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5.5vw, 84px);
  border-radius: 3px;
  color: var(--gesso);
  background:
    radial-gradient(ellipse 46% 38% at 26% 34%, color-mix(in srgb, var(--gesso) 6%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 30% at 76% 72%, color-mix(in srgb, var(--gesso) 4.5%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 12% at 50% 96%, color-mix(in srgb, var(--gesso) 5%, transparent), transparent 75%),
    var(--lavagna);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), inset 0 14px 30px rgba(0, 0, 0, .55), inset 0 -8px 20px rgba(0, 0, 0, .35);
}
.s-chi-suona .chi__write { display: block; overflow: visible; }
.s-chi-suona.chi--tex .chi__write {
  -webkit-mask: url("../img/chi-gesso.webp") 0 0 / 200px 200px;
  mask: url("../img/chi-gesso.webp") 0 0 / 200px 200px;
}
.s-chi-suona .chi__write text { font-size: 100px; fill: var(--gesso); fill-opacity: .9; stroke: var(--gesso); stroke-opacity: .85; stroke-width: 1.3px; stroke-linejoin: round; }
.s-chi-suona .chi__write text.chi__ws { fill: none; }
.s-chi-suona .chi__write text.chi__wf { stroke: none; }
.s-chi-suona .chi__write--big { width: 100%; height: auto; }
.s-chi-suona .chi__write--big text { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
.s-chi-suona .chi__write--tag text { font-family: var(--f-display); font-weight: 400; stroke-width: 1.6px; }
.s-chi-suona .chi__tags { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.1vw, 16px); }
.s-chi-suona .chi__write--tag { height: clamp(40px, 5.3vw, 76px); width: auto; }
.s-chi-suona .chi__write--tag:nth-child(1) { transform: rotate(-2deg); }
.s-chi-suona .chi__write--tag:nth-child(2) { transform: rotate(1.4deg); margin-left: .6em; }
.s-chi-suona .chi__write--tag:nth-child(3) { transform: rotate(-1deg); margin-left: .2em; }
.s-chi-suona .chi__write--tag:nth-child(4) { transform: rotate(2deg); margin-left: 1.1em; }
.s-chi-suona .chi__dust { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.s-chi-suona .chi__grain { position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--gesso); opacity: 0; }
/* gessetti sulla mensola */
.s-chi-suona .chi__chalk { position: absolute; z-index: 1; bottom: 9px; right: 15%; width: 58px; height: 9px; border-radius: 4px 3px 3px 4px; rotate: -2.5deg;
  background: linear-gradient(180deg, var(--gesso), color-mix(in srgb, var(--gesso) 78%, var(--kraft))); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.s-chi-suona .chi__chalk--bit { right: calc(15% + 74px); width: 17px; rotate: 9deg; }
.s-chi-suona .chi__cap { max-width: 42ch; margin: 30px auto 0; text-align: center; font: italic 400 clamp(20px, 1.8vw, 26px)/1.28 var(--f-serif); color: var(--ink); text-wrap: balance; }
.s-chi-suona .chi__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.s-chi-suona .chi__cta .btn--primary { box-shadow: 0 2px 0 var(--inchiostro); }
.s-chi-suona .chi__cta .btn--primary:hover { box-shadow: 0 2px 0 var(--inchiostro), 0 0 0 6px color-mix(in srgb, var(--inchiostro) 12%, transparent); }
.s-chi-suona .chi__cta .num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ================= MOBILE ================= */
@media (max-width: 899px) {
  .s-chi-suona { --edge: 22px; }
  .s-chi-suona .chi__paper::before { --ring: 620px; --ring-x: 30%; --ring-y: 220px; }
  .s-chi-suona .chi__top { display: block; }
  .s-chi-suona .chi__cal { --cw: calc((min(100vw, 560px) - 2 * var(--pad-x) - 3 * var(--g) - 3 * var(--g) - 16px) / 4); --g: 7px; margin-top: 34px; padding-bottom: calc(clamp(176px, 50vw, 220px) * .6 + 12px); }
  .s-chi-suona .chi__stamp { --sw: clamp(176px, 50vw, 220px); right: 3%; top: calc(100% + 4px); }
  .s-chi-suona .chi__ink em { letter-spacing: .1em; margin-right: -.1em; }
  .s-chi-suona .chi__story { margin-top: 8px; }
  .s-chi-suona .chi__mid { display: block; }
  /* la targa (a) va a DESTRA e il bancone (b) a sinistra, sopra: la sovrapposizione (≤ 30% della larghezza) cade sui mattoni
     a sinistra dell'insegna, che resta intera; il bancone non è coperto */
  .s-chi-suona .chi__photos { --pw: min(52vw, 300px, (100vw - 2 * var(--pad-x)) * .6); height: calc(var(--pw) * 1.62 + 44px); }
  .s-chi-suona .chi__pola--a { left: auto; right: 0; top: 30px; transform: rotate(4deg); }
  .s-chi-suona .chi__pola--b { left: 0; right: auto; top: 0; transform: rotate(-3deg); }
  .s-chi-suona .chi__tape--b { top: -15px; left: 50%; right: auto; width: 40%; translate: -50% 0; rotate: 4deg; }
  .s-chi-suona .chi__credits { margin-top: 40px; }
  .s-chi-suona .chi__row { position: relative; display: block; padding: 12px 0 14px; }
  .s-chi-suona .chi__row dt { display: block; }
  .s-chi-suona .chi__dots { position: absolute; left: 0; right: 0; bottom: 0; }
  .s-chi-suona .chi__row:last-child .chi__dots { display: none; }
  .s-chi-suona .chi__row dd { max-width: none; text-align: left; margin-top: 4px; font-size: 22px; }
  .s-chi-suona .chi__frame { padding: 12px 12px 26px; }
  .s-chi-suona .chi__slate { grid-template-columns: 1fr; min-height: 0; padding: 30px 22px 34px; gap: 22px; }
  .s-chi-suona .chi__tags { flex-direction: row; flex-wrap: wrap; gap: 10px 16px; }
  .s-chi-suona .chi__write--tag { height: clamp(34px, 10.6vw, 52px); }
  .s-chi-suona.chi--tex .chi__write { -webkit-mask-size: 140px 140px; mask-size: 140px 140px; }
  .s-chi-suona .chi__write--tag:nth-child(n) { margin-left: 0; }
  .s-chi-suona .chi__chalk { bottom: 8px; width: 46px; height: 8px; }
  .s-chi-suona .chi__chalk--bit { right: calc(15% + 58px); width: 14px; }
  .s-chi-suona .chi__cta { flex-direction: column; align-items: stretch; max-width: 440px; margin-inline: auto; }
}
/* telefono in orizzontale (e tablet larghi e bassi): polaroid alte al massimo ~mezzo schermo e vicine al centro */
@media (max-width: 899px) and (min-aspect-ratio: 4/3) {
  .s-chi-suona .chi__photos { --pw: min(300px, 46svh); width: calc(var(--pw) * 1.8); margin-inline: auto; }
}

/* ==== src/sections/05-assolo/section.css ==== */
/* ============ 05 ASSOLO — «Assolo di burrata» ============
   Due layout:
   - STATICO (senza JS, movimento ridotto, canvas non supportato → .is-static): poster grande + testi, in flusso.
   - LIVE, CSS-first: vale già dal primo paint con html.js:not(.is-reduced) (come l'hero), così l'altezza della sezione è giusta
     PRIMA del JS e il ripristino dello scroll non salta. Contenitore alto + palco sticky, fotogrammi su canvas guidati dallo scroll,
     cornice che si allarga e IRIS color gesso che si apre dalla burrata (cucitura con 06-scaletta).
     Il JS aggiunge .is-live quando prende il comando: prima, gli stati iniziali (= progresso 0) stanno qui sotto, con un failsafe
     a 7 s che mostra titolo e CTA se il JS non arriva mai. */

.s-assolo { position: relative; background: var(--lavagna); color: var(--gesso); }

/* ---------------- layout statico ---------------- */
.s-assolo__stage {
  display: grid; justify-items: start; align-items: start; row-gap: 18px;
  grid-template-areas: "words" "title" "frame" "sub" "cta";
  max-width: var(--max); margin-inline: auto; padding: var(--sec-y) var(--pad-x);
}
.s-assolo__end { display: contents; }
.s-assolo__title {
  grid-area: title; font: 400 var(--fs-h2)/.88 var(--f-display); text-transform: uppercase; letter-spacing: .004em; color: var(--gesso);
}
.s-assolo__line { display: block; overflow: clip; padding: .04em .06em .05em 0; margin: -.04em -.06em -.05em 0; }
.s-assolo__line > span { display: block; }
.s-assolo__title .amp { font-size: 1.02em; letter-spacing: 0; padding-right: .04em; }
.s-assolo__sub { grid-area: sub; font: italic 400 var(--fs-note)/1.12 var(--f-serif); color: var(--gesso); }
.s-assolo__sub > span { display: block; }
.s-assolo__cta { grid-area: cta; margin-top: 6px; }
.s-assolo__cta .num { font-size: 1.04em; letter-spacing: .01em; white-space: nowrap; }
.s-assolo__dot { padding-inline: .1em; white-space: pre; }
/* schermi strettissimi (320-360 px): il numero va sulla seconda riga, senza il puntino */
@media (max-width: 374px) {
  .s-assolo__cta { padding-inline: 22px; }
  .s-assolo__dot { display: none; }
  .s-assolo__cta .num { display: block; }
}

.s-assolo__frame {
  grid-area: frame; position: relative; margin: 6px 0; width: 100%; max-width: 520px; aspect-ratio: 576 / 800;
  border-radius: var(--r-media); overflow: clip; background: var(--lavagna-2);
}
.s-assolo__poster { width: 100%; height: 100%; object-fit: cover; }
.s-assolo__canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.s-assolo__edge { position: absolute; inset: 0; border: 1px solid var(--gesso); border-radius: inherit; opacity: .55; pointer-events: none; }

.s-assolo__words { grid-area: words; font: italic 400 var(--fs-note)/1.2 var(--f-serif); color: var(--gesso-70); }
.s-assolo__words br { display: none; }
.s-assolo__w .f { display: none; }

.s-assolo__shade, .s-assolo__hud, .s-assolo__iris { display: none; }

@media (min-width: 900px) {
  .s-assolo__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 112px);
    grid-template-rows: 1fr auto auto auto auto 1fr; align-items: center;
    grid-template-areas: "frame ." "frame words" "frame title" "frame sub" "frame cta" "frame .";
  }
  .s-assolo__frame { justify-self: end; width: auto; height: min(76svh, 720px); max-width: none; margin: 0; }
}

/* ---------------- layout LIVE (scroll), CSS-first ---------------- */
/* mobile / touch / finestre strette: fotogrammi a tutto schermo, parole in basso a sinistra su sfumatura.
   Binario corto (210svh): l'iris finisce a ~0,93 del progresso e la sezione finisce subito dopo (niente schermata gesso vuota). */
html.js:not(.is-reduced) .s-assolo:not(.is-static) {
  --bw: max(100vw, 100lvh * .72);
  --bh: calc(var(--bw) / .72);
  --low: calc(var(--bar-h) + 26px + env(safe-area-inset-bottom));
}
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__track {
  position: relative; height: 210vh; height: 210svh;
  /* se il palco fosse più basso del viewport (barre del browser), sotto c'è già il colore giusto */
  background: linear-gradient(var(--lavagna) calc(100% - 100lvh), var(--gesso) 0);
}
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__stage {
  position: sticky; top: 0; display: block; max-width: none; margin: 0; padding: 0;
  height: 100vh; height: 100dvh; overflow: clip; background: var(--lavagna); isolation: isolate;
}
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__frame {
  position: absolute; z-index: 1; margin: 0; max-width: none; aspect-ratio: auto;
  width: var(--bw); height: var(--bh); left: calc(50% - var(--bw) / 2);
  top: clamp(calc(100lvh - var(--bh)), calc(50lvh - var(--bh) * .3), 0px);
  border-radius: 0; transform-origin: 0 0; background: var(--lavagna);
}
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__canvas { display: block; }
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__edge { display: none; }

html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__shade {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .9;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--lavagna) 86%, transparent) 0%,
    color-mix(in srgb, var(--lavagna) 58%, transparent) 26%,
    color-mix(in srgb, var(--lavagna) 18%, transparent) 46%,
    transparent 62%);
}

html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__words {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  font: 400 min(18.5vw, 12svh)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .004em; color: transparent;
}
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__words br { display: inline; }
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__word { position: absolute; left: var(--pad-x); bottom: var(--low); display: block; }
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__w { position: relative; display: block; padding-top: .22em; margin-top: -.22em; }  /* spazio per l'accento di PIÙ dentro il riempimento */
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__w .o { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--gesso); }
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__w .f { display: block; position: absolute; inset: 0; padding-top: inherit; color: var(--gesso); clip-path: inset(100% 0 0 0); }

html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__end {
  position: absolute; z-index: 4; left: var(--pad-x); right: var(--pad-x); bottom: var(--low);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__sub { font-size: clamp(18px, min(5.6vw, 5svh), 30px); }
html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__cta { margin-top: 4px; }

html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__iris {
  display: block; position: absolute; inset: 0; z-index: 6; pointer-events: none; visibility: hidden;
  background: var(--gesso); clip-path: circle(0px at 50% 50%);
}

/* stati iniziali (= progresso 0) finché il JS non aggiunge .is-live: niente sovrapposizioni se si arriva qui con #ancora
   prima dell'init. Failsafe: se il JS non arriva mai, dopo 7 s titolo, sottotitolo e CTA compaiono e «Piano.» si toglie. */
html.js:not(.is-reduced) .s-assolo:not(.is-static):not(.is-live) :is(.s-assolo__word.is-b, .s-assolo__word.is-c) { visibility: hidden; }
html.js:not(.is-reduced) .s-assolo:not(.is-static):not(.is-live) .s-assolo__line > span { transform: translateY(112%); animation: s-assolo-failsafe .01s 7s forwards; }
html.js:not(.is-reduced) .s-assolo:not(.is-static):not(.is-live) :is(.s-assolo__sub, .s-assolo__cta) { opacity: 0; animation: s-assolo-failsafe .01s 7s forwards; }
html.js:not(.is-reduced) .s-assolo:not(.is-static):not(.is-live) .s-assolo__word.is-a { animation: s-assolo-failsafe-out .01s 7s forwards; }
html.js:not(.is-reduced) .s-assolo:not(.is-static):not(.is-live) .s-assolo__end:focus-within :is(.s-assolo__line > span, .s-assolo__sub, .s-assolo__cta) { transform: none; opacity: 1; }
@keyframes s-assolo-failsafe { to { transform: none; opacity: 1; } }
@keyframes s-assolo-failsafe-out { to { opacity: 0; } }

/* touch in orizzontale (tablet o telefono girato): la burrata riempie lo schermo → sfumatura da sinistra in basso, come su desktop */
@media (orientation: landscape) {
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__shade {
    background:
      radial-gradient(120% 110% at 0% 100%,
        color-mix(in srgb, var(--lavagna) 92%, transparent) 0%,
        color-mix(in srgb, var(--lavagna) 76%, transparent) 32%,
        color-mix(in srgb, var(--lavagna) 34%, transparent) 54%,
        transparent 70%),
      linear-gradient(to top, color-mix(in srgb, var(--lavagna) 55%, transparent) 0%, transparent 34%);
  }
}
/* telefono girato (schermo basso): sottotitolo e CTA affiancati sopra la barra fissa, per non salire sotto l'header */
@media (orientation: landscape) and (max-height: 520px) {
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__end {
    display: grid; grid-template-columns: auto auto; grid-template-areas: "title title" "sub cta";
    align-items: end; justify-content: start; column-gap: 24px; row-gap: 12px;
  }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__title { grid-area: title; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__sub { grid-area: sub; font-size: 18px; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__cta { grid-area: cta; margin: 0; }
}

/* desktop vero (mouse) e finestra abbastanza larga: cornice verticale al centro, parole enormi ai lati */
@media (min-width: 900px) and (min-aspect-ratio: 23/20) and (hover: hover) and (pointer: fine) {
  html.js:not(.is-reduced) .s-assolo:not(.is-static) {
    --fh: 76svh;
    --fw: calc(var(--fh) * .72);
    --gw: clamp(28px, 3.2vw, 60px);
    --ws: clamp(56px, calc(((100vw - var(--fw)) / 2 - var(--pad-x) - var(--gw)) / 3.02), 168px);
  }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__track { height: 260vh; height: 260svh; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__frame {
    width: var(--fw); height: var(--fh); left: calc(50% - var(--fw) / 2); top: calc(50% - var(--fh) / 2);
    border-radius: var(--r-media);
  }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__edge { display: block; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__shade {
    opacity: 0;
    background:
      radial-gradient(115% 100% at 0% 100%,
        color-mix(in srgb, var(--lavagna) 90%, transparent) 0%,
        color-mix(in srgb, var(--lavagna) 72%, transparent) 30%,
        color-mix(in srgb, var(--lavagna) 30%, transparent) 50%,
        transparent 66%),
      linear-gradient(to top, color-mix(in srgb, var(--lavagna) 50%, transparent) 0%, transparent 30%);
  }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__words { font-size: var(--ws); }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__word { left: auto; bottom: auto; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__word.is-a { right: calc(50% + var(--fw) / 2 + var(--gw)); top: calc(50% - var(--fh) / 2); text-align: right; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__word.is-b { left: calc(50% + var(--fw) / 2 + var(--gw)); top: calc(50% - .92em); text-align: left; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__word.is-c { right: calc(50% + var(--fw) / 2 + var(--gw)); bottom: calc(50% - var(--fh) / 2); text-align: right; }

  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__end {
    bottom: clamp(32px, 7svh, 72px); right: auto; max-width: min(100% - 2 * var(--pad-x), 1100px);
    display: grid; grid-template-columns: auto auto; grid-template-areas: "title title" "sub cta";
    align-items: end; justify-content: start; column-gap: clamp(28px, 3vw, 56px); row-gap: 22px;
  }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__title { grid-area: title; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__sub { grid-area: sub; font-size: var(--fs-note); max-width: none; }
  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__cta { grid-area: cta; margin: 0 0 4px; }

  html.js:not(.is-reduced) .s-assolo:not(.is-static) .s-assolo__hud {
    display: flex; align-items: center; gap: 12px; position: absolute; z-index: 3;
    left: calc(50% - var(--fw) / 2); width: var(--fw); top: calc(50% + var(--fh) / 2 + 18px);
    font-size: 12px; letter-spacing: .06em; color: var(--gesso-70);
  }
  .s-assolo__bar { position: relative; flex: 1; height: 1px; background: var(--gesso-15); overflow: clip; }
  .s-assolo__bar i { position: absolute; inset: 0; background: var(--gesso); transform-origin: 0 50%; transform: scaleX(0); }
}

/* ==== src/sections/06-scaletta/section.css ==== */
/* ============ 06 SCALETTA — la setlist stampata (carta, nastro gaffer) + monitor di palco ============
   Base = layout "touch/stretto" (fisarmonica). Desktop vero (mouse, ≥900px) = tracklist + monitor sticky. */
.s-scaletta {
  --carta: color-mix(in srgb, var(--gesso), white 58%);
  --ink-80: color-mix(in srgb, var(--inchiostro) 82%, transparent);
  --ink-65: color-mix(in srgb, var(--inchiostro) 68%, transparent);
  --ink-20: color-mix(in srgb, var(--inchiostro) 20%, transparent);
  --ink-12: color-mix(in srgb, var(--inchiostro) 12%, transparent);
  --neon-glow: color-mix(in srgb, var(--neon) 80%, transparent);
  --neon-core: color-mix(in srgb, var(--neon), white 52%);
  position: relative;
  background: var(--gesso);
  color: var(--inchiostro);
  padding-block: clamp(96px, 15vh, 184px) clamp(96px, 13vh, 160px);
}
/* dopo l'iris dell'assolo (fondo già gesso a tutto schermo): niente fascia vuota, il titolo arriva subito.
   CSS-first (stessa condizione dell'assolo «live»), così l'altezza è giusta prima del JS */
html.js:not(.is-reduced) .s-assolo:not(.is-static) + .s-scaletta { padding-top: clamp(16px, 2.6svh, 32px); }
.s-scaletta :focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
.s-scaletta ::selection { background: var(--inchiostro); color: var(--gesso); }

/* ---------------- header ---------------- */
.s-scaletta .sc-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vh, 60px); }
.s-scaletta .sc-title {
  font: 400 var(--fs-h2)/.86 var(--f-display);
  text-transform: uppercase; letter-spacing: .004em; margin-left: -.035em; color: var(--inchiostro);
}
.s-scaletta .sc-intro { display: grid; gap: 14px; }
.s-scaletta .sc-quip { font: italic 400 clamp(30px, 3vw, 46px)/1.04 var(--f-serif); letter-spacing: -.01em; }
.s-scaletta .sc-luck { position: relative; display: inline-block; font-style: italic; color: var(--rosso); white-space: nowrap; }
.s-scaletta .sc-mark { position: absolute; max-width: none; overflow: visible; pointer-events: none; }
.s-scaletta .sc-mark path { fill: none; stroke: var(--rosso); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.s-scaletta .sc-mark--under { left: -2%; width: 104%; bottom: -.3em; height: .36em; }
.s-scaletta .sc-mark--under path + path { stroke-width: 1.6; opacity: .8; }
.s-scaletta .sc-sub { font: 400 var(--fs-body)/1.55 var(--f-sans); color: var(--ink-80); max-width: 40ch; }
/* link in linea: area di tocco alta 48px (padding verticale compensato dal margine: la riga non cambia) */
.s-scaletta .sc-inline { position: relative; display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--inchiostro); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--rosso); transition: color .2s; }
.s-scaletta .sc-inline:hover { color: var(--rosso-testo); }
/* anello di focus attorno alla parola (non attorno all'area di tocco alta 48px) */
.s-scaletta .sc-inline:focus-visible { outline: none; }
.s-scaletta .sc-inline:focus-visible::after { content: ""; position: absolute; inset: 9px -3px; border: 3px solid var(--inchiostro); border-radius: 4px; pointer-events: none; }

/* ---------------- palco: foglio + monitor ---------------- */
.s-scaletta .sc-stage { position: relative; }

/* foglio stampato */
.s-scaletta .sc-sheet {
  position: relative; margin-inline: -6px; padding: 26px 18px 14px;
  background: var(--carta); border-radius: 2px;
  box-shadow: 0 0 0 1px var(--ink-12), 0 2px 3px rgba(23, 18, 14, .05), 0 28px 48px -30px rgba(23, 18, 14, .5);
}
/* nastro gaffer nero sugli angoli (strappato a mano) */
.s-scaletta .sc-tape {
  position: absolute; z-index: 3; width: clamp(64px, 7.6vw, 112px); height: clamp(22px, 2.1vw, 30px);
  translate: -50% -50%; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 38%, rgba(0, 0, 0, .3)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, rgba(255, 255, 255, 0) 1px 4px),
    var(--inchiostro);
  clip-path: polygon(3% 0, 97% 0, 100% 14%, 97.6% 31%, 100% 49%, 97.2% 67%, 99.6% 84%, 96.8% 100%, 3.4% 100%, 0 86%, 2.4% 69%, 0 51%, 2.8% 33%, .4% 17%);
}
.s-scaletta .sc-tape--tl { left: 10px; top: 8px; rotate: -40deg; }
.s-scaletta .sc-tape--tr { left: calc(100% - 10px); top: 8px; rotate: 38deg; }
.s-scaletta .sc-tape--bl { left: 10px; top: calc(100% - 8px); rotate: 42deg; }
.s-scaletta .sc-tape--br { left: calc(100% - 10px); top: calc(100% - 8px); rotate: -36deg; }

.s-scaletta .sc-sheet-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--inchiostro);
  font: 700 12px/1.25 var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro);
}
.s-scaletta .sc-sheet-head .sc-where { min-width: 0; text-wrap: balance; }
.s-scaletta .sc-sheet-head .sc-side { flex: none; white-space: nowrap; }
.s-scaletta .sc-sheet-head .amp { color: var(--rosso-testo); font-size: 1.35em; line-height: .8; padding-inline: .06em; letter-spacing: 0; }

/* righe */
.s-scaletta .sc-list { margin: 0; padding: 0; }
.s-scaletta .sc-trk { position: relative; }
.s-scaletta .sc-btn {
  --fs: clamp(28px, 7.4vw, 44px); --kind: 0px;
  position: relative; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 40px; align-items: start; column-gap: 10px;
  min-height: 68px; padding: 15px 0; text-align: left; border-radius: 4px; color: var(--inchiostro);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.s-scaletta .sc-trk--x .sc-btn { --kind: 20px; }
.s-scaletta .sc-num {
  position: relative; display: block; height: 1.3em; overflow: clip; margin-top: calc((var(--fs) * .92 - 1.3em) / 2 + var(--kind));
  font: 700 13px/1.3 var(--f-num); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink-65);
}
.s-scaletta .sc-num--x { color: var(--rosso-testo); }
.s-scaletta .sc-num-d { display: block; transition: transform .38s var(--ease-out), opacity .2s; }
.s-scaletta .sc-play {
  position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; fill: var(--rosso);
  opacity: 0; transform: translateY(120%) rotate(-90deg); transition: transform .42s var(--ease-out), opacity .2s;
}
.s-scaletta .sc-trk.is-active .sc-num-d { transform: translateY(-120%); opacity: 0; }
.s-scaletta .sc-trk.is-active .sc-play { transform: none; opacity: 1; }

.s-scaletta .sc-txt { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 18px; row-gap: 5px; min-width: 0; transition: transform .38s var(--ease-out); }
.s-scaletta .sc-name {
  position: relative; isolation: isolate; display: inline-block; max-width: 100%;
  font: 400 var(--fs)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .008em;
}
.s-scaletta .sc-name-m { display: block; overflow: clip; padding-block: .2em .05em; margin-block: -.2em -.05em; }
.s-scaletta .sc-name-t { display: block; }
.s-scaletta .sc-amp { font-family: var(--f-serif); font-style: italic; text-transform: none; color: var(--rosso); font-size: 1.04em; padding-inline: .03em; }
/* evidenziatore giallo (sfondo dietro inchiostro: mai testo giallo su chiaro) */
.s-scaletta .sc-hl {
  position: absolute; z-index: -1; left: -.16em; right: -.1em; top: .36em; bottom: -.04em;
  background: var(--giallo); border-radius: .05em .24em .1em .3em;
  transform: scaleX(0) skewX(-10deg); transform-origin: 0 50%; transition: transform .42s var(--ease-out);
}
.s-scaletta .sc-trk.is-active:not(.is-pre) .sc-hl { transform: scaleX(1) skewX(-10deg); }
/* cerchio a pennarello rosso attorno alla Nobel */
.s-scaletta .sc-mark--circle { left: -12%; top: -42%; width: 126%; height: 182%; }
.s-scaletta .sc-trk--nobel .sc-tag { margin-left: 10px; }
.s-scaletta .sc-mark--circle path { stroke-width: 2.2; }

.s-scaletta .sc-note { font: italic 400 clamp(18px, 4.7vw, 21px)/1.22 var(--f-serif); color: var(--ink-65); }
.s-scaletta .sc-note--long { flex-basis: 100%; padding-right: max(0px, 100% - 30em); margin-top: 6px; line-height: 1.32; }
.s-scaletta .sc-note strong { font-weight: 400; color: var(--rosso-testo); }
.s-scaletta .sc-tag {
  align-self: center; display: inline-block; padding: 6px 10px 5px; border: 1.5px solid currentColor; border-radius: var(--r-pill);
  font: 700 12px/1 var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: var(--rosso-testo); rotate: -3deg; white-space: nowrap;
}
.s-scaletta .sc-kind { flex-basis: 100%; font: 700 12px/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--rosso-testo); margin-bottom: 3px; }
.s-scaletta .sc-rule { display: block; height: 1px; background: var(--ink-20); transform-origin: 0 50%; }
.s-scaletta .sc-extra { margin-top: 22px; border-top: 2px solid var(--inchiostro); }

/* «+» della fisarmonica */
.s-scaletta .sc-chev { position: relative; justify-self: end; margin-top: calc((var(--fs) * .92 - 38px) / 2 + var(--kind)); width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink-20); transition: background-color .3s, border-color .3s; }
.s-scaletta .sc-chev::before, .s-scaletta .sc-chev::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.75px; margin: -.875px 0 0 -6px;
  border-radius: 2px; background: var(--inchiostro); transition: transform .38s var(--ease-out), background-color .3s;
}
.s-scaletta .sc-chev::after { transform: rotate(90deg); }
.s-scaletta .sc-trk.is-open .sc-chev { background: var(--inchiostro); border-color: var(--inchiostro); }
.s-scaletta .sc-trk.is-open .sc-chev::before, .s-scaletta .sc-trk.is-open .sc-chev::after { background: var(--carta); }
.s-scaletta .sc-trk.is-open .sc-chev::after { transform: rotate(0deg); }

/* pannelli (anteprima in linea) */
.s-scaletta .sc-panel { overflow: clip; }
.s-scaletta .sc-panel-in { padding: 2px 0 22px; }
.s-scaletta .sc-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: clip; background: var(--lavagna); }
.s-scaletta .sc-media img, .s-scaletta .sc-media video { width: 100%; height: 100%; object-fit: cover; }
.s-scaletta .sc-panel .sc-neon { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-media); }
.s-scaletta .sc-panel-cap { margin-top: 10px; font: italic 400 18px/1.3 var(--f-serif); color: var(--ink-65); }

/* tubo neon (monitor e card) */
.s-scaletta .sc-neon {
  display: grid; place-items: center; padding: 10%; text-align: center; overflow: clip;
  background: radial-gradient(68% 52% at 50% 48%, rgba(59, 255, 143, .13), rgba(59, 255, 143, 0) 72%), var(--lavagna);
}
.s-scaletta .sc-neon-tube { display: block; }
.s-scaletta .sc-neon-name {
  display: block; font: italic 400 clamp(44px, 12.5vw, 66px)/.98 var(--f-serif); letter-spacing: -.005em; text-wrap: balance;
  color: var(--neon-core);
  text-shadow: 0 0 1px var(--neon), 0 0 7px var(--neon-glow), 0 0 20px rgba(59, 255, 143, .55), 0 0 52px rgba(59, 255, 143, .3);
}
.s-scaletta .sc-neon-tube.is-hum { animation: scHum 3s ease-in-out infinite alternate; }
.s-scaletta:not(.is-vis) .sc-neon-tube { animation-play-state: paused; }
@keyframes scHum { from { opacity: 1; } to { opacity: .9; } }

/* monitor: solo desktop */
.s-scaletta .sc-mon { display: none; margin: 0; }

/* ---------------- formati ---------------- */
.s-scaletta .sc-formats { margin-top: clamp(64px, 11vh, 136px); }
.s-scaletta .sc-formats-title {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  font: 700 12px/1.2 var(--f-num); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-65);
}
.s-scaletta .sc-formats-title::after { content: ""; flex: 1; height: 1px; background: var(--ink-20); }
.s-scaletta .sc-fmt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.s-scaletta .sc-fmt {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 10px 14px; min-width: 0;
  background: var(--carta); border: 1.5px solid var(--inchiostro); border-radius: 12px;
}
.s-scaletta .sc-fx { width: 100%; max-width: 240px; height: auto; overflow: visible; margin-bottom: 8px; }
.s-scaletta .sc-fx .fx-fill, .s-scaletta .sc-fx .fx-thin, .s-scaletta .sc-fx .fx-red {
  stroke: var(--inchiostro); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
.s-scaletta .sc-fx .fx-fill { fill: var(--carta); }
.s-scaletta .sc-fx .fx-thin { fill: none; stroke-width: 1.1; stroke-opacity: .55; }
.s-scaletta .sc-fx .fx-red, .s-scaletta .sc-fx .fx-red-fill, .s-scaletta .sc-fx .fx-star--r { fill: var(--rosso); }
.s-scaletta .sc-fx .fx-dot, .s-scaletta .sc-fx .fx-star { fill: var(--inchiostro); }
.s-scaletta .sc-fx .fx-star--g { fill: var(--verde); }
.s-scaletta .sc-fx .fx-star--w { fill: var(--carta); stroke: var(--inchiostro); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.s-scaletta .sc-fx .fx-star--r { fill: var(--rosso); }
.s-scaletta .fx-disc, .s-scaletta .fx-slice, .s-scaletta .fx-lid { transform-box: fill-box; transition: transform .6s var(--ease-out); }
.s-scaletta .fx-disc { transform-origin: 50% 50%; }
.s-scaletta .fx-lid { transform-origin: 0% 100%; }
.s-scaletta .sc-fmt-kind { font: 700 12px/1.2 var(--f-num); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-65); }
.s-scaletta .sc-fmt-name { font: 400 clamp(22px, 5.9vw, 46px)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .008em; }

/* ---------------- chiusura: birre + CTA ---------------- */
.s-scaletta .sc-end { margin-top: clamp(64px, 10vh, 128px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: start; }
.s-scaletta .sc-stars { display: flex; gap: 10px; font-size: 15px; line-height: 1; }
.s-scaletta .sc-stars .st { font-style: normal; }
.s-scaletta .sc-stars .st--v { color: var(--verde); }
.s-scaletta .sc-stars .st--g { color: var(--carta); -webkit-text-stroke: 1px var(--inchiostro); }
.s-scaletta .sc-stars .st--r { color: var(--rosso); }
.s-scaletta .sc-beer { font: 400 clamp(32px, 4.3vw, 66px)/1.03 var(--f-serif); letter-spacing: -.012em; max-width: 21ch; text-wrap: balance; }
.s-scaletta .sc-beer-a { display: block; margin-bottom: 14px; font: 400 var(--fs-lead)/1.4 var(--f-sans); letter-spacing: 0; color: var(--ink-80); }
.s-scaletta .sc-beer-b { display: block; }
.s-scaletta .sc-beer .sc-amp { font-size: 1em; padding-inline: 0; }
.s-scaletta .sc-cta {
  min-height: 56px; width: 100%; padding: 10px 20px; gap: .55em; white-space: normal; text-align: center;
  box-shadow: inset 0 0 0 1.5px var(--inchiostro);
}
/* su schermi stretti la CTA va a capo tra le due metà, mai fuori dal bordo */
.s-scaletta .sc-cta-l { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: .3em; row-gap: 2px; }
.s-scaletta .sc-cta-a, .s-scaletta .sc-cta .num { white-space: nowrap; }
.s-scaletta .sc-cta:hover { box-shadow: inset 0 0 0 1.5px var(--inchiostro), 0 0 0 6px rgba(23, 18, 14, .08); }
.s-scaletta .sc-cta .num { letter-spacing: .02em; }

@media (max-width: 399px) {
  .s-scaletta .sc-cta { font-size: 15px; padding-inline: 16px; }
}
/* telefoni molto stretti (< 360px): formati in colonna, disegno a sinistra */
@media (max-width: 359px) {
  .s-scaletta .sc-fmt-list { grid-template-columns: minmax(0, 1fr); }
  .s-scaletta .sc-fmt { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-content: center; column-gap: 14px; row-gap: 4px; padding: 10px 14px; }
  .s-scaletta .sc-fx { grid-row: 1 / 3; margin-bottom: 0; align-self: center; }
  .s-scaletta .sc-fmt-kind { align-self: end; }
  .s-scaletta .sc-fmt-name { align-self: start; }
}

/* ---------------- tablet / touch largo ---------------- */
@media (min-width: 600px) {
  .s-scaletta .sc-sheet { margin-inline: 0; padding: 34px 32px 18px; }
  .s-scaletta .sc-btn { grid-template-columns: 52px minmax(0, 1fr) 44px; }
  .s-scaletta .sc-fmt-list { gap: 16px; }
  .s-scaletta .sc-fmt { padding: 20px 20px 22px; }
  .s-scaletta .sc-cta { width: auto; padding-inline: 26px; }
  .s-scaletta .sc-stage, .s-scaletta .sc-head, .s-scaletta .sc-formats, .s-scaletta .sc-end { max-width: 780px; margin-inline: auto; }
  .s-scaletta .sc-panel-in { padding-left: 62px; max-width: 520px; }
}

/* ---------------- desktop vero (mouse) ---------------- */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .s-scaletta .sc-head, .s-scaletta .sc-stage, .s-scaletta .sc-formats, .s-scaletta .sc-end { max-width: none; margin-inline: 0; }
  /* titolo in alto (arriva per primo dopo l'iris), battuta e sottotitolo accanto */
  .s-scaletta .sc-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .s-scaletta .sc-title { grid-column: 1 / 8; }
  .s-scaletta .sc-intro { grid-column: 8 / 13; padding-top: .1em; gap: 16px; }
  .s-scaletta .sc-sub { font-size: 17px; }

  .s-scaletta .sc-stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .s-scaletta .sc-sheet { grid-column: 1 / 8; padding: 40px clamp(32px, 3.2vw, 52px) 26px; }
  .s-scaletta .sc-btn { grid-template-columns: 60px minmax(0, 1fr); min-height: 88px; padding: 19px 0; cursor: pointer; }
  .s-scaletta .sc-chev, .s-scaletta .sc-panel { display: none !important; }
  .s-scaletta .sc-num { font-size: 14px; }
  .s-scaletta .sc-btn { --fs: clamp(34px, 3.15vw, 50px); }
  .s-scaletta .sc-trk.is-active .sc-txt { transform: translateX(10px); }
  .s-scaletta .sc-note { font-size: clamp(19px, 1.45vw, 22px); }

  .s-scaletta .sc-mon {
    display: block; grid-column: 8 / 13; justify-self: end; position: sticky; top: calc(var(--nav-h) + 4svh);
    width: min(91%, calc((100svh - var(--nav-h) - 8svh - 80px) * .8 + 28px));
  }
  .s-scaletta .sc-mon-box {
    position: relative; padding: 14px 14px 0; border-radius: 18px; transform-origin: 50% 100%;
    background: linear-gradient(180deg, var(--lavagna-2), var(--lavagna) 70%);
    box-shadow: inset 0 1px 0 rgba(238, 234, 224, .08), 0 44px 70px -38px rgba(23, 18, 14, .7), 0 14px 26px -14px rgba(23, 18, 14, .4);
  }
  .s-scaletta .sc-screen { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: clip; background: var(--lavagna); isolation: isolate; }
  .s-scaletta .sc-layer { position: absolute; inset: 0; visibility: hidden; overflow: clip; }
  .s-scaletta .sc-layer.is-on { visibility: visible; }
  .s-scaletta .sc-layer > img, .s-scaletta .sc-layer > video { width: 100%; height: 100%; object-fit: cover; }
  .s-scaletta .sc-layer .sc-neon { position: absolute; inset: 0; padding: 12% 10% 18%; }
  .s-scaletta .sc-layer .sc-neon-name { font-size: clamp(50px, 4.7vw, 78px); }
  .s-scaletta .sc-neon-cap { position: absolute; left: 9%; right: 9%; bottom: 7%; font: 400 15px/1.45 var(--f-sans); color: var(--gesso-70); text-align: center; }
  .s-scaletta .sc-glass {
    position: absolute; inset: 0; z-index: 9999; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(238, 234, 224, .12), inset 0 0 46px rgba(0, 0, 0, .32);
    background: linear-gradient(118deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, 0) 36%);
  }
  .s-scaletta .sc-screw {
    position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--gesso) 0, color-mix(in srgb, var(--gesso), black 50%) 75%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .55);
  }
  .s-scaletta .sc-screw::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 50%; height: 1.4px; margin-top: -.7px; background: rgba(0, 0, 0, .6); transform: rotate(var(--r, 35deg)); }
  .s-scaletta .sc-screw--tl { left: 3px; top: 3px; }
  .s-scaletta .sc-screw--tr { right: 3px; top: 3px; --r: -20deg; }
  .s-scaletta .sc-screw--bl { left: 3px; bottom: 3px; --r: 70deg; }
  .s-scaletta .sc-screw--br { right: 3px; bottom: 3px; --r: 10deg; }
  .s-scaletta .sc-mon-bar { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 6px 2px; color: var(--gesso); }
  .s-scaletta .sc-led { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 3px rgba(59, 255, 143, .12), 0 0 12px rgba(59, 255, 143, .7); }
  .s-scaletta .sc-cap-m { display: block; flex: 1; min-width: 0; overflow: clip; }
  .s-scaletta .sc-cap { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .s-scaletta .sc-cap-k { font: 500 12px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gesso-70); }
  .s-scaletta .sc-cap-n { font: 700 13px/1 var(--f-num); letter-spacing: .04em; color: var(--neon); }
  .s-scaletta .sc-cap-sep { color: var(--gesso-70); padding-inline: 4px; }
  .s-scaletta .sc-cap-t { font: italic 400 19px/1 var(--f-serif); overflow: hidden; text-overflow: ellipsis; }

  .s-scaletta .sc-fmt-list { gap: var(--gap); }
  .s-scaletta .sc-fmt { padding: 26px 28px 28px; gap: 6px; }
  .s-scaletta .sc-fx { width: auto; max-width: none; height: clamp(120px, 10.5vw, 156px); margin-bottom: 20px; align-self: flex-start; }
  .s-scaletta .sc-fmt--lp:hover .fx-disc { transform: translateX(14px) rotate(40deg); }
  .s-scaletta .sc-fmt--single:hover .fx-slice { transform: translate(9px, -1px) rotate(-5deg); }
  .s-scaletta .sc-fmt--deluxe:hover .fx-lid { transform: translateY(-8px) rotate(-3deg); }

  .s-scaletta .sc-end { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .s-scaletta .sc-stars { grid-column: 1 / -1; }
  .s-scaletta .sc-beer { grid-column: 1 / 9; }
  .s-scaletta .sc-cta { grid-column: 9 / 13; justify-self: end; margin-bottom: 8px; }
}

/* ==== src/sections/07-soundcheck/section.css ==== */
/* ============ 07 SOUNDCHECK — le prove in cucina: 5 carte 4:5 impilate con position: sticky ============
   Geometria in variabili: --cw/--ch (carta), --cx (centro della carta), --step (scalino tra le carte in pila),
   --top (dove si ferma la carta di mezzo), --gap-card (aria tra le carte nella pila), --gap-col (aria tra le carte
   in colonna: movimento ridotto / senza JS; lì i verbi sono Anton «medio», come i nomi della scaletta, non giganti).
   La pila (sticky) vale SOLO sotto html.js:not(.is-reduced): le altezze sono giuste prima del JS.
   Il JS legge solo il progresso dello scroll e scala/scurisce le carte coperte (transform/opacity). */
.s-soundcheck {
  /* mobile: larga quanto lo schermo, ma mai più alta dello spazio sopra la barra fissa (telefono in orizzontale) */
  --cw: min(calc(100vw - 2 * var(--pad-x)), 430px, calc((100svh - var(--bar-h) - 56px) * .8));
  --ch: calc(var(--cw) * 1.25);
  --cx: 50vw;
  --step: 11px;
  --top: calc((100svh - var(--bar-h) - var(--ch)) / 2);
  --gap-card: 6svh;
  --gap-col: 64px;
  position: relative;
  background: var(--lavagna);
  color: var(--gesso);
  padding: var(--sec-y) 0 calc(var(--sec-y) * .9);
}
@media (min-width: 900px) {
  .s-soundcheck { --ch: min(76svh, 700px); --cw: calc(var(--ch) * .8); --cx: 59vw; --step: 14px; --top: calc((100svh - var(--ch)) / 2);
    --gap-card: 10svh; --gap-col: 12svh; }
}

/* ---- intestazione ---- */
.s-soundcheck .sc-head { display: grid; gap: 14px; margin-bottom: clamp(48px, 9svh, 104px); }
.s-soundcheck .sc-title {
  font: 400 var(--fs-h2)/.86 var(--f-display);
  text-transform: uppercase; letter-spacing: -.004em; margin-left: -.035em;
}
.s-soundcheck .sc-sub { font: italic 400 var(--fs-note)/1.12 var(--f-serif); color: var(--gesso-70); }
.s-soundcheck .sc-sub em { color: var(--gesso); }
@media (min-width: 900px) {
  .s-soundcheck .sc-head { grid-template-columns: auto 1fr; align-items: end; column-gap: clamp(24px, 3vw, 48px); }
  .s-soundcheck .sc-sub { max-width: 15ch; padding-bottom: .55em; justify-self: end; text-align: right; }
}

/* ---- pila di carte ---- */
.s-soundcheck .sc-stage { position: relative; }
.s-soundcheck .sc-deck { position: relative; padding-bottom: 8svh; }
/* base (movimento ridotto, senza JS): carte in colonna, ben distanziate */
.s-soundcheck .sc-card {
  position: relative;
  z-index: calc(var(--i) + 1);
  width: var(--cw); height: var(--ch);
  margin: var(--gap-col) 0 0 calc(var(--cx) - var(--cw) / 2);
}
/* pila: ogni carta si ferma poco sotto la precedente */
html.js:not(.is-reduced) .s-soundcheck .sc-card {
  position: sticky;
  top: calc(var(--top) + (var(--i) - 2) * var(--step));
  margin-top: var(--gap-card);
}
.s-soundcheck .sc-card:first-child, html.js:not(.is-reduced) .s-soundcheck .sc-card:first-child { margin-top: 0; }
.s-soundcheck .sc-art { position: relative; width: 100%; height: 100%; }
.s-soundcheck .sc-in { position: absolute; inset: 0; border-radius: var(--r-media); transform-origin: 50% 0; transform: rotate(var(--r)); }
.s-soundcheck .sc-media {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-media); background: var(--lavagna-2);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .75), 0 10px 22px rgba(0, 0, 0, .4);
}
.s-soundcheck .sc-media::after { /* filo di gesso interno: bordo della carta */
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(238, 234, 224, .14); pointer-events: none;
}
.s-soundcheck .sc-video { width: 100%; height: 100%; object-fit: cover; }
.s-soundcheck .sc-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 11, .35) 0%, rgba(10, 12, 11, 0) 22%, rgba(10, 12, 11, 0) 46%, rgba(10, 12, 11, .82) 100%); }
.s-soundcheck .sc-dim { position: absolute; inset: 0; border-radius: inherit; background: #060807; opacity: 0; pointer-events: none; }

/* pausa/riproduci (WCAG 2.2.2) */
.s-soundcheck .sc-pp {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; color: var(--gesso);
  background: rgba(18, 22, 20, .62); box-shadow: inset 0 0 0 1px rgba(238, 234, 224, .22);
  transition: background-color .2s, transform .18s var(--ease-out);
}
.s-soundcheck .sc-pp:hover { background: rgba(18, 22, 20, .86); }
.s-soundcheck .sc-pp:active { transform: scale(.94); }
.s-soundcheck .sc-pp:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
.s-soundcheck .sc-pp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.s-soundcheck .sc-pp__play { display: none; }
.s-soundcheck .sc-pp.is-paused .sc-pp__play { display: block; }
.s-soundcheck .sc-pp.is-paused .sc-pp__pause { display: none; }

/* testo della carta — mobile: sopra la ripresa, in basso */
.s-soundcheck .sc-meta { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; pointer-events: none; }
.s-soundcheck .sc-take { font: 700 12px/1 var(--f-num); letter-spacing: .14em; text-transform: uppercase; color: var(--gesso-70); font-variant-numeric: tabular-nums; }
.s-soundcheck .sc-take .num { color: var(--neon); }
.s-soundcheck .sc-take__of { opacity: .7; margin-right: .2em; }
.s-soundcheck .sc-verb {
  margin-top: 8px; font: 400 clamp(28px, 7.4vw, 44px)/.88 var(--f-display);   /* colonna: Anton medio */
  text-transform: uppercase; letter-spacing: .004em; white-space: nowrap;
  overflow: clip; padding: .04em 0 .02em; margin-bottom: -.02em; /* maschera: il verbo sale da sotto la riga */
}
.s-soundcheck .sc-verb__in { display: inline-block; }
html.js:not(.is-reduced) .s-soundcheck .sc-verb { font-size: min(calc(var(--cw) * .2), 86px); }   /* pila: un verbo gigante alla volta */
.s-soundcheck .sc-cap { margin-top: 8px; font: italic 400 19px/1.2 var(--f-serif); color: var(--gesso); }

/* desktop: il verbo esce dalla carta, a sinistra, gigante */
@media (min-width: 900px) {
  .s-soundcheck .sc-meta {
    left: auto; right: calc(100% + clamp(32px, 3.4vw, 56px)); bottom: 7%;
    width: calc(var(--cx) - var(--cw) / 2 - clamp(32px, 3.4vw, 56px) - var(--pad-x));
    text-align: right;
  }
  .s-soundcheck .sc-take { font-size: 13px; }
  .s-soundcheck .sc-verb { margin-top: 14px; margin-right: -.02em; font-size: clamp(34px, 3.15vw, 50px); }
  html.js:not(.is-reduced) .s-soundcheck .sc-verb {
    font-size: min(8.8vw, 136px, calc((var(--cx) - var(--cw) / 2 - clamp(32px, 3.4vw, 56px) - var(--pad-x)) / 3.5));
  }
  .s-soundcheck .sc-cap { margin-top: 16px; font-size: clamp(20px, 1.7vw, 26px); color: var(--gesso-70); }
  .s-soundcheck .sc-shade { background: linear-gradient(180deg, rgba(10, 12, 11, .3) 0%, rgba(10, 12, 11, 0) 20%, rgba(10, 12, 11, 0) 80%, rgba(10, 12, 11, .3) 100%); }
}

/* ---- mixer: 5 canali, il fader della prova in corso sale (solo desktop con la pila, decorativo) ---- */
.s-soundcheck .sc-mixer { display: none; }
@media (min-width: 900px) {
  html.js:not(.is-reduced) .s-soundcheck .sc-mixer {
    display: block; position: absolute; top: 0; bottom: 8svh; pointer-events: none;
    left: calc(var(--cx) + var(--cw) / 2 + clamp(48px, 5vw, 88px));
  }
  .s-soundcheck .sc-mixer__in { position: sticky; top: calc(50svh - 110px); }
}
.s-soundcheck .sc-chs { display: flex; gap: 20px; }
.s-soundcheck .sc-ch { display: grid; justify-items: center; gap: 14px; }
.s-soundcheck .sc-track {
  position: relative; width: 14px; height: 190px;
  background:
    linear-gradient(var(--gesso-15), var(--gesso-15)) center / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(238, 234, 224, .16) 0 1px, transparent 1px 19px) center / 14px 100% no-repeat;
}
.s-soundcheck .sc-knob {
  position: absolute; left: -3px; bottom: 0; width: 20px; height: 10px; border-radius: 2px;
  background: #8d8a83; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.s-soundcheck .sc-knob::after { content: ""; position: absolute; inset: -1px; border-radius: 3px; background: var(--neon);
  box-shadow: 0 0 10px rgba(59, 255, 143, .8), 0 0 22px rgba(59, 255, 143, .35); opacity: 0; transition: opacity .25s; }
.s-soundcheck .sc-ch.is-on .sc-knob::after { opacity: 1; }
.s-soundcheck .sc-ch__n { font: 700 12px/1 var(--f-num); letter-spacing: .06em; color: var(--gesso-70); transition: color .25s; }
.s-soundcheck .sc-ch.is-on .sc-ch__n { color: var(--neon); }

/* ---- chiusura ---- */
.s-soundcheck .sc-outro { display: grid; justify-items: center; text-align: center; gap: 14px; }
.s-soundcheck .sc-stars { display: flex; gap: 14px; font-size: 15px; margin-bottom: 10px; }
.s-soundcheck .sc-stars span:nth-child(1) { color: var(--verde); }
.s-soundcheck .sc-stars span:nth-child(2) { color: var(--gesso); }
.s-soundcheck .sc-stars span:nth-child(3) { color: var(--rosso); }
.s-soundcheck .sc-disc { font: italic 400 clamp(30px, 3.6vw, 52px)/1.04 var(--f-serif); max-width: 19ch; text-wrap: balance; }
.s-soundcheck .sc-disc2 { font-size: var(--fs-lead); color: var(--gesso-70); max-width: 34ch; text-wrap: balance; }
.s-soundcheck .sc-cta { margin-top: 22px; }
.s-soundcheck .sc-cta svg { fill: none; stroke: currentColor; stroke-width: 1.75; }
.s-soundcheck .sc-cta svg circle:last-child { fill: currentColor; stroke: none; }

/* mobile: la prima carta resta in scena un po' di più (il suo verbo aspetta che il titolo sia uscito) */
@media (max-width: 899px) {
  html.js:not(.is-reduced) .s-soundcheck .sc-card:nth-child(2) { margin-top: calc(var(--gap-card) + 9svh); }
}

/* ==== src/sections/08-ring/section.css ==== */
/* ============ 08 RING — «LORIS VS OMAR»: manifesto di boxe giallo, reel dei gemelli, corde elastiche, quiz neutro ============ */
.s-ring {
  --vid-h: min(64svh, 640px);
  --vid-w: calc(var(--vid-h) * 9 / 16);
  --frame: 6px;
  --pt: clamp(40px, 6.5svh, 76px);
  --gap-n: clamp(22px, 2.4vw, 40px);
  --vs: clamp(104px, 9vw, 128px);
  /* i nomi SONO l'h2 della sezione: seconda eccezione «display» del sito (con BIS!), il manifesto vive del loro peso;
     più piccoli solo se a lato del video non ci stanno */
  --fs-name: min(calc(var(--fs-h2) * 1.35), calc((100vw - var(--vid-w) - 2 * var(--frame) - 2 * var(--gap-n) - 2 * var(--pad-x) - 24px) / 4.45));
  position: relative;
  background: var(--giallo);
  color: var(--inchiostro);
  overflow-x: clip;
  padding-bottom: var(--sec-y);
}
.s-ring :focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }

/* ---- banner in testa al manifesto ---- */
.s-ring .ring-banner {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px);
  min-height: 52px; padding: 14px var(--pad-x);
  background: var(--inchiostro); color: var(--giallo);
  font: 700 13px/1.35 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; text-align: center;
}
.s-ring .ring-stars { display: inline-flex; gap: .35em; font-size: 11px; letter-spacing: 0; flex: none; }
.s-ring .ring-stars i { font-style: normal; }
.s-ring .ring-stars i:nth-child(1) { color: var(--verde); }
.s-ring .ring-stars i:nth-child(2) { color: var(--gesso); }
.s-ring .ring-stars i:nth-child(3) { color: var(--rosso); }
.s-ring .ring-banner__dot { color: var(--gesso); opacity: .55; }

/* ---- palco: nomi, video, corde ---- */
.s-ring .ring-stage {
  position: relative;
  display: flex; justify-content: center;
  padding: var(--pt) 0 calc(var(--vs) / 2 + 28px);
}
.s-ring .ring-video { position: relative; margin: 0; flex: none; }
.s-ring .ring-video__frame {
  position: relative; width: calc(var(--vid-w) + 2 * var(--frame)); aspect-ratio: 9 / 16;
  border: var(--frame) solid var(--inchiostro); border-radius: 8px; overflow: hidden;
  background: var(--inchiostro);
  box-shadow: 12px 12px 0 rgba(23, 18, 14, .92);
}
/* il reel ha 1-2 px di bordo marrone in basso e ai lati: lo togliamo scalando appena */
.s-ring .ring-video__poster, .s-ring .ring-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.035); transform-origin: 50% 45%;
}

.s-ring .ring-play {
  position: absolute; z-index: 4; top: calc(var(--frame) + 12px); right: calc(var(--frame) + 12px);
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(23, 18, 14, .72); color: var(--gesso);
  box-shadow: 0 0 0 1.5px rgba(238, 234, 224, .35);
  transition: background-color .2s, transform .18s var(--ease-out);
}
.s-ring .ring-play:active { transform: scale(.92); }
.s-ring .ring-play:focus-visible { outline-color: var(--giallo); }
.s-ring .ring-play svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-ring .ring-play__play { fill: currentColor !important; stroke-width: 1.6 !important; }
.s-ring .ring-play .ring-play__play { display: none; }
.s-ring .ring-play.is-paused .ring-play__play { display: block; }
.s-ring .ring-play.is-paused .ring-play__pause { display: none; }

/* corde e paletti (disegnati da JS in px) — sopra il video, sotto nomi e «vs» */
.s-ring .ring-ropes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.s-ring .ring-rope path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-ring .ring-rope__sh { stroke: rgba(23, 18, 14, .26); stroke-width: 8px; transform: translateY(6px); }
.s-ring .ring-rope__base { stroke-width: 8px; }
.s-ring .ring-rope--rosso .ring-rope__base { stroke: var(--rosso); }
.s-ring .ring-rope--gesso .ring-rope__base { stroke: var(--gesso); }
.s-ring .ring-rope__hi { stroke: rgba(238, 234, 224, .55); stroke-width: 1.5px; transform: translateY(-1.8px); }
.s-ring .ring-rope--gesso .ring-rope__hi { stroke: rgba(255, 255, 255, .9); }
.s-ring .ring-post { fill: var(--inchiostro); }
.s-ring .ring-pad { fill: var(--rosso); stroke: var(--inchiostro); stroke-width: 2.5px; }
.s-ring .ring-pad__hi { fill: none; stroke: rgba(238, 234, 224, .5); stroke-width: 2px; stroke-linecap: round; }

/* titolo: i due nomi ai lati del video, il «vs» sul bordo basso */
.s-ring .ring-title { position: absolute; inset: 0; z-index: 3; pointer-events: none; margin: 0; font: 400 var(--fs-name)/.86 var(--f-display); }
.s-ring .ring-name {
  position: absolute; top: calc(var(--pt) + var(--vid-h) * .3);
  transform: translateY(-50%);
  font: 400 var(--fs-name)/.86 var(--f-display); text-transform: uppercase; letter-spacing: -.005em;
  white-space: nowrap;
}
.s-ring .ring-name__in { display: block; }
.s-ring .ring-name--l { right: calc(50% + var(--vid-w) / 2 + var(--frame) + var(--gap-n)); text-align: right; }
.s-ring .ring-name--r { left: calc(50% + var(--vid-w) / 2 + var(--frame) + var(--gap-n)); }

.s-ring .ring-vs {
  position: absolute; left: 50%; top: calc(var(--pt) + var(--vid-h) + 2 * var(--frame));
  width: var(--vs); height: var(--vs); margin: calc(var(--vs) / -2) 0 0 calc(var(--vs) / -2);
  display: grid; place-items: center;
}
.s-ring .ring-vs__disc {
  position: relative; grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rosso); color: var(--gesso);
  border: 3px solid var(--inchiostro);
  box-shadow: 6px 6px 0 var(--inchiostro), inset 0 0 0 5px var(--rosso), inset 0 0 0 6.5px rgba(238, 234, 224, .55);
}
.s-ring .ring-vs__txt { font: italic 400 calc(var(--vs) * .54)/1 var(--f-serif); text-transform: none; margin-top: -.12em; letter-spacing: -.01em; }
.s-ring .ring-burst { grid-area: 1 / 1; width: 270%; height: 270%; max-width: none; visibility: hidden; pointer-events: none; }
.s-ring .ring-burst path { fill: var(--inchiostro); }

/* ---- corpo (impaginato al centro, simmetrico come il manifesto): sottotitolo, testo, quiz, CTA ---- */
.s-ring .ring-body { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(28px, 4svh, 48px); }
.s-ring .ring-head {
  align-self: stretch;
  padding-bottom: clamp(28px, 4svh, 44px); margin-bottom: clamp(40px, 6svh, 72px);
  border-bottom: 4px solid var(--inchiostro);
  box-shadow: 0 5px 0 var(--giallo), 0 6.5px 0 var(--inchiostro);
}
.s-ring .ring-tag { font: italic 400 clamp(30px, 3.5vw, 56px)/1.04 var(--f-serif); letter-spacing: -.01em; text-wrap: balance; }
.s-ring .ring-fine { margin-top: 14px; font: 500 var(--fs-label)/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; opacity: .78; }

.s-ring .ring-text { max-width: 34em; font: 400 var(--fs-lead)/1.5 var(--f-sans); text-wrap: pretty; }
.s-ring .ring-quiz { width: 100%; max-width: 720px; margin-top: clamp(40px, 6svh, 64px); text-align: left; }
.s-ring .ring-q { font: italic 400 clamp(36px, 3.4vw, 52px)/1.05 var(--f-serif); letter-spacing: -.01em; text-align: center; }
.s-ring .ring-choices { display: flex; gap: 16px; margin-top: 26px; }
.s-ring .ring-cta {
  margin-top: clamp(32px, 4.5svh, 48px);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 56px; padding: 0 32px; border-radius: var(--r-pill);
  background: var(--inchiostro); color: var(--giallo); font: 700 17px/1.1 var(--f-sans); letter-spacing: .01em;
  transition: transform .18s var(--ease-out), box-shadow .25s;
}
.s-ring .ring-cta:active { transform: scale(.96); }
.s-ring .ring-cta__arr { display: inline-block; font-size: 1.15em; transition: transform .3s var(--ease-out); }
.s-ring .ring-cta:focus-visible .ring-cta__arr { transform: translateX(5px); }

.s-ring .ring-choice { position: relative; flex: 1 1 0; display: flex; }
.s-ring .ring-btn {
  position: relative; z-index: 1; flex: 1; min-height: 56px; padding: 0 22px; border-radius: var(--r-pill);
  border: 2.5px solid var(--inchiostro); background: rgba(238, 234, 224, .0); color: var(--inchiostro);
  font: 700 17px/1.1 var(--f-sans); letter-spacing: .005em;
  transition: background-color .22s, color .22s, box-shadow .22s;
}
.s-ring .ring-btn[aria-pressed="true"] { background: var(--inchiostro); color: var(--giallo); }

/* guantoni (decorativi): partono fuori dal bottone e lo colpiscono di lato */
.s-ring .ring-glove { position: absolute; z-index: 2; top: 50%; width: 112px; margin-top: -35px; pointer-events: none; }
.s-ring .ring-glove svg { width: 100%; height: auto; overflow: visible; visibility: hidden; }
.s-ring .ring-glove--l { right: calc(100% - 28px); }
.s-ring .ring-glove--r { left: calc(100% - 28px); transform: scaleX(-1); }
.s-ring .g-cuff { fill: var(--gesso); stroke: var(--inchiostro); stroke-width: 2.6; stroke-linejoin: round; }
.s-ring .g-band { fill: none; stroke: var(--rosso); stroke-width: 3.5; }
.s-ring .g-body, .s-ring .g-thumb { fill: var(--rosso); stroke: var(--inchiostro); stroke-width: 2.6; stroke-linejoin: round; }
.s-ring .g-knuck { fill: none; stroke: rgba(23, 18, 14, .45); stroke-width: 2; stroke-linecap: round; }
.s-ring .g-shine { fill: none; stroke: rgba(238, 234, 224, .6); stroke-width: 3.5; stroke-linecap: round; }

/* fumetto della risposta: sempre al suo posto (niente salti). In attesa della scommessa mostra un invito
   (Instrument Serif Italic) sopra la risposta, che c'è già ma è invisibile e tiene l'altezza del fumetto. */
.s-ring .ring-answer {
  position: relative; margin-top: 30px; min-height: 120px;
  padding: 22px 26px 24px 88px; border-radius: 22px;
  background: var(--gesso); border: 2.5px solid var(--inchiostro);
  box-shadow: 8px 8px 0 rgba(23, 18, 14, .9);
}
.s-ring .ring-answer__tail {
  position: absolute; top: -12.5px; left: 50%; width: 22px; height: 22px; margin-left: -11px;
  background: var(--gesso); border-left: 2.5px solid var(--inchiostro); border-top: 2.5px solid var(--inchiostro);
  transform: rotate(45deg); border-top-left-radius: 4px;
}
.s-ring .ring-answer[data-side="l"] .ring-answer__tail { left: 25%; }
.s-ring .ring-answer[data-side="r"] .ring-answer__tail { left: 75%; }
.s-ring .ring-bell { position: absolute; left: 24px; top: 22px; width: 44px; height: auto; overflow: visible; }
.s-ring .ring-bell__arm { fill: none; stroke: var(--inchiostro); stroke-width: 3; stroke-linecap: round; }
.s-ring .ring-bell__dome { fill: var(--giallo); stroke: var(--inchiostro); stroke-width: 2.6; stroke-linejoin: round; }
.s-ring .ring-bell__rim { fill: var(--inchiostro); }
.s-ring .ring-bell__knob { fill: var(--inchiostro); }
.s-ring .ring-bell__shine { fill: none; stroke: var(--gesso); stroke-width: 2.6; stroke-linecap: round; opacity: .9; }
.s-ring .ring-answer__text { font: 400 17px/1.45 var(--f-sans); }
.s-ring .ring-answer__k { display: block; font: 700 12px/1.3 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.s-ring .ring-answer__big { display: block; margin: 6px 0 8px; font: italic 400 clamp(32px, 2.6vw, 40px)/1 var(--f-serif); color: var(--rosso); letter-spacing: -.01em; }
.s-ring .ring-answer__p { display: block; max-width: 32em; }
/* l'invito esiste solo con JS (senza JS il fumetto mostra direttamente la risposta) */
.s-ring .ring-answer__wait { display: none; }
html.js .s-ring .ring-answer__wait {
  position: absolute; inset: 0; padding: 18px 28px 20px 88px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  font: italic 400 clamp(26px, 2.3vw, 32px)/1.08 var(--f-serif); letter-spacing: -.01em; text-wrap: balance;
  opacity: 0; visibility: hidden; transition: opacity .2s ease-out, visibility 0s linear .2s;
}
html.js .s-ring .ring-answer__wait span { display: block; color: var(--rosso-testo); }
html.js .s-ring .ring-answer:not(.is-answered) .ring-answer__wait { opacity: 1; visibility: visible; transition: none; }
html.js .s-ring .ring-answer:not(.is-answered) .ring-answer__text { visibility: hidden; }

/* hover solo con un puntatore vero (su touch l'hover resta «appiccicato» dopo il tap) */
@media (hover: hover) {
  .s-ring .ring-play:hover { background: var(--inchiostro); }
  .s-ring .ring-cta:hover { box-shadow: 0 0 0 6px rgba(23, 18, 14, .16); }
  .s-ring .ring-cta:hover .ring-cta__arr { transform: translateX(5px); }
  .s-ring .ring-btn:hover { background: rgba(23, 18, 14, .08); }
  .s-ring .ring-btn[aria-pressed="true"]:hover { background: var(--inchiostro); }
}

/* ---- mobile e finestre strette: manifesto impilato ---- */
@media (max-width: 899px) {
  .s-ring {
    --vid-w: min(76vw, calc(70svh * 9 / 16), 420px);
    --vid-h: calc(var(--vid-w) * 16 / 9);
    --frame: 5px;
    --vs: 66px;
    --fs-name: min(30vw, 150px);
  }
  .s-ring .ring-banner { font-size: 12px; letter-spacing: .16em; gap: 12px; padding: 12px 16px; }
  .s-ring .ring-banner__dot { display: none; }
  .s-ring .ring-banner__br { display: block; }
  .s-ring .ring-stars { flex-direction: column; gap: 2px; font-size: 10px; }

  .s-ring .ring-stage { flex-direction: column; align-items: center; padding: 30px 0 30px; }
  .s-ring .ring-title { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
  .s-ring .ring-name { position: relative; top: auto; left: auto; right: auto; transform: none; text-align: center; }
  .s-ring .ring-vs { position: relative; left: auto; top: auto; margin: -.06em 0 -.02em; z-index: 1; }
  .s-ring .ring-vs__disc { box-shadow: 4px 4px 0 var(--inchiostro), inset 0 0 0 4px var(--rosso), inset 0 0 0 5.5px rgba(238, 234, 224, .55); }
  .s-ring .ring-video__frame { box-shadow: 8px 8px 0 rgba(23, 18, 14, .92); }

  .s-ring .ring-body { margin-top: 8px; }
  .s-ring .ring-head { padding-bottom: 26px; margin-bottom: 30px; }
  .s-ring .ring-tag { font-size: clamp(30px, 8.6vw, 40px); }
  .s-ring .ring-fine { font-size: 12px; letter-spacing: .12em; text-wrap: balance; }
  .s-ring .ring-quiz { margin-top: 36px; }
  .s-ring .ring-choices { flex-direction: column; gap: 12px; }
  /* bottoni a tutta larghezza: il guantone colpisce dentro lo schermo (nel margine non ci sta) */
  .s-ring .ring-glove { width: 84px; margin-top: -26.6px; }
  .s-ring .ring-glove--l { right: auto; left: calc(6px - var(--pad-x)); }
  .s-ring .ring-glove--r { left: auto; right: calc(6px - var(--pad-x)); }
  .s-ring .ring-answer { padding: 20px 20px 22px 76px; }
  html.js .s-ring .ring-answer__wait { padding: 16px 20px 18px 76px; font-size: clamp(24px, 6.6vw, 28px); }
  .s-ring .ring-bell { left: 18px; width: 40px; }
  .s-ring .ring-cta { width: 100%; justify-content: center; margin-top: 34px; padding: 10px 20px; text-align: center; }
  .s-ring .ring-answer[data-side="l"] .ring-answer__tail,
  .s-ring .ring-answer[data-side="r"] .ring-answer__tail { left: 50%; }
}

/* ==== src/sections/09-locale/section.css ==== */
/* ============ 09 LOCALE — «Accendi il locale» (foto al buio + lampadina) e mosaico ============
   La luce è un solo layer quadrato (290% della foto) con un radial-gradient «bucato» fisso, spostato con transform:
   niente mask-image ridisegnata a ogni fotogramma, solo compositor. will-change lo mette il JS solo con la foto in vista. */
.s-locale { position: relative; background: var(--lavagna); color: var(--gesso); padding: var(--sec-y) 0; }

/* ---------- Parte A ----------
   «largo» = desktop, ma anche telefono in orizzontale (basso): foto accanto al testo e alta quanto lo spazio sopra la barra,
   mosaico a 12 colonne (in colonna singola la sezione era 11 schermate a 844×390). */
.s-locale .lc-a { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) {
  .s-locale .lc-a { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); min-height: min(100svh, 980px); }
  .s-locale .lc-intro { grid-column: 1 / 7; padding-bottom: 2svh; }
  .s-locale .lc-stage { grid-column: 7 / 13; justify-self: end; }
}
.s-locale .lc-kicker { display: inline-flex; align-items: center; gap: 12px; color: var(--gesso-70); }
.s-locale .lc-kicker__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 10px rgba(243, 226, 30, .7); }

/* titolo al neon: tubo spento (contorno) + tubo acceso sopra (solo la sua opacity si anima) */
.s-locale .lc-neon {
  position: relative; margin-top: 20px; width: max-content; max-width: 100%;
  font: 400 var(--fs-h2)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .012em;
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) { .s-locale .lc-neon { margin-left: -.03em; } }
.s-locale .lc-neon__off { display: block; color: rgba(59, 255, 143, .05); -webkit-text-stroke: 1.5px rgba(59, 255, 143, .32); }
.s-locale .lc-neon__on {
  position: absolute; inset: 0; color: #E9FFF2;
  text-shadow: 0 0 3px rgba(59, 255, 143, .95), 0 0 12px rgba(59, 255, 143, .8), 0 0 30px rgba(59, 255, 143, .5), 0 0 68px rgba(59, 255, 143, .3);
}
.s-locale .lc-text { margin-top: 30px; max-width: 44ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--gesso-70); }
.s-locale .lc-hint { margin-top: 26px; display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--f-sans); color: var(--gesso-70); }
.s-locale .lc-hint svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--giallo); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.s-locale .lc-hint__touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .s-locale .lc-hint__fine { display: none; }
  .s-locale .lc-hint__touch { display: inline; }
}
html.is-reduced .s-locale .lc-hint { display: none; }

/* foto */
.s-locale .lc-stage { position: relative; width: 100%; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) { .s-locale .lc-stage { width: min(100%, calc(min(82svh, 100svh - var(--bar-h) - 24px, 800px) * .75)); } }
.s-locale .lc-frame {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden; isolation: isolate; border-radius: var(--r-media);
  background: #0a0b0a; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 44px 90px -34px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(238, 234, 224, .1);
}
.s-locale .lc-photo { width: 100%; height: 100%; object-fit: cover; }
.s-locale .lc-dark, .s-locale .lc-off, .s-locale .lc-found { display: none; }
.s-locale.lc-live .lc-dark {
  display: block; position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 290%; aspect-ratio: 1; margin: -145% 0 0 -145%;
  /* raggio del gradiente = 1,45 × la larghezza della foto: piena luce fino a ~¼ della larghezza, penombra fino a ~¾,
     mai nero pieno (.9): la foto si intuisce anche al buio e non sembra un'immagine che non carica */
  background: radial-gradient(circle closest-side,
    rgba(255, 198, 122, .16) 0%, rgba(255, 184, 104, .07) 9%, rgba(14, 12, 9, .08) 17%,
    rgba(11, 11, 9, .48) 28%, rgba(9, 10, 9, .77) 40%, rgba(8, 9, 8, .9) 53%);
}
.s-locale.lc-live .lc-off { display: block; position: absolute; inset: 0; z-index: 2; background: #070807; pointer-events: none; }
.s-locale.lc-live .lc-found {
  display: block; position: absolute; left: 14px; top: 14px; z-index: 4; pointer-events: none;
  font: 700 12px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase; color: var(--gesso-70);
  padding: 8px 10px; border-radius: 4px; background: rgba(7, 8, 7, .55); box-shadow: inset 0 0 0 1px rgba(238, 234, 224, .14);
}
.s-locale .lc-found .num { margin-left: .5em; letter-spacing: .04em; color: var(--gesso); }
.s-locale .lc-found b { font-weight: 700; color: var(--neon); }

/* note «props» sugli oggetti veri della foto */
.s-locale .lc-props { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.s-locale .lc-prop { position: absolute; left: var(--x); top: var(--y); }
.s-locale.lc-live .lc-prop { opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.s-locale.lc-live .lc-prop.is-lit { opacity: 1; transform: none; }
.s-locale .lc-prop__dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--gesso); background: rgba(7, 8, 7, .3); box-shadow: 0 0 0 3px rgba(0, 0, 0, .28);
}
.s-locale .lc-prop__dot::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--neon); }
.s-locale .lc-prop__t {
  position: absolute; top: 0; left: 16px; transform: translateY(-50%); display: flex; align-items: baseline; gap: .45em; white-space: nowrap;
  font: italic 400 clamp(16px, 1.5vw, 21px)/1.15 var(--f-serif); color: var(--gesso);
  padding: 3px 9px 4px; border-radius: 3px; background: rgba(7, 8, 7, .62);
}
.s-locale .lc-prop[data-side="l"] .lc-prop__t { left: auto; right: 16px; }
.s-locale .lc-prop__t .num { font: 700 12px/1 var(--f-num); font-style: normal; letter-spacing: .04em; color: var(--neon); }

/* ---------- Parte B: mosaico ---------- */
.s-locale .lc-b { margin-top: clamp(72px, 12svh, 150px); }
.s-locale .lc-mosaic {
  display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "a a" "b b" "c c" "d e" "f f";
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) {
  .s-locale .lc-mosaic {
    gap: 20px; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "a a a a a a a b b b b b"
      "c c c c d d d b b b b b"
      "e e e e f f f f f f f f";
  }
}
.s-locale .lc-fig { position: relative; margin: 0; border-radius: var(--r-media); }
.s-locale .lc-fig--a { grid-area: a; aspect-ratio: 4 / 3; }
.s-locale .lc-fig--b { grid-area: b; aspect-ratio: 4 / 5; }
.s-locale .lc-fig--c { grid-area: c; aspect-ratio: 16 / 9; }
.s-locale .lc-fig--d { grid-area: d; aspect-ratio: 3 / 4; }
.s-locale .lc-fig--e { grid-area: e; aspect-ratio: 3 / 4; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) {
  .s-locale .lc-fig--a { aspect-ratio: 16 / 9; }
  .s-locale .lc-fig--b { aspect-ratio: auto; }
  .s-locale .lc-fig--c { aspect-ratio: 5 / 4; }
  .s-locale .lc-fig--d { aspect-ratio: auto; }
  .s-locale .lc-fig--e { aspect-ratio: 4 / 5; }
}
.s-locale .lc-media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-media); background: var(--lavagna-2); }
.s-locale .lc-par { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .s-locale .lc-par { top: -6%; height: 112%; } }
.s-locale .lc-fig--d .lc-par { object-position: 50% 40%; }
.s-locale .lc-fig--b .lc-par { object-position: 42% 50%; }
.s-locale .lc-fig--e .lc-par { object-position: 50% 46%; }   /* tavolo e bancone (la foto è già senza la veranda sulla strada) */
.s-locale .lc-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 18px 15px; border-radius: 0 0 var(--r-media) var(--r-media);
  font: italic 400 clamp(17px, 1.45vw, 23px)/1.2 var(--f-serif); color: var(--gesso); pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 10, 9, 0), rgba(8, 10, 9, .8));
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) { .s-locale .lc-cap { padding: 80px 24px 20px; } }
.s-locale .lc-cap__t { display: block; }
.s-locale .lc-pp {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; color: var(--gesso); background: rgba(18, 22, 20, .6); box-shadow: inset 0 0 0 1px rgba(238, 234, 224, .22);
  transition: background-color .2s, transform .18s var(--ease-out);
}
.s-locale .lc-pp:hover { background: rgba(18, 22, 20, .86); }
.s-locale .lc-pp:active { transform: scale(.94); }
.s-locale .lc-pp:focus-visible { outline: 3px solid var(--neon); outline-offset: 3px; }
.s-locale .lc-pp svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.s-locale .lc-pp__play { display: none; }
.s-locale .lc-pp.is-paused .lc-pp__play { display: block; }
.s-locale .lc-pp.is-paused .lc-pp__pause { display: none; }

/* servizi + CTA */
.s-locale .lc-end__t { font: italic 400 clamp(30px, 3.5vw, 52px)/1.04 var(--f-serif); }
.s-locale .lc-end__t em { color: var(--giallo); }
/* due blocchi di senso che vanno a capo solo tra loro («Ti siedi, la porti via» / «o te la portiamo a casa.») */
.s-locale .lc-end__l { display: inline-block; text-wrap: balance; }
.s-locale .lc-end { grid-area: f; align-self: center; display: grid; gap: 30px; justify-items: start; padding-top: 28px; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) and (max-height: 560px) { .s-locale .lc-end { padding: 0 0 0 clamp(24px, 4vw, 72px); gap: 40px; } }
.s-locale .lc-serv { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--gesso-15); }
.s-locale .lc-serv li {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--gesso-15); font: 500 16px/1.2 var(--f-sans); text-wrap: balance;
}
.s-locale .lc-serv li:nth-child(odd) { border-right: 1px solid var(--gesso-15); }
.s-locale .lc-serv li:nth-child(even) { padding-left: 16px; }
.s-locale .lc-serv svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--giallo); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) {   /* in orizzontale sotto i 900 px restano 2×2: in 4 colonne strette «Consegna a domicilio» va su 3 righe */
  .s-locale .lc-serv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-locale .lc-serv li { flex-direction: column; align-items: flex-start; gap: 20px; min-height: 0; padding: 26px 18px 26px 0; font-size: 17px; }
  .s-locale .lc-serv li + li { padding-left: 20px; }
  .s-locale .lc-serv li:not(:last-child) { border-right: 1px solid var(--gesso-15); }
  .s-locale .lc-serv svg { width: 38px; height: 38px; }
}
.s-locale .lc-cta svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 899px) and (orientation: portrait), (max-width: 599px) { .s-locale .lc-cta { width: 100%; } }

/* ==== src/sections/10-pubblico/section.css ==== */
/* ============ 10 · IL PUBBLICO — biglietti da concerto con i numeri veri (dati al 17/10/2026) ============ */
.s-pubblico {
  position: relative; z-index: 2;
  color: var(--inchiostro);
  background-color: var(--kraft);
  /* cartone kraft: fibre fini (piastrella 420px: a quella frequenza la ripetizione non si vede) + macchie larghe
     NON periodiche (gradienti posizionati sulla sezione intera: niente «carta da parati» a griglia) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.18 .55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .20 0 0 0 0 .11 0 0 0 .8 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
    radial-gradient(36% 17% at 12% 14%, rgba(89, 61, 36, .17), transparent 72%),
    radial-gradient(28% 13% at 74% 6%, rgba(255, 240, 214, .15), transparent 70%),
    radial-gradient(31% 16% at 91% 41%, rgba(89, 61, 36, .14), transparent 72%),
    radial-gradient(40% 15% at 37% 57%, rgba(255, 240, 214, .12), transparent 70%),
    radial-gradient(26% 12% at 6% 76%, rgba(89, 61, 36, .12), transparent 72%),
    radial-gradient(46% 18% at 67% 93%, rgba(89, 61, 36, .15), transparent 72%);
  background-size: 420px 420px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  padding-block: clamp(92px, 11vw, 164px) clamp(100px, 12vw, 176px);
}
/* bordi strappati del cartone: sporgono di 17px sulle sezioni vicine */
.s-pubblico::before, .s-pubblico::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px; pointer-events: none;
  background: var(--kraft);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='18'%3E%3Cpath d='M0 18 L0 9 L13 14.5 L22 11.5 L31 1.1 L44 8.0 L55 11.2 L68 3.2 L75 13.5 L82 9.4 L90 4.5 L96 4.0 L112 10.2 L125 14.0 L130 9.9 L141 2.9 L146 5.9 L154 9.3 L165 1.3 L174 10.2 L181 6.7 L192 7.0 L201 3.6 L212 4.0 L228 11.7 L237 12.0 L253 3.3 L260 11.8 L273 14.9 L280 13.9 L285 9.4 L296 3.6 L309 4.1 L318 7.8 L324 9.5 L332 14.5 L339 3.6 L355 12.9 L363 9.2 L379 2.8 L387 6.8 L395 10.2 L408 4.3 L415 9.7 L426 15.0 L434 7.3 L440 9.3 L448 13.8 L455 8.3 L462 8.7 L467 5.2 L472 8.6 L483 6.2 L488 2.9 L497 14.9 L503 12.8 L508 12.9 L516 3.4 L529 8.1 L534 3.7 L543 7.2 L556 3.1 L567 4.0 L572 13.4 L583 7.0 L591 12.9 L607 2.0 L620 5.4 L631 3.0 L638 4.0 L640 9 L640 18 Z'/%3E%3C/svg%3E") 0 0 / 640px 18px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='18'%3E%3Cpath d='M0 18 L0 9 L13 14.5 L22 11.5 L31 1.1 L44 8.0 L55 11.2 L68 3.2 L75 13.5 L82 9.4 L90 4.5 L96 4.0 L112 10.2 L125 14.0 L130 9.9 L141 2.9 L146 5.9 L154 9.3 L165 1.3 L174 10.2 L181 6.7 L192 7.0 L201 3.6 L212 4.0 L228 11.7 L237 12.0 L253 3.3 L260 11.8 L273 14.9 L280 13.9 L285 9.4 L296 3.6 L309 4.1 L318 7.8 L324 9.5 L332 14.5 L339 3.6 L355 12.9 L363 9.2 L379 2.8 L387 6.8 L395 10.2 L408 4.3 L415 9.7 L426 15.0 L434 7.3 L440 9.3 L448 13.8 L455 8.3 L462 8.7 L467 5.2 L472 8.6 L483 6.2 L488 2.9 L497 14.9 L503 12.8 L508 12.9 L516 3.4 L529 8.1 L534 3.7 L543 7.2 L556 3.1 L567 4.0 L572 13.4 L583 7.0 L591 12.9 L607 2.0 L620 5.4 L631 3.0 L638 4.0 L640 9 L640 18 Z'/%3E%3C/svg%3E") 0 0 / 640px 18px repeat-x;
}
.s-pubblico::before { top: -17px; }
.s-pubblico::after { bottom: -17px; transform: scale(-1, -1); }
.s-pubblico :focus-visible { outline-color: var(--inchiostro); }

/* ---- testata ---- */
.s-pubblico .pu__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 48px; }
.s-pubblico .pu__title { font: 400 var(--fs-h2)/.86 var(--f-display); text-transform: uppercase; letter-spacing: .005em; margin-left: -.04em; }
.s-pubblico .pu__sub { font: italic 400 var(--fs-note)/1.12 var(--f-serif); text-align: right; padding-bottom: .3em; }
.s-pubblico .pu__nw { display: block; white-space: nowrap; }

/* ---- biglietti ---- */
.s-pubblico .pu__tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 52px) clamp(22px, 2.6vw, 40px); margin-top: clamp(44px, 5.5vw, 84px); }
.s-pubblico .tk {
  --n: clamp(9px, 2.3cqi, 15px);           /* raggio delle tacche della perforazione */
  container-type: inline-size;
  display: flex; min-width: 0;
  transform: rotate(calc(var(--r, 0) * 1deg));
  filter: drop-shadow(0 1px 0 rgba(23, 18, 14, .28)) drop-shadow(0 14px 18px rgba(23, 18, 14, .22));
}
.s-pubblico .tk:nth-child(even) { margin-top: clamp(14px, 2.4vw, 38px); }   /* margin, non translate: GSAP assorbe la proprietà translate */
.s-pubblico .tk__main {
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; flex-direction: column; gap: clamp(6px, 1.6cqi, 12px);
  padding: clamp(16px, 4.6cqi, 30px) clamp(16px, 5cqi, 34px) clamp(18px, 4.8cqi, 30px);
  background: var(--gesso); border-radius: 10px 0 0 10px;
  -webkit-mask: radial-gradient(circle at 100% 0, transparent var(--n), black calc(var(--n) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--n), black calc(var(--n) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 100% 0, transparent var(--n), black calc(var(--n) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 100% 100%, transparent var(--n), black calc(var(--n) + .5px)) bottom / 100% 51% no-repeat;
}
/* filetto di stampa interno, come sui biglietti veri */
.s-pubblico .tk__main::before { content: ""; position: absolute; inset: 8px 0 8px 8px; border: 1px solid rgba(23, 18, 14, .16); border-right: 0; border-radius: 5px 0 0 5px; pointer-events: none; }
.s-pubblico .tk__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; font: 500 clamp(12px, 2.2cqi, 12.5px)/1.2 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; color: rgba(23, 18, 14, .72); }
@container (max-width: 300px) {   /* biglietti stretti (320-360px): «PIZZA & ROCK’N’ROLL» su una riga, il numero sotto */
  .s-pubblico .tk__top { letter-spacing: .05em; }
}
.s-pubblico .tk__top i { font: italic 400 1.45em/1 var(--f-serif); text-transform: none; letter-spacing: 0; color: var(--inchiostro); }
.s-pubblico .tk__no { font: 700 1.1em/1 var(--f-num); letter-spacing: .04em; color: var(--rosso-testo); font-variant-numeric: tabular-nums; }
.s-pubblico .tk__num { display: flex; align-items: baseline; gap: .14em; margin-top: auto; font: 700 clamp(46px, 16.5cqi, 116px)/.9 var(--f-num); letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-pubblico .tk__val { display: inline-grid; }
.s-pubblico .tk__val > * { grid-area: 1 / 1; }
.s-pubblico .tk__ghost { visibility: hidden; }
.s-pubblico .tk__unit { font: italic 400 .4em/1 var(--f-serif); letter-spacing: 0; }
.s-pubblico .tk__label { font: 500 clamp(15px, 3cqi, 19px)/1.3 var(--f-sans); max-width: 30ch; text-wrap: balance; }
.s-pubblico .tk__strong { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.s-pubblico .tk__soft { white-space: nowrap; }

.s-pubblico .tk__stub {
  flex: 0 0 28%; position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: clamp(16px, 4.6cqi, 30px) clamp(12px, 3.6cqi, 24px) clamp(16px, 4.2cqi, 26px);
  background: var(--giallo); border-radius: 0 10px 10px 0;
  transform-origin: 0 0; transition: transform .3s cubic-bezier(.33, 1, .68, 1);
  -webkit-mask: radial-gradient(circle at 0 0, transparent var(--n), black calc(var(--n) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent var(--n), black calc(var(--n) + .5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 0 0, transparent var(--n), black calc(var(--n) + .5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at 0 100%, transparent var(--n), black calc(var(--n) + .5px)) bottom / 100% 51% no-repeat;
}
/* perforazione */
.s-pubblico .tk__stub::before { content: ""; position: absolute; left: 0; top: calc(var(--n) + 6px); bottom: calc(var(--n) + 6px); width: 2px;
  background: linear-gradient(rgba(23, 18, 14, .5) 50%, transparent 0) 0 0 / 2px 9px repeat-y; }
.s-pubblico .tk__adm { font: 700 clamp(12px, 2.2cqi, 12.5px)/1 var(--f-sans); text-transform: uppercase; letter-spacing: .2em; }
.s-pubblico .tk__date { font: 500 clamp(14px, 2.5cqi, 14.5px)/1.25 var(--f-sans); }   /* informazione obbligatoria: mai sotto i 14px */
.s-pubblico .tk__date span { display: block; font: 700 clamp(15px, 3.2cqi, 19px)/1.1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.s-pubblico .tk__bar { display: block; height: clamp(22px, 6cqi, 36px); opacity: .85;
  background: repeating-linear-gradient(90deg, var(--inchiostro) 0 2px, transparent 2px 4px, var(--inchiostro) 4px 5px, transparent 5px 8px, var(--inchiostro) 8px 11px, transparent 11px 12px, var(--inchiostro) 12px 13px, transparent 13px 16px); }
@media (hover: hover) and (pointer: fine) {
  .s-pubblico .tk:hover .tk__stub { transform: rotate(-6deg); }
}

/* ---- temi (chip) + nota + CTA ---- */
.s-pubblico .pu__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 25rem); gap: 40px clamp(32px, 5vw, 96px); align-items: end; margin-top: clamp(64px, 7.5vw, 112px); }
.s-pubblico .pu__themes-title { font: 500 var(--fs-label)/1.3 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; max-width: 46ch; }
.s-pubblico .pu__chips { display: flex; flex-wrap: wrap; gap: 16px 12px; margin-top: 22px; }
.s-pubblico .pu__chips li {
  font: 400 clamp(22px, 1.75vw, 27px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  padding: .5em .72em .46em; border-radius: 8px;
  color: var(--gesso); background: var(--inchiostro);
  box-shadow: 0 0 0 3px var(--gesso), 0 6px 12px rgba(23, 18, 14, .25);
  transition: color .25s, text-shadow .25s, box-shadow .25s;
}
.s-pubblico .pu__chips li:nth-child(3n + 1) { rotate: -1.6deg; }
.s-pubblico .pu__chips li:nth-child(3n + 2) { rotate: 1.2deg; }
.s-pubblico .pu__chips li:nth-child(4n) { rotate: -.6deg; }
@media (hover: hover) and (pointer: fine) {
  .s-pubblico .pu__chips li:hover { color: var(--neon); text-shadow: 0 0 6px color-mix(in srgb, var(--neon) 70%, transparent), 0 0 18px color-mix(in srgb, var(--neon) 45%, transparent);
    box-shadow: 0 0 0 3px var(--gesso), 0 0 0 5px color-mix(in srgb, var(--neon) 60%, transparent), 0 8px 26px color-mix(in srgb, var(--neon) 30%, transparent); }
}
.s-pubblico .pu__end { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.s-pubblico .pu__note { font: italic 400 clamp(20px, 1.55vw, 24px)/1.2 var(--f-serif); }
.s-pubblico .pu__cta { background: var(--inchiostro); color: var(--gesso); min-height: 56px; padding: 0 26px 0 22px; white-space: normal; text-align: left; }
.s-pubblico .pu__cta:hover { background: var(--lavagna-2); }
.s-pubblico .pu__cta svg { color: var(--giallo); width: 22px; height: 22px; }
.s-pubblico .pu__handle { white-space: nowrap; }

/* ---- tablet / mobile ---- */
@media (max-width: 899px) {
  .s-pubblico .pu__foot { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .s-pubblico .pu__head { display: block; }
  .s-pubblico .pu__sub { text-align: left; margin-top: 14px; font-size: 22px; }
  .s-pubblico .pu__tickets { grid-template-columns: 1fr; gap: 22px; margin-top: 36px; }
  .s-pubblico .tk:nth-child(even) { margin-top: 0; }
  .s-pubblico .tk__stub { flex-basis: 30%; }
  .s-pubblico .tk__num { font-size: clamp(40px, 15.5cqi, 72px); }
  .s-pubblico .pu__foot { margin-top: 56px; gap: 36px; }
  .s-pubblico .pu__chips { gap: 14px 10px; margin-top: 18px; }
  .s-pubblico .pu__cta { width: 100%; justify-content: flex-start; }
}

/* ==== src/sections/11-muro/section.css ==== */
/* ============ 11 · MURO — le info attaccate al muro di legno (adesivi da girare) + «In breve» ============ */
@property --peel { syntax: "<length>"; inherits: true; initial-value: 0px; }

.s-muro {
  --plank: clamp(104px, 8.6vw, 132px);
  --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  --tag: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 70%, 0 30%);
  position: relative; z-index: 1;
  color: var(--gesso);
  background-color: var(--legno-scuro);
  /* legno: venatura (unica texture, statica) + giunture delle assi + luce dall'alto.
     La venatura ha frequenza bassa in orizzontale: la piastrella deve essere larga quanto lo schermo, altrimenti le stesse
     striature si ripetono a colonne. Telefono/tablet stretto: 900px (più larga dello schermo); da 900px in su: 2000px.
     Venatura scura e chiara su piastrelle alte 520 e 730px: la somma non si ripete in verticale (ogni 37.960px). */
  --wood-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .16' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .03 0 0 0 0 .01 0 0 0 -2 .78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --wood-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='730'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .4' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .75 0 0 0 0 .55 0 0 0 .6 -.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E");
  background-image:
    var(--wood-l), var(--wood-h),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--plank) - 3px), rgba(0, 0, 0, .42) calc(var(--plank) - 3px) calc(var(--plank) - 1px), rgba(255, 255, 255, .07) calc(var(--plank) - 1px) var(--plank)),
    radial-gradient(120% 70% at 30% 0%, rgba(255, 220, 160, .12), transparent 70%),
    linear-gradient(180deg, var(--legno) 0%, color-mix(in srgb, var(--legno) 55%, var(--legno-scuro)) 60%, var(--legno-scuro) 100%);
  padding-block: clamp(100px, 10vw, 150px) clamp(84px, 9vw, 136px);
}
@media (min-width: 900px) {
  .s-muro { --wood-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='520'%3E%3Cfilter id='l' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .16' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .03 0 0 0 0 .01 0 0 0 -2 .78'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
    --wood-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='730'%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .4' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .75 0 0 0 0 .55 0 0 0 .6 -.33'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)'/%3E%3C/svg%3E"); }
}
/* battiscopa: il muro di legno finisce su un listello, non con un taglio netto sulla lavagna */
.s-muro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(14px, 1.3vw, 20px); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 226, 180, .16) 0 1px, color-mix(in srgb, var(--legno-scuro) 82%, #000) 1px, color-mix(in srgb, var(--legno-scuro) 55%, #000) 100%);
  box-shadow: 0 -12px 26px rgba(0, 0, 0, .28); }

/* ---- impaginazione: desktop = muro a sinistra, testata + «In breve» a destra ---- */
.s-muro .mu { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 28vw, 420px); grid-template-rows: auto 1fr; column-gap: clamp(40px, 4.4vw, 84px); align-items: start; }
.s-muro .mu__wall { grid-column: 1; grid-row: 1 / span 2; }
.s-muro .mu__head { grid-column: 2; grid-row: 1; }
.s-muro .mu__brief { grid-column: 2; grid-row: 2; }

.s-muro .mu__title { display: flex; flex-direction: column; }
.s-muro .mu__t1 { font: 400 var(--fs-h2)/.86 var(--f-display); text-transform: uppercase; letter-spacing: .005em; margin-left: -.03em; }
.s-muro .mu__t2 { font: italic 400 clamp(30px, 2.8vw, 46px)/1 var(--f-serif); margin-top: .16em; }
.s-muro .mu__sub { margin-top: 18px; font: 400 var(--fs-body)/1.5 var(--f-sans); max-width: 36ch; text-wrap: pretty; }
.s-muro .mu__sub--fine { display: none; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .s-muro .mu__sub--fine { display: inline; }
  .s-muro .mu__sub--touch { display: none; }
}

/* ---- «In breve» ---- */
.s-muro .mu__brief {
  position: relative; margin-top: clamp(28px, 3vw, 40px);
  padding: clamp(26px, 2.4vw, 34px) clamp(22px, 2.2vw, 32px) clamp(22px, 2vw, 28px);
  background: var(--lavagna); color: var(--gesso); border-radius: var(--r-card);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35), 0 22px 44px rgba(0, 0, 0, .38);
}
/* due viti */
.s-muro .mu__brief::before, .s-muro .mu__brief::after { content: ""; position: absolute; top: 13px; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gesso-70), rgba(0, 0, 0, .7) 75%); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.s-muro .mu__brief::before { left: 13px; }
.s-muro .mu__brief::after { right: 13px; }
.s-muro .mu__brief-title { font: italic 400 clamp(30px, 2.4vw, 38px)/1 var(--f-serif); padding-bottom: 14px; }
.s-muro .mu__addr { font-style: normal; }
.s-muro .mu__name { font: 700 13px/1.2 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; padding: 14px 0 10px; border-top: 1px solid var(--gesso-15); }
.s-muro .mu__name .amp { font-size: 1.5em; letter-spacing: 0; padding: 0 .06em; line-height: 0; }
.s-muro .mu__row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; column-gap: 14px; min-height: 52px; padding: 7px 0; border-top: 1px solid var(--gesso-15); font: 400 16px/1.4 var(--f-sans); }
.s-muro .mu__ico { width: 22px; height: 22px; fill: none; stroke: var(--giallo); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* padding verticale su un inline: area di tocco ≥ 48px senza cambiare l'impaginazione */
.s-muro .mu__row a { padding-block: 13px; margin-block: -13px; text-decoration: underline; text-decoration-color: var(--gesso-15); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.s-muro .mu__row a:hover { text-decoration-color: var(--giallo); }
.s-muro .mu__tel { font: 700 21px/1 var(--f-num); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.s-muro .mu__closed { font-weight: 700; }
.s-muro .mu__closed .mu__ico { stroke: var(--rosso); }
.s-muro .mu__ctas { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid var(--gesso-15); }
.s-muro .mu__ctas .btn { flex: 1 1 auto; padding: 0 20px; }
.s-muro .mu__reset { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 10px; padding: 0 4px; font: 500 15px/1.2 var(--f-sans); color: var(--gesso); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--gesso-15); }
.s-muro .mu__reset[hidden] { display: none; }
.s-muro .mu__reset svg { width: 20px; height: 20px; color: var(--giallo); }
.s-muro .mu__reset:hover { text-decoration-color: var(--giallo); }

/* ================= ADESIVI ================= */
.s-muro .mu__wall { outline: 0; }
.s-muro .st { position: relative; container-type: inline-size; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.s-muro .st img { width: 100%; height: auto; -webkit-user-drag: none; }
.s-muro .st__hit { position: absolute; inset: 0; z-index: 1; border-radius: 14px; cursor: pointer; }
.s-muro .st__hit:focus-visible { outline: 3px solid var(--giallo); outline-offset: 7px; }
.s-muro .st--tel .st__hit { border-radius: 50%; }
.s-muro .st--ig .st__hit { border-radius: var(--r-pill); }
.s-muro .st__body { position: relative; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .3)) drop-shadow(0 9px 10px rgba(0, 0, 0, .34)); }
.s-muro .st.is-lifted .st__body { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .12)) drop-shadow(0 26px 26px rgba(0, 0, 0, .42)); }
.s-muro .st__card { display: grid; grid-template-columns: minmax(0, 1fr); }
/* width:100% = la larghezza resta quella della cella; se il retro è più alto, il fronte si allunga (l'aspect-ratio fa da minimo) */
.s-muro .st__face { --cut: clamp(4px, 2.4cqi, 8px); grid-area: 1 / 1; position: relative; width: 100%; min-width: 0; padding: var(--cut); background: var(--gesso); }
.s-muro .st__ink { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqi; padding: 6cqi; text-align: center; overflow: hidden; }
/* lucido dell'adesivo */
.s-muro .st__front .st__ink::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .08)); }

/* a riposo si vede UNA faccia, senza 3D (niente layer compositi permanenti: 11 adesivi × 4 layer prima).
   visibility e non display: le due facce restano nella stessa cella, l'altezza della carta non cambia girandola.
   Il 3D (preserve-3d + backface) c'è solo con .is-flipping, che il JS mette all'inizio del giro e toglie alla fine. */
.s-muro .st:not(.is-flipped) .st__back, .s-muro .st.is-flipped .st__front { visibility: hidden; }
.s-muro .st.is-flipping .st__card { transform-style: preserve-3d; }
.s-muro .st.is-flipping .st__face { visibility: visible; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.s-muro .st.is-flipping .st__back { transform: rotateY(180deg); }

/* retro = carta siliconata del retro, con la sua stampa a righe */
.s-muro .st__back { border-radius: 14px; }
.s-muro .st__back .st__ink { border-radius: 9px; color: var(--inchiostro); gap: 4.5cqi; padding: 6cqi 5.5cqi;
  background: repeating-linear-gradient(135deg, rgba(23, 18, 14, .05) 0 1px, transparent 1px 8px), var(--liner, color-mix(in srgb, var(--gesso) 88%, var(--kraft))); }
/* il retro conserva un'ombra del colore del fronte (si capisce quale adesivo hai girato) */
.s-muro .st--tel { --liner: color-mix(in srgb, var(--gesso) 70%, var(--giallo)); }
.s-muro .st--stop { --liner: color-mix(in srgb, var(--gesso) 84%, var(--rosso)); }
.s-muro .st--asporto { --liner: color-mix(in srgb, var(--gesso) 55%, var(--kraft)); }
.s-muro .st--ticket { --liner: color-mix(in srgb, var(--gesso) 72%, var(--verde)); }
.s-muro .st--dehors { --liner: color-mix(in srgb, var(--gesso) 86%, var(--lavagna-2)); }
.s-muro .st--beer { --liner: color-mix(in srgb, var(--gesso) 80%, var(--neon)); }
.s-muro .st--ig { --liner: color-mix(in srgb, var(--gesso) 84%, var(--inchiostro)); }
.s-muro .st--fb { --liner: color-mix(in srgb, var(--gesso) 70%, var(--giallo)); }
.s-muro .st--via, .s-muro .st--consegna, .s-muro .st--mail { --liner: var(--gesso); }
.s-muro .st__txt { font: 500 clamp(14px, 6.4cqi, 17px)/1.28 var(--f-sans); text-wrap: balance; }
.s-muro .st__act { pointer-events: none; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 48px; max-width: 100%; padding: .25em 1.15em;
  border-radius: var(--r-pill); background: var(--inchiostro); color: var(--gesso); font: 700 clamp(14px, 6.2cqi, 16px)/1.15 var(--f-sans); transition: background-color .2s, color .2s; }
.s-muro .st__act:hover { background: var(--rosso-testo); }   /* testo piccolo su rosso: la variante AA */
.s-muro .st__act:focus-visible { outline: 3px solid var(--inchiostro); outline-offset: 3px; }
.s-muro .st.is-flipped .st__act { pointer-events: auto; }
.s-muro .st__act svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.s-muro .st__act--num { font: 700 clamp(14px, 6.6cqi, 18px)/1 var(--f-num); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: .8em; }
.s-muro .st__act--mail { font-size: clamp(14px, 5.6cqi, 15px); overflow-wrap: anywhere; line-height: 1.2; padding-block: .6em; border-radius: 14px; }
/* adesivi stretti (griglia mobile, muro a 1100px): il bottone sul retro resta su una riga */
@container (max-width: 200px) {
  .s-muro .st__act { padding-inline: .85em; }
  .s-muro .st__act svg { display: none; }
  .s-muro .st__back .st__ink { padding-inline: 4.5cqi; }
}

/* angolo che si solleva (adesivi rettangolari, solo mouse) */
.s-muro .st--peel { transition: --peel .25s var(--ease-out); }
.s-muro .st--peel .st__front { clip-path: polygon(0 0, calc(100% - var(--peel)) 0, 100% var(--peel), 100% 100%, 0 100%); }
.s-muro .st--peel .st__front::before { content: ""; position: absolute; z-index: 4; top: 0; right: 0; width: var(--peel); height: var(--peel); pointer-events: none;
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--gesso) 72%, var(--inchiostro)) 50%, var(--gesso) 88%); border-bottom-left-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .s-muro .st--peel:hover { --peel: 24px; }
}

/* ---- telefono: cerchio giallo ---- */
.s-muro .st--tel .st__front { border-radius: 50%; aspect-ratio: 1; }
.s-muro .st--tel .st__front .st__ink { border-radius: 50%; background: var(--giallo); color: var(--inchiostro); gap: 2.2cqi; padding: 0; }
.s-muro .st--tel .st__front .st__ink::before { content: ""; position: absolute; inset: 4.4cqi; border-radius: 50%; border: 1.5px dashed rgba(23, 18, 14, .38); }
.s-muro .st__kick { font: 700 max(12px, 5.2cqi)/1 var(--f-sans); letter-spacing: .24em; padding-left: .24em; text-transform: uppercase; }
.s-muro .st__tel { display: flex; flex-direction: column; font: 700 17.5cqi/.9 var(--f-num); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.s-muro .st--tel .st__ico { width: 8cqi; height: 8cqi; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; margin-top: .6cqi; }

/* ---- indirizzo: targa ---- */
.s-muro .st--via .st__front { border-radius: 12px; aspect-ratio: 16 / 10; }
.s-muro .st--via .st__front .st__ink { border-radius: 7px; background: var(--gesso); color: var(--inchiostro); gap: 2.4cqi;
  box-shadow: inset 0 0 0 2.6cqi var(--gesso), inset 0 0 0 calc(2.6cqi + 2px) var(--inchiostro); }
.s-muro .st__via-k { font: 700 max(12px, 4.4cqi)/1 var(--f-sans); letter-spacing: .34em; padding-left: .34em; text-transform: uppercase; }
.s-muro .st__via-n { font: 400 max(22px, 14.5cqi)/.88 var(--f-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.s-muro .st__via-c { font: 500 max(12px, 4.1cqi)/1.15 var(--f-sans); letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; color: var(--rosso-testo); }
@container (max-width: 230px) {
  .s-muro .st__via-c { letter-spacing: .06em; padding-left: .06em; white-space: nowrap; }
}

/* ---- STOP: ottagono ---- */
.s-muro .st--stop .st__front { aspect-ratio: 1; clip-path: var(--oct); }
.s-muro .st--stop .st__front .st__ink { clip-path: var(--oct); background: var(--rosso); color: var(--gesso); gap: 1.4cqi; padding: 0; }
.s-muro .st__stop-ring { position: absolute; inset: 3.4cqi; width: calc(100% - 6.8cqi); height: calc(100% - 6.8cqi); fill: none; stroke: var(--gesso); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.s-muro .st__stop-w { font: 400 29cqi/.84 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.s-muro .st__stop-s { font: 400 max(24px, 11cqi)/.96 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }

/* ---- ASPORTO: cartellino kraft ---- */
.s-muro .st--asporto .st__front { aspect-ratio: 2.15; clip-path: var(--tag); }
.s-muro .st--asporto .st__front .st__ink { clip-path: var(--tag); background: var(--kraft); color: var(--inchiostro); padding: 0 6cqi 0 22cqi; }
.s-muro .st__hole { position: absolute; left: 9cqi; top: 50%; width: 7.5cqi; height: 7.5cqi; margin-top: -3.75cqi; border-radius: 50%; background: var(--legno-scuro); box-shadow: 0 0 0 1.4cqi var(--gesso); }
.s-muro .st--asporto .st__word { font: 400 max(22px, 16.5cqi)/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }

/* ---- CONSEGNA: etichetta di spedizione ---- */
.s-muro .st--consegna .st__front { aspect-ratio: 1.5; border-radius: 9px; }
.s-muro .st--consegna .st__front .st__ink { border-radius: 4px; background: var(--gesso); color: var(--inchiostro); padding: 0; gap: 0; justify-content: stretch; box-shadow: inset 0 0 0 2px var(--inchiostro); }
.s-muro .st__lab-h { align-self: stretch; background: var(--inchiostro); color: var(--gesso); padding: 3.6cqi 0 3.2cqi; font: 400 max(22px, 14cqi)/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.s-muro .st__lab-b { flex: 1; display: grid; place-items: center; font: 400 max(22px, 13cqi)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.s-muro .st__lab-bar { align-self: stretch; height: 9cqi; margin: 0 7cqi 6cqi;
  background: repeating-linear-gradient(90deg, var(--inchiostro) 0 2px, transparent 2px 4px, var(--inchiostro) 4px 5px, transparent 5px 8px, var(--inchiostro) 8px 11px, transparent 11px 12px, var(--inchiostro) 12px 13px, transparent 13px 16px); }

/* ---- SI MANGIA ANCHE QUI: biglietto ---- */
.s-muro .st--ticket .st__front { aspect-ratio: 2.1; border-radius: 8px;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7cqi, black calc(7cqi + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7cqi, black calc(7cqi + .5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 7cqi, black calc(7cqi + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 7cqi, black calc(7cqi + .5px)) right / 51% 100% no-repeat; }
.s-muro .st--ticket .st__front .st__ink { border-radius: 4px; background: var(--verde); color: var(--inchiostro);
  -webkit-mask: radial-gradient(circle at calc(-1 * var(--cut)) 50%, transparent calc(7cqi + var(--cut)), black calc(7cqi + var(--cut) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at calc(100% + var(--cut)) 50%, transparent calc(7cqi + var(--cut)), black calc(7cqi + var(--cut) + .5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at calc(-1 * var(--cut)) 50%, transparent calc(7cqi + var(--cut)), black calc(7cqi + var(--cut) + .5px)) left / 51% 100% no-repeat, radial-gradient(circle at calc(100% + var(--cut)) 50%, transparent calc(7cqi + var(--cut)), black calc(7cqi + var(--cut) + .5px)) right / 51% 100% no-repeat; }
.s-muro .st--ticket .st__front .st__ink::before { content: ""; position: absolute; inset: 4.4cqi 13cqi; border: 2px dashed rgba(23, 18, 14, .42); border-radius: 4px; }
.s-muro .st--ticket .st__word { font: 400 max(22px, 12.5cqi)/.92 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }

/* ---- DEHORS: lavagna con le lampadine ---- */
.s-muro .st--dehors .st__front { aspect-ratio: 1.2; border-radius: 12px; }
.s-muro .st--dehors .st__front .st__ink { border-radius: 7px; background: var(--lavagna-2); color: var(--gesso); gap: 4cqi; }
.s-muro .st__lights { width: 86%; overflow: visible; filter: drop-shadow(0 0 4px rgba(243, 226, 30, .55)); }
.s-muro .st__lights path { fill: none; stroke: var(--gesso-70); stroke-width: 1.3; }
.s-muro .st__lights circle { fill: var(--giallo); }
.s-muro .st--dehors .st__word { font: 400 max(22px, 19cqi)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }

/* ---- PIZZA & BEER: nero con bordo neon ---- */
.s-muro .st--beer .st__front { aspect-ratio: 2.1; border-radius: 10px; }
.s-muro .st--beer .st__front .st__ink { border-radius: 6px; background: var(--lavagna);
  box-shadow: inset 0 0 0 2.4cqi var(--lavagna), inset 0 0 0 calc(2.4cqi + 2px) var(--neon), inset 0 0 14px calc(2.4cqi + 2px) color-mix(in srgb, var(--neon) 22%, transparent); }
.s-muro .st__neon { font: 400 max(22px, 13.5cqi)/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; color: var(--neon);
  text-shadow: 0 0 3px color-mix(in srgb, var(--neon) 85%, transparent), 0 0 14px color-mix(in srgb, var(--neon) 55%, transparent); }
.s-muro .st__neon i { font: italic 400 1.08em/1 var(--f-serif); text-transform: none; color: var(--giallo); padding: 0 .04em; text-shadow: 0 0 10px color-mix(in srgb, var(--giallo) 55%, transparent); }

/* ---- MAIL: busta per posta aerea (righe tricolore come le stelline del logo) ---- */
.s-muro .st--mail .st__front { aspect-ratio: 1.6; border-radius: 8px; }
.s-muro .st--mail .st__front .st__ink { border-radius: 4px; background: var(--gesso); color: var(--inchiostro); justify-content: flex-end; gap: 1.6cqi; padding: 0 6cqi 8.5cqi; }   /* 6cqi: «pizzeriacipciop» a 14px sta su una riga anche a 320px */
.s-muro .st--mail .st__front .st__ink::before { content: ""; position: absolute; inset: 0; border-radius: 4px; border: 2.6cqi solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--rosso) 0 7px, var(--gesso) 7px 13px, var(--verde) 13px 20px, var(--gesso) 20px 26px) 14; }
.s-muro .st__flap { position: absolute; left: 0; top: 2.6cqi; width: 100%; height: 30%; }
.s-muro .st__flap path { fill: none; stroke: var(--inchiostro); stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .5; }
.s-muro .st--mail .st__word { font: 400 max(22px, 15cqi)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .04em; }
.s-muro .st__mail { font: 500 max(14px, 5.4cqi)/1.2 var(--f-sans); overflow-wrap: anywhere; }

/* ---- Instagram: pillola ---- */
.s-muro .st--ig .st__face { border-radius: var(--r-pill); }
.s-muro .st--ig .st__front { aspect-ratio: 3.5; }
.s-muro .st--ig .st__ink { border-radius: var(--r-pill); }
.s-muro .st--ig .st__front .st__ink { background: var(--inchiostro); color: var(--gesso); flex-direction: row; gap: 3cqi; padding: 0 6cqi; }
.s-muro .st--ig .st__back .st__ink { padding: 2cqi 6cqi; }
.s-muro .st--ig .st__ico { width: 10cqi; height: 10cqi; flex: none; fill: none; stroke: var(--giallo); stroke-width: 1.75; }
.s-muro .st--ig .st__dot { fill: var(--giallo); stroke: none; }
.s-muro .st__handle { font: 700 max(14px, 7.2cqi)/1 var(--f-sans); letter-spacing: -.005em; white-space: nowrap; }

/* ---- Facebook: quadrato giallo ---- */
.s-muro .st--fb .st__front { aspect-ratio: 1; border-radius: 14px; }
.s-muro .st--fb .st__front .st__ink { border-radius: 9px; background: var(--giallo); color: var(--inchiostro); gap: 3cqi; padding: 4cqi 2cqi; }
.s-muro .st--fb .st__ico { width: 28cqi; height: 28cqi; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; }
.s-muro .st--fb .st__word { font: 400 max(22px, 17cqi)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.s-muro .st--fb .st__back .st__ink { padding: 4cqi; }

/* ---- decorativi ---- */
.s-muro .st--deco { cursor: default; }
.s-muro .st__sign { --cut: clamp(4px, 2.4cqi, 8px); display: flex; flex-direction: column; aspect-ratio: 4 / 3; padding: var(--cut); border-radius: 10px; background: var(--gesso); color: var(--inchiostro); }
.s-muro .st__sign-band { display: grid; place-items: center; padding: 5cqi 2cqi; background: var(--inchiostro); border-radius: 5px 5px 0 0; }
.s-muro .st__sign-oval { padding: .1em .5em .04em; border-radius: 50%; background: var(--rosso); color: var(--gesso); box-shadow: 0 0 0 1.5px var(--gesso); font: 400 max(24px, 15cqi)/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
@container (max-width: 125px) {
  .s-muro .st__sign-oval { padding-inline: .36em; letter-spacing: 0; }
}
.s-muro .st__sign-txt { flex: 1; display: grid; place-items: center; text-align: center; padding: 2cqi 4cqi; font: 400 max(22px, 15cqi)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .02em; border: 2px solid var(--inchiostro); border-top: 0; border-radius: 0 0 5px 5px; }
.s-muro .st__disc { --cut: clamp(4px, 2.4cqi, 8px); aspect-ratio: 1; padding: var(--cut); border-radius: 50%; background: var(--gesso); }
.s-muro .st__disc svg { width: 100%; height: 100%; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, .14) 12%, transparent 19% 50%, rgba(255, 255, 255, .1) 56%, transparent 63%), repeating-radial-gradient(circle, var(--inchiostro) 0 1.3px, var(--lavagna-2) 1.3px 2.8px); }
.s-muro .st__disc-ring { fill: var(--gesso); font: 700 12.5px var(--f-sans); letter-spacing: 1px; }
.s-muro .st__disc-label { fill: var(--giallo); }
.s-muro .st__disc-small { fill: var(--inchiostro); font: 700 10px var(--f-sans); letter-spacing: 2.5px; }
.s-muro .st__disc-year { fill: var(--inchiostro); font: 700 27px var(--f-num); letter-spacing: -.5px; }
.s-muro .st__disc-hole { fill: var(--lavagna); }

/* ================= DESKTOP: muro a coordinate (adesivi trascinabili col mouse) ================= */
@media (min-width: 1100px) {
  /* il muro si centra sulla colonna di destra (testata + «In breve»): niente legno vuoto sotto gli adesivi */
  .s-muro .mu__wall { position: relative; container-type: inline-size; aspect-ratio: 100 / 74; align-self: center; }
  .s-muro .st { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); transform: rotate(calc(var(--r) * 1deg)); }
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .s-muro .st { cursor: grab; }
  .s-muro .st__hit { cursor: inherit; }
  .s-muro .st.is-lifted { cursor: grabbing; }
}

/* ================= TABLET / MOBILE: «In breve» prima, poi il muro in griglia ================= */
@media (max-width: 1099px) {
  .s-muro .mu { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .s-muro .mu__head, .s-muro .mu__brief, .s-muro .mu__wall { grid-column: 1; grid-row: auto; }
  .s-muro .mu__head, .s-muro .mu__brief { width: 100%; max-width: 620px; margin-inline: auto; }
  .s-muro .mu__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 12px; align-items: center; justify-items: center; width: 100%; max-width: 620px; margin: 56px auto 0; }
  .s-muro .st { grid-column: span var(--sp, 3); width: var(--mw, 94%); transform: rotate(calc(var(--r) * .55deg)); }
  /* se il retro è più alto del fronte, il fronte resta centrato nella cella (e il giro avviene sul suo centro) */
  .s-muro .st__front { align-self: center; }
  .s-muro .st--logo { --mw: 100%; }
  .s-muro .st--vinyl { --mw: 92%; }
  .s-muro .st--danger { --mw: 100%; }
  .s-muro .st--tel { --mw: 92%; }
  .s-muro .st--ig { --mw: 100%; }
  .s-muro .st--fb { --mw: 100%; }
}
/* tablet: testata e «In breve» affiancati, muro a 12 colonne (due file di adesivi per riga) */
@media (min-width: 760px) and (max-width: 1099px) {
  .s-muro .mu { max-width: calc(900px + 2 * var(--pad-x)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: clamp(28px, 4vw, 48px); align-items: start; }
  .s-muro .mu__head { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding-top: 6px; }
  .s-muro .mu__brief { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
  .s-muro .mu__wall { grid-column: 1 / -1; grid-row: 2; max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 14px; margin-top: clamp(56px, 7vw, 80px); }
  .s-muro .st--ig { grid-column: 4 / span 4; }
}
@media (max-width: 759px) {
  .s-muro .mu__t2 { font-size: clamp(28px, 7.6vw, 40px); }
  .s-muro .mu__brief { margin-top: 30px; }
  .s-muro .mu__wall { gap: 26px 10px; margin-top: 46px; }
}

/* ================= movimento ridotto: il giro è istantaneo (il JS non mette .is-flipping, restano gli stati a riposo) ================= */

/* ==== src/sections/12-bis/section.css ==== */
/* ============ 12 BIS — «BIS!», l'insegna vera ridisegnata che si accende, slogan, contatti, spot in modale ============
   Colori derivati SOLO dai token (color-mix): la luce calda delle lampadine è giallo + un filo di rosso. */
.s-bis {
  --bis-luce: color-mix(in srgb, var(--giallo) 72%, var(--rosso) 28%);
  --bis-filo: color-mix(in srgb, var(--gesso) 72%, var(--giallo));
  --bis-pan-a: color-mix(in srgb, var(--lavagna-2) 94%, var(--gesso));
  --bis-pan-b: color-mix(in srgb, var(--lavagna-2) 55%, var(--inchiostro));
  position: relative;
  background: var(--lavagna);
  color: var(--gesso);
  padding-block: var(--sec-y) calc(var(--sec-y) * .85);
  overflow-x: clip;
  isolation: isolate;
}

/* ---------- BIS! ---------- */
.s-bis__head { text-align: center; }
.s-bis__bis {
  display: inline-block;
  font: 400 calc(var(--fs-h2) * 1.3)/.86 var(--f-display);   /* unica eccezione «display» del sito: 1,3 × --fs-h2 */
  text-transform: uppercase;
  letter-spacing: .012em;
  color: var(--gesso);
}
.s-bis__word { position: relative; display: inline-block; white-space: nowrap; }
.s-bis__print { position: absolute; left: .05em; top: .05em; color: var(--rosso); }
.s-bis__ink { position: relative; }
.s-bis__print > span, .s-bis__ch { display: inline-block; }
.s-bis__ch--bang { transform-origin: 50% 92%; }

/* ---------- insegna ---------- */
.s-bis__sign { position: relative; width: min(1120px, 94vw); margin: clamp(10px, 2.4vh, 28px) auto 0; }
.s-bis__art { position: relative; }
.s-bis__svg { position: relative; width: 100%; height: auto; overflow: visible; }
/* respiro idle: bagliori HTML sopra le lampadine, animati SOLO in opacità (compositor, niente ridisegno dell'SVG) */
.s-bis__breath { position: absolute; inset: 0; pointer-events: none; }
.s-bis__breath i {
  position: absolute; width: 11%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0;
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--bis-luce) 46%, transparent), color-mix(in srgb, var(--bis-luce) 12%, transparent) 48%, transparent);
}

/* layer composti solo mentre l'insegna è in vista (il respiro gira solo lì) */
.s-bis__sign.is-live .s-bis__breath i { will-change: opacity; }

/* muro di mattoni che si vede solo dove arriva la luce (maschera statica, si anima solo l'opacità) */
.s-bis__wall {
  position: absolute; inset: -14% -26% -6%; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='72'%3E%3Cpath d='M0 35.5H132M0 71.5H132M1 0V36M67 36V72' stroke='%23EEEAE0' stroke-opacity='.075' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-size: 132px 72px;
  background-position: 50% 0;
  -webkit-mask-image: radial-gradient(ellipse 44% 50% at 50% 40%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 44% 50% at 50% 40%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
}
/* luce calda sul muro */
.s-bis__glow {
  position: absolute; inset: -22% -30% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 42% 46% at 50% 32%, color-mix(in srgb, var(--bis-luce) 24%, transparent) 0%, color-mix(in srgb, var(--bis-luce) 8%, transparent) 46%, transparent 74%);
}

/* stop dei gradienti SVG presi dai token */
.s-bis .st-luce { stop-color: var(--bis-luce); }
.s-bis .st-filo { stop-color: var(--bis-filo); }
.s-bis .st-bianco { stop-color: var(--gesso); }
.s-bis .st-gesso { stop-color: var(--gesso); }
.s-bis .st-giallo { stop-color: var(--giallo); }
.s-bis .st-nero { stop-color: var(--inchiostro); }
.s-bis .st-pan-a { stop-color: var(--bis-pan-a); }
.s-bis .st-pan-b { stop-color: var(--bis-pan-b); }

.s-bis .sign-panel__edge { fill: none; stroke: var(--gesso); stroke-opacity: .06; stroke-width: 1.5; }
.s-bis .sign-panel { stroke: var(--inchiostro); stroke-width: 3; }
.s-bis .sign-screws circle { fill: var(--gesso); fill-opacity: .16; }
.s-bis .sign-pizzeria { font: 500 66px var(--f-sans); fill: var(--gesso); }
.s-bis .sign-plaque__base { stroke: var(--gesso); stroke-width: 5; stroke-linejoin: round; }
.s-bis .sign-plaque__shadow { fill: var(--inchiostro); fill-opacity: .5; }
.s-bis .st-pl-a { stop-color: color-mix(in srgb, var(--giallo) 84%, var(--gesso)); }
.s-bis .st-pl-b { stop-color: color-mix(in srgb, var(--giallo) 80%, var(--legno)); }
.s-bis .sign-letters__under path { fill: none; stroke: var(--inchiostro); stroke-opacity: .34; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.s-bis .sign-letters path { fill: none; stroke: var(--gesso); stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.s-bis .sign-amp { font: italic 400 158px var(--f-serif); fill: var(--gesso); stroke: var(--inchiostro); stroke-opacity: .34; stroke-width: 5px; paint-order: stroke; }
.s-bis .sign-plaque__dim { fill: var(--lavagna); opacity: 0; }
.s-bis .sign-wire { fill: none; stroke-width: 2.4; }
.s-bis .sign-ivy path { fill: var(--verde); fill-opacity: .5; }
.s-bis .sign-ivy .sign-ivy__stem { fill: none; stroke: var(--verde); stroke-opacity: .45; stroke-width: 2; }
.s-bis .sign-bulb__halo { fill: url(#bis-halo); }
.s-bis .sign-bulb__socket { fill: var(--inchiostro); stroke: var(--gesso); stroke-opacity: .25; stroke-width: 1; }
.s-bis .sign-bulb__glass { fill: var(--gesso); fill-opacity: .08; stroke: var(--gesso); stroke-opacity: .38; stroke-width: 1.4; }
.s-bis .sign-bulb__on { fill: url(#bis-glass-on); }
.s-bis .sign-bulb__spec { fill: var(--gesso); fill-opacity: .55; }
.s-bis .sign-bulb__hit { fill: transparent; cursor: pointer; }
.s-bis .sign-bulb { -webkit-tap-highlight-color: transparent; }

/* nota dei giorni di chiusura */
.s-bis__closed {
  margin: clamp(10px, 2vh, 20px) auto 0; max-width: 34ch; padding-inline: var(--pad-x);
  text-align: center; font: 400 var(--fs-note)/1.2 var(--f-serif); color: var(--gesso-70);
}
.s-bis__closed em { font-style: italic; color: var(--gesso); }
.s-bis__closed[hidden] { display: none; }

/* ---------- slogan, indirizzo, telefono, CTA ---------- */
.s-bis__info {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px;
  align-items: start; margin-top: clamp(56px, 9vh, 120px);
}
.s-bis__main { grid-column: 1 / span 9; }
.s-bis__spot { grid-column: 10 / span 3; }

.s-bis__slogan { font: 400 clamp(46px, 6.5vw, 110px)/.95 var(--f-serif); letter-spacing: -.015em; color: var(--gesso); }
.s-bis__ln { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.s-bis__sl { display: block; }
.s-bis__slogan em { font-style: italic; color: var(--giallo); }

.s-bis__where { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px clamp(32px, 5vw, 72px); margin-top: clamp(32px, 5vh, 52px); }
.s-bis__where .label { display: block; margin-bottom: 10px; color: var(--gesso-70); }
.s-bis__addr address { font: 400 var(--fs-lead)/1.45 var(--f-sans); font-style: normal; color: var(--gesso); }
.s-bis__tel {
  position: relative; display: inline-block; padding-block: 2px 8px;
  font: 700 clamp(42px, 5vw, 80px)/1 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.025em; color: var(--gesso);
  transition: color .25s;
}
.s-bis__tel::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--giallo);
  transform: scaleX(.18); transform-origin: 0 50%; transition: transform .5s var(--ease-out);
}
.s-bis__tel:hover { color: var(--giallo); }
.s-bis__tel:hover::after, .s-bis__tel:focus-visible::after { transform: scaleX(1); }

.s-bis__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 5vh, 48px); }
.s-bis__cta { min-height: 60px; padding-inline: 26px 28px; font-size: 17px; }
.s-bis__cta.btn--ghost { color: var(--gesso); border-color: var(--gesso-15); border-width: 1.5px; }
.s-bis__cta.btn--ghost:hover { border-color: var(--gesso); }
.s-bis__cta .num { letter-spacing: -.01em; }
.s-bis__nw { white-space: nowrap; }
.s-bis__lbl { min-width: 0; }
.s-bis__cta.btn--primary:hover svg { animation: s-bis-ring .5s var(--ease-out); }
@keyframes s-bis-ring { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-14deg); } 40%, 80% { transform: rotate(14deg); } }

/* ---------- card dello spot ---------- */
.s-bis__spot { justify-self: end; width: min(100%, 300px); }
.s-bis__card { display: block; width: 100%; text-align: left; color: var(--gesso); border-radius: 10px; }
.s-bis__poster {
  position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-media);
  background: var(--lavagna-2); box-shadow: 0 0 0 1px var(--gesso-15), 0 30px 60px -28px rgba(0, 0, 0, .8);
}
.s-bis__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.s-bis__play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--giallo); color: var(--inchiostro);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--giallo) 30%, transparent); transition: transform .35s var(--ease-out), box-shadow .35s;
}
.s-bis__play svg { width: 30px; height: 30px; margin-left: 3px; }
.s-bis__dur {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--r-pill);
  font: 700 13px/1 var(--f-num); letter-spacing: .02em; color: var(--gesso); background: color-mix(in srgb, var(--lavagna) 78%, transparent);
}
.s-bis__card:hover .s-bis__poster img { transform: scale(1.04); }
.s-bis__card:hover .s-bis__play, .s-bis__card:focus-visible .s-bis__play { transform: scale(1.08); box-shadow: 0 0 0 10px color-mix(in srgb, var(--giallo) 22%, transparent); }
.s-bis__card-txt { display: grid; gap: 4px; margin-top: 18px; }
.s-bis__card-title { font: 700 21px/1.2 var(--f-sans); }
.s-bis__card-meta { font: 500 var(--fs-label)/1.4 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--gesso-70); }
.s-bis__card-note { margin-top: 6px; font: italic 400 21px/1.2 var(--f-serif); color: var(--gesso-70); }
.s-bis__card-data { margin-top: 8px; font: 400 14px/1.45 var(--f-sans); color: var(--gesso-70); }

/* ---------- modale dello spot ----------
   Verticale: video sopra, testi sotto; la modale scorre (con «Cosa si vede nello spot» aperto il testo continua sotto).
   Orizzontale (schermi larghi o telefono girato): video a sinistra, testi a destra in una colonna che scorre da sola. */
.s-bis__dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--lavagna) 97%, transparent); color: var(--gesso);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.s-bis__dialog::backdrop { background: transparent; }
.s-bis__dlg {
  position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(76px, calc(env(safe-area-inset-top) + 68px)) 16px max(24px, env(safe-area-inset-bottom));
}
.s-bis__video {
  display: block; flex: none; height: clamp(240px, calc(100dvh - 300px), 1280px); width: auto; max-width: 100%;
  aspect-ratio: 9 / 16; border-radius: var(--r-media); background: var(--inchiostro); box-shadow: 0 0 0 1px var(--gesso-15);
}
.s-bis__dlg-txt { width: min(100%, 460px); text-align: center; }
.s-bis__dlg-title { font: 700 18px/1.3 var(--f-sans); }
.s-bis__dlg-title span { font-weight: 400; color: var(--gesso-70); }
.s-bis__dlg-desc { margin-top: 2px; font: italic 400 20px/1.3 var(--f-serif); color: var(--gesso-70); }
.s-bis__dlg-data { margin-top: 6px; font: 400 14px/1.45 var(--f-sans); color: var(--gesso-70); }
.s-bis__script { margin-top: 8px; text-align: left; }
.s-bis__sum {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 14px;
  font: 500 15px/1.2 var(--f-sans); color: var(--gesso); cursor: pointer; list-style: none; border-radius: var(--r-pill);
  text-decoration: underline 1.5px; text-decoration-color: var(--gesso-15); text-underline-offset: 5px; transition: text-decoration-color .25s;
}
.s-bis__sum::-webkit-details-marker { display: none; }
.s-bis__sum::after { content: "+"; font: 700 18px/1 var(--f-num); color: var(--giallo); }
.s-bis__script[open] > .s-bis__sum::after { content: "–"; }
.s-bis__sum:hover { text-decoration-color: var(--giallo); }
.s-bis__steps { display: grid; gap: 10px; margin-top: 6px; padding: 16px 18px; border-radius: var(--r-card); background: var(--lavagna-2); box-shadow: 0 0 0 1px var(--gesso-15); }
.s-bis__steps li { display: grid; grid-template-columns: 3.1em minmax(0, 1fr); gap: 10px; font-size: 15px; line-height: 1.45; color: var(--gesso); }
.s-bis__t { font: 700 14px/1.55 var(--f-num); font-variant-numeric: tabular-nums; color: var(--giallo); }
.s-bis__close {
  position: fixed; z-index: 2; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--gesso-15); color: var(--gesso); background: color-mix(in srgb, var(--lavagna) 82%, transparent);
  transition: border-color .25s, background-color .25s, transform .25s var(--ease-out);
}
.s-bis__close svg { width: 24px; height: 24px; }
.s-bis__close:hover { border-color: var(--gesso); background: var(--lavagna-2); transform: rotate(90deg); }
@media (min-aspect-ratio: 1/1) and (min-width: 600px) {
  .s-bis__dlg { flex-direction: row; gap: clamp(24px, 4vw, 64px); padding: 24px max(84px, 6vw) 24px clamp(16px, 4vw, 64px); }
  .s-bis__video { height: min(calc(100dvh - 48px), 1280px); max-width: 50vw; }
  .s-bis__dlg-txt { width: min(400px, 40vw); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain; text-align: left; padding: 4px; }
  .s-bis__sum { justify-content: flex-start; padding-inline: 0; }
}

/* ---------- mobile ---------- */
@media (max-width: 899px) {
  /* il pannello (1000/1200 della larghezza dell'SVG) si allinea ai margini del testo; il filo delle lampadine esce dallo schermo */
  .s-bis__sign { --pw: calc(100vw - 2 * var(--pad-x)); width: calc(var(--pw) * 1.2); margin-left: calc(var(--pad-x) - var(--pw) * .1); margin-right: 0; }
  .s-bis__info { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 64px; }
  .s-bis__main, .s-bis__spot { grid-column: 1 / -1; }
  .s-bis__slogan { font-size: clamp(40px, 11.4vw, 72px); }
  .s-bis__where { flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 30px; }
  .s-bis__tel { font-size: clamp(38px, 11.2vw, 64px); }
  .s-bis__ctas { flex-direction: column; margin-top: 30px; }
  .s-bis__cta { width: 100%; min-height: 56px; }
  .s-bis__spot { justify-self: stretch; width: 100%; }
  .s-bis__card {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 18px;
    padding: 12px; border-radius: var(--r-card); background: var(--lavagna-2); box-shadow: 0 0 0 1px var(--gesso-15);
  }
  .s-bis__poster { box-shadow: none; border-radius: 8px; }
  .s-bis__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .s-bis__play svg { width: 20px; height: 20px; margin-left: 2px; }
  .s-bis__dur { display: none; }
  .s-bis__card-txt { margin-top: 0; }
  .s-bis__card-title { font-size: 19px; }
  .s-bis__card-note { font-size: 19px; margin-top: 4px; }
  .s-bis__card-data { margin-top: 6px; }
}
@media (max-width: 359px) {
  .s-bis__dot { display: none; }
  .s-bis__cta { padding-inline: 18px; gap: .5em; }
}

/* ==== src/sections/13-footer/section.css ==== */
/* ============ 13 FOOTER — fine del Lato A: il disco si ferma, il braccio si alza; contatti, social, crediti, toggle ============ */
.s-footer {
  --v-a: color-mix(in srgb, var(--lavagna) 55%, var(--inchiostro));
  --v-b: color-mix(in srgb, var(--lavagna-2) 70%, var(--inchiostro));
  position: relative;
  background: var(--lavagna);
  color: var(--gesso);
  padding: clamp(88px, 13vh, 150px) 0 clamp(28px, 4vh, 44px);
}
.s-footer > .wrap { position: relative; }
.s-footer > .wrap::before { content: ""; position: absolute; left: var(--pad-x); right: var(--pad-x); top: calc(clamp(88px, 13vh, 150px) * -.62); height: 1px; background: var(--gesso-15); }

/* ---------- chiusura: disco + frase ---------- */
.s-footer__end { display: flex; align-items: center; gap: clamp(36px, 5vw, 88px); }
.s-footer__deck { --d: clamp(160px, 14vw, 210px); position: relative; flex: none; width: var(--d); height: var(--d); margin-right: calc(var(--d) * .12); }
.s-footer__vinyl {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%, var(--v-a) 0 1.1px, var(--v-b) 1.1px 2.6px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gesso) 10%, transparent), 0 26px 50px -22px rgba(0, 0, 0, .85);
}
.s-footer__spin { position: absolute; inset: 13%; border-radius: 50%; }
.s-footer__spin img {
  width: 100%; height: 100%;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 96.5%, transparent 98.5%);
  mask-image: radial-gradient(circle closest-side, #000 96.5%, transparent 98.5%);
}
.s-footer__spindle {
  position: absolute; left: 50%; top: 50%; width: 6%; height: 6%; margin: -3% 0 0 -3%; border-radius: 50%;
  background: var(--gesso); box-shadow: 0 0 0 2px color-mix(in srgb, var(--inchiostro) 60%, transparent);
}
/* riflesso a farfalla: NON ruota (resta fermo come su un vinile vero), solo sui solchi */
.s-footer__shine {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0deg, color-mix(in srgb, var(--gesso) 16%, transparent) 26deg, transparent 58deg,
    transparent 180deg, color-mix(in srgb, var(--gesso) 16%, transparent) 206deg, transparent 238deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 73%, #000 74.5%, #000 98%, transparent 99.5%);
  mask-image: radial-gradient(circle closest-side, transparent 73%, #000 74.5%, #000 98%, transparent 99.5%);
}
.s-footer__arm { position: absolute; left: 62%; top: -6%; width: 46%; height: 88%; transform-origin: 78.26% 9.09%; pointer-events: none; }
.s-footer__arm svg { width: 100%; height: 100%; overflow: visible; }
.s-footer__arm-tube { stroke: var(--gesso); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.s-footer__arm-head { fill: var(--gesso); }
.s-footer__arm-base { fill: var(--lavagna-2); stroke: var(--gesso); stroke-opacity: .4; stroke-width: 1; }
.s-footer__arm-pin { fill: var(--gesso); fill-opacity: .8; }

.s-footer__title { font: 400 var(--fs-h2)/.95 var(--f-serif); letter-spacing: -.016em; }
.s-footer__title em { font-style: italic; color: var(--giallo); white-space: nowrap; }
.s-footer__ln { display: block; overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.s-footer__tl { display: block; }
.s-footer__lead { margin-top: clamp(10px, 1.6vh, 18px); font: italic 400 clamp(22px, 2.3vw, 34px)/1.25 var(--f-serif); color: var(--gesso-70); }

/* ---------- le tre stelline del logo come separatore ---------- */
.s-footer__stars { display: flex; align-items: center; gap: 14px; margin-top: clamp(64px, 10vh, 112px); font-size: 17px; line-height: 1; }
.s-footer__stars::before, .s-footer__stars::after { content: ""; flex: 1; height: 1px; background: var(--gesso-15); }
.s-footer__star--v { color: var(--verde); }
.s-footer__star--g { color: var(--gesso); }
.s-footer__star--r { color: var(--rosso); }

/* ---------- colonne ---------- */
.s-footer__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 40px var(--gap); margin-top: clamp(44px, 7vh, 72px); }
.s-footer__logo { width: clamp(130px, 11vw, 168px); height: auto; }
.s-footer__h { margin-bottom: 8px; font: 500 var(--fs-label)/1.2 var(--f-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--gesso-70); }
.s-footer__addr { font-style: normal; }
.s-footer__al { display: block; }   /* desktop: tre righe; mobile: una riga che scorre (vedi sotto) */
.s-footer__list { display: grid; }
.s-footer__link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 6px;
  font-size: 17px; line-height: 1.45; color: var(--gesso);
  text-decoration: underline 1.5px; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: text-decoration-color .25s, color .25s;
}
.s-footer__addr .s-footer__link { display: inline-block; }
.s-footer__link:hover { text-decoration-color: var(--giallo); }
.s-footer__link svg { width: 22px; height: 22px; flex: none; transition: transform .35s var(--ease-out); }
.s-footer__link:hover svg { transform: rotate(-8deg) scale(1.08); }
.s-footer__phone { font: 700 22px/1.2 var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.s-footer__closed { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-weight: 500; font-size: 17px; }
.s-footer__stop { width: 15px; height: 15px; flex: none; background: var(--rosso); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }

/* ---------- riga finale: crediti, toggle, torna su ---------- */
.s-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  margin-top: clamp(52px, 8vh, 88px); padding-top: 22px; border-top: 1px solid var(--gesso-15);
}
.s-footer__credits { font-size: 15px; line-height: 1.65; color: var(--gesso-70); }
.s-footer__cr { display: block; }
.s-footer__cr > span { white-space: nowrap; }
.s-footer__cr > span + span::before { content: "·"; margin-inline: .2em .55em; }
.s-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
html:not(.js) .s-footer__toggle { display: none; }   /* senza JS il toggle non può funzionare */
.s-footer__toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding-inline: 12px; margin-left: -12px; border-radius: var(--r-pill); font: 500 15px/1.2 var(--f-sans); color: var(--gesso); }
.s-footer__switch { position: relative; width: 46px; height: 26px; flex: none; border-radius: var(--r-pill); border: 1.5px solid var(--gesso-70); transition: background-color .25s, border-color .25s; }
.s-footer__switch > span { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: var(--gesso); transition: transform .3s var(--ease-out), background-color .25s; }
.s-footer__toggle[aria-pressed="true"] .s-footer__switch { background: var(--giallo); border-color: var(--giallo); }
.s-footer__toggle[aria-pressed="true"] .s-footer__switch > span { transform: translateX(20px); background: var(--inchiostro); }
.s-footer__toggle:hover .s-footer__switch { border-color: var(--gesso); }
.s-footer__top {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill);
  border: 1.5px solid var(--gesso-15); font: 700 15px/1 var(--f-sans); color: var(--gesso); transition: border-color .25s;
}
.s-footer__top span { display: inline-block; transition: transform .35s var(--ease-out); }
.s-footer__top:hover { border-color: var(--gesso); }
.s-footer__top:hover span { transform: translateY(-3px); }

/* ---------- mobile: compatto (~1 schermata). Disco accanto alla frase, indirizzo in una riga, Contatti | Seguici,
   logo nell'angolo libero sotto Contatti, crediti in corpo piccolo. Stesse informazioni del desktop. ---------- */
@media (max-width: 899px) {
  .s-footer { padding: 60px 0 calc(env(safe-area-inset-bottom) + 28px); }   /* la barra fissa è già nascosta da BIS in giù */
  .s-footer > .wrap::before { top: -34px; }
  .s-footer__end { gap: 16px; }
  .s-footer__deck { --d: clamp(80px, 25vw, 104px); margin-right: calc(var(--d) * .12); }
  .s-footer__words { min-width: 0; }
  .s-footer__title { font-size: min(var(--fs-h2), 12.6vw); }
  .s-footer__lead { margin-top: 8px; font-size: 18px; line-height: 1.3; }
  .s-footer__stars { margin-top: 28px; }
  .s-footer__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-areas: "addr addr" "contact social" "brand social";
    grid-template-rows: auto auto 1fr; gap: 0 16px; margin-top: 22px;
  }
  .s-footer__col--addr { grid-area: addr; margin-bottom: 16px; }
  .s-footer__col--contact { grid-area: contact; }
  .s-footer__col--social { grid-area: social; }
  .s-footer__brand { grid-area: brand; align-self: end; margin-top: 10px; }
  .s-footer__logo { width: 76px; }
  .s-footer__h { margin-bottom: 2px; }
  .s-footer__link { font-size: 16px; line-height: 1.4; }
  .s-footer__al { display: inline; }
  .s-footer__al:nth-child(-n+2)::after { content: ","; }
  .s-footer__closed { margin-top: 2px; font-size: 16px; }
  .s-footer__phone { font-size: 20px; }
  .s-footer__mail { font-size: 15px; line-height: 1.3; }
  .s-footer__bottom { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; padding-top: 16px; }
  .s-footer__credits { font-size: 14px; line-height: 1.5; }
  .s-footer__cr { display: inline; }
  /* il «·» resta in fondo alla riga (mai a inizio riga quando le frasi vanno a capo) */
  .s-footer__cr > span + span::before { content: none; }
  .s-footer__cr > span::after { content: "·"; margin-inline: .45em .3em; }
  .s-footer__cr:last-child > span:last-child::after { content: none; }
  .s-footer__actions { justify-content: space-between; gap: 6px 12px; }
  .s-footer__toggle { gap: 10px; font-size: 14px; }
  .s-footer__switch { width: 42px; }
  .s-footer__toggle[aria-pressed="true"] .s-footer__switch > span { transform: translateX(16px); }
  .s-footer__top { padding: 0 16px; font-size: 14px; }
}
/* telefono in orizzontale / tablet stretto: c'è spazio per tre colonne */
@media (min-width: 600px) and (max-width: 899px) {
  .s-footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "addr contact social" "brand contact social"; }
  .s-footer__col--addr { margin-bottom: 0; }
  .s-footer__al { display: block; }
  .s-footer__al:nth-child(-n+2)::after { content: none; }
}
@media (max-width: 359px) {
  .s-footer__cr > span { white-space: normal; }
}