/* ═══════════════════════════════════════════════════════════════════════════
   STAGIONI — il sito si veste del mese, prefisso .sb-stag-

   Un mese, un simbolo. Da settembre l'accento azzurro del design system vira
   sulla tinta della stagione, un tralcio attraversa la testata e qualche
   foglia scende sul fondale. Impaginato, caratteri, misure, margine sinistro,
   prosa giustificata, smusso e vetro non si muovono di una virgola: cambia
   l'accento, non il sito.

   ── I colori non sono scelti a occhio ────────────────────────────────────
   Rivalta non ha vigne: la sua terra fa cereali e meloni. Ma il Mincio che le
   passa davanti scende dall'anfiteatro morenico del Garda, e lassù il vino
   c'è. Le sei tinte di settembre sono le parole con cui l'articolo 6 dei due
   disciplinari di zona descrive quei vini — «rosso rubino più o meno
   intenso», «o granato», «tendente al cerasuolo con l'invecchiamento»,
   «rosato brillante», «giallo paglierino», «sentore di viola o ribes».
   Stanno scritte, con la loro denominazione e la fonte, nella nota in fondo
   a ogni pagina di stagione. Il tema è una citazione, non un capriccio.

   ── Regole del file ──────────────────────────────────────────────────────
   · Niente qui è sempre attivo: ogni regola è appesa a html[data-stagione],
     e quell'attributo lo scrive build.mjs solo sulle pagine di stagione. Le
     tre della Color Walk hanno una vernice loro (.sb-cr) e restano fuori.
   · Il tema non aggiunge strati al fondale: ritinge i due aloni che sb.css
     ha già. Un terzo velo sopra due sarebbe una patina, non un colore.
   · Il movimento segue le regole del resto del sito: si spegne con
     prefers-reduced-motion e col tasto «ferma il movimento» (html.rsm-still).
     In quel caso restano il colore e le foglie posate, ferme.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ SETTEMBRE · UVA ═════════════════════════════════════════════════════
   ── Palette chiara ───────────────────────────────────────────────────────
   I grigi del sito sono puri: R uguale a G uguale a B. A settembre si
   scaldano di pochissimo — la carta di una pagina d'autunno non è bianco
   di schermo. Lo scarto è di due o tre punti per canale: non si vede
   guardando una superficie sola, si sente guardando la pagina intera.
   I rapporti di contrasto del testo restano quelli di prima. */
html[data-stagione="uva"] .sb-home {
  --sb-bg: #fcfbf9;
  --sb-bg-alt: #f8f6f2;
  --sb-surface-75: #fbfaf7;
  --sb-surface-100: #f6f3ef;
  --sb-surface-200: #efebe5;
  --sb-overlay: rgba(92, 30, 40, 0.05);
  --sb-border: #e9e4dc;
  --sb-border-strong: #dcd5c9;
  --sb-border-stronger: #c8bfb0;
  --sb-fg: #1a1614;
  --sb-fg-light: #554d46;
  --sb-fg-lighter: #726960;
  --sb-fg-muted: #948a7d;

  /* L'unica tinta, e il suo testo. Granato: il rosso che i disciplinari
     danno al vino invecchiato. Sul chiaro il testo scende a #7a1f34 —
     quasi 10:1 sul fondo, più di quanto chiedesse l'azzurro. */
  --sb-brand: #8c2438;
  --sb-brand-text: #7a1f34;

  /* I bottoni tengono il rapporto del sistema: campo chiaro, inchiostro
     scuro. Cambia la tinta del campo, non chi è chiaro e chi è scuro. */
  --sb-btn-bg: hsl(348, 36%, 74%);
  --sb-btn-bd: hsla(348, 55%, 30%, 0.75);
  --sb-btn-bg-hover: hsl(348, 34%, 67%);
  --sb-btn-fg: #180d10;

  /* Anche le ombre hanno una temperatura: un'ombra grigia sotto una
     lastra su carta calda si legge come sporco. */
  --sb-shadow-card: 0 4px 20px -6px rgba(74, 30, 24, 0.13);
  --sb-glass-spec: rgba(255, 252, 248, 0.74);
  --sb-glass-rim: rgba(255, 250, 244, 0.56);
  --sb-glass-shadow: 0 10px 34px -14px rgba(74, 26, 30, 0.22);
  --sb-glass-sheen: rgba(255, 251, 246, 0.42);

  /* ── Le sei parole ──────────────────────────────────────────────────
     Una variabile per tinta, e il nome della variabile è la parola del
     disciplinare. Le usano i pastelli della nota, il festone e le foglie
     che scendono; --stag-oro è la sola aggiunta, ed è il paglierino
     abbassato quanto basta per fare da TESTO su fondo chiaro. */
  --stag-rubino: #9b1b30;      /* «rosso rubino più o meno intenso»      */
  --stag-granato: #6b2029;     /* «…o granato»                            */
  --stag-cerasuolo: #b8323f;   /* «tendente al cerasuolo con l'invecc.»   */
  --stag-rosato: #e2879b;      /* «rosato brillante»                      */
  --stag-paglierino: #d8bd60;  /* «giallo paglierino»                     */
  --stag-viola: #6d4a8c;       /* «sentore di viola o ribes»              */
  --stag-oro: #7d6a1c;         /* il paglierino, leggibile come testo     */
  --stag-vite: #7c8a3e;        /* la foglia com'è a settembre             */
  --stag-vite-oro: #96702e;    /* la foglia che ha già girato             */
  --stag-vite-radente: #8a7c34;/* la stessa, presa di taglio all'alba     */
  --stag-nervo: rgba(252, 251, 249, 0.55);
  --stag-luce: rgba(255, 255, 255, 0.34);
}

/* ── Palette scura ────────────────────────────────────────────────────────
   Al buio i neri si scaldano come i bianchi, e le sei tinte salgono di
   luminosità quel tanto che serve a restare tinte e non macchie. Il rosato
   diventa il colore del testo d'accento: il granato, su nero, sparisce. */
html[data-stagione="uva"].dark .sb-home {
  --sb-bg: #161413;
  --sb-bg-alt: #1b1817;
  --sb-surface-75: #1f1c1a;
  --sb-surface-100: #262220;
  --sb-surface-200: #2c2825;
  --sb-overlay: rgba(255, 236, 230, 0.065);
  --sb-border: #2e2926;
  --sb-border-strong: #3a342f;
  --sb-border-stronger: #47403a;
  --sb-fg: #f0ece7;
  --sb-fg-light: #b9b1a8;
  --sb-fg-lighter: #9a9188;
  --sb-fg-muted: #746c64;

  --sb-brand: #c9546c;
  --sb-brand-text: #e79aa8;

  --sb-btn-bg: hsl(348, 32%, 22%);
  --sb-btn-bd: hsla(348, 70%, 68%, 0.32);
  --sb-btn-bg-hover: hsl(348, 28%, 28%);
  --sb-btn-fg: #ffffff;

  --sb-shadow-card: 0 4px 24px -6px rgba(0, 0, 0, 0.6);
  --sb-glass-spec: rgba(255, 244, 238, 0.11);
  --sb-glass-rim: rgba(255, 244, 238, 0.09);
  --sb-glass-shadow: 0 10px 38px -14px rgba(0, 0, 0, 0.68);
  --sb-glass-sheen: rgba(255, 244, 238, 0.1);

  --stag-rubino: #c94055;
  --stag-granato: #a03648;
  --stag-cerasuolo: #d75c6c;
  --stag-rosato: #f0a8b7;
  --stag-paglierino: #e3c977;
  --stag-viola: #ab8ccb;
  --stag-oro: #d9bf6b;
  --stag-vite: #a3ad6f;
  --stag-vite-oro: #d2a660;
  --stag-vite-radente: #bcae6a;
  --stag-nervo: rgba(22, 20, 19, 0.6);
  --stag-luce: rgba(255, 245, 240, 0.2);
}

/* ── Le mille cose piccole ────────────────────────────────────────────────
   Quello che non passa dai token e resterebbe azzurro: la selezione, il
   cursore che lampeggia nel campo di ricerca, i quadratini dei moduli, i
   pallini delle liste, la barra di scorrimento. Sono dettagli che nessuno
   nomina e che tutti vedono. */
html[data-stagione="uva"] .sb-home ::selection {
  /* Una macchia di vino sulla carta, non un evidenziatore. */
  background: hsla(348, 62%, 42%, 0.24);
}
html[data-stagione="uva"].dark .sb-home ::selection { background: hsla(348, 62%, 58%, 0.3); }
html[data-stagione="uva"] .sb-home { accent-color: var(--sb-brand); caret-color: var(--sb-brand); }
html[data-stagione="uva"] { scrollbar-color: var(--sb-border-stronger) transparent; }
html[data-stagione="uva"] .sb-riv-li::marker { color: var(--stag-vite); }

/* Il pallino che pulsa nelle pillole: il suo alone è scritto a mano in
   sb.css e non passa dal token, quindi il battito va rifatto con la tinta
   giusta. Stessa durata, stesso raggio: cambia solo il colore. */
@keyframes sb-stag-ping {
  0%   { box-shadow: 0 0 0 0 hsla(348, 60%, 42%, 0.5); }
  70%  { box-shadow: 0 0 0 7px hsla(348, 60%, 42%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(348, 60%, 42%, 0); }
}
html[data-stagione="uva"] .sb-chip-dot { animation-name: sb-stag-ping; }

/* Il numero di sezione passa in paglierino: resta muto — è una coordinata,
   non un'informazione — ma è la coordinata della stagione. */
html[data-stagione="uva"] .sb-riv-secnum { color: var(--stag-oro); }

/* Il filo della citazione, e quello dell'indice a lato quando la voce è
   quella in cui si sta leggendo. Sono due segni da due pixel che il tema
   lasciava grigi e azzurri in mezzo a una pagina diventata di vino: non è
   un colore in più, è lo stesso che c'è già, portato dove mancava.

   La citazione tiene la sua regola — il filo NON è d'accento, o una
   citazione varrebbe più delle altre: prende il verde del tralcio, che nel
   tema è il tono neutro, non quello che chiama. */
html[data-stagione="uva"] .sb-riv-cit { border-left-color: color-mix(in srgb, var(--stag-vite) 52%, var(--sb-border-stronger)); }

/* ── I titoli di sezione ──────────────────────────────────────────────────
   Un tratto corto sopra il numero di sezione: due centimetri di tralcio che
   entrano da sinistra, dallo stesso margine da cui parte tutto il resto.
   Non è un bordo attorno né una fascia piena — è un segno, e sfuma perché
   una linea che finisce netta in mezzo alla pagina si legge come un errore
   di taglio.

   Sta su ::before del numero, che è già display:block e non ha decorazioni
   proprie: nessun nodo in più nel documento, e dove il numero non c'è non
   compare niente. */
html[data-stagione="uva"] .sb-riv-secnum::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-bottom: 0.65rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--stag-vite), color-mix(in srgb, var(--stag-oro) 60%, transparent) 62%, transparent);
}

/* L'indice a lato: la voce in cui si sta leggendo accende un filo, e quel
   filo prende il token d'accento — che a settembre è già granato. Qui si
   tocca solo il bordo di sinistra dell'indice intero, che resta grigio di
   sistema e diventa il grigio caldo del mese: la colonna sta accanto alla
   prosa e un filo freddo, di fianco a una pagina calda, si vede. */
html[data-stagione="uva"] .sb-riv-rail { border-left-color: color-mix(in srgb, var(--stag-vite) 22%, var(--sb-border)); }

/* ── I due aloni del fondale ──────────────────────────────────────────────
   Il fondale del sito è già fatto di due aloni che derivano lentamente in
   controfase (sb.css, .sb-home::before e ::after), ed erano l'ultima
   superficie azzurra grande abbastanza da contraddire tutto il resto. Qui
   non se ne aggiunge un terzo: si ritingono quei due. Stessa geometria,
   stesse due animazioni, stessa opacità — vinaccia quello che entra da
   sinistra, paglierino quello che scende da destra.

   Il footer resta fuori da sé: .sb-home.sb-foot::before ha già content:none
   in sb.css, e qui si tocca solo lo sfondo.

   ── E il sole si sposta ──────────────────────────────────────────────────
   I due aloni non sono più fissi: sono scritti con sei variabili, e sono
   quelle che l'ORA cambia. Il primo alone è il sole — di mattina entra
   basso da sinistra, a mezzogiorno è alto e pallido, di sera cala a destra
   e si accende, di notte non c'è e resta la vinaccia. Il secondo è il
   controcampo, e fa la strada opposta.

   La geometria del sito non si muove di un pixel: cambiano posizione,
   tinta e forza di due sfumature che c'erano già. È il motivo per cui
   tutto questo sta in sei numeri e non in uno strato nuovo. */
html[data-stagione="uva"] .sb-home {
  /* Il default è "giorno": se data-ora non c'è — JS spento, o una fascia
     che non abbiamo previsto — il sito resta esattamente com'era. */
  --sole-x: 16%;
  --sole-y: -8%;
  --sole-h: 344;
  --sole-s: 46%;
  --sole-l: 38%;
  --sole-a: 0.15;
  --contro-x: 88%;
  --contro-y: 2%;
  --contro-h: 44;
  --contro-s: 58%;
  --contro-l: 48%;
  --contro-a: 0.13;
}
html[data-stagione="uva"] .sb-home::before {
  background: radial-gradient(58rem 32rem at var(--sole-x) var(--sole-y), hsla(var(--sole-h), var(--sole-s), var(--sole-l), var(--sole-a)), transparent 62%);
  /* Il passaggio da un'ora all'altra non scatta. Quaranta secondi sono più
     lunghi di qualunque cambio si guardi di proposito: alle 19 in punto la
     luce comincia a calare e chi sta leggendo non vede un fotogramma
     cambiare, vede che dopo un po' la pagina è un'altra. */
  transition: background 40s linear;
}
html[data-stagione="uva"] .sb-home::after {
  background: radial-gradient(52rem 30rem at var(--contro-x) var(--contro-y), hsla(var(--contro-h), var(--contro-s), var(--contro-l), var(--contro-a)), transparent 60%);
  transition: background 40s linear;
}
html[data-stagione="uva"].dark .sb-home {
  --sole-s: 56%;
  --sole-l: 54%;
  --sole-a: 0.16;
  --contro-s: 62%;
  --contro-l: 58%;
  --contro-a: 0.11;
}

/* ── ALBA · le sette del mattino ──────────────────────────────────────────
   L'ultima ora di buio, quella in cui si vendemmia perché l'uva è fresca.
   Il sole non è ancora sorto ma si sa da che parte sorgerà: l'alone entra
   BASSO da sinistra — y positiva, cioè dentro la pagina e non sopra il suo
   bordo — e vira dal vinaccia all'arancio caldo. Il controcampo resta il
   blu che la notte non ha ancora finito di portare via. */
html[data-stagione="uva"][data-ora="alba"] .sb-home {
  --sole-x: 4%;
  --sole-y: 14%;
  --sole-h: 18;
  --sole-s: 62%;
  --sole-l: 46%;
  --sole-a: 0.17;
  --contro-x: 92%;
  --contro-y: -6%;
  --contro-h: 224;
  --contro-s: 40%;
  --contro-l: 42%;
  --contro-a: 0.12;
}
html[data-stagione="uva"][data-ora="alba"].dark .sb-home {
  --sole-h: 20;
  --sole-s: 70%;
  --sole-l: 52%;
  --sole-a: 0.19;
  --contro-h: 226;
  --contro-s: 52%;
  --contro-l: 46%;
  --contro-a: 0.15;
}

/* ── TRAMONTO · le sette di sera ──────────────────────────────────────────
   L'ora del rientro, e la sola in cui la luce viene da destra: il sole è
   passato dall'altra parte del cielo, cala, e sul fondo si accende di
   quello che il paglierino diventa quando il sole è basso. È la fase più
   forte delle quattro, ed è giusto che lo sia — un tramonto smorto non è
   un tramonto. Da sinistra entra il blu della sera che sta arrivando. */
html[data-stagione="uva"][data-ora="tramonto"] .sb-home {
  --sole-x: 96%;
  --sole-y: 18%;
  --sole-h: 26;
  --sole-s: 78%;
  --sole-l: 50%;
  --sole-a: 0.26;
  --contro-x: 6%;
  --contro-y: -4%;
  --contro-h: 320;
  --contro-s: 44%;
  --contro-l: 40%;
  --contro-a: 0.17;
}
html[data-stagione="uva"][data-ora="tramonto"].dark .sb-home {
  --sole-h: 24;
  --sole-s: 78%;
  --sole-l: 54%;
  --sole-a: 0.22;
  --contro-h: 318;
  --contro-s: 50%;
  --contro-l: 48%;
  --contro-a: 0.16;
}

/* ── NOTTE ────────────────────────────────────────────────────────────────
   Il sole non c'è. Resta la vinaccia in alto a sinistra — più cupa e più
   profonda di quella del giorno — e da destra scende il blu, che di notte
   prende il posto del paglierino. È la fase più smorzata: di notte una
   pagina che brilla è una pagina che dà fastidio. */
html[data-stagione="uva"][data-ora="notte"] .sb-home {
  --sole-x: 14%;
  --sole-y: -10%;
  --sole-h: 340;
  --sole-s: 44%;
  --sole-l: 30%;
  --sole-a: 0.15;
  --contro-x: 88%;
  --contro-y: 0%;
  --contro-h: 232;
  --contro-s: 42%;
  --contro-l: 38%;
  --contro-a: 0.11;
}
html[data-stagione="uva"][data-ora="notte"].dark .sb-home {
  --sole-h: 342;
  --sole-s: 54%;
  --sole-l: 46%;
  --sole-a: 0.17;
  --contro-h: 230;
  --contro-s: 54%;
  --contro-l: 48%;
  --contro-a: 0.13;
}

/* ── E la carta sotto ─────────────────────────────────────────────────────
   Gli aloni sono luce sopra il foglio; questa è la temperatura del FOGLIO.
   Sono gli stessi due o tre punti per canale con cui settembre scalda i
   grigi puri del sito — la stessa mano, spostata di un'altra ora.

   Alba e tramonto scaldano, la notte raffredda, il giorno resta quello che
   la stagione ha già scelto. Lo scarto è minuscolo di proposito: su una
   superficie sola non si vede, sulla pagina intera si sente, e i rapporti
   di contrasto del testo non si muovono perché il testo non lo tocca
   nessuno. */
html[data-stagione="uva"][data-ora="alba"] .sb-home,
html[data-stagione="uva"][data-ora="tramonto"] .sb-home {
  --sb-bg: #fdfbf7;
  --sb-bg-alt: #f9f5ef;
  --sb-surface-75: #fcf9f4;
  --sb-surface-100: #f7f2ea;
  --sb-surface-200: #f0e9df;
}
html[data-stagione="uva"][data-ora="notte"] .sb-home {
  --sb-bg: #fbfbfa;
  --sb-bg-alt: #f6f6f4;
  --sb-surface-75: #fafaf8;
  --sb-surface-100: #f4f4f1;
  --sb-surface-200: #ecebe8;
}
html[data-stagione="uva"][data-ora="alba"].dark .sb-home,
html[data-stagione="uva"][data-ora="tramonto"].dark .sb-home {
  --sb-bg: #181513;
  --sb-bg-alt: #1d1917;
  --sb-surface-75: #211d1a;
  --sb-surface-100: #282320;
  --sb-surface-200: #2e2925;
}
/* La notte è l'unica fase che vira al freddo: il nero di settembre è caldo
   perché è carta, ma alle tre di notte una carta calda non c'è più — c'è
   uno schermo in una stanza buia. */
html[data-stagione="uva"][data-ora="notte"].dark .sb-home {
  --sb-bg: #131415;
  --sb-bg-alt: #171819;
  --sb-surface-75: #1a1c1d;
  --sb-surface-100: #212324;
  --sb-surface-200: #272a2b;
}

/* Chi ha chiesto meno movimento non vede nemmeno la dissolvenza dei quaranta
   secondi: l'ora cambia e il fondo è già l'altro. È un colore che si sposta,
   non un'animazione, ma quaranta secondi di transizione su una superficie
   grande quanto lo schermo restano movimento per chi ne ha chiesto meno. */
html.rsm-still[data-stagione="uva"] .sb-home::before,
html.rsm-still[data-stagione="uva"] .sb-home::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.rsm-motion)[data-stagione="uva"] .sb-home::before,
  html:not(.rsm-motion)[data-stagione="uva"] .sb-home::after { transition: none; }
}

/* ═══ IL FESTONE ══════════════════════════════════════════════════════════
   Un tralcio che attraversa la testata, con foglie, grappoli e viticci
   appesi. È SVG in pagina e non un'immagine ripetuta, perché ogni pendaglio
   deve dondolare per conto suo: un festone in cui tutto oscilla nello stesso
   istante non è un festone, è una texture che trema.

   Sta fisso sotto la nav — che è sticky — e resta lì mentre la pagina
   scorre. pointer-events:none: non intercetta niente, non è un ostacolo. */
.sb-stag-festone {
  position: fixed;
  /* Appeso sotto la barra, e la barra si stringe scorrendo. La variabile
     --sb-nav-h non serve qui: il festone è FRATELLO della nav, non figlio,
     e quello che .sb-nav--scrolled ridefinisce su di sé non lo raggiunge.
     Si usa lo stesso selettore di fratellanza con cui poco sotto cambia
     opacità — che è già lì e già funziona. */
  top: 64px;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 49;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.86;
  animation: sb-stag-cala 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  /* Ai due lati il tralcio non finisce: esce. Una campata tagliata di netto
     sul bordo della finestra dice «qui l'immagine è finita», e un festone
     che finisce dove finisce lo schermo è un adesivo. Trenta pixel di
     dissolvenza per parte e il tralcio continua fuori, dove non si vede.
     La maschera è sull'asse orizzontale soltanto: in basso i pendagli
     devono restare netti, o le foglie sfumerebbero a mezz'aria. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.sb-stag-festone svg { display: block; }
@keyframes sb-stag-cala {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 0.86; transform: none; }
}

/* Finché la pagina è in cima la nav non ha bordo e il tralcio è solo
   appoggiato; appena qualcosa le scorre sotto, la barra prende ombra e il
   tralcio si scurisce un filo — così si legge appeso alla barra e non
   sospeso per aria. */
.sb-nav--scrolled + .sb-stag-festone { opacity: 1; top: 54px; }
.sb-stag-festone,
.sb-nav--scrolled + .sb-stag-festone {
  transition: opacity 0.25s ease, top 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
html.rsm-still .sb-stag-festone { transition: none; }

/* I pezzi del tralcio. Il colore lo dà il foglio e non l'attributo, così
   segue il tema chiaro/scuro senza duplicare il disegno.

   Ogni tinta passa da una variabile con un ripiego: --f-lembo la scrive la
   campata (build.mjs la mette sul <g>, e l'eredità la porta dentro il
   clone di <use>, dove un selettore non arriverebbe mai), e se non c'è —
   una stagione futura che non le scrive — si torna al token del mese e
   non cambia niente. */
.sb-stag-tralcio { fill: none; stroke: var(--f-tralcio, var(--stag-vite)); stroke-width: 1.9; stroke-linecap: round; }
.sb-stag-verde { fill: var(--f-lembo, var(--stag-vite)); }
.sb-stag-nervo { fill: none; stroke: var(--stag-nervo); stroke-width: 0.8; stroke-linecap: round; }
.sb-stag-acino { fill: var(--f-acino, var(--stag-granato)); }
.sb-stag-luce { fill: var(--stag-luce); }

/* ── La luce radente ──────────────────────────────────────────────────────
   All'alba e al tramonto il sole è basso e arriva DI TAGLIO: un filare
   preso di striscio non è più chiaro, è più caldo da un lato solo. Il
   tralcio lo può dire con una cosa sola — da che parte viene la luce — e
   la dice con la stessa maschera che già sfuma i due bordi.

   Non è un secondo disegno né un filtro: è la maschera orizzontale che si
   sbilancia. All'alba il sole è a sinistra, quindi a sinistra il tralcio è
   pieno e a destra si perde; al tramonto l'esatto contrario. Di giorno e di
   notte la maschera è simmetrica, com'era. */
html[data-stagione="uva"][data-ora="alba"] .sb-stag-festone {
  -webkit-mask-image: linear-gradient(90deg, #000, #000 46%, rgba(0, 0, 0, 0.72) 82%, transparent);
  mask-image: linear-gradient(90deg, #000, #000 46%, rgba(0, 0, 0, 0.72) 82%, transparent);
}
html[data-stagione="uva"][data-ora="tramonto"] .sb-stag-festone {
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.72) 18%, #000 54%, #000);
  mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.72) 18%, #000 54%, #000);
}

/* E il verde del tralcio prende la temperatura dell'ora. Non cambia tinta —
   resta la foglia di vite — ma all'alba e al tramonto una foglia presa di
   sbieco tira all'oro.

   La scrittura è indiretta di proposito: --f-tralcio e --f-lembo, che le
   campate scrivono in `var(--stag-vite)`, restano quelle. Qui si sposta la
   RISOLUZIONE di quel nome sotto di loro, e siccome il valore nuovo non
   nomina --stag-vite — nominarlo sarebbe un ciclo, e un ciclo rende la
   variabile invalida, cioè spegne il tralcio — si passa da
   --stag-vite-radente, che le due palette definiscono già come valore
   proprio, chiaro e scuro. */
html[data-stagione="uva"][data-ora="alba"] .sb-stag-festone,
html[data-stagione="uva"][data-ora="tramonto"] .sb-stag-festone {
  --stag-vite: var(--stag-vite-radente);
}

/* A settembre i filari non sono di un verde solo: una foglia su tre ha già
   girato, e i grappoli non sono tutti allo stesso punto di maturazione. La
   variazione NON si scrive qui — sta in build.mjs, che dà a ogni campata le
   sue tre variabili — per una ragione precisa: dentro un <use> il selettore
   non entra, perché il clone vive in un albero d'ombra e le classi del
   disegno stanno in <defs>, fuori da ogni campata. Qui c'erano tre regole
   di nth-of-type scritte proprio così, e non hanno mai tinto niente: il
   festone era tredici copie identiche.

   Quello che passa il confine del clone è l'EREDITÀ, e quindi le variabili.
   Vedi il commento in renderFestone.

   Una campata su cinque sta un passo indietro: in un filare vero non è tutto
   sullo stesso piano, e su cinquanta pixel d'altezza la profondità si legge
   dal tono, non dalla dimensione. Questa sì può stare qui — la classe è sul
   <g> della campata, che è markup vero e non un clone. */
.sb-stag-dietro { opacity: 0.58; }

/* Il dondolio. Il pendaglio ruota attorno al punto in cui è attaccato al
   tralcio — che nel suo sistema di coordinate è l'origine — di poco più di
   due gradi. Il ritardo negativo scalato sull'indice della campata fa
   partire ognuno a un punto diverso del ciclo: è quello, e non l'ampiezza,
   che toglie l'effetto marionetta. */
@keyframes sb-stag-dondola {
  0%, 100% { transform: rotate(-2.4deg); }
  50%      { transform: rotate(2.4deg); }
}
.sb-stag-pend {
  transform-origin: 0 0;
  animation: sb-stag-dondola 5.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.41s);
}

/* Sotto i 700px il tralcio non compare: in testa lo spazio è poco e
   ruberebbe la prima riga di quello che si è venuti a leggere. */
@media (max-width: 699.98px) { .sb-stag-festone { display: none; } }

/* ═══ LE FOGLIE CHE SCENDONO ══════════════════════════════════════════════
   Lo strato lo riempie assets/stagioni.js. Sta dietro al contenuto — .sb-main
   ha z-index 1, questo 0 — quindi non copre mai una riga di testo.

   Ogni particella è fatta di tre gusci annidati perché tre movimenti
   diversi non stanno in una sola trasformazione: il guscio esterno CADE, il
   secondo ONDEGGIA di lato, il terzo GIRA su sé stesso. Le foglie, in più,
   si VOLTANO — una foglia che scende mostra a turno il dritto e il rovescio,
   ed è quel lampo che la fa sembrare una foglia invece che un adesivo. */
.sb-stag-cielo {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.sb-stag-p {
  position: absolute;
  top: 0;
  left: var(--sl, 50%);
  width: var(--sw, 20px);
  height: var(--sw, 20px);
  color: var(--sc, var(--stag-vite));
  opacity: var(--so, 0.18);
  will-change: transform;
  animation: sb-stag-cade var(--sd, 30s) linear var(--sdl, 0s) infinite;
}
.sb-stag-x,
.sb-stag-r { display: block; width: 100%; height: 100%; }
.sb-stag-x { animation: sb-stag-ondeggia var(--sxd, 7s) ease-in-out var(--sxdl, 0s) infinite alternate; }
.sb-stag-r { animation: sb-stag-gira var(--srd, 26s) linear infinite; }
.sb-stag-p svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.sb-stag-p--foglia svg { animation: sb-stag-volta var(--svd, 4.4s) ease-in-out infinite alternate; }

/* Cadendo, tutto scivola anche DI LATO, e tutto dalla stessa parte: sopra
   il Mincio l'aria non sta ferma, e sei foglie che scendono ognuna per la
   sua verticale non sono foglie al vento, sono foglie in un ascensore.
   Il vento è la sola cosa che le particelle hanno in comune — l'ampiezza
   dell'ondeggio, la rotazione e la velocità restano di ognuna. --sk lo
   scrive il JS, ed è più largo per chi sta davanti: la parallasse vale
   anche per il vento. */
@keyframes sb-stag-cade {
  from { transform: translate3d(0, -18vh, 0); }
  to   { transform: translate3d(var(--sk, 0px), 118vh, 0); }
}
@keyframes sb-stag-ondeggia {
  from { transform: translateX(calc(var(--sx, 24px) * -1)); }
  to   { transform: translateX(var(--sx, 24px)); }
}
@keyframes sb-stag-gira {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--srr, 360deg)); }
}
@keyframes sb-stag-volta {
  from { transform: perspective(150px) rotateY(-42deg); }
  to   { transform: perspective(150px) rotateY(38deg); }
}

/* ═══ LA NOTA DI STAGIONE ═════════════════════════════════════════════════
   Sopra il footer: perché l'uva, e da dove vengono i sei colori. Porta
   .sb-home per avere i token, ma .sb-home vuol dire anche «pagina intera» —
   min-height a tutto schermo e i due aloni del fondale — e nessuna delle due
   cose le serve. Si tolgono qui, come fa il footer poco più su in sb.css. */
.sb-stag-nota {
  min-height: 0;
  background: transparent;
  position: relative;
  /* Questo strato serve a stare sopra le foglie che scendono (.sb-stag-cielo,
     z-index 0) e a nient'altro. Era 1 — lo stesso di .sb-main — e fra pari
     vince chi viene dopo nel documento: la nota, che è l'ultima sezione. Ci
     finiva sotto l'indice a lato, che vive dentro .sb-main e il cui z-index 5
     non esce da lì: dall'inizio della vendemmia in giù la colonna si vedeva
     ma non si poteva più cliccare, perché a raccogliere i clic era la nota
     stesa sopra. Con 0 la nota resta sopra le foglie — che sono sotto lo zero
     dello stesso contesto — e torna sotto tutto quello che sta in .sb-main. */
  z-index: 0;
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(1.4rem, 3vw, 2rem);
}
.sb-home.sb-stag-nota::before { content: none; }

/* La nota non porta più la fascia dei sei colori in cima: i sei colori
   stanno già scritti qui sotto uno per uno, con la parola del disciplinare
   accanto, e una riga tinta sopra al titolo li anticipava senza dire niente
   in più. Resta però da spegnere l'::after di .sb-home — è il secondo alone
   del fondale, e qui non ci va comunque.

   Il selettore riparte da html[data-stagione] non per abitudine ma per
   necessità: la regola che ritinge l'alone è appesa a
   html[data-stagione="uva"] .sb-home::after e vincerebbe per specificità. */
html[data-stagione] .sb-home.sb-stag-nota::after { content: none; }

/* Tutto parte dal margine sinistro e nessuna colonna si centra, come nel
   resto del sito. La prosa si ferma a 46rem: è la misura della colonna di
   lettura, e vale anche qui in fondo. */
.sb-stag-nota-in { max-width: 72rem; }

.sb-stag-occhiello {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sb-brand-text);
}
.sb-stag-occhiello-i { flex: none; overflow: visible; }

.sb-stag-nota-t {
  margin: 0 0 0.9rem;
  max-width: var(--sb-misura);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--sb-fg);
}
.sb-stag-nota-p {
  margin: 0 0 0.7rem;
  max-width: var(--sb-misura);
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--sb-fg-light);
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.sb-stag-nota-p a { color: var(--sb-brand-text); text-decoration: none; }
.sb-stag-nota-p a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Le sei tinte ─────────────────────────────────────────────────────────
   Una riga per colore: il pastello, la parola testuale del disciplinare, e
   sotto la denominazione da cui viene. Il pastello ha lo smusso del sito —
   angolo in alto a sinistra e in basso a destra tagliati — perché anche un
   quadratino di sei millimetri fa parte del sistema. */
.sb-stag-tinte {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem 1.6rem;
  grid-template-columns: 1fr;
  counter-reset: none;
}
@media (min-width: 620px) { .sb-stag-tinte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sb-stag-tinte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sb-stag-tinta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  min-width: 0;
}
.sb-stag-tinta-q {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  /* Il colore piatto sotto, e sopra un velo che scende da sinistra: è la
     luce che prende un vetro pieno, la stessa che ha già il grappolo del
     festone (.sb-stag-luce) e che arriva sempre da lì. Sei millimetri di
     quadratino non hanno spazio per un riflesso disegnato — hanno spazio
     per una diagonale appena più chiara, e basta a togliere l'aria di
     campione stampato. */
  background:
    linear-gradient(148deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 52%),
    var(--q);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  box-shadow: inset 0 0 0 1px rgba(128, 116, 108, 0.28);
}
/* Al buio il velo si dimezza. Sul chiaro il riflesso si stacca dal fondo e
   si legge come luce; sullo scuro, alla stessa forza, sbianca la tinta —
   e la tinta è il contenuto di questa riga, non la sua cornice. */
html[data-stagione="uva"].dark .sb-stag-tinta-q {
  background:
    linear-gradient(148deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 52%),
    var(--q);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 232, 0.14);
}
.sb-stag-tinta-w {
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--sb-fg);
  font-style: italic;
  text-wrap: pretty;
}
.sb-stag-tinta-d {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--sb-fg-muted);
  text-wrap: pretty;
}

/* ── Le due zone ──────────────────────────────────────────────────────────
   Le colline a monte e la pianura a valle: due colonne, non due schede con
   un bordo attorno. Il filo verticale a sinistra è la sola decorazione, ed è
   lo stesso segno della citazione (.sb-riv-cit) — solo con la tinta della
   stagione al posto del grigio. */
.sb-stag-zone {
  display: grid;
  gap: 1.1rem 2rem;
  grid-template-columns: 1fr;
  margin-top: 1.8rem;
}
@media (min-width: 780px) { .sb-stag-zone { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-stag-zona { padding-left: 0.9rem; border-left: 2px solid var(--stag-vite); min-width: 0; }
.sb-stag-zona:nth-child(2) { border-left-color: var(--stag-granato); }
.sb-stag-zona-t {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sb-fg-lighter);
}
.sb-stag-zona-d {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--sb-fg-light);
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.sb-stag-zona-d em { font-style: italic; color: var(--sb-fg); }

.sb-stag-fonti {
  margin: 1.6rem 0 0;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--sb-fg-muted);
}
.sb-stag-fonti a { color: var(--sb-fg-lighter); text-decoration: none; }
.sb-stag-fonti a:hover { color: var(--sb-brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* Sotto i 480px la colonna è troppo stretta per la giustificazione: fra una
   parola e l'altra si aprirebbero voragini. Stessa regola del resto del
   sito, stessa soglia. */
@media (max-width: 479.98px) {
  .sb-stag-nota-p,
  .sb-stag-zona-d { text-align: left; }
}

/* ═══ MOVIMENTO E STAMPA ══════════════════════════════════════════════════
   Chi ha chiesto meno movimento — al sistema operativo o col tasto nella
   barra — tiene il colore e perde la deriva. Le foglie restano dove il JS le
   ha posate, il tralcio smette di dondolare e non cala più: è appeso e
   basta. */
html.rsm-still .sb-stag-festone,
html.rsm-still .sb-stag-pend,
html.rsm-still .sb-stag-p,
html.rsm-still .sb-stag-x,
html.rsm-still .sb-stag-r,
html.rsm-still .sb-stag-p svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.rsm-motion) .sb-stag-festone,
  html:not(.rsm-motion) .sb-stag-pend,
  html:not(.rsm-motion) .sb-stag-p,
  html:not(.rsm-motion) .sb-stag-x,
  html:not(.rsm-motion) .sb-stag-r,
  html:not(.rsm-motion) .sb-stag-p svg { animation: none; }
}

/* Su carta il tema non serve a niente: il tralcio e le foglie sono
   inchiostro speso per un fondale che sulla pagina stampata non c'è. La
   nota invece è testo, e resta. */
@media print {
  .sb-stag-festone,
  .sb-stag-cielo { display: none; }
  .sb-stag-nota { border-top: 1px solid #ccc; }
}