/* custom.css — ritocchi rapidi via FTP, senza ricompilare.
   Questo file viene caricato DOPO main.css. Tutto ciò che scrivi qui vince.
   Regola: quando un ritocco diventa definitivo, spostalo nei sorgenti (src/css) e ricompila. */

/* ── Bussola → cartolina del Liquore: passaggio continuo ───────────────────
   Prima la cartolina partiva da --bruno (alone chiaro sotto la bussola).
   Ora: stesso fondo notte su entrambe le schermate e le linee topografiche
   della mappa che si dissolvono verso il bordo basso: nessuna cucitura.
   Definitivo → spostare in src/css (blocchi .map / .card-s) e ricompilare. */
.card-s { background: var(--notte); }
.map__topo {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 99%);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIQUORE · "un quadro per schermata" (v4.25 · riferimento Driftwood / Parabola Gin)
   La pagina /it/liquore diventa una sequenza di scene a tutta altezza, centrate, su fondo notte:
   niente righe di separazione, niente card, al massimo tre elementi per schermata.
   Riusa le primitive .scene / .scene__inner / .scene__title di main.css e gli hook JS esistenti.
   Definitivo → spostare in src/css/components/prodotto.css e ricompilare.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── fondo unico notte, dall'hero al footer ──────────────────────────────── */
.page-prodotto .main { background: var(--notte); }
.lq-flow { background: var(--notte); }
.lq-flow .scene { background: var(--notte); }

/* ── intestazioni di scena: kicker a mano, titolo grande, intro in Garamond non corsiva ── */
.lq-scene__head {
  display: grid;
  justify-items: center;
  gap: .7rem;
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
}
.lq-scene__head .num,
.lq-flow .scene__inner > .num { margin-bottom: 0; }
.lq-flow .scene__title { max-width: 22ch; }
.lq-scene__intro {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-accent-soft);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  line-height: 1.35;
  max-width: 40ch;
  text-wrap: balance;
}
.lq-scene__note {                          /* "15 botaniche in tutto…": sotto l'intro, sopra il profilo; su mobile resta fissa nel blocco fermo */
  color: var(--color-text-dim);
  font-size: var(--text-base);
  text-align: center;
  text-wrap: balance;
  max-width: 44ch;
  margin: 0 auto;
}

/* ── titoletti centrati: la cresta montuosa sta prima E dopo, un po' più corta ── */
.lq-scene__head .num,
.lq-flow .scene__inner > .num {
  justify-content: center;
  gap: .8rem;
}
.lq-scene__head .num:before,
.lq-scene__head .num:after,
.lq-flow .scene__inner > .num:before,
.lq-flow .scene__inner > .num:after {
  content: "";
  flex: none;
  width: 52px;
  height: 10px;
  opacity: .85;
  background: var(--ridge, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14' fill='none' stroke='%23C9A86A' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolyline points='0,12 9,7 15,10 24,3 30,8 39,2 45,9 54,5 63,10 72,12'/%3E%3C/svg%3E")) no-repeat center / contain;
}
.lq-scene__head .num:after,
.lq-flow .scene__inner > .num:after { transform: scaleX(-1); }

/* ── hero: più asciutto (il lead è sceso nel profilo); la bottiglia sfiora la base del titolo, non lo copre ── */
.page-prodotto .lq-stage { margin-top: clamp(-1.2rem, -2.2vh, -1.6rem); }
.page-prodotto .lq-stage__bottle img { height: 108%; }
@media (width <= 820px) {
  .page-prodotto .lq-stage { margin-top: -.4rem; }
  .page-prodotto .lq-stage__bottle img { height: 102%; }
}
.page-prodotto .lq-hero__body { gap: 1.1rem; }
.page-prodotto .lq-hero__sub { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); max-width: 40ch; }

/* ── E-02 · tre livelli: profilo orizzontale + tre colonne senza scatole ─── */
.lq-levels .scene__inner--wide { gap: clamp(2rem, 4vh, 3rem); }

/* il panorama inciso sta ESATTAMENTE dietro il profilo (stesso riquadro, 3:1): la scena resta scorrevole (overflow visible,
   necessario perché su mobile il blocco è sticky), il ritaglio lo fa il riquadro del profilo */
.lq-levels { overflow: visible; }
.lq-levels__pin { display: grid; gap: clamp(1rem, 2.5vh, 1.8rem); }
.alti--wide {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vh, 2.2rem);
  width: 100%;
}
.alti--wide .alti__profile {
  position: relative;
  top: auto;                              /* main.css lo aveva sticky con top: 6rem */
  max-width: none;
  width: 100%;
  /* le proporzioni del panorama (3:1) sulla larghezza del contenitore (max 72rem), con un tetto in altezza */
  height: min(calc((100vw - 2 * var(--gutter)) / 3), 24rem, 44svh);
  margin: clamp(2.5rem, 7vh, 4.5rem) 0 0; /* spazio sopra: il ritaglio della botanica sporge oltre il riquadro quando è in quota */
  overflow: visible;
}
.alti__strip { position: absolute; inset: 0; will-change: transform; }
.lq-levels__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-s);
  opacity: .62;
  /* pieno al centro, sfuma ai bordi verticali */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
}
.lq-levels__bg picture { position: absolute; inset: 0; display: block; will-change: transform; }
.lq-levels__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }   /* riempie sempre il riquadro */
.alti--wide .alti__svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  overflow: visible;
}
/* il punto trascinabile (desktop e tablet: .has-handle) */
.alti__handle { display: none; }
.alti__handle-halo { fill: #c9a86a1f; stroke: #c9a86a55; stroke-width: 1; }
.alti__handle-dot { fill: var(--oro); stroke: var(--notte); stroke-width: 2; }
/* il puntatore vero: il ritaglio fotografico della fascia, appoggiato sul punto (ancorato un po' sotto il suo centro) */
.alti__marker {
  position: absolute;
  z-index: 3;
  width: clamp(110px, 16%, 190px);
  aspect-ratio: 1;
  transform: translate(-50%, -58%);       /* il punto sta poco sotto il centro del mazzo (vedi anchorY nel JS) */
  pointer-events: none;
  transition: left .25s var(--ease-out-expo), top .25s var(--ease-out-expo);
  filter: drop-shadow(0 18px 24px #00000099);
}
.alti__marker-img { position: absolute; inset: 0; opacity: 0; transform: scale(.88); transition: opacity .35s var(--ease), transform .45s var(--ease-out-expo); }
.alti__marker-img.is-on { opacity: 1; transform: none; }
.alti__marker-img picture, .alti__marker-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lq-levels.has-handle .alti__marker { pointer-events: auto; transition: left .18s var(--ease-out-expo), top .18s var(--ease-out-expo); }
.lq-levels.has-handle .alti__marker img { -webkit-user-drag: none; user-select: none; }
.lq-levels.has-handle .alti__handle { display: block; transition: transform .18s var(--ease-out-expo); }
.lq-levels.has-handle .alti__svg { pointer-events: auto; }
/* col dito (iPad): il mazzo e la linea si trascinano in orizzontale; il gesto verticale resta uno scroll di pagina (pan-y).
   Niente callout/selezione alla pressione lunga sul mazzo. Stesso trattamento in modalità "fermo" (mobile): trascinare il
   panorama fa avanzare la corsa (liquore-livelli.js). */
.lq-levels.has-handle .alti__svg, .lq-levels.has-handle .alti__marker,
.lq-levels.is-pinned .alti__svg, .lq-levels.is-pinned .alti__marker { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lq-levels.is-pinned .alti__svg, .lq-levels.is-pinned .alti__marker { pointer-events: auto; }
.lq-levels.has-handle .alti__marker { cursor: grab; }
.lq-levels.has-handle .alti__marker:active { cursor: grabbing; }
.lq-levels.has-handle .alti__dot { display: none; }                              /* i tre punti fissi lasciano il posto al punto mobile */
.lq-levels.has-handle .alti__band rect { fill: transparent; transition: fill .3s var(--ease); }
/* main.js accende ancora .is-active sulla prima fascia col suo IntersectionObserver: qui comanda solo .is-on */
.lq-levels.has-handle .alti__band.is-active:not(.is-on) rect { fill: transparent; }
.lq-levels.has-handle .alti__band.is-on rect { fill: #c9a86a1c; }
/* la colonna accesa e le altre spente */
.lq-levels.has-handle .lq-band { transition: opacity .35s var(--ease), transform .35s var(--ease); cursor: pointer; -webkit-tap-highlight-color: transparent; }   /* la colonna si tocca (tablet) o si passa (mouse) */
/* le spente restano leggibili (AA: opacità ≥ .8 su fondo notte); l'accesa si alza e schiarisce */
.lq-levels.has-handle .lq-band:not(.is-on) { opacity: .8; }
.lq-levels.has-handle .lq-band.is-on { transform: translateY(-6px); }
.lq-levels.has-handle .lq-band.is-on .band__text { color: var(--color-text); }
.lq-levels.has-handle .lq-band.is-on .band__herbs { color: #fff; }
.lq-levels.has-handle .lq-band.is-on .lq-levels.has-handle .lq-band:not(.is-on) .lq-levels.has-handle .lq-band:not(.is-on) .band__herbs { color: var(--color-text-dim); }
.alti--wide .alti__band rect { cursor: pointer; }
.alti--wide .alti__band line { stroke: var(--color-border); stroke-dasharray: 3 6; }

.lq-bands {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lq-band,
.lq-band.is-active {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 clamp(.2rem, 1vw, 1rem);
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .35rem;
  transition: opacity var(--dur-base) var(--ease);
}
.lq-band:focus-within .lq-band { gap: 0; }
.lq-band .band__name {                     /* il nome della fascia a mano (La Belle Aurore) */
  font-family: var(--font-hand);
  font-size: var(--text-kicker);
  letter-spacing: .01em;
  text-transform: none;
  color: var(--color-accent);
  margin: 0 0 -.15em;                     /* la scrittura a mano ha molta aria sotto: si stringe sul titolo */
  line-height: 1;
}
.lq-band .band__herbs { font-size: var(--text-xl); font-weight: 400; text-wrap: balance; margin: 0 0 .15rem; line-height: 1.1; }
.lq-band .band__phase {                    /* la fase in maiuscoletto spaziato (com'era il nome) */
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 .5rem;
}
.lq-band .band__text { max-width: 30ch; }

/* ── E-03 / E-04 · scene fotografiche: foto a tutta larghezza in parallasse, velo, testo al centro ── */
.lq-photo .scene__bg picture { position: absolute; inset: 0; display: block; }
.lq-photo .scene__bg img { object-fit: cover; width: 100%; height: 100%; }
.lq-photo .scene__bg:after {
  background:
    radial-gradient(70% 60% at 50% 50%, #170f08bf, #170f08e6 100%),
    linear-gradient(180deg, var(--notte) 0%, transparent 18%, transparent 82%, var(--notte) 100%);
}
.lq-photo .scene__inner { gap: 1.1rem; max-width: 62rem; }
.lq-photo__lead {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem);
  line-height: 1.35;
  color: var(--color-text);
  max-width: 44ch;
  text-wrap: balance;
}
.lq-photo .scene__lead { color: var(--color-text-dim); max-width: 52ch; }
.lq-photo__small { color: var(--color-text-dim); font-size: var(--text-sm); max-width: 44ch; }

/* ── E-05 · come si beve: via righe e bordi, intestazione al centro ────────
   .strade__row ha tabindex=0 (su mobile scorre in orizzontale: WCAG 2.1.1, axe scrollable-region-focusable) */
.strade__row:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 6px; }
.lq-serve-wrap { padding-block: clamp(4rem, 10vh, 7rem) 0; }
.lq-serve.pr-sec { border-top: 0; padding: 0; }
.lq-serve .pr-sec__head { margin-bottom: clamp(1rem, 4vh, 3rem); }
.lq-serve .pr-title { font-size: clamp(2.4rem, 1.6rem + 4vw, 5.2rem); }
.lq-serve .serve__mode + .serve__mode { border-top: 0; }
/* desktop: ogni modo occupa esattamente una schermata, così il centro del paragrafo coincide sempre
   con il centro del bicchiere (che sta fermo a metà schermo). Prima i tre blocchi erano alti 70/88/60svh:
   all'inizio e alla fine testo e immagine erano sfalsati di 15–20svh. */
@media (width >= 821px) {
  .lq-serve .serve__mode,
  .lq-serve .serve__mode:first-child,
  .lq-serve .serve__mode:last-child {
    min-height: 100svh;
    padding: 0;
    justify-content: center;
  }
  .lq-serve .serve__stage { align-items: start; }
  .lq-serve .serve__hand { margin-bottom: .6rem; }
}
.lq-serve .strade { margin-top: clamp(2rem, 6vh, 4rem); }

/* ── E-07 · dati: la bottiglia (3D) accanto alla scheda, fondo notte pulito ── */
.lq-close { background: radial-gradient(60% 55% at 38% 58%, #c9a86a10, transparent 70%), var(--notte); }
.lq-close .scene__inner--wide { gap: clamp(2rem, 5vh, 3.5rem); }
.lq-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  width: 100%;
  max-width: 64rem;
  text-align: left;
}
.lq-close__bottle { margin: 0; display: grid; justify-items: center; }
.lq-close__bottle img {
  width: auto;
  height: clamp(400px, 70svh, 720px);
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 40px 60px #000000b3);
}

/* la bottiglia 3D (v4.26): il palco ha le proporzioni del packshot (3:4, la freccia usa lo stesso viewBox 75×100); il canvas si sovrappone e la foto sfuma via */
.lq-3d__stage {
  position: relative;
  height: clamp(400px, 70svh, 720px);
  aspect-ratio: 3 / 4;
  max-width: 100%;
  display: grid;
  place-items: center;
  touch-action: pan-y;            /* verticale = scroll della pagina, orizzontale = rotazione */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--radius-s);
  outline-offset: 6px;
  overflow: visible;
}
.lq-3d__stage.is-dragging { cursor: grabbing; }
.lq-3d__stage picture { position: relative; z-index: 1; transition: opacity .9s var(--ease); pointer-events: none; }
.lq-3d__stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 2; opacity: 0; transition: opacity .9s var(--ease); }
.lq-3d.is-3d .lq-3d__stage picture { opacity: 0; }
.lq-3d.is-3d .lq-3d__stage canvas { opacity: 1; }
.lq-3d:not(.is-3d) .lq-3d__stage { cursor: default; }
/* indicazione a mano (La Belle Aurore) a sinistra del collo, su due righe, appena inclinata, con freccia a gancio (schizzo Elisabetta) */
.lq-3d__hint { position: absolute; inset: 0; z-index: 3; pointer-events: none; color: var(--color-accent); transition: opacity var(--dur-base) var(--ease); }
.lq-3d__hint-text {
  position: absolute;
  left: 2%;
  top: 11%;
  white-space: nowrap;            /* due righe: la prima parola e il resto (br nel template) */
  font-family: var(--font-hand);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem);
  line-height: 1.05;
  transform: rotate(-14deg);
  transform-origin: left bottom;
}
.lq-3d__hint-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lq-3d.is-touched .lq-3d__hint { opacity: .4; }
.lq-specs.pr-specs { border-top: 0; align-self: center; }
.lq-specs.pr-specs div { border-bottom: 1px solid var(--color-border-soft); padding: .95rem 0; }
.lq-specs.pr-specs div:last-child { border-bottom: 0; }

/* ── Dove trovarlo / Acquisto: scena a sé sotto i dati (fotografia della bussola dietro, come le scene fotografiche) ── */
.lq-dove { min-height: 78svh; }
.lq-dove .scene__inner { gap: 1.2rem; }
.lq-dove__title.scene__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 4.4rem); }
.lq-dove__text.scene__lead { color: var(--color-text); max-width: 46ch; }
.lq-buy.pr-buy { background: transparent; border: 0; padding: 0; max-width: 28rem; width: 100%; text-align: left; }

/* ── FAQ · colonna stretta, senza scatola ────────────────────────────────── */
.lq-faq { padding-block: clamp(4rem, 10vh, 7rem); background: var(--notte); }
.lq-faq .lq-scene__head { margin-bottom: clamp(1.6rem, 4vh, 2.8rem); }
.lq-faq__title.scene__title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.6rem); }
.lq-faq__list.faq { background: transparent; border: 0; border-radius: 0; gap: 0; }
.lq-faq__list .faq__item { background: transparent; border-top: 1px solid var(--color-border-soft); }
.lq-faq__list .faq__item:last-child { border-bottom: 1px solid var(--color-border-soft); }
.lq-faq__list .faq__item summary { padding-inline: 0; }
.lq-faq__list .faq__answer { padding-inline: 0; }

/* ── E-06 · ponte verso il Manifesto ─────────────────────────────────────── */
.lq-bridge.scene--closing { background: var(--notte); border-top: 0; min-height: 60svh; }
.lq-bridge__line.scene__title { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.8rem); max-width: 26ch; }
.lq-bridge__line em { color: var(--color-accent); font-style: normal; }

/* ── crosslinks: attaccati al fondo notte ─────────────────────────────────── */
.page-prodotto .crosslinks { background: var(--notte); border-top: 1px solid var(--color-border-soft); }

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (width <= 820px) {
  .lq-flow .scene { padding-block: clamp(4rem, 9vh, 6rem); min-height: 0; }
  .lq-photo, .lq-levels, .lq-close { min-height: 100svh; }
  .lq-bands { grid-template-columns: 1fr; gap: 2rem; }
  .lq-band { padding: 0; }
    /* titoletto con le due creste: creste più corte e testo che va a capo in modo equilibrato */
  .lq-scene__head .num,
  .lq-flow .scene__inner > .num { font-size: 1.15rem; text-align: center; text-wrap: balance; gap: .6rem; }
  .lq-scene__head .num:before, .lq-scene__head .num:after,
  .lq-flow .scene__inner > .num:before, .lq-flow .scene__inner > .num:after { width: 36px; }

  /* in colonna (reduced motion / no-JS) il profilo con il panorama resta 3:1 */
  .alti--wide .alti__profile { height: min(calc((100vw - 2 * var(--gutter)) / 3), 40svh); }

  /* modalità "fermo" (solo con JS e senza reduced motion: classe .is-pinned messa da liquore-livelli.js) */
  .lq-levels.is-pinned .lq-levels__stage { position: relative; height: 300svh; }
  .lq-levels.is-pinned .lq-levels__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    align-content: center;                  /* il blocco sta al centro dello schermo, non in alto */
    padding-block: 8svh 4svh;
  }
  /* il riquadro del profilo si alza: il panorama lo riempie in altezza e sporge a destra, poi scorre via JS */
  .lq-levels.is-pinned .alti--wide { gap: 0; }
  .lq-levels.is-pinned .alti--wide .alti__profile { height: 46svh; margin-top: 4svh; }
  .lq-levels.is-pinned .lq-levels__bg {
    opacity: .6;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%);
  }
  .lq-levels.is-pinned .alti__strip { width: calc(46svh * 3); height: 100%; inset: 0 auto 0 0; }   /* 3:1 come il panorama */
  .lq-levels.is-pinned .lq-levels__bg { border-radius: 0; }
  .lq-levels.is-pinned .lq-levels__bg img { width: 100%; height: 100%; object-fit: fill; }
  .lq-levels.is-pinned .alti--wide .alti__svg { inset: 0; height: 100%; }
  .lq-levels.is-pinned .alti--wide .alti__band rect { display: none; }        /* a tutto schermo l'evidenza a fasce non serve */
  .lq-levels.is-pinned .alti--wide .alti__band line { stroke: #c9a86a55; }
  .lq-levels.is-pinned .lq-bands { display: grid; grid-template-columns: 1fr; margin-top: 3svh; }
  .lq-levels.is-pinned .lq-band {
    grid-area: 1 / 1;                       /* tutte nella stessa cella: il testo si sostituisce, non scorre */
    opacity: 0;
    transition: opacity .35s var(--ease);
    pointer-events: none;
  }
  .lq-levels.is-pinned .lq-band.is-on { opacity: 1; pointer-events: auto; }
  .lq-levels.is-pinned .alti--wide .alti__band.is-on rect { fill: #c9a86a1f; }
  .lq-levels.is-pinned .alti__dot { display: none; }
  .lq-levels.is-pinned .alti__handle { display: block; transition: transform .35s var(--ease); }
  .lq-levels.is-pinned .alti__marker { width: 32vw; transition: none; }
  .alti--wide .alti__profile { margin-top: clamp(3rem, 9vh, 5rem); }
  .lq-levels.is-pinned .lq-scene__note { font-size: var(--text-sm); padding-inline: var(--gutter); }
  .lq-close__grid { grid-template-columns: 1fr; text-align: center; gap: 1.6rem; }
  .lq-close__bottle img, .lq-3d__stage { height: clamp(320px, 54svh, 500px); }
  .lq-specs.pr-specs { width: 100%; }
  .lq-specs.pr-specs div { text-align: left; }
  .lq-dove { min-height: 0; }
  .lq-serve-wrap { padding-top: clamp(3rem, 8vh, 5rem); }
}

/* ── reduced motion / no-JS: le scene restano ferme, le foto piene, i testi visibili ── */
@media (prefers-reduced-motion: reduce) {
  }


/* ══════════════════════════════════════════════════════════════════════════
   FOOTER · "colophon" (v4.27)
   Chiusura editoriale: un'apertura con kicker a mano e il claim grande, poi
   quattro colonne con filetto alto come un colophon di quotidiano, in fondo la
   riga legale. Fondo pieno, senza linee topografiche (tolte il 9 set).
   Sovrascrive .site-footer di main.css (partials/footer.php).
   Definitivo → spostare in src/css/components/footer.css e ricompilare.
   ══════════════════════════════════════════════════════════════════════════ */
.ft {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--notte);
  border-top: 1px solid var(--color-border-soft);
  padding-block: clamp(4rem, 9vw, 7rem) var(--space-l);
  color: var(--color-text-dim);
  font-size: var(--text-sm);
}
.page-prodotto .ft { border-top-color: transparent; }

/* ── 1 · colophon a colonne, filetto alto e basso ───────────────────────── */
.ft__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr 1.15fr;
  gap: 0 var(--space-l);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border-soft);
}
.ft__col {
  position: relative;
  padding-block: var(--space-l) var(--space-xl);
  min-width: 0;
}
/* filetti verticali sottili tra le colonne, come su una pagina impaginata */
.ft__col + .ft__col::before {
  content: "";
  position: absolute;
  top: var(--space-l);
  bottom: var(--space-xl);
  left: calc(var(--space-l) / -2);
  width: 1px;
  background: var(--color-border-soft);
}
.ft__title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-m);
}
.ft__list {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ft__list a,
.ft__legal a,
.ft__legal .linklike {
  color: var(--color-text-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.ft__list a:hover, .ft__list a:focus-visible,
.ft__legal a:hover, .ft__legal a:focus-visible,
.ft__legal .linklike:hover, .ft__legal .linklike:focus-visible { color: var(--color-accent); }

/* marchio: logo + firma a mano (link alla bussola), riga prodotto, dati societari */
.ft__brandmark {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: var(--space-m);
  color: var(--color-text);
  text-decoration: none;
}
.ft__brandmark img { width: 56px; height: 56px; display: block; flex: none; }
.ft__hand {
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  line-height: 1;
  white-space: nowrap;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease);
}
.ft__brandmark:hover .ft__hand, .ft__brandmark:focus-visible .ft__hand { color: var(--color-accent); }
.ft__line {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0 0 var(--space-m);
}
.ft__company {
  font-style: normal;
  font-size: var(--text-xs);
  line-height: 1.7;
  letter-spacing: .04em;
  color: var(--color-text-dim);
  margin: 0;
}

/* contatti: l'indirizzo è il protagonista, in Garamond */
.ft__mail {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-m);
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ft__mail:hover, .ft__mail:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* professionisti: testo breve e link con freccia, niente bottone */
.ft__text { margin: 0 0 var(--space-m); line-height: 1.6; max-width: 30ch; }
.ft__arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .35rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ft__arrow span { transition: transform var(--dur-fast) var(--ease); }
.ft__arrow:hover, .ft__arrow:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.ft__arrow:hover span { transform: translateX(4px); }

/* ── 3 · riga legale ─────────────────────────────────────────────────────── */
.ft__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "warning legal" "copy credits";
  align-items: center;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-m);
  padding-top: 0;
  border-top: 0;
  font-size: var(--text-xs);
}
.ft__warning { grid-area: warning; display: flex; align-items: center; gap: .8rem; margin: 0; }
.ft__warning .badge-18 { flex: none; }
.ft__legal { grid-area: legal; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem 1.4rem; letter-spacing: .04em; }
.ft__copy { grid-area: copy; margin: 0; color: var(--color-text-dim); opacity: .8; }
.ft__credits {
  grid-area: credits;
  justify-self: end;
  margin: 0;
  font-size: inherit;               /* stesso corpo del copyright (riga legale: --text-xs) */
  letter-spacing: .04em;
  color: var(--color-text-dim);
  opacity: .8;
}
.ft__credits a {
  font-family: inherit;             /* stesso font del copyright: niente più Garamond */
  font-size: inherit;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: .05em;
  margin-inline: .15em .35em;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ft__credits a:hover, .ft__credits a:focus-visible { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.ft__credits-sub { font-size: inherit; letter-spacing: .04em; }
.ft__credits-sub::before { content: "· "; }

/* ── tablet ──────────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .ft__grid { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; padding-bottom: var(--space-l); border-bottom: 1px solid var(--color-border-soft); }
  .ft__brand + .ft__col::before { display: none; }
  .ft__col:not(.ft__brand) { padding-top: var(--space-l); }
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (width <= 560px) {
  .ft { padding-top: var(--space-xl); }
  /* marchio e trade a tutta larghezza; Esplora e Contatti affiancati */
  .ft__grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-m); }
  .ft__col { padding-block: var(--space-m) var(--space-l); }
  .ft__col + .ft__col::before { display: none; }
  .ft__brand, .ft__trade { grid-column: 1 / -1; }
  .ft__brand { border-bottom: 1px solid var(--color-border-soft); padding-bottom: var(--space-l); }
  .ft__trade { border-top: 1px solid var(--color-border-soft); }
  .ft__col:not(.ft__brand) { padding-top: var(--space-m); }
  .ft__mail { font-size: var(--text-base); }
  .ft__bottom {
    grid-template-columns: 1fr;
    grid-template-areas: "warning" "legal" "copy" "credits";
    align-items: start;
    gap: var(--space-s);
  }
  .ft__legal { justify-content: flex-start; }
  .ft__credits { justify-self: start; }
  .ft__credits-sub { display: block; margin-top: .3rem; }
  .ft__credits-sub::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ft__arrow span { transition: none; }
}

/* ── LIQUORE · tre livelli ─────────────────────────────────────────────
   Il puntatore del profilo e il mazzo di botaniche: il punto d'oro sotto
   si vedeva in trasparenza fra gli steli (il genepi e rado). Il gruppo
   [data-levels-handle] resta, perche liquore-livelli.js ci scrive sopra
   la posizione, ma non disegna piu nulla.                              */
.alti__handle-halo,
.alti__handle-dot { display: none; }


/* ============================================================================
   CAMMINO · il binario (v5 · definitiva)
   Un solo sistema, due disposizioni. Moduli: pnl--text (half) · pnl--photo (half) · pnl--open / pnl--dates /
   pnl--end (full) · pnl--scene (full, il cammino si ferma). Regole di omogeneità, valide ovunque:
     · i titoli stanno sempre alla stessa quota (--pnl-top) e allo stesso rientro (--pnl-x);
     · la colonna di testo è sempre larga --col;
     · la foto è sempre il pannello intero: niente cornici, niente formati diversi;
     · un solo modo di comparire per i testi (alzata di 18 px + dissolvenza, a scaglioni);
     · un solo indicatore: il sentiero (.trail), orizzontale in basso su desktop, linea sottile in cima in colonna.
   Desktop (.cam--h, ≥821px + puntatore fine + niente reduced motion): binario orizzontale traslato dal JS.
   Colonna (tutto il resto, compreso no-JS): stessi pannelli uno sotto l'altro.
   Da riassorbire in src/css/components/cammino.css (sostituisce walk.css).
   ============================================================================ */
.cam {
  --pnl-top: clamp(7rem, 22svh, 13rem);          /* quota dei titoli, uguale in ogni pannello */
  --pnl-x: clamp(2.2rem, 6vw, 5.5rem);           /* rientro del testo nei pannelli */
  --col: 34rem;                                  /* colonna di testo */
  --trail-b: max(2.4rem, env(safe-area-inset-bottom));
  --lift: 18px;                                  /* alzata dei testi in comparsa */
  position: relative;
  background: var(--notte);
  color: var(--color-text);
}
.cam__pin { position: relative; }
.cam__topo { display: none; }

/* ---- pannelli: base comune ---------------------------------------------- */
.pnl { position: relative; background: var(--notte); overflow: hidden; }
.pnl__bg { position: absolute; inset: 0; z-index: 0; }
.pnl__bg img, .pnl__img img { width: 100%; height: 100%; object-fit: cover; }
.pnl__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,15,8,.42), rgba(23,15,8,.22) 45%, rgba(23,15,8,.94)); }
/* apertura a livelli: due immagini coincidenti (stesso ritaglio cover), mosse in parallasse dal JS. Lo sfondo è un
   po' più grande del pannello, così la deriva non scopre mai i bordi. */
.pnl__layer { position: absolute; inset: 0; will-change: transform; }
.pnl__layer--bg { inset: -5%; }
.pnl__layer img { object-position: 62% 50%; }
.pnl__layer--subject { z-index: 1; }
.pnl__bg--layers::after { z-index: 2; }
.pnl__bg--dim::after { background: radial-gradient(120% 90% at 50% 40%, rgba(23,15,8,.66), rgba(23,15,8,.96)); }
.pnl__inner { position: relative; z-index: 2; display: grid; gap: var(--space-m); max-width: var(--col); }
.pnl__inner .num { margin-bottom: calc(.45rem - var(--space-m)); }        /* il titoletto sta vicino al titolo */
/* i titoletti del Cammino: la cresta delle montagne DOPO la parola */
.cam .num::before { display: none; }
.cam .num::after { content: ""; flex: none; width: 72px; height: 14px; opacity: .85;
  background: var(--ridge, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 14' fill='none' stroke='%23C9A86A' stroke-width='1' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpolyline points='0,12 9,7 15,10 24,3 30,8 39,2 45,9 54,5 63,10 72,12'/%3E%3C/svg%3E")) no-repeat center / contain; }
.pnl__title { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-wrap: balance;
  color: var(--color-text); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.9rem); line-height: 1.04; }
.pnl__title--xl { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 5.8rem); line-height: 1; }
.pnl__title--end { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); }
.pnl__title em { color: var(--color-accent); font-style: normal; }
.pnl__lead { font-size: var(--text-lg); line-height: 1.6; max-width: 52ch; text-wrap: pretty; }
.pnl__body { font-size: var(--text-base); line-height: 1.75; color: var(--color-text-dim); max-width: 44ch; text-wrap: pretty; }
.pnl__body p + p { margin-top: var(--space-s); }
.pnl__body .verse { color: var(--color-accent-soft); font-family: var(--font-display); font-size: 1.25em; font-style: italic; }
.pnl__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-s); }
.pnl__actions .btn { margin-bottom: 0; }
.pnl__hint { display: inline-flex; align-items: center; gap: .9rem; margin-top: var(--space-s); text-decoration: none;
  font-size: var(--text-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--color-text-dim); }
.pnl__hint i { display: block; width: 56px; height: 1px; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--oro), transparent); animation: cam-hint 2.4s var(--ease) infinite; }
.pnl__hint:hover, .pnl__hint:focus-visible { color: var(--color-accent); }
.pnl__hint:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
@keyframes cam-hint { 0% { transform: scaleX(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.pnl--photo { background: var(--bruno-deep); }
.pnl--photo .pnl__img { position: absolute; inset: 0; overflow: hidden; }
.pnl--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(23,15,8,.14), transparent 28%, transparent 72%, rgba(23,15,8,.4)); }

/* ---- comparsa: una regola sola per i testi (il JS aggiunge .is-in; --d = ritardo di scaglione) e una per le foto:
   la foto d'apertura si accende e si assesta (scala 1,06 → 1), le foto del binario si assestano entrando. ---- */
.js .cam [data-cam-text] { opacity: 0; transform: translateY(var(--lift));
  transition: opacity .9s var(--ease-out-expo) var(--d, 0ms), transform 1s var(--ease-out-expo) var(--d, 0ms); }
.js .cam [data-cam-text].is-in { opacity: 1; transform: none; }
.js .cam:not(.is-ready) [data-cam-text], .js .cam:not(.is-ready) .pnl__bg, .js .cam:not(.is-ready) .pnl--photo .pnl__img { transition: none; }   /* niente transizioni finché la pagina non è pronta: lo stato iniziale si applica di colpo */
.js .cam .pnl__bg, .js .cam .pnl--photo .pnl__img { transform: scale(1.06); transition: transform 2.2s var(--ease-out-expo), opacity 1.2s var(--ease); }
.js .cam .pnl--open .pnl__bg { opacity: 0; }
.js .cam .pnl.is-in .pnl__bg, .js .cam .pnl--photo.is-in .pnl__img { transform: none; opacity: 1; }

/* ---- la scena della baita: fuori → si entra dalla porta → il buio → la stanza, che illumini tu ----------------
   Due livelli a tutto schermo nel palco: .stage__out (l'esterno, sopra) e .stage__in (la stanza buia, sotto).
   Il JS, con l'avanzamento del fermo: avvicina l'esterno alla porta (scale sull'origine data-cam-origin) e lo spegne;
   poi mette sulla scena .is-focus (si è dentro → esplorazione: la luce si accende e si muove col puntatore o con lo
   scroll) e .is-lit (stanza accesa). Reduced motion e no-JS: le due foto una sotto l'altra, la stanza già accesa.   */
.pnl--scene { --hold: 160svh; background: var(--notte); }
.stage { position: relative; width: 100%; height: 100svh; overflow: hidden; background: var(--notte); }
.stage__in, .stage__out { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--notte); }
.stage__img { position: absolute; inset: 0; }
.stage__img img { width: 100%; height: 100%; object-fit: cover; }
.stage__out { z-index: 2; will-change: transform, opacity; }
.stage__out::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;   /* la stessa velatura delle foto: l'invito in alto e il sentiero in basso restano leggibili */
  background: linear-gradient(180deg, rgba(23,15,8,.38), transparent 32%, transparent 68%, rgba(23,15,8,.55)); }
.stage__out .stage__img img { filter: brightness(var(--dim, 1)); }
.stage__in { z-index: 1; --lx: 50%; --ly: 50%; --lr: 26%; }
/* la stanza è buia: si intuisce appena, senza luce; in esplorazione l'immagine vera sta sotto la luce */
.stage__in .stage__img img { filter: brightness(.16) saturate(.5); transition: filter 1.2s var(--ease); }
.pnl--scene.is-focus .stage__in .stage__img img { filter: brightness(.92) saturate(.85); }
.pnl--scene.is-lit .stage__in .stage__img img { filter: brightness(1.04) saturate(1); }
/* la luce: compare solo in esplorazione, guidata dal puntatore o dallo scroll; sparisce quando la stanza si accende */
.light { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at var(--lx) var(--ly),
      rgba(255,214,150,.16) 0, rgba(255,214,150,.06) calc(var(--lr) * .45), rgba(23,15,8,.30) calc(var(--lr) * .85),
      rgba(23,15,8,.92) calc(var(--lr) * 1.35), rgba(23,15,8,.985) calc(var(--lr) * 2.2));
  transition: opacity 1.2s var(--ease); }
.pnl--scene.is-focus .light { opacity: 1; }
.pnl--scene.is-lit .light { opacity: 0; transition-duration: 1.8s; }
@media (pointer: fine) { .pnl--scene.is-focus:not(.is-lit) .stage__in { cursor: none; } }   /* in esplorazione la luce è il cursore */
.stage__hint { position: absolute; z-index: 6; left: var(--pnl-x); top: var(--pnl-top); margin: 0; max-width: 18rem;
  font-family: var(--font-hand); font-size: var(--text-kicker); line-height: 1.15; color: var(--color-accent);
  opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.stage__hint::before { content: ""; display: block; width: 56px; height: 1px; margin-bottom: .8rem; background: linear-gradient(90deg, var(--oro), transparent); }
.pnl--scene.is-outside .stage__hint--enter { opacity: 1; }
.pnl--scene.is-focus:not(.is-lit):not(.is-exploring) .stage__hint--light { opacity: 1; }
.stage__hint-touch { display: none; }
@media (pointer: coarse) { .stage__hint-fine { display: none; } .stage__hint-touch { display: inline; } }
.cam:not(.cam--h) .pnl--scene { height: calc(100svh + var(--hold)); overflow: visible; }   /* overflow visibile: lo sticky si aggancia allo schermo, non al pannello */
.cam:not(.cam--h) .stage { position: sticky; top: 0; }
@media (max-width: 820px) { .stage__hint { left: var(--gutter); top: clamp(6rem, 14svh, 8rem); max-width: 15rem; } }
/* senza movimento (reduced motion → .cam--static, no-JS): le due foto in colonna come tutte le altre, la stanza accesa */
html:not(.js) .cam .pnl--scene, .cam.cam--static .pnl--scene { height: auto; }
html:not(.js) .cam .stage, .cam.cam--static .stage { position: static; height: auto; display: flex; flex-direction: column; }
html:not(.js) .cam .stage__in, html:not(.js) .cam .stage__out, .cam.cam--static .stage__in, .cam.cam--static .stage__out { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; flex: none; }
html:not(.js) .cam .stage__out, .cam.cam--static .stage__out { order: -1; }
html:not(.js) .cam .stage__in .stage__img img, .cam.cam--static .stage__in .stage__img img { filter: none; }
html:not(.js) .cam .stage__hint, .cam.cam--static .stage__hint, html:not(.js) .cam .light, .cam.cam--static .light { display: none; }

/* ---- la baita come fotografia stampata, vecchia, poggiata sul buio -----------------------------------------
   .stage__paper: la carta (bordo uguale sui quattro lati, un filo ingiallita, ombra, inclinata di --tilt); dentro, la
   foto col suo rapporto (--ratio) — viraggio caldo, meno saturazione, vignettatura e grana (un SVG di rumore).
   Lo zoom della scena scala .stage__out intera: la stampa resta una stampa fino a quando la stanza non emerge. */
.stage__out { background: var(--notte); }                                 /* la stampa poggia sul buio pieno: la stanza emerge solo dopo, quando la stampa svanisce */
.stage__out::after { display: none; }                                  /* niente velatura: la carta poggia sul fondo notte */
.stage__paper { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 82%; aspect-ratio: var(--ratio, 4 / 5);
  box-sizing: border-box; padding: 2.4%; border-radius: 2px;
  background: linear-gradient(165deg, #efe7d6, #e0d5be); rotate: var(--tilt, -2deg);
  box-shadow: 0 34px 70px rgba(0,0,0,.65), 0 8px 16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.35); }
.stage__paper .stage__img { position: relative; inset: auto; width: 100%; height: 100%; overflow: hidden; background: #2a2016; }
.stage__out .stage__img img { filter: sepia(.32) saturate(.78) contrast(.94) brightness(calc(var(--dim, 1) * .97)); }
.stage__paper .stage__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .9;
  background:
    radial-gradient(115% 100% at 50% 45%, transparent 52%, rgba(52,34,14,.55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.stage__paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;   /* luce radente sulla carta */
  background: linear-gradient(120deg, rgba(255,255,255,.16), transparent 38%, transparent 72%, rgba(0,0,0,.08)); }
@media (max-width: 820px), (orientation: portrait) { .stage__paper { height: auto; width: 84%; } }   /* schermi stretti e tablet in verticale: la stampa si misura sulla larghezza */
html:not(.js) .cam .stage__paper, .cam.cam--static .stage__paper { rotate: 0deg; }

/* ---- le pietre miliari (Tre date) ------------------------------------------ */
.miles { list-style: none; margin: 0; padding: 0; position: relative; z-index: 2; }
.mile { display: grid; gap: .35rem; }
.mile__year { font-family: var(--font-display); font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5.2rem); line-height: 1; color: var(--color-text-dim);
  transition: color .8s var(--ease), transform .8s var(--ease), opacity .8s var(--ease); transform: translateY(var(--lift)); opacity: .55; }
.mile__label { font-family: var(--font-hand); font-size: var(--text-kicker); line-height: 1.1; color: var(--color-text-dim); opacity: .6;
  transition: opacity .8s var(--ease) .15s, color .8s var(--ease) .15s; }
.mile.is-lit .mile__year { color: var(--color-accent); transform: none; opacity: 1; }
.mile.is-lit .mile__label { color: var(--color-text); opacity: 1; }

/* ---- il sentiero (dove sei) ------------------------------------------------
   Desktop: linea orizzontale in basso, i punti delle tappe sono link con l'etichetta.
   Colonna: una linea sottile in cima allo schermo che si riempie camminando; niente punti né etichette
   (le tappe hanno già il loro titoletto nel flusso) — il JS la marca aria-hidden. */
.trail { position: fixed; z-index: 41; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
.trail.is-visible { opacity: 1; }
body.menu-open .trail { display: none; }
.trail__line { position: absolute; inset: 0; background: rgba(201,168,106,.18); }
.trail__line i { position: absolute; inset: 0; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); }
.trail__dots { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; display: none; }
.trail__dot { position: absolute; left: calc(var(--p) * 100%); top: 50%; width: 0; height: 0; }
.trail__dot a { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; display: block; border-radius: 50%; text-decoration: none; }
.trail__dot a::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--notte); border: 1px solid var(--oro); transition: background var(--dur-fast), transform var(--dur-fast); }
.trail__dot.is-passed a::before { background: var(--oro); }
.trail__dot.is-on a::before { transform: scale(1.5); }
.trail__dot a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.trail__tag { position: absolute; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-dim); opacity: .72;
  transition: opacity var(--dur-fast), color var(--dur-fast); }
.trail__dot:first-child .trail__tag { left: 14px; transform: none; }
.trail__dot:last-child .trail__tag { left: auto; right: 14px; transform: none; }
.trail__dot.is-passed .trail__tag { opacity: .9; color: var(--color-text); }
.trail__dot.is-on .trail__tag, .trail__dot a:hover .trail__tag, .trail__dot a:focus-visible .trail__tag { opacity: 1; color: var(--color-accent); }

/* ============================================================================
   COLONNA (mobile, touch, reduced motion, no-JS): .cam senza .cam--h
   ============================================================================ */
.cam:not(.cam--h) .cam__track { display: block; }
.cam:not(.cam--h) .pnl--open, .cam:not(.cam--h) .pnl--end { min-height: 100svh; display: grid; align-items: end; }
.cam:not(.cam--h) .pnl--open .pnl__inner, .cam:not(.cam--h) .pnl--end .pnl__inner { padding: clamp(7rem, 18vh, 10rem) var(--gutter) clamp(5rem, 14vh, 8rem); max-width: 64rem; }
/* la foto è il pannello intero: larghezza dichiarata (100%), così quando max-height taglia l'altezza il rapporto non
   restringe la larghezza — senza, su tablet (dove 4:5 supera 72svh) la foto diventava un riquadro stretto a sinistra. */
.cam:not(.cam--h) .pnl--photo { width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; }
.cam:not(.cam--h) .pnl--text .pnl__inner, .cam:not(.cam--h) .pnl--dates .pnl__inner { padding: var(--space-2xl) var(--gutter); }
.cam:not(.cam--h) .pnl--dates { min-height: 80svh; display: grid; align-content: center; }
.cam:not(.cam--h) .pnl--dates .pnl__inner { padding-bottom: var(--space-l); }
.cam:not(.cam--h) .miles { margin: 0 var(--gutter) var(--space-2xl); display: grid; gap: var(--space-l); }
.cam:not(.cam--h) .mile__year { transform: none; }
html:not(.js) .cam .trail, html:not(.js) .cam .light, html:not(.js) .cam .stage__hint { display: none; }
@media (min-width: 821px) {                      /* colonna su schermi larghi (tablet in orizzontale, reduced motion): testi centrati nella pagina */
  .cam:not(.cam--h) .pnl--text .pnl__inner, .cam:not(.cam--h) .pnl--dates .pnl__inner, .cam:not(.cam--h) .miles { margin-inline: auto; max-width: min(var(--col), 100% - 2 * var(--gutter)); padding-inline: 0; }
  .cam:not(.cam--h) .pnl--dates .pnl__inner { width: 100%; }
  .cam:not(.cam--h) .miles { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .cam:not(.cam--h) .pnl--text .pnl__inner { padding-block: clamp(6rem, 14svh, 9rem); }
}

/* ---- TABLET IN ORIZZONTALE (iPad e simili: touch, ≥1000px, più largo che alto; vale anche per reduced motion su
   desktop): la colonna diventa una rivista. I due moduli "half" stanno affiancati a due a due, ogni riga è alta uno
   schermo — testo | foto, foto | testo — come sul binario desktop, ma con lo scroll verticale nativo. I pannelli pieni
   (apertura, botaniche, scena, date, arrivo) occupano tutta la riga; un half rimasto spaiato prima di un pannello pieno
   (.pnl--solo, lo marca il template) si allarga a tutta riga. In verticale (portrait) resta la colonna semplice: due colonne sarebbero troppo strette. */
@media (min-width: 1000px) and (orientation: landscape) {
  .cam:not(.cam--h) { --pnl-x: clamp(2rem, 4.5vw, 5rem); }             /* rientro un po' più stretto del desktop: le colonne sono mezzo schermo di tablet */
  .cam:not(.cam--h) .cam__track { display: grid; grid-template-columns: 1fr 1fr; }
  .cam:not(.cam--h) .pnl--full, .cam:not(.cam--h) .pnl--scene { grid-column: 1 / -1; }
  .cam:not(.cam--h) .pnl--half { min-height: 100svh; }
  .cam:not(.cam--h) .pnl--solo { grid-column: 1 / -1; }                     /* l'half spaiato (marcato dal template) */
  .cam:not(.cam--h) .pnl--photo { aspect-ratio: auto; max-height: none; height: auto; }
  .cam:not(.cam--h) .pnl--photo.pnl--solo { min-height: 0; height: 72svh; }
  /* il testo: a metà altezza della riga, allo stesso rientro dei pannelli desktop (non centrato nella pagina) */
  .cam:not(.cam--h) .pnl--half.pnl--text { display: grid; align-content: center; }
  .cam:not(.cam--h) .pnl--half.pnl--text .pnl__inner { margin-inline: 0; max-width: min(var(--col), 100% - 2 * var(--pnl-x)); padding: var(--space-2xl) var(--pnl-x); }
  /* le botaniche: testo a sinistra, l'erbario a destra (le regole dell'erbario stanno nel blocco LE BOTANICHE, più sotto) */
  .cam:not(.cam--h) .pnl--bots { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 100svh; }
  .cam:not(.cam--h) .pnl--bots .pnl__inner { margin-inline: 0; max-width: min(var(--col), 100% - 2 * var(--pnl-x)); padding: var(--space-2xl) var(--pnl-x); }
  /* apertura e arrivo: il testo resta ancorato in basso, ma con un respiro in più sopra il sentiero */
  .cam:not(.cam--h) .pnl--open .pnl__inner, .cam:not(.cam--h) .pnl--end .pnl__inner { padding-inline: var(--pnl-x); }
  .cam:not(.cam--h) .pnl--dates .pnl__inner, .cam:not(.cam--h) .miles { max-width: min(64rem, 100% - 2 * var(--pnl-x)); }
}

/* ============================================================================
   DESKTOP · il binario orizzontale (.cam--h)
   ============================================================================ */
.cam--h { height: var(--cam-h, 500svh); }
.cam--h .cam__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.cam--h .cam__topo { display: block; position: absolute; z-index: 0; top: 50%; left: 0; width: 220vw; height: 120svh; transform: translateY(-50%); opacity: .5; pointer-events: none; }
.cam--h .cam__topo-svg { position: absolute; top: 0; width: 110vw; height: 100%; }
.cam--h .cam__topo-svg + .cam__topo-svg { left: 110vw; }
.cam--h .cam__topo path { fill: none; stroke: var(--oro); stroke-width: .9px; opacity: .14; }
.cam--h .cam__track { position: relative; z-index: 1; display: flex; height: 100svh; will-change: transform; }
.cam--h .pnl { flex: 0 0 auto; height: 100svh; background: transparent; }
.cam--h .pnl--full { width: 100vw; }
.cam--h .pnl--half { width: 50vw; }
.cam--h .pnl--photo .pnl__img img { width: 112%; margin-left: -6%; will-change: transform; }   /* la foto respira: scivola piano dentro il pannello (JS) */
.cam--h .pnl__inner { position: absolute; top: var(--pnl-top); left: var(--pnl-x); width: min(var(--col), 50vw - 2 * var(--pnl-x)); }
.cam--h .pnl--text .pnl__inner { top: 50%; transform: translateY(-50%); }   /* i testi delle tappe stanno a metà altezza */
.cam--h .pnl__inner--wide { left: var(--gutter); width: min(62rem, 100vw - 2 * var(--gutter)); top: auto; bottom: calc(var(--trail-b) + 4.5rem); }   /* apertura e arrivo sono copertine: ancorate in basso, sopra il sentiero */
.cam--h .pnl--end .pnl__inner--wide { width: min(56rem, 100vw - 2 * var(--gutter)); }
.cam--h .pnl--dates .pnl__inner { left: var(--gutter); }
.cam--h .pnl--dates .pnl__bg img { object-position: 50% 72%; }   /* la foto è verticale: si tiene la parte bassa, la bottiglia non sta dietro al titolo */
/* le tre date: in fila nella metà bassa del pannello, su una linea loro, staccate dal sentiero */
.cam--h .miles { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(var(--trail-b) + 7rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-l); }
.cam--h .miles::before { content: ""; position: absolute; left: 0; right: 0; top: -1.6rem; height: 1px; background: var(--color-border); }
.cam--h .mile { position: relative; }
.cam--h .mile::before { content: ""; position: absolute; left: 0; top: -1.6rem; width: 7px; height: 7px; margin: -3px 0 0 0; border-radius: 50%;
  background: var(--notte); border: 1px solid var(--oro); transition: background .5s var(--ease), transform .5s var(--ease); }
.cam--h .mile.is-lit::before { background: var(--oro); transform: scale(1.35); }
/* il sentiero orizzontale in basso */
.cam--h .trail { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); top: auto; bottom: var(--trail-b); height: 1px; opacity: 1; pointer-events: auto; }
.cam--h .trail__line { background: var(--color-border); }
.cam--h .trail__dots { display: block; }

/* schermi bassi (portatili 768 px, tablet in orizzontale): titoli più in alto, apertura più compatta */
@media (max-height: 820px) and (min-width: 821px) {
  .cam { --pnl-top: clamp(5.5rem, 15svh, 9rem); }
  .cam--h .pnl__lead { font-size: var(--text-base); max-width: 48ch; }
  .cam--h .pnl__title--xl { font-size: clamp(2.4rem, 1rem + 4vw, 4.6rem); }
  .cam--h .pnl__inner--wide { bottom: calc(var(--trail-b) + 3.5rem); }
  .cam--h .miles { bottom: calc(var(--trail-b) + 5.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cam [data-cam-text] { opacity: 1; transform: none; transition: none; }
  .js .cam .pnl__bg, .js .cam .pnl--photo .pnl__img { transform: none; opacity: 1; transition: none; }
  .pnl__hint i { animation: none; transform: none; opacity: 1; }
  .light, .mile__year, .mile__label, .stage__in .stage__img img { transition: none; }
}

/* ============================================================================
   APPUNTI A MANO (partials/note.php + assets/js/appunti.js)
   Una frase in La Belle Aurore che si scrive lettera per lettera (ritardo --i × 38 ms), poi una freccina a mano
   (stroke-dashoffset, lunghezza in --len dal JS, parte dopo --ink-ms) dal testo al punto indicato.
   L'appunto copre tutto il contenitore (inset 0, pointer-events none); il testo sta a --at-x / --at-y
   (frazioni del contenitore, dal contenuto o da qui); .note--r si aggancia al bordo destro. Il JS accende con .is-on.
   Blocco mancante nel deploy del 9/9: senza queste regole le lettere <i> restavano in flusso, in corsivo, e gli
   appunti finivano sotto la foto.
   ============================================================================ */
.note { position: absolute; inset: 0; z-index: 3; margin: 0; pointer-events: none; --at-x: 8%; --at-y: 14%; }
.note__text { position: absolute; left: var(--at-x); top: var(--at-y); margin: 0; max-width: 15rem;
  font-family: var(--font-hand); font-size: var(--text-kicker); font-weight: 400; font-style: normal; line-height: 1.15;
  letter-spacing: .01em; color: var(--color-accent); text-wrap: balance;
  text-shadow: 0 1px 2px rgba(23,15,8,.7), 0 0 18px rgba(23,15,8,.55); }
.note--r .note__text { left: auto; right: calc(100% - var(--at-x)); text-align: right; }
.note__ink i { font-style: normal; opacity: 0; transition: opacity .05s linear; }              /* spento: sfumano insieme */
.note__ink i.sp { white-space: pre; }
.note.is-on .note__ink i { opacity: 1; transition: opacity .28s var(--ease) calc(var(--i, 0) * 38ms + 120ms); }
.note__arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.note__line, .note__head { fill: none; stroke: var(--oro); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
  opacity: .9; filter: drop-shadow(0 1px 1px rgba(23,15,8,.6)); }
.note__line { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset .1s linear; }
.note__head { opacity: 0; transition: opacity .1s linear; }
.note.is-on .note__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out-expo) var(--ink-ms, 600ms); }
.note.is-on .note__head { opacity: .9; transition: opacity .3s var(--ease) calc(var(--ink-ms, 600ms) + 850ms); }
/* nella scena: l'invito sulla porta sta sopra l'esterno (z 2), l'appunto sul cassetto sopra la luce (z 3) */
.stage .note--door { z-index: 5; }
.stage__in .note { z-index: 4; }
@media (max-width: 820px) { .note__text { max-width: 11rem; font-size: clamp(1.15rem, 1rem + .8vw, 1.4rem); } }
@media (prefers-reduced-motion: reduce) {
  .note.is-on .note__ink i, .note.is-on .note__line, .note.is-on .note__head { transition: none; }
}

/* ============================================================================
   LE BOTANICHE (oggi su "La traccia", nel contenuto): il pannello di testo diventa "full" (pnl--bots): testo a sinistra, accanto i
   ritagli a tre profondità (il JS li sposta con translate3d: parallasse e deriva col puntatore).
   Compaiono UNA ALLA VOLTA mentre il pannello arriva (soglie sullo scroll in cammino.js → .is-in), ognuna con il
   suo nome che si scrive a mano nello stesso momento (un appunto in spazio "panel": la figura). Niente hover.
   Le posizioni sono in percentuale del pannello; .bot--back è più indietro: più piccolo, più scuro, un po' sfocato.
   ============================================================================ */
.pnl--bots .pnl__inner { z-index: 2; }
.bots { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.bot { position: absolute; margin: 0; width: clamp(9rem, 14vw, 17rem); will-change: transform; }
.bot--back { width: clamp(6.5rem, 10vw, 12rem); opacity: .6; filter: blur(.6px) brightness(.85); }
.bot__img { position: relative; opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease-out-expo); }
.bot.is-in .bot__img { opacity: 1; transform: none; }
.bot__img img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
/* l'appunto del nome: copre un'area più larga del ritaglio, così il testo sta fuori dall'immagine e la freccia la raggiunge */
.bot .note { inset: -12% -70%; --at-x: 78%; --at-y: 8%; }
.bot .note--r { --at-x: 22%; }
.bot .note__text { max-width: 11rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); }
/* disposizione desktop: pannello più stretto, le botaniche accanto alla colonna di testo, sfalsate in altezza */
.cam--h .pnl--bots { width: 86vw; }
.cam--h .bot--1 { left: 44%; top: 7%; }        /* genepì · davanti, in alto */
.cam--h .bot--2 { left: 68%; top: 30%; }       /* ginepro · nome a sinistra (anchor right) */
.cam--h .bot--3 { left: 47%; top: 57%; }       /* anice stellato · indietro */
.cam--h .bot--4 { left: 60%; top: 63%; width: clamp(8rem, 12vw, 14rem); }   /* arancia · il nome si scrive a destra */
/* colonna (mobile, touch, reduced motion, no-JS): un piccolo erbario sotto il testo, in fila */
.cam:not(.cam--h) .pnl--bots .pnl__inner { padding-bottom: var(--space-l); }
.cam:not(.cam--h) .bots { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 4.2rem clamp(1.6rem, 6vw, 3rem); padding: var(--space-s) var(--gutter) calc(var(--space-2xl) + 2rem); }
.cam:not(.cam--h) .bot { position: relative; width: clamp(6rem, 30vw, 9rem); }
.cam:not(.cam--h) .bot--back { width: clamp(5rem, 24vw, 7.5rem); }
/* in colonna il nome sta SOTTO il ritaglio, come la didascalia di un erbario */
.cam:not(.cam--h) .bot .note { inset: 0 -35% -52% -35%; --at-x: 50%; }
.cam:not(.cam--h) .bot .note__text { left: 50%; right: auto; top: auto; bottom: 0; transform: translateX(-50%); text-align: center;
  width: 7.6rem; white-space: normal; line-height: 1.05; font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem); }
.cam:not(.cam--h) .bot .note__arrow { display: none; }   /* la didascalia sta sotto: la freccia non serve */
@media (min-width: 821px) { .cam:not(.cam--h) .bots { max-width: min(52rem, 100% - 2 * var(--gutter)); margin-inline: auto; padding-inline: 0; } }   /* tablet in verticale: i quattro ritagli stanno su una riga sola */
/* tablet in orizzontale (vedi "TABLET IN ORIZZONTALE"): l'erbario sta a destra del testo, due ritagli per riga, un po' più grandi */
@media (min-width: 1000px) and (orientation: landscape) {
  .cam:not(.cam--h) .bots { max-width: none; margin: 0; padding: var(--space-xl) var(--pnl-x) calc(var(--space-xl) + 2.6rem) var(--space-l);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.6rem clamp(1.5rem, 3vw, 3rem); justify-items: center; align-items: end; }
  .cam:not(.cam--h) .bot { width: clamp(7rem, 11vw, 10rem); }
  .cam:not(.cam--h) .bot--back { width: clamp(6rem, 9vw, 8.5rem); }
  .cam:not(.cam--h) .bot--2 { margin-top: 2.4rem; }                     /* leggermente sfalsati, come un erbario vero */
  .cam:not(.cam--h) .bot--3 { margin-top: -1.2rem; }
}
html:not(.js) .bot__img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bot__img { opacity: 1; transform: none; transition: none; } }

/* ============================================================================
   BUSSOLA · i volti come elementi singoli (9/9)
   Al passaggio su una direzione, sopra la bussola si posa una fotografia STAMPATA: bordo di carta uguale sui quattro
   lati, leggera inclinazione (--tilt, dal contenuto), ombra. Per l'Amaro la bottiglia ritagliata, senza cornice.
   Il disco col marchio resta com'è (non cresce più). Il JS (experience.js) continua ad accendere [data-map-face] con
   .is-on e a muovere alpha/scala sul contenitore; l'inclinazione sta sulla figura, così non si pestano i piedi.
   ============================================================================ */
.map__pivot.is-face { width: 27%; }
.map__prints { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.map__prints .map__face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }   /* il GSAP muove alpha e scala qui: niente translate nostri */
.map__prints .map__face--print { --print-w: 54%; }
.map__prints .map__face--print[style*="3 / 4"] { --print-w: 42%; }
.map__prints .map__face--cut { --print-w: 42%; }
.print { margin: 0; width: var(--print-w, 46%); aspect-ratio: var(--ratio, 4 / 3); box-sizing: border-box; padding: 3.5%;
  background: linear-gradient(160deg, #f6f1e7, #ebe4d6); border-radius: 2px;
  box-shadow: 0 24px 48px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.5);
  rotate: calc(var(--tilt, 0deg) + 7deg); transition: rotate 1s var(--ease-out-expo); }
.map__face.is-on .print { rotate: var(--tilt, 0deg); }
.print img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02); }
.print::after { content: ""; position: absolute; inset: 0; pointer-events: none;                     /* un velo di luce sulla carta */
  background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 40%, transparent 70%, rgba(0,0,0,.06)); }
.print { position: relative; }
.cut { margin: 0; width: var(--print-w, 40%); rotate: calc(var(--tilt, 0deg) + 4deg); transition: rotate 1s var(--ease-out-expo); }
.map__face.is-on .cut { rotate: var(--tilt, 0deg); }
.cut img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(0,0,0,.6)); }
@media (width <= 820px) { .map__prints .map__face--print { --print-w: 56%; } .map__prints .map__face--print[style*="3 / 4"] { --print-w: 44%; } .map__prints .map__face--cut { --print-w: 46%; } }
@media (prefers-reduced-motion: reduce) { .print, .cut { transition: none; rotate: var(--tilt, 0deg); } }

/* ─ E-05 · VISUAL SENZA RIQUADRO ──────────────────────────────────────────
   I bicchieri del servizio e i cinque cocktail delle strade sono ritagli su
   fondo trasparente (png/webp/avif con canale alfa): il soggetto poggia
   direttamente sulla scena, senza rettangolo di fondo né angoli arrotondati.
   `contain` al posto di `cover` così il ritaglio non viene mai tagliato. */
.serve__img,
.serve__mode-img,
.strada__img { background: none; border-radius: 0; }

.serve__img img,
.serve__mode-img img,
.strada__img img { object-fit: contain; }

/* ─ S-01/S-02 · I RACCONTI — PRIMA USCITA ─────────────────────────────────
   Finché non ci sono racconti veri il foglio non mostra storie finte: sotto il
   titolo c'è il SOMMARIO del numero (le cinque rubriche, come l'indice di un
   inserto, con il filetto puntinato e la nota "in arrivo") e accanto l'AVVISO
   AI LETTORI: riquadro a doppio filetto, foto d'archivio in seppia che prende
   colore al passaggio, rimando a Instagram. Con 'items' pieno tutto questo
   sparisce da solo e torna la fila delle storie (stili in main.css). */

.issue {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.4rem, 2.6vw, 2.2rem) 0 clamp(1.6rem, 3vw, 2.6rem);
}

.issue__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.issue__label::after { content: ""; flex: 1; height: 1px; background: var(--rule); opacity: .6; }

/* sommario */
.index { list-style: none; margin: 0; padding: 0; }
.index__row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: .2rem .6rem;
  padding: .95rem 0;
  border-top: 1px solid var(--rule);
}
.index__row:first-child { border-top: 0; padding-top: .2rem; }
.index__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: .06em;
  color: var(--ink-soft);
  line-height: 1.4;
  padding-top: .15em;
}
.index__line { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.index__name {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.15;
  color: var(--ink);
}
.index__leader {
  flex: 1;
  min-width: 1.2rem;
  border-bottom: 1px dotted var(--ink-soft);
  opacity: .55;
  transform: translateY(-.32em);
}
.index__soon {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  white-space: nowrap;
}
.index__text {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: .3rem 0 0;
  max-width: 48ch;
}

/* avviso ai lettori */
.avviso {
  display: grid;
  gap: .9rem;
  justify-items: center;
  text-align: center;
  padding: 1.5rem clamp(1.1rem, 2vw, 1.8rem) 1.7rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  outline: 1px solid var(--rule);
  outline-offset: -6px;
  transition: background var(--dur-base);
}
.avviso:hover, .avviso:focus-visible { background: #2b24190d; }
.avviso__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.avviso__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #d8d0bf;
  margin: .1rem 0 .2rem;
}
.avviso__img picture { display: block; width: 100%; height: 100%; }
.avviso__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: sepia(.85) saturate(.7) contrast(1.04) brightness(.96);
  transition: filter .8s var(--ease), transform 1.2s var(--ease-out-expo);
}
.avviso:hover .avviso__img img, .avviso:focus-visible .avviso__img img { filter: none; transform: scale(1.03); }
.avviso__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  line-height: 1.1;
  max-width: 20ch;
}
.avviso__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 30ch;
}
.avviso__cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .4rem 0;
  min-height: 44px; /* tap target */
}
.avviso__cta-text { border-bottom: 1px solid var(--ink); padding-bottom: .25rem; line-height: 1.6; }
.avviso__cta b { font-weight: 400; color: var(--ink-soft); letter-spacing: .08em; text-transform: none; }
.avviso__arrow {
  border: 1px solid var(--ink);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  width: 3.2rem; height: 1.6rem;
  display: inline-grid; place-items: center;
  font-size: 1rem;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.avviso:hover .avviso__arrow { transform: translateX(4px); }

/* chiusura: la riga a mano è un link al profilo, senza cambiare aspetto */
.paper__foot-link { color: inherit; text-decoration: none; }
.paper__foot-link:hover, .paper__foot-link:focus-visible { color: var(--ink); }

/* ─ responsive del foglio ─ */
@media (width <= 1024px) {
  .issue { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
}

@media (width <= 820px) {
  /* il foglio quasi dritto e più margine intorno: gli angoli ruotati non
     vengono più tagliati dall'overflow del fondo */
  .paper-wrap { padding: clamp(6.5rem, 14vh, 8rem) 1.1rem 3rem; }
  .paper { padding: 1.4rem clamp(1.1rem, 4vw, 1.8rem) 1.8rem; }
  .paper__top { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .6rem 0; }
  .paper__head { padding: 1.2rem 0 .5rem; }
  .paper__title { font-size: clamp(1.9rem, 1.2rem + 4.2vw, 3rem); }
  .paper__lead { font-size: var(--text-sm); max-width: 44ch; margin-bottom: 1.4rem; }
  .issue { grid-template-columns: 1fr; gap: 1.6rem; padding: 1.2rem 0 1.4rem; }
  .issue__avviso { max-width: 34rem; width: 100%; justify-self: center; }
  .index__text { max-width: none; }
  .story__title { font-size: 1.05rem; }
  .paper__foot { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); padding-top: .6rem; }
}

@media (width <= 520px) {
  .paper-wrap { padding: 5rem .9rem 2.4rem; }
  .paper { padding: 1.2rem 1.1rem 1.5rem; }
  .paper__top { flex-direction: column; align-items: flex-start; gap: .15rem; font-size: .7rem; letter-spacing: .12em; }
  .paper__title { font-size: clamp(1.75rem, 1rem + 5.2vw, 2.4rem); }
  .index__row { grid-template-columns: 1.7rem minmax(0, 1fr); padding: .8rem 0; }
  .index__name { font-size: 1.05rem; }
  /* su schermi stretti niente filetto puntinato: il nome può andare a capo
     e la nota "in arrivo" lo segue sulla stessa riga, dopo un trattino */
  .index__line { display: block; }
  .index__leader { display: none; }
  .index__soon::before { content: "— "; }
  .avviso { padding: 1.2rem 1rem 1.4rem; }
  .avviso__text { font-size: var(--text-sm); }
  .avviso__cta { gap: .7rem; }
  .avviso__cta-text b { display: block; margin-top: .25rem; }
}

/* niente rotazione se l'utente preferisce meno movimento: il testo resta nitido */
@media (prefers-reduced-motion: reduce) {
  html.paper-static .paper, html:not(.xp) .paper { transform: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MANIFESTO · scene (settembre 2026)
   Ogni blocco è una scena: pannello sticky alto 100svh che resta fermo per --mf-hold di scroll, tre fotografie in
   parallasse intorno a un testo centrato. Il testo compare a scaglioni quando il pannello si è quasi fermato — mai
   sfocato, mai scalato — e dietro ha un alone notte che lo tiene leggibile sopra le foto. A destra la scala dei punti.
   Motore: assets/js/manifesto.js (.mf--live). Colonna statica (.mf--static / no-JS): tutto in flusso, foto ferme.
   Sovrascrive .mf-* di main.css (pages/manifesto.php). Definitivo → src/css/components/manifesto.css.
   ══════════════════════════════════════════════════════════════════════════ */
.mf { --mf-hold: 90svh; --mf-par: .24; }   /* fermo di ogni scena · quanto salgono le foto con lo scroll */

/* ---- disposizione: statica di base (no-JS, reduced motion), sticky solo con il motore acceso ---------------- */
html.xp .mf-scene, html.xp .mf-scene--last { height: auto; }
html.xp .mf-scene__pin { position: relative; height: auto; min-height: 100svh; }
html.xp .mf-scene__imgs { display: block; }
.mf-scene__pin { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; }
.mf.mf--live .mf-scene { height: calc(100svh + var(--mf-hold)); }
.mf.mf--live .mf-scene--last { --mf-hold: 60svh; }
.mf.mf--live .mf-scene__pin { position: sticky; top: 0; height: 100svh; min-height: 0; }

/* ---- il testo: nitido, centrato, con un alone notte dietro (leggibilità sopra le foto) ----------------------- */
.mf-inner { position: relative; z-index: 2; padding: clamp(4rem, 10svh, 6rem) clamp(1.6rem, 6vw, 4rem); }
.mf-inner::before {
  content: ""; position: absolute; inset: -10% -16%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 54% 52% at 50% 50%, rgba(23, 15, 8, .94) 0%, rgba(23, 15, 8, .78) 40%, rgba(23, 15, 8, 0) 72%);
}
.mf--live [data-mf-line] { opacity: 0; will-change: transform, opacity; }        /* il JS li accende (stile inline) */
.mf--static [data-mf-line], html:not(.js) [data-mf-line] { opacity: 1; transform: none; }
.mf-line { text-wrap: balance; }
.mf-body { text-wrap: pretty; }
.mf-scene:focus { outline: none; }                                                /* fuoco programmatico dalla scala */

/* ---- le foto: cartoline in parallasse, deriva lenta, si accendono al passaggio ------------------------------ */
.mf-scene__imgs { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mf-photo {
  position: absolute; margin: 0; width: clamp(120px, 19vw, 300px); aspect-ratio: 4 / 5;
  border-radius: var(--radius-s); opacity: .6; will-change: transform, opacity;
}
.mf--live .mf-photo { opacity: 0; pointer-events: auto; }                         /* il JS le accende (stile inline) */
.mf-photo__in {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: mf-drift 9s ease-in-out infinite alternate;
}
.mf-photo__in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20, 16, 11, .12), rgba(20, 16, 11, .5)); transition: opacity .7s var(--ease); }
.mf-photo img, .mf-photo picture { display: block; width: 100%; height: 100%; }
.mf-photo img { object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out-expo); }
.mf--live .mf-photo:hover .mf-photo__in::after { opacity: .3; }
.mf--live .mf-photo:hover img { transform: scale(1.1); }
.mf-photo--1 { top: 13svh; left: 5vw; }
.mf-photo--2 { top: 20svh; right: 6vw; width: clamp(100px, 15vw, 240px); }
.mf-photo--3 { bottom: 5svh; left: 11vw; width: clamp(96px, 14vw, 220px); }
.mf-photo--2 .mf-photo__in { animation-duration: 11s; animation-delay: -3s; }
.mf-photo--3 .mf-photo__in { animation-duration: 8s; animation-delay: -5s; }
.mf-scene:nth-of-type(2n) .mf-photo--1 { left: auto; right: 5vw; }               /* a scene alterne lo specchio */
.mf-scene:nth-of-type(2n) .mf-photo--2 { right: auto; left: 6vw; }
.mf-scene:nth-of-type(2n) .mf-photo--3 { left: auto; right: 11vw; }
@keyframes mf-drift {
  from { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  to   { transform: translate3d(0, -10px, 0) rotate(.5deg); }
}

/* ---- la scala dei punti: fissa a destra, un link per scena, visibile solo dentro il manifesto ---------------- */
.mf-rail {
  position: fixed; z-index: 41; right: max(.6rem, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.mf-rail.is-visible { opacity: 1; pointer-events: auto; }
body.menu-open .mf-rail, html:not(.js) .mf-rail { display: none; }
.mf-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.mf-rail__dot { position: relative; display: grid; place-items: center; width: 44px; height: 34px; text-decoration: none; border-radius: 999px; }
.mf-rail__dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--oro); background: transparent;
  transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.mf-rail__item.is-passed .mf-rail__dot::before { background: var(--oro-soft); border-color: var(--oro-soft); }
.mf-rail__item.is-on .mf-rail__dot::before { background: var(--oro); transform: scale(1.5); box-shadow: 0 0 0 5px rgba(201, 168, 106, .16); }
.mf-rail__dot:hover::before { transform: scale(1.3); }
.mf-rail__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -3px; }
.mf-rail__tag {
  position: absolute; right: calc(100% - 4px); top: 50%; transform: translate(8px, -50%); white-space: nowrap;
  font-family: var(--font-hand); font-size: 1.2rem; line-height: 1; color: var(--color-accent); opacity: 0;
  pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease);
  text-shadow: 0 1px 12px rgba(23, 15, 8, .9);
}
.mf-rail:hover .mf-rail__tag, .mf-rail:focus-within .mf-rail__tag, .mf-rail.is-peek .mf-rail__item.is-on .mf-rail__tag { opacity: 1; transform: translate(0, -50%); }
.mf-rail:hover .mf-rail__tag, .mf-rail:focus-within .mf-rail__tag { color: var(--color-text-dim); }
.mf-rail:hover .mf-rail__item.is-on .mf-rail__tag, .mf-rail:focus-within .mf-rail__item.is-on .mf-rail__tag, .mf-rail__dot:hover .mf-rail__tag, .mf-rail__dot:focus-visible .mf-rail__tag { color: var(--color-accent); }

/* ---- schermi stretti / tablet ------------------------------------------------------------------------------- */
@media (width <= 1100px) {
  .mf-photo { width: clamp(110px, 17vw, 240px); }
  .mf-photo--2 { width: clamp(90px, 13vw, 190px); }
  .mf-photo--3 { width: clamp(90px, 12vw, 170px); left: 6vw; }
  .mf-scene:nth-of-type(2n) .mf-photo--3 { right: 6vw; }
}
@media (width <= 820px) {
  .mf { --mf-hold: 70svh; --mf-par: .13; }
  .mf-inner { padding: clamp(3rem, 8svh, 4.5rem) 2.2rem 6.5rem; }        /* sotto: spazio per la CTA fissa */
  .mf-inner::before { inset: -6% -8%; }
  .mf-line { font-size: clamp(1.45rem, 1.15rem + 1.6vw, 2.8rem); }
  .mf-line + .mf-line { margin-top: 1.5rem; }
  .mf-body { font-size: clamp(1rem, .95rem + .4vw, 1.35rem); }
  .mf-photo { width: clamp(84px, 26vw, 150px); opacity: .5; }
  .mf-photo--1 { top: 11svh; left: 4vw; }
  .mf-photo--2 { top: 14svh; right: 4vw; width: clamp(70px, 21vw, 120px); }
  .mf-photo--3 { bottom: 5svh; left: auto; right: 7vw; width: clamp(76px, 23vw, 130px); }
  .mf-scene:nth-of-type(2n) .mf-photo--3 { right: auto; left: 7vw; }
  .mf-rail { right: 0; }
  .mf-rail__dot { width: 40px; height: 30px; }
  .mf-rail__tag { display: none; }                                              /* bastano i punti: i link hanno già il nome */
}

/* ---- movimento ridotto: tutto fermo, tutto visibile ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mf-photo__in { animation: none; }
  .mf-photo img { transition: none; }
  .mf-rail, .mf-rail__dot::before, .mf-rail__tag { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MANIFESTO · la carta si gira (O-01 · "Quanto basta" → Carlo Grandi)
   Il testo della prima scena è il FRONTE di una carta. Nel fermo, scorrendo, la carta ruota su se stessa (rotateY
   guidata dallo scroll: manifesto.js scrive il transform su [data-mf-card] e mette .is-flipped a metà giro, .is-noted a
   giro quasi finito) e mostra il RETRO: la fotografia stampata di Carlo (carta con bordo, un filo inclinata, viraggio
   caldo, vignettatura e grana come la baita del Cammino) con l'appunto in La Belle Aurore di fianco: il nome si scrive
   lettera per lettera, poi le due righe, poi la freccina verso il volto. Il fermo della scena è più lungo (--mf-hold).
   Colonna statica (.mf--static / no-JS): fronte e retro in flusso, uno sotto l'altro, tutto visibile.
   Definitivo → src/css/components/manifesto.css.
   ══════════════════════════════════════════════════════════════════════════ */
.mf.mf--live .mf-scene--flip { --mf-hold: 200svh; }                 /* tre tempi: testo · giro · ritratto */
.mf-flip { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; perspective: 1700px; }
.mf-flip__card {
  display: grid; place-items: center; width: 100%;
  transform-style: preserve-3d; will-change: transform;
}
.mf-flip__face { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mf-flip__face * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }   /* Safari: i figli trasformati non ereditano */
.mf-flip__back { transform: rotateY(180deg); }
/* la faccia che guarda via si spegne del tutto (a 90° sono entrambe di taglio: nessuno stacco) */
.mf--live .mf-scene--flip .mf-flip__back { visibility: hidden; }
.mf--live .mf-scene--flip.is-flipped .mf-flip__back { visibility: visible; }
.mf--live .mf-scene--flip.is-flipped .mf-flip__front { visibility: hidden; }

/* ---- il retro: la stampa e l'appunto, con l'alone notte dietro come il testo ------------------------------- */
.mf-flip__back {
  position: relative;
  padding: clamp(2rem, 6svh, 4rem) clamp(1.6rem, 6vw, 4rem);
  display: flex; align-items: center; justify-content: center; gap: clamp(1.2rem, 3vw, 2.6rem);
}
.mf-flip__back::before {
  content: ""; position: absolute; inset: -12% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 54% 54% at 50% 50%, rgba(23, 15, 8, .94) 0%, rgba(23, 15, 8, .78) 42%, rgba(23, 15, 8, 0) 72%);
}
.mf-print { position: relative; margin: 0; display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.mf-print__paper {
  flex: none; height: min(62svh, 520px); aspect-ratio: 3 / 4; box-sizing: border-box; padding: 2.6%;
  background: linear-gradient(165deg, #efe7d6, #e0d5be); border-radius: 2px; rotate: var(--tilt, -3deg);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .65), 0 8px 16px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.mf-print__paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;   /* luce radente sulla carta */
  background: linear-gradient(120deg, rgba(255, 255, 255, .16), transparent 38%, transparent 72%, rgba(0, 0, 0, .08)); }
.mf-print__paper { position: relative; }
.mf-print__img { position: relative; width: 100%; height: 100%; overflow: hidden; background: #2a2016; }
.mf-print__img img, .mf-print__img picture { display: block; width: 100%; height: 100%; }
.mf-print__img img { object-fit: cover; filter: sepia(.26) saturate(.82) contrast(.96) brightness(.97); }
.mf-print__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .9;   /* vignettatura + grana */
  background:
    radial-gradient(115% 100% at 50% 45%, transparent 52%, rgba(52, 34, 14, .55)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---- l'appunto a mano: a destra della stampa, un po' più in basso, appena inclinato ------------------------ */
.mf-print__note {
  position: relative; flex: none; width: clamp(12rem, 22vw, 17rem); align-self: flex-end; margin-bottom: clamp(1rem, 6svh, 3.5rem);
  padding-left: .2rem; rotate: -4deg; transform-origin: left bottom;
  font-family: var(--font-hand); color: var(--color-accent); text-align: left; line-height: 1.15;
  text-shadow: 0 1px 2px rgba(23, 15, 8, .7), 0 0 18px rgba(23, 15, 8, .55);
}
.mf-print__name { display: block; font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1; margin-bottom: .45rem; white-space: nowrap; }
.mf-print__name i { font-style: normal; opacity: 0; transition: opacity .05s linear; }
.mf-print__name i.sp { white-space: pre; }
/* la G maiuscola di La Belle Aurore non piace: quella lettera è scritta in Caveat (solo maiuscole, 6 KB, OFL, caricato solo qui) */
@font-face { font-family: 'Caveat Caps'; src: url(/assets/fonts/caveat-500-maiuscole.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0041-005A; }
.mf-print__name i.alt { font-family: 'Caveat Caps', var(--font-hand); font-weight: 500; font-size: 1.12em; position: relative; top: .02em; }
.mf-print__line { display: block; font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--color-text); opacity: 0; transform: translateY(6px); transition: opacity .05s linear, transform .05s linear; }
.mf-print__line:first-of-type { color: var(--color-accent-soft); }
.mf-print__line + .mf-print__line { margin-top: .35rem; }
.mf-print__arrow { position: absolute; right: calc(100% - .3rem); top: -3.6rem; width: 5.6rem; height: auto; overflow: visible; color: var(--oro); opacity: .9;
  filter: drop-shadow(0 1px 1px rgba(23, 15, 8, .6)); }
.mf-print__arrow-line { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset .1s linear; }
.mf-print__arrow-head { opacity: 0; transition: opacity .1s linear; }
/* si scrive: lettere (38 ms l'una), poi le righe, poi la freccia */
.is-noted .mf-print__name i { opacity: 1; transition: opacity .28s var(--ease) calc(var(--i, 0) * 38ms + 120ms); }
.is-noted .mf-print__line { opacity: 1; transform: none;
  transition: opacity .6s var(--ease) calc(var(--n, 12) * 38ms + 260ms + var(--i, 0) * 320ms), transform .6s var(--ease) calc(var(--n, 12) * 38ms + 260ms + var(--i, 0) * 320ms); }
.is-noted .mf-print__arrow-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out-expo) calc(var(--n, 12) * 38ms + 1100ms); }
.is-noted .mf-print__arrow-head { opacity: 1; transition: opacity .3s var(--ease) calc(var(--n, 12) * 38ms + 1850ms); }

/* ---- colonna statica / no-JS / movimento ridotto: fronte e retro in flusso, tutto visibile ----------------- */
.mf--static .mf-flip, html:not(.js) .mf-flip { perspective: none; }
.mf--static .mf-flip__card, html:not(.js) .mf-flip__card { transform: none !important; transform-style: flat; }
.mf--static .mf-flip__face, html:not(.js) .mf-flip__face { grid-area: auto; transform: none; visibility: visible; backface-visibility: visible; }
.mf--static .mf-scene--flip .mf-scene__pin, html:not(.js) .mf-scene--flip .mf-scene__pin { height: auto; min-height: 100svh; }
.mf--static .mf-print__name i, html:not(.js) .mf-print__name i, .mf--static .mf-print__line, html:not(.js) .mf-print__line { opacity: 1; transform: none; transition: none; }
.mf--static .mf-print__arrow-line, html:not(.js) .mf-print__arrow-line { stroke-dashoffset: 0; transition: none; }
.mf--static .mf-print__arrow-head, html:not(.js) .mf-print__arrow-head { opacity: 1; transition: none; }
.mf--static .mf-flip__back, html:not(.js) .mf-flip__back { padding-top: 0; }

/* ---- schermi stretti: stampa al centro, appunto sotto a destra sull'angolo della carta ----------------------- */
@media (width <= 820px) {
  .mf.mf--live .mf-scene--flip { --mf-hold: 170svh; }
  .mf-flip { perspective: 1200px; }
  .mf-flip__back { padding: 2rem 1.4rem 5.5rem; }
  .mf-print { flex-direction: column; align-items: center; gap: 0; }
  .mf-print__paper { height: auto; width: min(60vw, 40svh); margin-right: 12vw; }
  .mf-print__note { width: min(15rem, 66vw); align-self: flex-end; margin: -1.4rem 4vw 0 0; rotate: -5deg; }
  .mf-print__name { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.2rem); }
  .mf-print__line { font-size: clamp(1rem, .92rem + .5vw, 1.15rem); }
  .mf-print__arrow { width: 4rem; top: -2.6rem; right: calc(100% - .5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mf-flip__card { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRADE · pagina di conversione per professionisti (riduzione CRO del 9 settembre 2026)
   pages/trade.php, blocchi T-01…T-05. Stessa grammatica della pagina Amaro (fondo notte, .num con la cresta,
   Garamond) ma asciutta: cinque blocchi, una sola idea per blocco, un solo CTA che torna.
   Dietro a tutto, fissa, la mappa topografica concentrica della bussola (topo-base, come in home): i contenuti
   scorrono sopra la carta. Riusa: .lq-3d / .lq-3d__stage (bottiglia 3D), .lq-scene__head, .pr-specs, .faq, .btn.
   Versione precedente (T-01…T-08, tab "Per chi", strade fotografiche): custom.css.bak-8sett.
   Definitivo → spostare in src/css/components/trade.css e ricompilare.
   ══════════════════════════════════════════════════════════════════════════ */

.page-trade .main { background: var(--notte); }
.tr { position: relative; isolation: isolate; color: var(--color-text); }
.tr section { position: relative; z-index: 1; }

/* titoli di sezione: la stessa Garamond delle scene, un gradino più piccola */
.tr .tr-title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); max-width: 22ch; }
.tr .tr-title--left { text-align: left; margin-inline: 0; }
.tr .lq-scene__head { margin-bottom: clamp(2rem, 5vh, 3.5rem); }

/* link con freccia, senza bottone (stesso registro del footer "professionisti") */
.tr-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: var(--text-base); color: var(--color-accent);
  text-decoration: none; border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.tr-link:hover { border-bottom-color: var(--oro); }
.tr-link:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }

/* ── la mappa: topo-base della bussola, fissa dietro alla pagina ─────────── */
/* stesse regole di .map__topo (main.css), ma fixed e più tenue: sotto ai testi, sopra al fondo notte.
   Le linee si disegnano una volta all'arrivo; con movimento ridotto sono già tutte disegnate (in fondo al blocco). */
.tr__topo {
  position: fixed; inset: -10%; z-index: 0;
  opacity: .6; pointer-events: none;
}
.tr__topo svg { width: 100%; height: 100%; display: block; }
.tr__topo path {
  fill: none; stroke: var(--oro); stroke-width: .9px; opacity: .16;
  stroke-dasharray: 2400; stroke-dashoffset: 2400px;
  animation: topo-draw 9s var(--ease) forwards;
}
/* le sezioni piene (scheda, contatto) restano trasparenti: la mappa resta visibile; il footer ha il suo fondo notte */

/* ── T-01 · hero: copy a sinistra, bottiglia 3D a destra ─────────────────── */
.tr-hero {
  min-height: calc(100svh - 4rem);
  padding: clamp(7rem, 16vh, 10rem) 0 clamp(3rem, 6vh, 5rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(60% 50% at 72% 55%, #c9a86a1f 0%, transparent 70%);
}
.tr-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.tr-hero__copy { display: grid; gap: var(--space-m); max-width: 38rem; }
.tr-hero__copy .kicker { margin-bottom: 0; }
.tr-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: balance;
}
.tr-hero__lead { color: var(--color-text-dim); font-size: var(--text-lg); line-height: 1.55; max-width: 44ch; }
.tr-hero__for { display: block; margin-top: .6rem; font-family: var(--font-display); color: var(--color-text); }
.tr-hero__facts {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 0; padding: 0; list-style: none;
  font-family: var(--font-display); font-size: var(--text-base); color: var(--color-accent-soft);
}
.tr-hero__facts li { display: inline-flex; align-items: center; gap: 1.4rem; }
.tr-hero__facts li + li:before { content: "·"; color: var(--color-border); }
.tr-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.tr-hero__actions .btn { margin-bottom: 0; padding-inline: 1.6rem; }   /* i due bottoni stanno su una riga nella colonna dell'hero */

.tr-hero__bottle { position: relative; margin: 0; display: grid; justify-items: center; }
.tr-hero__bottle .lq-3d__stage { height: clamp(380px, 66svh, 660px); }
.tr-hero__bottle img {
  width: auto; height: 100%; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 40px 60px #000000b3);
}
.tr-hero__shadow {
  position: absolute; left: 50%; bottom: -1.5rem; z-index: 0;
  width: 60%; height: 3rem; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, #000000a6, transparent 70%);
  pointer-events: none;
}

/* ── T-02 · tre ragioni: tre colonne su un filetto ───────────────────────── */
.tr-why { padding: clamp(4rem, 10vh, 7rem) 0; }
.tr-why__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  margin: 0; padding: 0; list-style: none;
}
.tr-why__item { display: grid; gap: .6rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.tr-why__n { font-family: var(--font-hand); font-size: var(--text-kicker); color: var(--color-accent); line-height: 1; }
.tr-why__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); line-height: 1.15; }
.tr-why__text { color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.65; max-width: 36ch; }
.tr-why__item .tr-link { margin-top: .4rem; justify-self: start; }

/* ── T-03 · in carta: tre serve con le foto + cinque strade in lista ─────── */
.tr-serve { padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 10vh, 7rem); }
.tr-modes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin: 0; padding: 0; list-style: none;
}
.tr-mode { display: grid; gap: .5rem; text-align: center; justify-items: center; }
/* i packshot (4:5) hanno il bicchiere tra il 9% e il 72% dell'altezza e sotto solo aria: il riquadro è quadrato e ritaglia
   la fascia vuota (cover, ancorato in alto), così il testo sta vicino al bicchiere */
.tr-mode__img { margin: 0; width: 100%; aspect-ratio: 1; }
.tr-mode__img picture { display: block; width: 100%; height: 100%; }
.tr-mode__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: drop-shadow(0 24px 40px #00000099); }
.tr-mode__hand { font-family: var(--font-hand); font-size: var(--text-hand); color: var(--color-accent); line-height: 1; }
.tr-mode__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); letter-spacing: .04em; text-transform: uppercase; }
.tr-mode__text { color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.6; max-width: 30ch; }

.tr-strade { margin-top: clamp(3rem, 8vh, 5rem); }
.tr-strade__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--space-s); }
.tr-strade__title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); }
.tr-strade__note { font-family: var(--font-hand); font-size: var(--text-hand); color: var(--color-accent); line-height: 1; }
.tr-strade__list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
.tr-strada { display: grid; gap: .3rem; align-content: start; padding: 1.1rem 1.2rem 1.1rem 0; }
.tr-strada + .tr-strada { padding-left: 1.2rem; border-left: 1px solid var(--color-border); }
.tr-strada__name { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text); }
.tr-strada__role { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-soft); }
.tr-strade__more { margin-top: var(--space-m); }

/* ── T-04 · scheda tecnica + cosa ricevi ─────────────────────────────────── */
.tr-data { padding: clamp(3rem, 8vh, 6rem) 0 clamp(4rem, 10vh, 7rem); }
.tr-data__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.tr-data__sheet .num { justify-content: flex-start; }
.tr-data__sheet .scene__title { margin-bottom: var(--space-m); }
.tr-specs { max-width: 40rem; }
.tr-data__files {
  position: sticky; top: 6rem;
  display: grid; gap: var(--space-s);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--color-border); border-radius: var(--radius-m);
  background: #211b12cc;
}
.tr-data__files-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); }
.tr-data__soon { color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.6; }
.tr-data__files .btn { margin-bottom: 0; align-self: start; }
.tr-files { margin: 0; padding: 0; list-style: none; display: grid; }
.tr-file {
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 0; border-top: 1px solid var(--color-border);
  font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text); text-decoration: none;
  transition: color var(--dur-fast);
}
.tr-files li:last-child .tr-file, .tr-files > li.tr-file:last-child { border-bottom: 1px solid var(--color-border); }
.tr-file--dl:hover { color: var(--color-accent); }
.tr-file__ico { color: var(--color-accent); flex: none; }

/* ── T-04b · prova (solo con dati) ───────────────────────────────────────── */
.tr-proof { padding: clamp(3rem, 8vh, 6rem) 0; }
.tr-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-l); margin: 0 0 var(--space-l); padding: 0; list-style: none; }
.tr-quote { display: grid; gap: .6rem; }
.tr-quote__text { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; }
.tr-quote__text:before { content: "“"; color: var(--color-accent); }
.tr-quote__text:after { content: "”"; color: var(--color-accent); }
.tr-quote__cite { font-style: normal; font-size: var(--text-sm); color: var(--color-text-dim); }
.tr-places { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-display); }
.tr-places__city { color: var(--color-text-dim); font-size: var(--text-sm); }

/* ── T-05 · contatto commerciale: il secondo hero ────────────────────────── */
.tr-contact {
  padding: clamp(5rem, 14vh, 9rem) 0;
  overflow: hidden;
  background: radial-gradient(60% 60% at 50% 100%, #c9a86a1a 0%, transparent 70%);
}
.tr-contact__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: var(--space-m); }
.tr-contact__text { color: var(--color-text-dim); font-size: var(--text-lg); line-height: 1.5; max-width: 44ch; text-wrap: balance; }
/* le pill sono le linguette della scheda sotto: quella attiva ha un dentino oro che scende a toccare il bordo della scheda */
.tr-contact__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: .9rem; }
.tr-chip {
  position: relative;
  appearance: none; cursor: pointer;
  font: inherit; font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-dim); background: transparent;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: .7rem 1.2rem;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tr-chip:hover { color: var(--color-text); border-color: var(--oro-soft); }
.tr-chip[aria-pressed="true"] { color: var(--bruno-deep); background: var(--oro); border-color: var(--oro); }
.tr-chip[aria-pressed="true"]:after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 0; height: 0; transform: translateX(-50%);
  border: 8px solid transparent; border-top-color: var(--oro); border-bottom: 0;
}
.tr-chip:focus-visible, .tr-copy:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }

/* la scheda: bordo oro tenue, fondo notte quasi pieno (leggibilità sopra la mappa); col tipo di locale scelto il bordo si accende.
   Dentro: intestazione a mano, argomento in Garamond, anteprima della mail (A / Oggetto), il bottone. */
.tr-contact__card {
  width: 100%; max-width: 40rem;
  display: grid; justify-items: center; gap: var(--space-s);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.2rem, 4vw, 2.6rem);
  border: 1px solid var(--color-border); border-radius: var(--radius-m);
  background: #211b12e0;
  transition: border-color var(--dur-base) var(--ease);
}
.tr-contact__card.has-segment { border-color: var(--oro-soft); }
.tr-contact__card.is-swap > * { animation: tr-fade var(--dur-base) var(--ease) both; }
.tr-contact__card.is-swap > :nth-child(2) { animation-delay: .05s; }
.tr-contact__card.is-swap > :nth-child(3) { animation-delay: .1s; }
@keyframes tr-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tr-contact__for { font-family: var(--font-hand); font-size: var(--text-kicker); color: var(--color-accent); line-height: 1; }
.tr-contact__pitch {
  margin: 0;
  font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.4;
  max-width: 40ch; min-height: 2.8em; text-wrap: balance; color: var(--color-text);
}
/* anteprima della mail: due righe da "intestazione", etichetta in maiuscoletto e valore in Garamond */
.tr-contact__mail {
  width: 100%; max-width: 30rem; margin: .2rem 0 0;
  display: grid; text-align: left;
  border-top: 1px solid var(--color-border);
}
.tr-contact__mail > div { display: flex; align-items: baseline; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--color-border); }
.tr-contact__mail dt { flex: 0 0 5.5rem; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-soft); }
.tr-contact__mail dd { margin: 0; font-family: var(--font-display); font-size: var(--text-base); color: var(--color-text); overflow-wrap: anywhere; }
.tr-contact__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; margin-top: .4rem; }
.tr-contact__actions .btn { margin-bottom: 0; }
.tr-contact__or { font-family: var(--font-hand); font-size: var(--text-hand); color: var(--color-accent); line-height: 1; }
.tr-copy {
  appearance: none; cursor: pointer;
  font: inherit; font-family: var(--font-display); font-size: var(--text-base);
  color: var(--color-text); background: transparent; border: 0; padding: .3rem 0;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.tr-copy:after { content: attr(data-label); margin-left: .6rem; font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-soft); }
.tr-copy.is-copied:after { content: none; }
.tr-copy:hover { color: var(--color-accent); border-color: var(--oro); }
.tr-copy.is-copied { color: var(--color-accent); }
.tr-contact__hint { font-size: var(--text-sm); color: var(--color-text-dim); max-width: 44ch; }
.tr-contact__phone a { font-family: var(--font-display); color: var(--color-text); text-decoration: none; }
.tr-contact__phone a:hover { color: var(--color-accent); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.tr-faq { padding: 0 0 clamp(5rem, 12vh, 8rem); }

/* ── mobile / tablet ─────────────────────────────────────────────────────── */
@media (width <= 820px) {
  .tr__topo { inset: -20% -40%; }   /* la mappa è quadrata: in verticale la si allarga per non lasciare bande vuote ai lati */
  .tr-hero { min-height: auto; padding-top: clamp(6rem, 14vh, 8rem); }
  .tr-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .tr-hero__copy { order: 2; max-width: none; }
  .tr-hero__bottle { order: 1; }
  .tr-hero__bottle .lq-3d__stage { height: clamp(240px, 40svh, 380px); }
  .tr-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; }
  .tr-hero__facts li { gap: 0; }
  .tr-hero__facts li + li:before { content: none; }
  .tr-why__list { grid-template-columns: 1fr; gap: 1.4rem; }
  .tr-why__text { max-width: none; }
  .tr-modes { grid-template-columns: 1fr; gap: 2.4rem; }
  .tr-mode__img { max-width: 70%; }
  .tr-strade__head { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .tr-strade__list { grid-template-columns: 1fr; }
  .tr-strada { padding: .9rem 0; }
  .tr-strada + .tr-strada { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .tr-data__grid { grid-template-columns: 1fr; }
  .tr-data__files { position: static; }
  .tr-contact__pitch { min-height: 0; }
  .tr-contact__mail dt { flex-basis: 4.5rem; }
}

/* ── movimento ridotto: la mappa è già disegnata, la riga del contatto cambia senza dissolvenza ── */
@media (prefers-reduced-motion: reduce) {
  .tr__topo path { animation: none; stroke-dashoffset: 0; }
  .tr-contact__card.is-swap > * { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AGE GATE · titolo (9 set)
   Il titolo del gate è un <p> e non più un <h1>: l'h1 della pagina resta unico per
   i motori di ricerca. Qui riprende esattamente lo stile dei titoli (Garamond).
   ══════════════════════════════════════════════════════════════════════════ */
.gate__title {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--color-text);
}

/* il perno della bussola è un <picture> (WebP + PNG): il wrapper deve riempire la faccia come faceva l'<img> */
.map__face picture { display: block; width: 100%; height: 100%; }
.ft__brandmark picture { display: block; flex: none; }

/* il perno della bussola è un <picture> (WebP + PNG): il wrapper deve riempire la faccia come faceva l'<img> */
.map__face picture { display: block; width: 100%; height: 100%; }
.ft__brandmark picture { display: block; flex: none; }

/* ── Age gate · cursore visibile ──────────────────────────────────────────
   Bug: html.has-cursor nasconde il puntatore nativo (cursor:none, ereditato anche dagli input)
   e lo sostituisce con il pallino .cursor (z-index 99). Ma il gate è un <dialog> aperto con
   showModal(): sta nel top layer, sopra a qualunque z-index → il pallino finisce sotto il gate
   e sul form della data non si vede nessun cursore.
   Fix: finché il gate è aperto, niente cursore custom e puntatore nativo sul dialog.
   Definitivo → spostare in src/css (blocco .gate / .cursor) e ricompilare. */
html.is-gated .cursor { display: none; }
html.has-cursor .gate,
html.has-cursor .gate label,
html.has-cursor .gate p { cursor: default; }
html.has-cursor .gate input { cursor: text; }
html.has-cursor .gate a,
html.has-cursor .gate button { cursor: pointer; }
html.has-cursor .gate button[aria-busy="true"] { cursor: progress; }