/* La Decima Musa, bozza 2 (3 novembre 2026): un sito che si guarda come una presentazione.
   Sezioni grandi, un'idea per ognuna, scorrimento normale da sito. Pochi passaggi costruiti apposta:
   la card del manifesto che sale sulla copertina, la dissolvenza verso l'associazione, Garda Cinema
   che diventa Garda Cineforum e poi Garda Cinema Incontra, il programma che scorre di lato.
   Due famiglie: Instrument Serif e Hanken Grotesk. Si animano solo transform e opacity. */

@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }

/* ---------- palette: Azzurro e' quella scelta da Diego (3 nov 2026, sera); le altre si provano con ?pal= ---------- */
:root, [data-pal="azzurro"] {
  --chiaro: #EEF2F4;   /* carta appena fredda */
  --scuro: #0B1320;    /* la notte sul lago */
  --marca: #173A5E;    /* blu lago profondo */
  --luce: #A9D6F2;     /* azzurro del cielo, per i titoli sul blu e sul nero */
  --punto: #3DB6E8;    /* il ciano storico della Decima Musa: solo dettagli sul fondo scuro */
}
[data-pal="lago"] {
  --chiaro: #F2EEE6;   /* carta */
  --scuro: #0F1413;    /* nero della sala, appena verde */
  --marca: #22403A;    /* verde lago profondo */
  --luce: #A9DDC2;     /* menta, per i titoli sul verde e sul nero */
  --punto: #EBA987;    /* pesca del tramonto: solo dettagli sul fondo scuro */
}
[data-pal="uliveto"] { --chiaro: #F2EDE4; --scuro: #141510; --marca: #2E3925; --luce: #CBD5A6; --punto: #C0612F; }
[data-pal="sala"] { --chiaro: #F3ECE3; --scuro: #150E0D; --marca: #431718; --luce: #EDBE78; --punto: #C2552F; }

:root {
  --f-titolo: "Instrument Serif", "Times New Roman", serif;
  --f-testo: "Hanken Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --t-giga: clamp(3.8rem, 11vw, 12rem);
  --t-1: clamp(3rem, 7.2vw, 8rem);
  --t-2: clamp(2.2rem, 4.2vw, 4.6rem);
  --t-3: clamp(1.7rem, 2.4vw, 2.5rem);
  --g: clamp(20px, 4.4vw, 64px);
  --testata: 76px;
  --raggio: 6px;
  --molla: cubic-bezier(.32, .72, 0, 1);
  --morbido: cubic-bezier(.22, 1, .36, 1);
  --fondo: var(--scuro);
  --testo: var(--chiaro);
  --velato: color-mix(in srgb, var(--marca) 7%, var(--chiaro));
  --passaggio: color-mix(in srgb, var(--marca) 42%, var(--scuro)); /* dove il blu incontra la notte (volti, ospiti, dedica) */
  --ciano-marchio: #1AAFE6;  /* il ciano dei marchi Garda Cinema: resta lo stesso in ogni palette */
  /* sfumature al posto delle tinte unite: due luci morbide per fondo, dentro la stessa palette, senza grain (tolto da Diego).
     Le luci stanno lontane dai bordi alti e bassi, cosi' due sezioni dello stesso colore si toccano senza scalino */
  --sf-chiaro: radial-gradient(72vmax 52vmax at 84% 36%, color-mix(in srgb, var(--luce) 46%, transparent), transparent 70%),
    radial-gradient(60vmax 40vmax at 6% 74%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%);
  --sf-marca: radial-gradient(76vmax 54vmax at 14% 26%, color-mix(in srgb, var(--luce) 28%, transparent), transparent 70%),
    radial-gradient(66vmax 46vmax at 92% 80%, color-mix(in srgb, var(--scuro) 58%, transparent), transparent 70%);
  --sf-scuro: radial-gradient(70vmax 48vmax at 80% 28%, color-mix(in srgb, var(--marca) 85%, transparent), transparent 70%),
    radial-gradient(54vmax 36vmax at 8% 82%, color-mix(in srgb, var(--luce) 12%, transparent), transparent 72%);
  /* per le superfici piccole (tessera, quote, scelta del piano): luce in alto a sinistra, ombra in basso a destra */
  --lucido-marca: linear-gradient(150deg, color-mix(in srgb, var(--luce) 16%, var(--marca)) 0%, var(--marca) 46%, color-mix(in srgb, var(--scuro) 34%, var(--marca)) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--scuro); color: var(--chiaro);
  font-family: var(--f-testo); font-size: 1.0625rem; line-height: 1.7;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--luce); color: var(--scuro); }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--chiaro); color: var(--scuro); border-radius: 999px; transform: translateY(-160%); transition: transform .4s var(--molla); }
.skip:focus-visible { transform: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- tipografia ---------- */
.serif { font-family: var(--f-titolo); font-weight: 400; letter-spacing: -.03em; line-height: .9; }
.serif em { font-style: italic; letter-spacing: -.02em; }
.etichetta { font-family: var(--f-testo); font-size: .72rem; font-weight: 600; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.testo { font-size: 1.0625rem; line-height: 1.7; max-width: 46ch; text-wrap: pretty; }
.pillola { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid currentColor; border-radius: 999px; }

/* ---------- testo che rotola: la parola sale e lascia il posto al suo doppio in corsivo ---------- */
/* il corsivo e' piu' grande del maiuscolo: in minuscolo con una sola capitale sembrerebbe piu' piccolo.
   La maschera ha margine per gambe e corsivo che sporge; i margini negativi lasciano il bottone della stessa misura */
.rotolo { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.25; padding: .42em .14em; margin: -.42em -.14em; }
.rotolo > * { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .6s var(--molla); }
.rotolo > :last-child { transform: translateY(150%); font-family: var(--f-titolo); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1.5em; line-height: .82; }
a:hover .rotolo > :first-child, button:hover .rotolo > :first-child, a:focus-visible .rotolo > :first-child { transform: translateY(-140%); }
a:hover .rotolo > :last-child, button:hover .rotolo > :last-child, a:focus-visible .rotolo > :last-child { transform: none; }

/* ---------- bottoni: una pillola di filo che si riempie salendo ---------- */
.bottone {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px;
  border: 1px solid currentColor; border-radius: 999px; color: var(--testo);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: transform .5s var(--molla); -webkit-tap-highlight-color: transparent;
}
.bottone::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--testo); border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--molla); }
.bottone:hover::before, .bottone:focus-visible::before { transform: none; }
.bottone .rotolo > :last-child { color: var(--fondo); }
/* la sagoma piena sale e attraversa la scritta: dove e' passata la scritta e' gia' in corsivo. Il corsivo sta in una finestra
   grande quanto il bottone che sale insieme alla sagoma, mentre la scritta dentro scende della stessa misura e resta ferma */
.bottone .rotolo { overflow: visible; }
.bottone .rotolo > :first-child, .bottone:hover .rotolo > :first-child, .bottone:focus-visible .rotolo > :first-child { transform: none; }
.bottone .rotolo > :last-child { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--molla); }
/* alta quanto la finestra: cosi' le percentuali dei due spostamenti sono la stessa misura e la scritta resta ferma */
.bottone .rotolo > :last-child > span { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(-101%); transition: transform .6s var(--molla); }
.bottone:hover .rotolo > :last-child, .bottone:focus-visible .rotolo > :last-child,
.bottone:hover .rotolo > :last-child > span, .bottone:focus-visible .rotolo > :last-child > span { transform: none; }
.bottone:active { transform: scale(.96); }
.bottone--piccolo { min-height: 42px; padding: 0 18px; font-size: .72rem; }

.collega { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; position: relative; -webkit-tap-highlight-color: transparent; }
.collega::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--molla); }
.collega:hover::after { transform: scaleX(0); }
.collega svg { width: 16px; height: 16px; transition: transform .5s var(--molla); }
.collega:hover svg { transform: translate(3px, -3px); }
.collega:active { opacity: .6; }

/* ---------- testata: completa sulla copertina; quando arriva la card verde il logo diventa una scritta
   e voci e bottone lasciano il posto a "+ Menu". Niente barre ne' pillole: resta fissa ma leggera ---------- */
.testata {
  --fondo: var(--scuro); --testo: var(--chiaro);
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--testata);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-inline: var(--g); color: var(--testo); pointer-events: none;
}
.testata > * { pointer-events: auto; }
.testata[data-tema="chiaro"] { --fondo: var(--chiaro); --testo: var(--scuro); }
/* sul telefono il testo che scorre passa sotto la scritta e il Menu: quando la testata e' raccolta c'e' un velo corto del colore
   del fondo sotto di lei, che sfuma verso il basso (niente blur, niente bordo: nessuna linea) */
@media (max-width: 1023px) {
  .testata::before { content: ""; position: absolute; inset: 0 0 -36px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .45s var(--morbido);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--fondo) 94%, transparent) 0%, color-mix(in srgb, var(--fondo) 78%, transparent) 55%, transparent 100%); }
  .testata.is-raccolta::before { opacity: 1; }
  .testata.is-aperta::before { opacity: 0; }
}
.logo { position: relative; display: grid; align-items: center; justify-self: start; color: inherit; -webkit-tap-highlight-color: transparent; }
.logo > * { grid-area: 1 / 1; }
.logo svg { width: clamp(88px, 7.6vw, 104px); height: auto; aspect-ratio: 3732 / 1620; transition: opacity .5s var(--morbido), transform .8s var(--molla); }
.logo__scritta { display: inline-block; white-space: nowrap; font-family: var(--f-titolo); font-weight: 400; font-size: clamp(1.45rem, 1.8vw, 1.8rem); line-height: 1; letter-spacing: -.02em; pointer-events: none; }
.logo__scritta em { font-style: italic; letter-spacing: -.01em; }
.logo__scritta .let { transform: translateY(115%); transition: transform .7s var(--molla) calc(var(--k) * 18ms); }
.testata.is-raccolta .logo svg { opacity: 0; transform: translateY(-16px); }
.testata.is-raccolta .logo__scritta .let { transform: none; transition-delay: calc(var(--k) * 22ms + 120ms); }
.logo:active { opacity: .6; }
.testata__voci { display: none; }
.testata__fine { justify-self: end; display: flex; align-items: center; gap: 10px; grid-column: 3; }
.testata__socio { display: none; }
.testata__menu { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 2px; color: var(--testo); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; transition: opacity .5s var(--morbido), transform .7s var(--molla); -webkit-tap-highlight-color: transparent; }
.testata__piu { position: relative; width: 11px; height: 11px; flex: none; transition: transform .6s var(--molla); }
.testata__piu::before, .testata__piu::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; }
.testata__piu::after { transform: rotate(90deg); }
.testata__menu:hover .testata__piu { transform: rotate(90deg); }
.testata.is-aperta .testata__piu { transform: rotate(45deg); }
.testata__menu:active { opacity: .6; }
.testata.is-aperta { --fondo: var(--marca); --testo: var(--chiaro); }
@media (min-width: 1024px) {
  .testata__voci { display: flex; align-items: center; gap: 4px; transition: opacity .5s var(--morbido), transform .7s var(--molla); }
  .voce { position: relative; display: inline-flex; padding: 9px 14px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
  .voce:active { opacity: .6; }
  .testata__socio { display: inline-flex; transition: opacity .5s var(--morbido), transform .7s var(--molla); }
  .testata__menu { opacity: 0; transform: translateY(-14px); pointer-events: none; position: absolute; right: 0; }
  .testata__fine { position: relative; }
  .testata.is-raccolta .testata__voci, .testata.is-raccolta .testata__socio, .testata.is-aperta .testata__voci, .testata.is-aperta .testata__socio { opacity: 0; transform: translateY(-14px); pointer-events: none; }
  .testata.is-raccolta .testata__menu, .testata.is-aperta .testata__menu { opacity: 1; transform: none; pointer-events: auto; }
}

/* il menu a tutta pagina (anche sul computer) */
.foglio-menu {
  position: fixed; inset: 0; z-index: -1; background: var(--sf-marca), var(--marca); color: var(--chiaro);
  padding: calc(var(--testata) + 12px) var(--g) clamp(20px, 4vh, 32px); display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(16px, 3vh, 32px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--morbido), visibility 0s linear .5s;
}
.testata.is-aperta .foglio-menu { opacity: 1; visibility: visible; transition: opacity .5s var(--morbido), visibility 0s; }
.foglio-menu__voci { display: grid; align-content: center; }
/* la maschera ha margine per gambe (g, p), accenti e corsivo che sporge a destra; i margini negativi tengono il ritmo delle righe */
.foglio-menu__voci a { overflow: hidden; justify-self: start; font-family: var(--f-titolo); font-size: clamp(2.4rem, min(9vw, 10.5svh), 8.4rem); line-height: 1; padding: .08em .18em .24em .04em; margin: -.08em -.18em -.24em -.04em; -webkit-tap-highlight-color: transparent; }
.foglio-menu__voci a span { display: block; letter-spacing: -.03em; transform: translateY(135%); transition: transform .9s var(--molla), color .3s var(--morbido); }
.foglio-menu__voci a:nth-child(even) span { font-style: italic; }
.foglio-menu__voci a:hover span { color: var(--luce); }
.testata.is-aperta .foglio-menu__voci a span { transform: none; transition-delay: calc(90ms + var(--i) * 60ms), 0s; }
.foglio-menu__voci a:active span { opacity: .6; }
.foglio-menu__piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; opacity: 0; transform: translateY(12px); transition: opacity .6s var(--morbido) .35s, transform .8s var(--molla) .35s; }
.testata.is-aperta .foglio-menu__piede { opacity: 1; transform: none; }
.foglio-menu__piede .bottone { --testo: var(--chiaro); --fondo: var(--marca); }
.foglio-menu__piede a.serif { font-size: 1.6rem; }
html.menu-aperto { overflow: hidden; }

/* ---------- sezioni ---------- */
.tavola {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  padding: calc(var(--testata) + 20px) var(--g) clamp(28px, 4vh, 44px);
  background: var(--sf, linear-gradient(transparent, transparent)), var(--fondo); color: var(--testo);
}
.tavola--chiaro { --fondo: var(--chiaro); --testo: var(--scuro); --sf: var(--sf-chiaro); }
.tavola--scuro { --fondo: var(--scuro); --testo: var(--chiaro); --sf: var(--sf-scuro); }
.tavola--marca { --fondo: var(--marca); --testo: var(--chiaro); --sf: var(--sf-marca); }

/* foto e video a tutta sezione */
.tavola__foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--scuro); }
.tavola__foto > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; transform: scale(1.12); transition: transform 2.6s var(--morbido); }
.tavola__foto picture img { width: 100%; height: 100%; object-fit: cover; }
.is-vista .tavola__foto > * { transform: none; }
.tavola__foto iframe { pointer-events: none; }
.velo { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--scuro) 42%, transparent) 0%, color-mix(in srgb, var(--scuro) 28%, transparent) 40%, color-mix(in srgb, var(--scuro) 34%, transparent) 64%, color-mix(in srgb, var(--scuro) 70%, transparent) 100%); }
.velo--forte { background: linear-gradient(180deg, color-mix(in srgb, var(--scuro) 58%, transparent) 0%, color-mix(in srgb, var(--scuro) 42%, transparent) 45%, color-mix(in srgb, var(--scuro) 78%, transparent) 100%); }
.centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 18px; padding: var(--testata) var(--g) 80px; pointer-events: none; }
.centro a { pointer-events: auto; }
.angoli { position: absolute; left: var(--g); right: var(--g); bottom: clamp(24px, 4vh, 40px); display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.angoli > :last-child { text-align: right; }

/* ---------- animazioni di ingresso ---------- */
html.js [data-rivela] { opacity: 0; transform: translateY(30px); }
html.js .is-vista [data-rivela], html.js [data-rivela].is-in { opacity: 1; transform: none; transition: opacity 1s var(--morbido) calc(var(--i, 0) * 110ms + 250ms), transform 1.3s var(--molla) calc(var(--i, 0) * 110ms + 250ms); }
/* parole e lettere: salgono da sotto una riga invisibile */
.par { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .08em .16em; margin: -.12em -.08em -.16em; }
.par--libera { overflow: visible; }
.par__i, .let { display: inline-block; }
html.js [data-parole] .par__i, html.js [data-lettere] .let { transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; }
html.js .is-vista [data-parole] .par__i { transform: none; transition: transform 1.15s var(--molla) calc(var(--k) * 55ms + var(--base, 120ms)); }
html.js .is-vista [data-lettere] .let { transform: none; transition: transform 1.2s var(--molla) calc(var(--k) * 34ms + var(--base, 120ms)); }
/* parole sparse che si ricompongono */
html.js [data-sparsi] .par__i { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.92); }
html.js .is-vista [data-sparsi] .par__i { opacity: 1; transform: none; transition: opacity .9s var(--morbido) calc(var(--k) * 70ms + var(--base, 200ms)), transform 1.6s var(--molla) calc(var(--k) * 70ms + var(--base, 200ms)); }
/* foto dentro le frasi */
.intarsio { display: inline-block; width: 1.72em; height: .78em; margin: 0 .06em; vertical-align: -.04em; border-radius: var(--raggio); overflow: hidden; background: color-mix(in srgb, currentColor 10%, transparent); }
.intarsio img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--morbido); }
html.js .intarsio { transform: scale(.2) rotate(-10deg); opacity: 0; }
html.js .is-vista .intarsio { transform: none; opacity: 1; transition: transform 1.5s var(--molla) calc(var(--k) * 70ms + var(--base, 200ms) + 200ms), opacity .6s var(--morbido) calc(var(--k) * 70ms + var(--base, 200ms) + 200ms); }
.intarsio:hover img { transform: scale(1.12); }
/* paracadute: se lo script non parte entro 2,5 secondi si vede tutto; si spegne appena parte */
html.js:not(.ready) [data-rivela], html.js:not(.ready) .intarsio, html.js:not(.ready) .volto { animation: paracadute .6s 2.5s forwards; }
@keyframes paracadute { to { opacity: 1; transform: none; } }

/* nastri che scorrono all'infinito (in pausa quando non si vedono) */
.nastro { overflow: hidden; white-space: nowrap; padding-block: .06em .22em; margin-block: -.06em -.22em; } /* spazio per le gambe di g, p, y: il nastro taglia tutto quello che esce */
.nastro__traccia { display: inline-flex; width: max-content; animation: scorri var(--dur, 40s) linear infinite; animation-play-state: paused; }
.nastro--inverso .nastro__traccia { animation-direction: reverse; }
.is-attivo .nastro__traccia { animation-play-state: running; }
.nastro__traccia > * { flex: none; padding-right: .35em; }
@keyframes scorri { to { transform: translateX(-50%); } }

/* parole che si spostano mentre si scorre (solo dove il browser lo fa da se', senza script) */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .deriva { animation: deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes deriva { from { transform: translateX(var(--da, 4vw)); } to { transform: translateX(var(--a, -4vw)); } }
  }
}

/* ---------- apertura: la copertina resta ferma e il manifesto le sale sopra come una card ---------- */
.apertura { position: relative; }
.copertina { position: sticky; top: 0; height: 100svh; min-height: 0; }
/* titoli scritti a mano: la forma di ogni lettera si svela sotto la sua maschera di tratti di penna che si allungano
   uno dopo l'altro a velocita' costante (tempi in --r e --d, partenza in --scrivi-da, in ms). Il nascosto vale solo con lo script partito */
.scrittura { display: block; margin-inline: auto; overflow: visible; fill: currentColor; }
.scrittura--parola { display: inline-block; margin: 0; }   /* una parola dentro una riga di testo ("cinema" in copertina) */
.scrittura .tratto { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.scrittura__cuore { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
html.ready .scrittura .tratto, html.ready .scrittura__cuore { stroke-dashoffset: calc(var(--o) * 1px); }
html.ready .is-vista .scrittura .tratto { animation: scrivi calc(var(--d) * 1ms) linear calc((var(--r) + var(--scrivi-da, 0)) * 1ms) forwards; }
html.ready .is-vista .scrittura__cuore { animation: scrivi calc(var(--d) * 1ms) cubic-bezier(.45, .05, .4, 1) calc((var(--r) + var(--scrivi-da, 0)) * 1ms) forwards; }
@keyframes scrivi { to { stroke-dashoffset: 0; } }
.copertina__titolo { font-size: var(--t-giga); line-height: .9; color: var(--chiaro); max-width: 11ch; text-wrap: balance; }
@media (min-width: 1024px) { .copertina__titolo { font-size: clamp(3.8rem, 9.2vw, 10rem); } }   /* sul computer un poco piu' piccolo (Diego, 5 nov) */
.copertina .angoli { color: var(--chiaro); }
/* la copertina prende colore: il velo diventa blu notte verso il basso e sopra c'e' una luce azzurra che deriva piano
   (solo transform su un livello grande, nessun blend-mode) */
.copertina .velo { background: linear-gradient(180deg, color-mix(in srgb, var(--scuro) 58%, transparent) 0%, color-mix(in srgb, var(--marca) 52%, transparent) 46%, color-mix(in srgb, var(--scuro) 84%, transparent) 100%); overflow: hidden; }
.copertina .velo::before {
  content: ""; position: absolute; inset: -18%;
  background:
    radial-gradient(46% 40% at 80% 20%, color-mix(in srgb, var(--punto) 34%, transparent), transparent 70%),
    radial-gradient(50% 44% at 14% 82%, color-mix(in srgb, var(--marca) 75%, transparent), transparent 72%),
    radial-gradient(36% 32% at 56% 58%, color-mix(in srgb, var(--luce) 10%, transparent), transparent 70%);
  animation: luce-deriva 22s ease-in-out infinite alternate;
}
@keyframes luce-deriva { from { transform: translate3d(-5%, 3%, 0) scale(1); } to { transform: translate3d(5%, -4%, 0) scale(1.08); } }

.manifesto { position: relative; z-index: 1; height: 340svh; }
.manifesto__palco { position: sticky; top: 0; height: 100svh; display: grid; }
/* resta a tinta unita: quando la card se ne va scorre via sopra la sezione chiara e i due bordi devono combaciare */
.manifesto__chiaro { position: absolute; inset: 0; background: var(--chiaro); opacity: 0; }
.manifesto__carta {
  position: relative; overflow: hidden;
  background: var(--sf-marca), var(--marca); color: var(--luce);
  display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 3vw, 40px) 0;
  box-shadow: 0 -24px 80px -24px rgba(0, 0, 0, .55);
}
.manifesto__righe { align-self: center; font-family: var(--f-titolo); font-size: clamp(2.6rem, 7.4vw, 8.2rem); line-height: 1; letter-spacing: -.03em; }
.manifesto__righe .riga { position: relative; display: block; white-space: nowrap; padding-left: var(--g); }
/* le righe compaiono mentre la card sale: --e va da 0 a 1 con lo scorrimento (lo scrive tavole.js) */
html.js .manifesto__righe .riga { opacity: var(--e, 1); transform: translate3d(0, calc((1 - var(--e, 1)) * .9em), 0); }
/* le parole che escono a sinistra: finiscono esattamente dove inizia la riga */
.riga__prima { position: absolute; right: calc(100% - var(--g)); top: 0; padding-right: .25em; }
.manifesto__righe .fantasma { color: color-mix(in srgb, var(--luce) 22%, transparent); font-style: italic; }
.manifesto__righe .fantasma { transition: opacity 1.3s var(--morbido); }
.manifesto.is-sola .manifesto__righe .fantasma { opacity: 0; }
.lume { color: color-mix(in srgb, var(--luce) 22%, transparent); transition: color .5s var(--morbido); }
.lume.is-acceso { color: var(--luce); }
.lume em { font-style: italic; }

/* ---------- l'associazione: un'unica frase con le foto tra le parole, le parole arrivano dai lati ---------- */
/* la sezione parte gia' mentre il verde del manifesto sfuma: sale sopra il manifesto ormai chiaro, senza fondo proprio,
   cosi' la frase comincia a comporsi appena finisce la dissolvenza. Il fondo chiaro inizia dove finisce il manifesto */
.seconda { --anticipo: 45svh; --progetti-alto: 600svh; position: relative; z-index: 1; margin-top: calc(-1 * var(--anticipo)); }
.seconda::before { content: ""; position: absolute; inset: var(--anticipo) 0 var(--progetti-alto); z-index: -1; /* finisce dove cominciano i progetti */
  background: radial-gradient(72vmax 52vmax at 84% 62%, color-mix(in srgb, var(--luce) 46%, transparent), transparent 70%),
    radial-gradient(60vmax 40vmax at 6% 88%, color-mix(in srgb, var(--marca) 16%, transparent), transparent 70%),
    var(--chiaro); }
.seconda__pausa { height: 90svh; }
.associazione { position: sticky; top: 0; height: 100svh; min-height: 0; display: grid; place-content: center; justify-items: center; text-align: center; background: transparent; }
.associazione__frase { font-size: clamp(2.1rem, 4.4vw, 5.1rem); line-height: 1.06; letter-spacing: -.03em; max-width: 23ch; text-wrap: balance; }
/* la frase si compone mentre la sezione sale: posizione e opacita' le scrive tavole.js a ogni fotogramma */
html.js [data-lati] .par__i { opacity: 0; }
html.js .associazione .intarsio, html.js .associazione.is-vista .intarsio { opacity: 0; transform: scale(.3); transition: none; }
/* al passaggio del mouse la foto si ingrandisce sopra le parole senza spostarle. L'immagine e' gia' grande 2,4 volte
   e a riposo e' rimpicciolita: il browser la tiene in memoria a piena risoluzione e ingrandita e' subito nitida */
.associazione .intarsio { position: relative; overflow: visible; background: none; }
.associazione .intarsio img { position: absolute; left: -70%; top: -70%; width: 240%; height: 240%; max-width: none; border-radius: calc(var(--raggio) * 2.4); transform: scale(.4167); transition: transform .7s var(--molla); }
@media (hover: hover) and (pointer: fine) {
  .associazione .intarsio:hover { z-index: 1; }
  .associazione .intarsio:hover img { transform: none; }
}

/* ---------- progetti: Garda Cinema, poi Garda Cineforum, poi Garda Cinema Incontra con le sue quattro serate.
   La sezione resta ferma; scorrendo cambiano foto, titolo e scritte (stati gestiti da tavole.js) ---------- */
.progetti { position: relative; z-index: 1; height: var(--progetti-alto); }
.progetti__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; color: var(--chiaro); background: var(--passaggio); padding: calc(var(--testata) + 20px) var(--g) clamp(28px, 4vh, 44px); }
/* l'ombra della card che sale sta su un livello a parte in cima alla sezione: sulla card scuriva il suo bordo basso
   (e con un ritaglio restava una riga scura a meta' pixel sopra il programma). Dopo, la card stessa la copre */
.progetti::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100svh; box-shadow: 0 -24px 80px -24px rgba(0, 0, 0, .5); pointer-events: none; }
.progetti__foto { position: absolute; inset: 0; z-index: -2; background: var(--passaggio); } /* sotto foto e video: il colore di passaggio, cosi' anche il mezzo pixel del bordo combacia col programma */
.progetti__foto > * { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.4s var(--morbido), transform 2.4s var(--morbido); }
.progetti__foto img { width: 100%; height: 100%; object-fit: cover; }
/* la foto del festival resta nascosta: c'e' il video, caricato in anticipo. Compare solo se Vimeo non risponde (o senza JavaScript) */
.progetti__foto .festival-foto { transform: scale(1.3); transform-origin: 50% 88%; opacity: 0; }
.senza-video .progetti__palco[data-stato="festival"] .festival-foto, html:not(.js) .progetti__foto .festival-foto { opacity: 1; }
.festival-video { overflow: hidden; }
.festival-video iframe { position: absolute; top: 50%; left: 50%; width: max(100%, 177.78svh); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--morbido); }
.festival-video.is-pronto iframe { opacity: 1; }
.progetti__foto .cineforum-foto { opacity: 0; transform: scale(1.12); }
/* Garda Cinema Incontra e il programma hanno un solo sfondo: un livello fermo dietro la pagina (.fondo-notte).
   Nello stato "incontra" la card dei progetti diventa trasparente, il programma lo e' sempre: il taglio tra le due non esiste */
.fondo-notte { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vmax 52vmax at 16% 18%, color-mix(in srgb, var(--luce) 20%, transparent), transparent 70%),
    radial-gradient(64vmax 48vmax at 88% 84%, color-mix(in srgb, var(--scuro) 70%, transparent), transparent 72%),
    linear-gradient(165deg, var(--marca) 0%, var(--passaggio) 58%, var(--scuro) 100%); }
.progetti__foto .incontra-fondo { display: none; }
.progetti__palco[data-stato="incontra"], .progetti__palco[data-stato="incontra"] .progetti__foto { background: transparent; }
.associazione.is-coperta { visibility: hidden; }
.progetti__palco:not([data-stato="festival"]) .festival-foto { opacity: 0; transform: scale(1.38); }
.progetti__palco:not([data-stato="festival"]) .festival-video { opacity: 0; transform: scale(1.08); }
.progetti__palco[data-stato="cineforum"] .cineforum-foto { opacity: 1; transform: none; }
/* uscendo la foto si allarga mentre sfuma: rimpicciolendo se ne vedevano i bordi sul fondo di Incontra (sembrava la sezione che si stringe) */
.progetti__palco[data-stato="incontra"] .cineforum-foto { opacity: 0; transform: scale(1.06); }
.progetti__palco[data-stato="incontra"] .incontra-fondo { opacity: 1; }
.progetti .velo { transition: opacity 1s var(--morbido); }
.progetti__palco[data-stato="incontra"] .velo { opacity: 0; }
.progetti .centro { transition: transform 1.2s var(--molla); }
.progetti__palco[data-stato="incontra"] .centro { transform: translateY(-14vh); }

/* ---------- collage: oggetti veri appoggiati sulla pagina. Sono foto di oggetti (biglietti, pellicola, polaroid, stampa,
   locandina, bigliettino) fatte vuote e completate con testi, foto e marchi veri (comunicazione/identita/collage). Regola comune:
   un'ombra sola, storti di pochi gradi, entrano come se qualcuno li posasse sul tavolo ---------- */
.carta { --storto: -4deg; --largo: 260px; position: absolute; z-index: 2; width: var(--largo); pointer-events: none;
  transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(calc(var(--storto) + var(--inclina, 0deg))) scale(calc(var(--alza, 1) * var(--sopra, 1)));
  filter: drop-shadow(0 1px 1px rgb(11 19 32 / .25)) drop-shadow(0 14px 20px rgb(11 19 32 / .3)); }
.carta img { display: block; width: 100%; height: auto; }
html.ready .carta { opacity: 0; transform: translate3d(0, -26px, 0) rotate(calc(var(--storto) + 7deg)) scale(1.06); transition: opacity .4s var(--morbido) var(--posa, .35s), transform 1.1s var(--molla) var(--posa, .35s); }
html.ready .is-vista .carta { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(calc(var(--storto) + var(--inclina, 0deg))) scale(calc(var(--alza, 1) * var(--sopra, 1))); }
/* sul computer si prendono e si spostano col mouse (tavole.js): si alzano un poco, si inclinano nel verso in cui vanno, poi si posano */
.carta img { -webkit-user-drag: none; }
@media (hover: hover) and (pointer: fine) {
  .carta { pointer-events: auto; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
  html.ready .is-vista .carta:hover { --sopra: 1.02; }
  html.ready .carta.is-mossa { transition: opacity .4s var(--morbido), transform .55s var(--molla); }
  html.ready .carta.is-presa { cursor: grabbing; transition: none; filter: drop-shadow(0 2px 3px rgb(11 19 32 / .22)) drop-shadow(0 30px 36px rgb(11 19 32 / .34)); }
}
/* copertina: il biglietto della Sala Congressi e il timbro della musa, dopo il titolo */
.timbro.timbro--copertina { z-index: 2; left: 7vw; bottom: 17svh; width: clamp(96px, 9.5vw, 150px); background: var(--chiaro); }
html.ready .is-vista .timbro--copertina { animation: timbra .55s cubic-bezier(.3, 0, .2, 1) 2.7s forwards; }
/* associazione: arrivano a frase composta; la locandina del festival 2026 a meta' pagina (alta 1,27 volte la larghezza) */
.carta--stampa { --largo: clamp(200px, 19vw, 300px); --storto: -6deg; left: 4vw; top: 13svh; --posa: .1s; }
.carta--polaroid { --largo: clamp(130px, 12vw, 200px); --storto: -7deg; left: 6vw; bottom: 8svh; --posa: .35s; }
.carta--biglietto { --largo: clamp(200px, 17vw, 280px); --storto: 6deg; right: 3vw; top: calc(50% - var(--largo) * .26); --posa: .6s; }   /* il biglietto della Sala Congressi, alto 0,51 volte la larghezza */
/* programma: dentro il flusso del testo */
.carta--matrice { position: relative; justify-self: start; --largo: clamp(180px, 16vw, 250px); --storto: 7deg; margin: 22px 0 0 4px; --posa: .3s; }
.carta--rotolo { position: relative; justify-self: start; --largo: clamp(150px, 13vw, 210px); --storto: -6deg; margin: -30px 0 0 clamp(110px, 10vw, 170px); --posa: .55s; }   /* accanto alla matrice, un po' sopra */
/* valori: il buono dei soci nella prima riga, nel vuoto tra "Inclusione" e la sua frase (alto 0,59 volte la larghezza) */
.valori .valore:first-child { position: relative; }
.carta--buono { --largo: clamp(190px, 16vw, 260px); --storto: -7deg; left: 44%; top: calc(50% - var(--largo) * .3); --posa: .4s; }
/* ospiti: il biglietto del festival sopra i nomi, lontano dall'etichetta a sinistra */
.carta--festival { --largo: clamp(260px, 26vw, 400px); --storto: -4deg; right: 9vw; top: 11%; --posa: .3s; }
/* piede: la cartolina indirizzata alla sede, appoggiata sul filo sopra i collegamenti (sul telefono accanto al logo) */
.piede__griglia { position: relative; }
@media (max-width: 1023px) { .carta--cartolina { position: relative; order: 9; grid-column: 1 / -1; justify-self: end; --largo: 46vw; --storto: 4deg; margin: 4px 4vw 0 0; --posa: .5s; } }   /* sul telefono nel flusso, sotto i collegamenti */
/* sul telefono: piu' piccoli e lontani dalle frasi. In copertina il timbro sale in alto a sinistra, in diagonale col biglietto;
   nell'associazione una foto sopra a sinistra e una sotto a destra (la locandina resta solo sul computer) */
@media (max-width: 1023px) {
  .timbro.timbro--copertina { left: 7vw; top: calc(var(--testata) + 4svh); bottom: auto; width: 25vw; }
  .carta--stampa { --largo: 44vw; left: 4vw; top: 11svh; }
  .carta--polaroid { --largo: 25vw; left: auto; right: 5vw; bottom: 3svh; --storto: 6deg; }
  .carta--biglietto, .carta--festival, .carta--buono { display: none; }   /* tra gli ospiti e nei valori sul telefono non c'e' spazio */
}
@media (min-width: 1024px) { .carta--cartolina { --largo: clamp(220px, 19vw, 300px); --storto: -5deg; right: auto; left: 38%; top: auto; bottom: calc(100% - 22px); } }
/* il timbro: inchiostro col colore del sito su una forma fissa (images/tavole/collage/timbro.webp), cade dopo il titolo */
.timbro { position: absolute; aspect-ratio: 1; pointer-events: none;
  -webkit-mask: url(/images/tavole/collage/timbro.webp) center / contain no-repeat; mask: url(/images/tavole/collage/timbro.webp) center / contain no-repeat;
  opacity: 0; transform: rotate(-14deg) scale(1.5); }
@keyframes timbra { 0% { opacity: 0; transform: rotate(-14deg) scale(1.5); } 55% { opacity: .9; transform: rotate(-14deg) scale(.97); } 100% { opacity: .8; transform: rotate(-14deg) scale(1); } }

/* scritte che cambiano con lo stato: quella attuale e' al suo posto, le precedenti sono salite, le prossime aspettano sotto */
.cambio { display: inline-grid; overflow: hidden; vertical-align: top; }
.cambio > * { grid-area: 1 / 1; transform: translateY(110%); opacity: 0; visibility: hidden; transition: transform 1s var(--molla), opacity .6s var(--morbido), visibility 0s linear 1s; }
.cambio > .is-prima { transform: translateY(-110%); }
.cambio > .is-ora { transform: none; opacity: 1; visibility: visible; transition: transform 1s var(--molla), opacity .6s var(--morbido), visibility 0s; }

/* i tre marchi sono un solo disegno (lettere, striscia di pellicola, barca): tavole.js sposta ogni pezzo sul suo
   compagno del marchio successivo. Senza script si vede il Garda Cinema, fermo */
.progetti__marchio { position: relative; width: min(calc(100vw - 2 * var(--g)), 50rem, 82svh); }
.progetti__titolo { display: block; }
.marchio { display: block; width: 100%; height: auto; overflow: visible; }
.marchio path { transform-box: view-box; transform-origin: 0 0; }
.marchio path:not([data-festival="1"]) { opacity: 0; }
html.ready .marchio path { opacity: 0; }
.m-b { fill: var(--chiaro); }
.m-c { fill: var(--ciano-marchio); }

/* le quattro serate di Garda Cinema Incontra, tutte insieme, entrano una dopo l'altra */
.tempi { position: absolute; left: var(--g); right: var(--g); top: 58%; display: grid; justify-items: center; pointer-events: none; }
.tempi__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); width: min(100%, 1180px); }
.tempo { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--chiaro) 22%, transparent); opacity: 0; transform: translateY(40px); transition: opacity .6s var(--morbido), transform .9s var(--molla); }
.progetti__palco[data-stato="incontra"] .tempo { opacity: 1; transform: none; transition: opacity .9s var(--morbido) calc(var(--i) * 130ms + 450ms), transform 1.3s var(--molla) calc(var(--i) * 130ms + 450ms); }
.tempo__cosa { font-family: var(--f-titolo); font-size: clamp(2rem, 3.8vw, 4.2rem); line-height: .95; letter-spacing: -.03em; }
.tempo__cosa em { font-style: italic; }

.progetti__basso { position: absolute; left: var(--g); right: var(--g); bottom: clamp(24px, 4vh, 40px); display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.progetti__basso .serif { font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.1; letter-spacing: -.01em; }
.progetti__basso .serif small { display: block; font-family: var(--f-testo); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.progetti__basso .cambio:first-child > * { justify-self: start; }
.progetti__basso .cambio:last-child > * { justify-self: end; }

/* ---------- programma: gli appuntamenti scorrono di lato ---------- */
.programma { position: relative; background: transparent; color: var(--chiaro); }
.programma__palco { position: relative; overflow: hidden; background: transparent; padding: calc(var(--testata) + 20px) 0 40px; }
.programma__traccia { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none; padding-inline: var(--g); } /* lo scatto tiene il margine: la prima scheda non si incolla al bordo */
.programma__traccia::-webkit-scrollbar { display: none; }
.programma__intro { flex: none; width: max(min(86vw, 640px), calc(var(--t-1) * 5.2 + 6vw + 48px)); padding-right: 6vw; display: grid; gap: 22px; align-content: center; scroll-snap-align: start; }
.programma__intro h2 { font-size: var(--t-1); }
.giorno { flex: none; width: min(78vw, 420px); padding: 0 clamp(20px, 2.4vw, 36px); border-left: 1px solid color-mix(in srgb, var(--chiaro) 18%, transparent); display: grid; align-content: center; gap: 10px; scroll-snap-align: start; }
.giorno__numero { font-family: var(--f-titolo); font-size: clamp(9rem, 30vh, 20rem); line-height: .8; letter-spacing: -.05em; }
.giorno__mese { font-family: var(--f-titolo); font-style: italic; font-size: var(--t-3); line-height: 1; letter-spacing: -.01em; }
.giorno__titolo { font-family: var(--f-titolo); font-size: clamp(1.3rem, 1.6vw, 1.7rem); line-height: 1.12; letter-spacing: -.01em; margin-top: 8px; max-width: 18ch; }
.giorno__titolo em { font-style: italic; }
.giorno .etichetta { opacity: .65; }
.giorno .giorno__rassegna { font-size: .9rem; letter-spacing: .09em; opacity: .85; }   /* la rassegna sopra la data: piu' grande delle altre etichette */
.giorno__prossimo { color: var(--punto); opacity: 1 !important; }
.giorno.is-prossimo .giorno__numero, .giorno.is-prossimo .giorno__mese { color: var(--luce); }
.giorno.is-passato { display: none; }
.programma__fine { flex: none; width: min(70vw, 360px); display: grid; place-content: center; padding: 0 var(--g); border-left: 1px solid color-mix(in srgb, var(--chiaro) 18%, transparent); scroll-snap-align: start; }
.programma__barra { margin: 28px var(--g) 0; height: 1px; background: color-mix(in srgb, var(--chiaro) 18%, transparent); }
.programma__barra span { display: block; height: 100%; background: var(--luce); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .programma.is-orizzontale .programma__palco { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); padding-bottom: 36px; }
  .programma.is-orizzontale .programma__traccia { overflow: visible; scroll-snap-type: none; will-change: transform; }
  .programma.is-orizzontale .giorno, .programma.is-orizzontale .programma__fine { width: clamp(300px, 28vw, 440px); }
}
/* sul telefono niente scorrimento di lato: titolo, i due biglietti e il bottone per la pagina degli eventi */
@media (max-width: 1023px) {
  .programma__palco { padding-bottom: 72px; }
  .programma__traccia { display: block; overflow: visible; scroll-snap-type: none; }
  .programma__intro { width: auto; padding-right: 0; }
  .programma__intro h2 + .etichetta, .programma .giorno, .programma__barra { display: none; }
  .programma__fine { display: block; width: auto; margin-top: 40px; padding: 0; border-left: 0; }
  .programma .carta--matrice { margin-top: 36px; }   /* senza la riga "Scorri" il biglietto viene subito dopo il titolo */
}

/* ---------- valori: la parola si riempie mentre si scorre ---------- */
.valori { display: grid; grid-template-rows: auto 1fr; gap: 24px; }
.valori__elenco { align-self: center; }
.valore { display: grid; gap: 6px 24px; padding: clamp(14px, 3vh, 34px) 0; border-top: 1px solid color-mix(in srgb, var(--scuro) 20%, transparent); }
.valore:last-child { border-bottom: 1px solid color-mix(in srgb, var(--scuro) 20%, transparent); }
.riempi { position: relative; justify-self: start; font-family: var(--f-titolo); font-weight: 400; font-size: clamp(3rem, 7.8vw, 8.4rem); line-height: .96; letter-spacing: -.035em; white-space: nowrap; }
.valore:nth-child(even) .riempi { font-style: italic; }
.riempi__base { color: color-mix(in srgb, var(--scuro) 14%, transparent); }
.riempi__pieno { position: absolute; inset: -.2em -.06em -.32em; overflow: hidden; }
.riempi__pieno > span { display: block; padding: .2em .06em .32em; }
html.js .riempi__pieno { transform: translateX(-101%); }
html.js .riempi__pieno > span { transform: translateX(101%); }
.valore p { font-size: 1rem; line-height: 1.6; max-width: 40ch; }
html.js .valore p { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--morbido), transform .9s var(--molla); }
html.js .valore.is-pieno p { opacity: 1; transform: none; }
@media (min-width: 1024px) { .valore { grid-template-columns: 1fr minmax(260px, 30%); align-items: center; } }

/* ---------- volti: a sinistra titolo, testo e bigliettino; a destra un ritratto alla volta, gli altri sfumano ai lati.
   I ritratti sono rifatti tutti uguali (tenda azzurra, stessa luce e inquadratura). La sfumatura e' opacita' e scala
   scritte da tavole.js mentre la fila scorre: niente maschere, che sui Mac fanno scattare lo scorrimento ---------- */
.volti { display: grid; gap: clamp(36px, 6vh, 64px); align-content: center; padding-bottom: clamp(64px, 10vh, 120px); overflow: clip; }
.volti__testa { display: grid; gap: 20px; align-content: center; }
.volti h2 { font-size: clamp(2.8rem, 5vw, 6rem); line-height: .86; text-transform: uppercase; letter-spacing: -.02em; color: var(--luce); }
.volti h2 small { font-size: .4em; text-transform: none; font-style: italic; letter-spacing: -.01em; color: var(--chiaro); margin-right: .2em; vertical-align: .38em; }
.volti__testa .etichetta { margin-bottom: 18px; }
.volti .testo { font-size: 1rem; opacity: .85; }
.volti__giostra { --largo-volto: min(72vw, 360px); position: relative; min-width: 0; display: grid; gap: 24px; }
.volti__traccia { position: relative; display: flex; gap: clamp(14px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* la fila arriva fino ai bordi dello schermo (niente taglio netto accanto al ritratto); il ritratto attivo resta al centro della colonna */
  margin-inline: calc(-1 * var(--g)); padding-inline: calc(50% - var(--largo-volto) / 2 + var(--g)); -webkit-user-select: none; user-select: none; outline-offset: 6px; }
.volti__traccia::-webkit-scrollbar { display: none; }
.volti__traccia.is-presa { scroll-snap-type: none; cursor: grabbing; }
@media (hover: hover) and (pointer: fine) { .volti__traccia { cursor: grab; } }
.volto { flex: none; width: var(--largo-volto); scroll-snap-align: center; text-align: center;
  opacity: calc(1 - var(--lontano, 0) * .86); transform: scale(calc(1 - var(--lontano, 0) * .08)); }
.volto h3, .volto p { opacity: calc(1 - var(--lontano, 0) * 3); }   /* i nomi dei vicini spariscono prima dei ritratti */
.volto__foto { position: relative; border-radius: var(--raggio); overflow: hidden; background: color-mix(in srgb, var(--scuro) 30%, transparent);
  box-shadow: 0 2px 4px rgb(11 19 32 / .2), 0 30px 60px -30px rgb(11 19 32 / .7); }
.volto__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; -webkit-user-drag: none; }
/* entrano insieme alla sezione: la tenda blu si alza e il ritratto si posa */
.volto__foto::after { content: ""; position: absolute; inset: 0; background: var(--marca); transform-origin: top; transform: scaleY(0); pointer-events: none; }
html.js .volto__foto::after { transform: scaleY(1); }
html.js .volto__foto img { transform: scale(1.18); }
html.js .is-vista .volto__foto::after { transform: scaleY(0); transition: transform 1.3s var(--molla) calc(var(--k, 0) * 110ms + 200ms); }
html.js .is-vista .volto__foto img { transform: none; transition: transform 2s var(--morbido) calc(var(--k, 0) * 110ms + 200ms); }
.volto h3 { font-family: var(--f-titolo); font-weight: 400; font-size: clamp(1.5rem, 2vw, 2.1rem); line-height: 1.05; margin-top: 16px; letter-spacing: -.015em; }
.volto p { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .62; margin-top: 6px; }
.volti__comandi { display: flex; align-items: center; justify-content: center; gap: 20px; }
.volti__freccia { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--chiaro); border: 1px solid color-mix(in srgb, var(--chiaro) 45%, transparent);
  transition: background-color .35s var(--morbido), color .35s var(--morbido), transform .5s var(--molla); -webkit-tap-highlight-color: transparent; }
.volti__freccia svg { width: 18px; height: 18px; }
.volti__freccia:hover, .volti__freccia:focus-visible { background: var(--chiaro); color: var(--marca); }
.volti__freccia:active { transform: scale(.92); }
.volti__freccia[disabled] { opacity: .3; pointer-events: none; }
.volti__conto { min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; opacity: .8; }
@media (min-width: 1024px) {
  .volti { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 96px); align-items: center; min-height: 100svh; }
  /* il ritratto al centro sta tutto nello schermo, con nome e frecce sotto */
  .volti__giostra { --largo-volto: min(30vw, calc((100svh - var(--testata) - 250px) * .8)); }
  /* a sinistra c'e' il testo: la fila si allunga solo verso destra e lo scatto guarda la sola colonna */
  .volti__traccia { margin-left: 0; padding-left: calc(50% - var(--largo-volto) / 2); scroll-padding-right: var(--g); }
}

/* ---------- ospiti: tre nastri di nomi, la foto compare sotto il mouse ---------- */
.ospiti { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; padding-inline: 0; }
.ospiti > .etichetta, .ospiti > .angoli { padding-inline: var(--g); }
.ospiti > .angoli { position: static; }
.ospiti__nastri { align-self: center; display: grid; gap: .04em; font-family: var(--f-titolo); font-size: clamp(3rem, 8vw, 8.6rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.ospiti__nastri .nastro:nth-child(2) { color: var(--luce); font-style: italic; text-transform: none; }
.ospiti__nastri i { font-style: normal; opacity: .3; padding: 0 .25em; }
.nome { transition: opacity .4s var(--morbido); }
@media (hover: hover) and (pointer: fine) {
  .ospiti__nastri:hover .nome { opacity: .3; }
  .ospiti__nastri .nome:hover { opacity: 1; }
}
.ospiti__foto { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(180px, 16vw, 260px); aspect-ratio: 4 / 5; border-radius: var(--raggio); overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .35s var(--morbido); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.ospiti__foto.is-visibile { opacity: 1; }
/* il manifesto del film che segue il mouse sopra le date (programma e pagina eventi), con la cornicetta da stampa.
   Per una serata di corti i manifesti sono piccoli e si aprono sparsi attorno al cursore */
.film-volante { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(190px, 15vw, 250px); aspect-ratio: 7 / 10; pointer-events: none;
  opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity .3s var(--morbido); }
.film-volante.is-visibile { opacity: 1; }
.film-volante__mazzo { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--morbido); }
.film-volante__mazzo.is-ora { opacity: 1; }
.film-volante__mazzo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; box-sizing: border-box;
  border: 5px solid #FBFAF7; border-radius: 2px; background: #FBFAF7;
  box-shadow: 0 2px 4px rgb(11 19 32 / .25), 0 26px 50px -20px rgb(0 0 0 / .65); }
.film-volante__mazzo.is-sparso img { inset: auto; left: 50%; top: 50%; width: 46%; height: auto; aspect-ratio: 7 / 10; border-width: 3px;
  transform: translate(-50%, -50%) scale(.35) rotate(0deg); transition: transform .6s var(--molla); }
.film-volante__mazzo.is-sparso.is-ora img { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--giro)); transition-delay: calc(var(--i, 0) * 35ms); }
.ospiti__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- dedica ---------- */
.dedica { display: grid; place-content: center; justify-items: center; text-align: center; gap: 24px; }

/* volti, ospiti e dedica sono un'unica tela: ognuna tiene il suo colore (blu, notte, blu) ma ai bordi sfuma nello stesso
   colore di passaggio, pieno proprio sul taglio, cosi' tra una sezione e l'altra non si vede nessuna linea */
.volti { background: linear-gradient(to bottom, transparent calc(100% - 72svh), color-mix(in srgb, var(--passaggio) 55%, transparent) calc(100% - 32svh), var(--passaggio) calc(100% - 10svh), var(--passaggio) 100%), var(--sf-marca), var(--marca); }
.ospiti { background: linear-gradient(to bottom, var(--passaggio) 0, var(--passaggio) 10svh, color-mix(in srgb, var(--passaggio) 55%, transparent) 24svh, transparent 42svh, transparent calc(100% - 42svh), color-mix(in srgb, var(--passaggio) 55%, transparent) calc(100% - 24svh), var(--passaggio) calc(100% - 10svh), var(--passaggio) 100%), var(--sf-scuro), var(--scuro); }
.dedica { background: linear-gradient(to bottom, var(--passaggio) 0, var(--passaggio) 10svh, color-mix(in srgb, var(--passaggio) 55%, transparent) 28svh, transparent 56svh), var(--sf-marca), var(--marca); }
/* le sezioni della tela si sovrappongono di un pixel: quando il taglio cade a meta' pixel non resta una riga scura in mezzo */
.ospiti, .dedica, .programma { margin-top: -1px; }
.dedica h2 { font-size: var(--t-giga); color: var(--luce); }
.dedica .testo { max-width: 52ch; margin-inline: auto; opacity: .9; }
.dedica__firma { font-family: var(--f-titolo); font-style: italic; font-size: 1.5rem; }

/* ---------- diventa socio: il titolo e le due quote, ognuna porta all'iscrizione gia' scelta ---------- */
.socio { display: grid; grid-template-rows: auto 1fr auto auto; gap: clamp(24px, 4vh, 44px); }
.socio__alto, .socio__piede { display: flex; justify-content: space-between; gap: 16px; }
/* in alto il titolo e la tessera affiancati, sotto le due quote: passando su una quota la tessera prende quel nome */
.socio__centro { align-self: center; display: grid; gap: clamp(36px, 6vh, 56px); justify-items: center; }
.socio__parole { display: grid; justify-items: center; text-align: center; gap: 22px; }
.socio__titolo { font-size: var(--t-giga); line-height: .88; }
.socio__centro .testo { max-width: 46ch; }
.socio__quote { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }
.quota {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: space-between; gap: 18px; min-height: clamp(190px, 30vh, 300px);
  padding: clamp(18px, 2.4vw, 32px); border: 1px solid color-mix(in srgb, var(--scuro) 28%, transparent); border-radius: var(--raggio);
  color: var(--scuro); transition: color .35s var(--morbido) .1s, transform .5s var(--molla); -webkit-tap-highlight-color: transparent;
}
.quota::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--lucido-marca); transform: translateY(101%); transition: transform .75s var(--molla); }
.quota:hover::before, .quota:focus-visible::before { transform: none; }
.quota:hover, .quota:focus-visible { color: var(--chiaro); border-color: var(--marca); }
.socio__titolo em { color: var(--marca); }
.quota:active { transform: scale(.985); }
.quota:focus-visible { outline-offset: 4px; }
.quota__testa { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quota__vai { display: inline-flex; align-items: center; gap: 8px; }
.quota__vai svg { width: 16px; height: 16px; transition: transform .6s var(--molla); }
.quota:hover .quota__vai svg { transform: translateX(5px); }
.quota__prezzo { font-family: var(--f-titolo); font-size: clamp(4.6rem, 10vw, 11rem); line-height: .8; letter-spacing: -.05em; }
.quota__prezzo small { font-size: .34em; letter-spacing: -.01em; vertical-align: .62em; margin-left: .08em; font-style: italic; }
.quota__nota { font-family: var(--f-titolo); font-style: italic; font-size: 1.25rem; line-height: 1.1; opacity: .75; }
/* la tessera sale e si raddrizza mentre arrivi (tavole.js scrive --sale e --giro), il mouse la inclina, la quota sotto il mouse la solleva */
.socio__tessera { width: min(78vw, 420px); margin-block: 24px; perspective: 1000px; transform: translate3d(0, var(--sale, 0px), 0) rotate(var(--giro, -4deg)); }
.socio__tessera .tessera { transform: translateY(var(--su, 0px)) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz, 0deg)); transition: transform .7s var(--molla); box-shadow: 0 2px 4px rgba(11, 19, 32, .12), 0 30px 60px -26px rgba(11, 19, 32, .55), 0 60px 90px -60px color-mix(in srgb, var(--marca) 60%, transparent); }
.socio__tessera .tessera__chip { transition: opacity .25s var(--morbido); }
@media (min-width: 1024px) {
  .socio__centro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 110px); align-items: center; justify-items: stretch; }
  .socio__parole { justify-items: start; text-align: left; }
  .socio__titolo { font-size: clamp(3.8rem, 9.4vw, 11rem); }
  .socio__tessera { justify-self: center; }
}

/* ---------- piede ---------- */
.piede { display: grid; grid-template-rows: auto 1fr auto auto; gap: 36px; }
.piede__alto { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.su { display: inline-flex; align-items: center; gap: 8px; -webkit-tap-highlight-color: transparent; }
.su svg { width: 14px; height: 14px; transition: transform .5s var(--molla); }
.su:hover svg { transform: translateY(-3px); }
.su:active { opacity: .6; }
.piede__mail-box { align-self: center; overflow: hidden; }
.piede__mail { display: inline-block; font-family: var(--f-titolo); font-size: 9.4vw; line-height: 1; letter-spacing: -.035em; white-space: nowrap; color: var(--luce); padding-block: .06em .24em; -webkit-tap-highlight-color: transparent; }
.piede__mail:active { opacity: .7; }
.piede__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--chiaro) 18%, transparent); }
.piede__griglia .etichetta { opacity: .55; margin-bottom: 8px; }
.piede__griglia .serif { font-size: 1.6rem; line-height: 1.2; display: inline-block; }
.piede__griglia p.serif { font-size: 1.3rem; }
.piede__voci { display: grid; gap: 4px; font-size: .95rem; justify-items: start; }
.piede__voci a, .piede__basso a, .piede__griglia a.serif { position: relative; }
.piede__voci a::after, .piede__basso a::after, .piede__griglia a.serif::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--molla); }
.piede__voci a:hover::after, .piede__basso a:hover::after, .piede__griglia a.serif:hover::after { transform: scaleX(1); transform-origin: left; }
.piede__griglia a:active, .piede__basso a:active { opacity: .6; }
.piede__basso { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; font-size: .82rem; opacity: .8; }
.piede__basso nav { display: flex; gap: 20px; }
.piede__basso .logo svg { width: 80px; }
@media (min-width: 1024px) { .piede__griglia { grid-template-columns: repeat(4, 1fr); } }

/* ---------- telefono ---------- */
@media (max-width: 1023px) {
  .tavola { min-height: 0; padding-block: calc(var(--testata) + 32px) 64px; }
  .copertina { height: 100svh; }
  .angoli { bottom: 28px; }
  .manifesto { height: 300svh; }
  .progetti__basso { flex-direction: column; align-items: stretch; }
  .progetti__basso .cambio > * { justify-self: start !important; }
  .tempi { top: 54%; }
  .tempi__lista { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  /* diventa socio parte subito dal titolo e il piede subito dalla sua riga: il margine alto pieno lasciava una fascia vuota */
  .socio { padding-top: 56px; }
  .socio__alto { display: none; }
  .piede { padding-top: 56px; }
}
@media (max-width: 767px) {
  /* menu: voci al centro dello schermo, in altezza e in larghezza; il piede centrato sotto */
  .foglio-menu { grid-template-rows: minmax(0, 1fr); padding-bottom: calc(var(--testata) + 12px); }
  .foglio-menu__voci { justify-items: center; text-align: center; }
  .foglio-menu__voci a { justify-self: center; }
  .foglio-menu__piede { position: absolute; left: var(--g); right: var(--g); bottom: clamp(20px, 4vh, 32px); flex-direction: column; align-items: center; text-align: center; gap: 14px; }
  .copertina__titolo { font-size: clamp(3.4rem, 16vw, 5rem); }
  .manifesto__righe { font-size: 11.4vw; }   /* la riga accesa piu' lunga ("Promovendo il cinema") resta dentro lo schermo */
  .associazione__frase { font-size: clamp(2.1rem, 9.2vw, 3rem); }
  .ospiti__nastri { font-size: 24vw; gap: .08em; }   /* nomi grandi: i nastri riempiono la sezione in altezza */
  .dedica h2 { font-size: clamp(3.4rem, 15vw, 5rem); padding-top: .74em; }
  /* il cuore sale sopra "Grazie Dimitri.", al centro: misure in unita' del disegno (largo 2541,5, il cuore e' nato dopo il punto) */
  .dedica .scrittura__cuore { transform-box: fill-box; transform-origin: center; transform: translate(-1444px, -387px) scale(1.35); }
  .quota__prezzo { font-size: clamp(3.6rem, 17vw, 5rem); }
  .socio__alto, .socio__piede { flex-direction: column; gap: 6px; }
  .socio__titolo { font-size: clamp(3.4rem, 15vw, 5rem); }
  .quota__testa { flex-direction: column; align-items: flex-start; gap: 6px; }
  .riempi { font-size: clamp(2.6rem, 12vw, 4rem); white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-rivela], html.js .intarsio, html.js .volto,
  html.js [data-parole] .par__i, html.js [data-lettere] .let, html.js [data-sparsi] .par__i, html.js [data-lati] .par__i { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  html.js .volto__foto::after, html.js .dedica__foto::after { transform: scaleY(0) !important; }
  html.js .dedica__foto img { transform: none !important; }
  html.js .volto__foto img { transform: none !important; }
  .tavola__foto > * { transform: none !important; transition: none !important; }
  .nastro__traccia { animation: none !important; }
  .copertina .velo::before { animation: none !important; }
  html.ready .carta { opacity: 1 !important; transform: rotate(var(--storto)) !important; transition: none !important; }
  html.ready .is-vista .timbro--copertina { animation: none !important; opacity: .8; transform: rotate(-14deg); }
  html.ready .scrittura .tratto, html.ready .scrittura__cuore { stroke-dashoffset: 0 !important; animation: none !important; }
  .lume { color: var(--luce); }
  html.js .riempi__pieno, html.js .riempi__pieno > span { transform: none !important; }
  html.js .valore p { opacity: 1; transform: none; }
}

/* =========================================================================
   Pagine interne: eventi, contatti, socio, privacy, cookie, 404
   ========================================================================= */
.tavola--libera { min-height: 0; padding-block: clamp(72px, 12vh, 140px); }
/* la voce della pagina in cui sei: un filo sotto la parola, che si ritira quando passa il mouse e arriva il corsivo */
.voce[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px; background: currentColor; transform-origin: right; transition: transform .5s var(--molla), opacity .3s var(--morbido); }
.voce[aria-current="page"]:hover::after, .voce[aria-current="page"]:focus-visible::after { transform: scaleX(0); opacity: 0; }

/* testa della pagina: titolo grande in basso a sinistra */
.testa-pagina { min-height: 78svh; display: grid; align-content: end; gap: 24px; padding-bottom: clamp(40px, 8vh, 88px); }
.testa-pagina h1 { font-size: var(--t-1); max-width: 14ch; text-wrap: balance; }
.tavola--marca.testa-pagina h1 { color: var(--luce); }
.testa-pagina .testo { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); max-width: 48ch; opacity: .9; }

/* eventi: le due rassegne */
.rassegne { display: grid; gap: 40px; }
.rassegna h2 { font-family: var(--f-titolo); font-weight: 400; font-style: italic; font-size: var(--t-2); line-height: 1; letter-spacing: -.02em; margin-bottom: 14px; }
.rassegna .testo { font-size: 1rem; }
@media (min-width: 768px) { .rassegne { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 6vw, 96px); } }

/* eventi: il calendario */
.calendario__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(28px, 5vh, 48px); }
.calendario__testa h2 { font-size: var(--t-2); }
.eventi li { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.eventi li:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.evento { display: grid; grid-template-columns: minmax(84px, 9rem) 1fr; gap: 6px clamp(16px, 3vw, 48px); padding: clamp(20px, 3.4vh, 32px) 0; align-items: start; }
.evento__data { display: grid; gap: 6px; }
.evento__giorno { font-family: var(--f-titolo); font-size: clamp(3.4rem, 6vw, 6.4rem); line-height: .82; letter-spacing: -.04em; }
.evento__giorno--parola { font-style: italic; font-size: clamp(1.8rem, 2.6vw, 2.6rem); line-height: 1; }
.evento__mese { font-family: var(--f-titolo); font-style: italic; font-size: 1.15rem; line-height: 1.1; opacity: .8; }
.evento__corpo { display: grid; gap: 8px; align-content: start; }
.evento__tag { opacity: .65; }
.evento__titolo { font-family: var(--f-titolo); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.evento__testo { max-width: 60ch; font-size: 1rem; line-height: 1.7; opacity: .88; }
.evento__meta { opacity: .75; }
.evento[data-next] .evento__giorno, .evento[data-next] .evento__titolo { color: var(--luce); }
.evento[data-next] .evento__corpo::before { content: "Il prossimo"; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--punto); }
.tavola--chiaro .evento[data-next] .evento__giorno, .tavola--chiaro .evento[data-next] .evento__titolo { color: var(--marca); }
.tavola--chiaro .evento[data-next] .evento__corpo::before { color: var(--marca); }
[data-events="past"] .evento { grid-template-columns: minmax(84px, 9rem) 1fr; padding: 16px 0; }
[data-events="past"] .evento__giorno { font-size: clamp(2rem, 3vw, 3rem); }
[data-events="past"] .evento__titolo { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
[data-events="past"] .evento__corpo::before { display: none; }
[data-events="past"] .evento__giorno, [data-events="past"] .evento__titolo { color: inherit !important; }
@media (max-width: 600px) { .evento, [data-events="past"] .evento { grid-template-columns: 1fr; } .evento__data { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 12px; } }

/* contatti: tre righe grandi */
.contatti-pagina { display: grid; align-content: center; gap: clamp(32px, 6vh, 64px); }
.contatti-pagina h1 { font-size: var(--t-1); color: var(--luce); }
/* contatti: una sola schermata ferma, senza piede; le note legali stanno negli angoli come nella copertina.
   Titolo e recapiti si misurano anche sull'altezza della finestra, cosi' entrano sempre */
html:has(body.ferma), body.ferma { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.ferma .contatti-pagina { height: 100svh; min-height: 0; align-content: center; padding-bottom: calc(clamp(24px, 4vh, 40px) + 40px); gap: clamp(20px, 4.5vh, 64px); }
body.ferma .contatti-pagina h1 { font-size: clamp(2.6rem, min(7.2vw, 12svh), 8rem); }
body.ferma .recapito { padding-block: clamp(12px, 2.4vh, 28px); }
body.ferma .recapito__valore { font-size: clamp(1.5rem, min(4.4vw, 6svh), 4.6rem); }
.contatti__note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity .3s var(--morbido); }
.contatti__note a:hover { opacity: .7; }
.contatti__note a:active { opacity: .5; }
.contatti__note > :last-child { white-space: nowrap; }
.recapiti { display: grid; }
.recapito { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(120px, 14rem) 1fr auto; align-items: center; gap: 16px; padding: clamp(18px, 3vh, 28px) clamp(4px, 1vw, 12px); border-top: 1px solid color-mix(in srgb, var(--chiaro) 22%, transparent); color: var(--chiaro); transition: color .35s var(--morbido) .1s; -webkit-tap-highlight-color: transparent; }
.recapito:last-child { border-bottom: 1px solid color-mix(in srgb, var(--chiaro) 22%, transparent); }
.recapito::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--luce); transform: translateY(101%); transition: transform .7s var(--molla); }
.recapito:hover::before, .recapito:focus-visible::before { transform: none; }
.recapito:hover, .recapito:focus-visible { color: var(--marca); }
.recapito:active { opacity: .8; }
.recapito__valore { font-family: var(--f-titolo); font-size: clamp(1.8rem, 4.4vw, 4.6rem); line-height: 1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.recapito svg { width: 22px; height: 22px; transition: transform .6s var(--molla); }
.recapito:hover svg { transform: translate(4px, -4px); }
@media (max-width: 600px) { .recapito { grid-template-columns: 1fr auto; } .recapito .etichetta { grid-column: 1 / -1; } }

/* piede corto (per la pagina contatti e la 404) */
.piede--corto { min-height: 0; padding-top: clamp(40px, 6vh, 64px); gap: 28px; grid-template-rows: auto auto; }

/* socio: modulo e tessera */
.iscrizione { display: grid; gap: clamp(36px, 6vh, 64px); padding-top: calc(var(--testata) + clamp(40px, 8vh, 96px)); }
.iscrizione__intro { display: grid; gap: 22px; align-content: start; }
.iscrizione__intro h1 { font-size: var(--t-1); }
.iscrizione__intro h1 em, .grazie h1 em { color: var(--marca); }
.iscrizione__intro .testo { font-size: clamp(1.0625rem, 1.3vw, 1.2rem); }
.tessera-area { padding-block: 8px; }
.tessera-wrap { perspective: 900px; width: min(100%, 440px); }
.tessera { --rx: 0deg; --ry: 0deg; position: relative; aspect-ratio: 1.586; border-radius: 14px; padding: clamp(18px, 2.4vw, 26px); background: var(--lucido-marca); color: var(--chiaro); display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 24px 50px -22px rgba(0, 0, 0, .5); transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(-2deg); transition: transform .5s var(--morbido); }
.tessera__top { display: flex; justify-content: space-between; align-items: start; }
.tessera__top img { width: 96px; height: auto; }
.tessera__chip { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; border-radius: 999px; }
.tessera__mid { align-self: center; }
.tessera__label { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.tessera__nome { font-family: var(--f-titolo); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; color: var(--luce); margin-top: 4px; }
.tessera__foot { display: flex; justify-content: space-between; gap: 16px; }
.tessera__codice, .tessera__data { font-family: var(--f-titolo); font-size: 1.15rem; margin-top: 2px; }
.modulo { background: linear-gradient(165deg, color-mix(in srgb, var(--luce) 16%, var(--chiaro)) 0%, var(--velato) 55%, color-mix(in srgb, var(--marca) 10%, var(--chiaro)) 100%); color: var(--scuro); border: 1px solid color-mix(in srgb, var(--marca) 16%, transparent); border-radius: var(--raggio); padding: clamp(22px, 3.6vw, 44px); display: grid; gap: 26px; }
.modulo fieldset { border: 0; margin: 0; padding: 0; }
.modulo legend, .modulo .campo__label { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; padding: 0; display: block; }
.piani { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.piani legend { grid-column: 1 / -1; }
.piano { position: relative; cursor: pointer; }
.piano input { position: absolute; opacity: 0; pointer-events: none; }
.piano__box { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--scuro) 24%, transparent); border-radius: var(--raggio); transition: transform .5s var(--molla), background-color .3s var(--morbido), color .3s var(--morbido); }
.piano:hover .piano__box { transform: translateY(-2px); }
.piano input:checked + .piano__box { background: var(--lucido-marca); color: var(--chiaro); border-color: var(--marca); }
.piano input:focus-visible + .piano__box { outline: 2px solid var(--marca); outline-offset: 3px; }
.piano__nome { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.piano__prezzo { font-family: var(--f-titolo); font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: .9; letter-spacing: -.03em; }
.piano__prezzo small { font-size: .45em; font-style: italic; }
.piano__nota { font-size: .85rem; opacity: .75; }
.campi { display: grid; gap: 20px; }
@media (min-width: 640px) { .campi { grid-template-columns: 1fr 1fr; } .campo--pieno { grid-column: 1 / -1; } }
.campo input[type="text"], .campo input[type="email"] { width: 100%; font: inherit; font-size: 1.0625rem; color: inherit; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--scuro) 35%, transparent); border-radius: 0; padding: 8px 0 10px; transition: border-color .3s var(--morbido); }
.campo input:focus { outline: none; border-bottom-color: var(--marca); box-shadow: 0 1px 0 var(--marca); }
.campo__aiuto { font-size: .85rem; opacity: .7; margin-top: 8px; }
.campo__err { font-size: .85rem; color: #A3271B; margin-top: 6px; min-height: 0; }
.campo__err:empty { display: none; }
.spunta { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; line-height: 1.5; cursor: pointer; }
.spunta input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--marca); flex: none; }
.spunta a { text-decoration: underline; text-underline-offset: 3px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__invio { display: grid; gap: 14px; justify-items: start; }
.modulo .bottone { --testo: var(--scuro); --fondo: var(--chiaro); background: var(--scuro); color: var(--chiaro); min-height: 56px; padding: 0 28px; }
.modulo .bottone::before { background: var(--marca); }
.modulo .bottone[disabled] { opacity: .6; cursor: progress; }
.modulo__nota { font-size: .85rem; opacity: .75; display: flex; gap: 8px; align-items: center; }
.modulo__nota svg { width: 16px; height: 16px; flex: none; }
.modulo__avviso { padding: 12px 14px; border-radius: var(--raggio); background: color-mix(in srgb, var(--punto) 22%, transparent); font-size: .95rem; }
.modulo__stato:empty { display: none; }
.modulo__stato { font-size: .95rem; color: #A3271B; }
@media (min-width: 1024px) {
  /* la prima schermata sta tutta nella finestra: centrata nello spazio sotto la testata, larghezza massima sugli schermi grandi */
  .iscrizione {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 110px);
    align-content: center; align-items: center;
    padding-block: calc(var(--testata) + clamp(12px, 2.4vh, 40px)) clamp(12px, 2.4vh, 40px);
    padding-inline: max(var(--g), calc((100vw - 1400px) / 2));
  }
  .iscrizione__intro { gap: clamp(14px, 2.4vh, 22px); }
  .iscrizione .tessera-wrap { width: min(100%, 440px, 48svh); }
  .iscrizione .modulo { padding: clamp(22px, min(3.6vw, 4.4vh), 44px); gap: clamp(16px, 2.6vh, 26px); }
}

/* domande frequenti */
.faq { display: grid; gap: clamp(28px, 5vh, 48px); }
.faq h2 { font-size: var(--t-2); }
.tavola--marca.faq h2 { color: var(--luce); }
.faq__lista { display: grid; }
.faq details { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.faq details:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font-family: var(--f-titolo); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-testo); font-size: 1.4rem; font-weight: 400; transition: transform .5s var(--molla); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { opacity: .75; }
.faq details p { max-width: 62ch; padding-bottom: 22px; font-size: 1rem; line-height: 1.7; }
.faq details p a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .faq { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 110px); align-items: start; } }

/* grazie */
.grazie { display: grid; gap: clamp(36px, 6vh, 64px); align-content: center; }
.grazie h1 { font-size: var(--t-1); }
.grazie__azioni { display: flex; flex-wrap: wrap; gap: 14px; }
@media (min-width: 1024px) { .grazie { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 110px); align-items: center; } }

/* note legali */
.legale { display: grid; gap: clamp(32px, 5vh, 56px); padding-top: calc(var(--testata) + clamp(40px, 8vh, 96px)); }
.legale__testa { display: grid; gap: 18px; align-content: start; }
.legale__testa h1 { font-size: var(--t-1); }
.prosa { max-width: 68ch; font-size: 1.0625rem; line-height: 1.7; }
.prosa h2 { font-family: var(--f-titolo); font-weight: 400; font-size: var(--t-3); line-height: 1.1; letter-spacing: -.015em; margin: 2.2em 0 .6em; }
.prosa h2:first-of-type { margin-top: 1em; }
.prosa p, .prosa ul { margin: 0 0 1em; }
.prosa ul { padding-left: 1.2em; list-style: disc; }
.prosa li { margin-bottom: .4em; }
.prosa a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prosa b, .prosa strong { font-weight: 600; }
.prosa__meta { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .65; }
@media (min-width: 1024px) {
  .legale { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 110px); align-items: start; }
  .legale__testa { position: sticky; top: calc(var(--testata) + 32px); }
}

/* 404 */
.errore { display: grid; place-content: center; justify-items: center; text-align: center; gap: 24px; min-height: 100svh; } /* anche sul telefono: se no sotto il piede restava il fondo vuoto */
.errore__numero { font-family: var(--f-titolo); font-size: clamp(8rem, 30vw, 26rem); line-height: .8; letter-spacing: -.05em; color: var(--luce); }
.errore h1 { font-size: var(--t-2); }
.evento--da-annunciare .evento__titolo { font-style: italic; opacity: .6; }