/* Stili comuni a tutte le pagine del sito: token, header con WhatsApp, card di carta con le
   parole che si sviluppano, footer gigante con l'aurora. Quelli di una sola pagina stanno inline in lei. */
/* Font nel sito, non da Google (una connessione in meno e nessun IP a Google): ridotti ai pesi usati.
   L'hindi solo nel 600 (le gocce, le playlist) e solo quando una pagina ha del devanagari. Licenza OFL in fonts/ */
@font-face { font-family: Rubik; src: url(fonts/rubik.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: Eczar; src: url(fonts/eczar.woff2) format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: Eczar; src: url(fonts/eczar-hindi.woff2) format("woff2"); font-weight: 600; font-display: swap;
  unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
:root {
  --primary: #b83227;          /* sindoor: il solo primary color */
  --paper: #f6f3ee;
  --ink: #0b0b0c;
  --glass-line: rgb(255 255 255 / .16);
  --muted: rgb(246 243 238 / .66); /* testo secondario */
  --wa: #25d366;               /* verde WhatsApp, solo per il tasto WhatsApp */
  --gold: #ffdf98;             /* parole chiave: il giallo della stella del logo */
  /* Card: carta chiara con un velo di vetro, inchiostro scuro (si leggono meglio sul video) */
  --print: rgb(250 246 238 / .86);
  --print-ink: #1f1b16;
  --print-muted: rgb(31 27 22 / .7); /* sotto .7 il testo piccolo scende sotto il contrasto 4,5:1 */
  --print-line: rgb(31 27 22 / .14);
  --marker: rgb(255 196 72 / .5); /* evidenziatore delle parole chiave, il giallo della stella */
  /* la carta: luce dall'angolo in alto, grana leggera, il colore --print */
  --print-paper: radial-gradient(130% 90% at 0% 0%, rgb(255 255 255 / .5), transparent 60%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--print);
  --print-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 24px 60px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .25);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--ink); color: var(--paper); }
body { font: 400 17px/1.6 Rubik, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

header { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center;
  justify-content: space-between; /* i margini tengono conto del notch dei telefoni */
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 18px max(24px, env(safe-area-inset-left, 0px)); font: 500 13px/1 Rubik, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; }
header a { color: inherit; text-decoration: none; }
/* WhatsApp: l'unico elemento sempre visibile. Verde e con l'icona dei messaggi, si riconosce
   senza scritte (eccezione voluta al sindoor: qui conta che sia riconoscibile al volo) */
header .wa { position: relative; display: grid; place-items: center; width: 52px; height: 52px; margin-left: auto;
  border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 6px 20px rgb(0 0 0 / .35); }
header .wa svg { width: 30px; height: 30px; }
header .wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa);
  animation: call 6s ease-out infinite; } /* un'onda leggera ogni tanto, come uno squillo */
@keyframes call { 0%, 70% { scale: 1; opacity: 0; } 72% { opacity: .9; } 100% { scale: 1.7; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { header .wa::after { display: none; } }


h2, h3 { font-family: Eczar, Georgia, serif; font-weight: 600; line-height: 1.05; text-wrap: balance; }

/* Card come stampe fotografiche: carta chiara con un velo di vetro (prende il colore della scena),
   un filo sottile come un passe-partout, testo che si sviluppa come in camera oscura (solo nel reel).
   Sul bordo alto e su quello basso corre un filo di sindoor (come quello sul bordo dello stage nel reel)
   che al centro si gonfia in una goccia: in alto scende e porta la parola hindi (data-hi), in basso sale
   ed è il tasto (l'ultimo .go della card). Il sindoor sta in rilievo sulla carta: i fili sono ombre interne
   della card (seguono gli angoli), le gocce hanno un'ombra che ne segue la forma */
.card { position: relative; isolation: isolate; overflow: hidden; width: min(34rem, 100%); padding: 66px 34px 34px;
  border-radius: 14px; color: var(--print-ink);
  background: var(--print-paper);
  box-shadow: inset 0 2px 0 var(--primary), inset 0 -2px 0 var(--primary),
    inset 0 4px 3px -2px rgb(0 0 0 / .28), inset 0 -4px 3px -2px rgb(0 0 0 / .2),
    0 24px 60px rgb(0 0 0 / .45), 0 2px 6px rgb(0 0 0 / .25);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
/* Il passe-partout: un filo d'inchiostro appena visibile, a pochi millimetri dal bordo */
.card::before { content: ""; position: absolute; z-index: -1; inset: 9px; border-radius: 8px;
  border: 1px solid rgb(31 27 22 / .1); pointer-events: none; }
/* Le due gocce. Larghe quanto la parola o il tasto più i fianchi (--hip); i fianchi curvi sono SVG con
   il sindoor scritto dentro (#b83227, lo stesso di --primary: in un data URI il token non arriva),
   il centro è --primary. Con una maschera l'ombra sparirebbe, per questo sono immagini */
.card::after, .card > .go:last-child, .page h3 { --hip: 84px; width: max-content; padding: 0 var(--hip);
  border: 0; border-radius: 0; color: var(--paper); text-shadow: 0 -1px 0 rgb(0 0 0 / .25);
  background: var(--hip-l) left / var(--hip) 100% no-repeat, var(--hip-r) right / var(--hip) 100% no-repeat,
    linear-gradient(var(--primary), var(--primary)) center / calc(100% - 2 * var(--hip) + 2px) 100% no-repeat;
  --relief: drop-shadow(0 1.5px 1.5px rgb(0 0 0 / .32)) drop-shadow(0 0 1px rgb(0 0 0 / .18)); filter: var(--relief); }
/* In alto: la goccia scende dal filo e porta la parola in hindi */
.card::after { content: attr(data-hi); content: attr(data-hi) / ""; /* decorativa: il lettore di schermo non la legge */ position: absolute; top: 0; left: 50%; z-index: 1; translate: -50% 0;
  height: 40px; padding-top: 5px; display: grid; place-items: center; pointer-events: none;
  font: 600 1.6rem/1 Eczar, Georgia, serif; white-space: nowrap; /* il padding sopra la fa scendere: il devanagari sta alto, così la riga in testa è a metà */
  --hip-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 40' preserveAspectRatio='none'%3E%3Cpath fill='%23b83227' d='M0 0H84V40C42 40 42 2 0 2Z'/%3E%3C/svg%3E");
  --hip-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 40' preserveAspectRatio='none'%3E%3Cpath fill='%23b83227' d='M84 0H0V40C42 40 42 2 84 2Z'/%3E%3C/svg%3E"); }
.card figure { margin: -18px -18px 26px; border-radius: 6px; overflow: hidden; }
/* La foto in testa alla card parte subito sotto il filo, da un bordo all'altro: la goccia ne copre un
   pezzo al centro. Se lì c'è un viso, alzare l'inquadratura (object-position sull'img) o tenere il
   margine di carta (figure.inset) */
.card > figure:first-child:not(.inset) { position: relative; margin: -64px -34px 26px; border-radius: 0; }
.card > figure:first-child:not(.inset)::after { content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(rgb(0 0 0 / .35), transparent); pointer-events: none; } /* l'ombra del filo anche sulla foto */
.card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  scale: calc(1.16 - .16 * var(--q, 1)); } /* zoom lentissimo mentre la card passa */
/* Foto che non è ancora arrivata (rete lenta, 2026-11-06): al suo posto una stampa ancora da sviluppare, un tono caldo
   della carta con una luce che passa (.dev, la mette site.js); arrivata, si sviluppa in un attimo (.developed).
   Il tono resta sotto la foto, che è opaca, e senza JS è il solo segnaposto */
:is(.card, .page) img { background-color: #cdc2b1; }
img.dev { background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%) 0 0 / 300% 100% #cdc2b1;
  animation: sweep 1.8s linear infinite; }
@keyframes sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
img.developed { animation: develop .8s ease-out; }
@keyframes develop { from { filter: sepia(.7) brightness(1.3) contrast(.45); } }
@media (prefers-reduced-motion: reduce) { img.dev { animation: none; } }
.viewer img.dev { animation: none; } /* nel visore il segnaposto è la miniatura (site.js): ferma */
.card :is(h2, h3) { font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.08; margin-bottom: 18px; }
.card :is(p, .points, dl) { font-size: clamp(1.15rem, 1.4vw + .8rem, 1.3rem); line-height: 1.5; }
/* Domande e risposte (la card per chi organizza la visita): la domanda in grassetto, la risposta sotto */
.card dt { font-weight: 500; }
.card dd { margin: 2px 0 0; color: var(--print-muted); }
.card dd + dt { margin-top: 16px; }
.card dd .tags { margin-top: 8px; }
.card :is(p, dd) a { color: var(--print-ink); text-decoration: underline 1px; text-underline-offset: 3px; } /* un link nel testo, al posto di un secondo tasto */
.card p + p { margin-top: 12px; }
.card blockquote { font: 500 clamp(1.8rem, 3vw, 2.5rem)/1.22 Eczar, Georgia, serif; }
/* Le parole chiave in grassetto con un tratto di evidenziatore giallo, il giallo della stella */
.card em { font-style: normal; font-weight: 500;
  background: linear-gradient(var(--marker), var(--marker)) no-repeat 0 90% / 100% .5em; }
/* Tasto verso la pagina del sito che approfondisce la card */
.go { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: 20px; padding: 0 20px;
  border-radius: 999px; background: var(--primary); color: var(--paper); text-decoration: none; font-weight: 500;
  transition: background .3s; }
.go::after { content: "→"; transition: translate .3s; }
.go:hover { background: color-mix(in srgb, var(--primary) 85%, white); }
.go:hover::after { translate: 3px 0; }
.go.ghost { background: transparent; border: 1px solid var(--print-ink); color: var(--print-ink); } /* tasto secondario */
.go.ghost:hover { background: rgb(31 27 22 / .06); }
.card > .go { display: flex; width: fit-content; margin-inline: auto; } /* nelle card i tasti stanno al centro */
/* In basso: l'ultimo tasto della card è la goccia che sale dal filo (anche se è un .ghost) */
.card > .go:last-child, .page h3 { height: 44px; min-height: 0; margin: 26px auto -34px; padding-bottom: 2px; transition: filter .3s;
  --relief: drop-shadow(0 -1.5px 1.5px rgb(0 0 0 / .26)) drop-shadow(0 0 1px rgb(0 0 0 / .18)); /* qui la carta sta sopra: ombra anche in su */
  --hip-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 44' preserveAspectRatio='none'%3E%3Cpath fill='%23b83227' d='M0 44H84V0C42 0 42 42 0 42Z'/%3E%3C/svg%3E");
  --hip-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 44' preserveAspectRatio='none'%3E%3Cpath fill='%23b83227' d='M84 44H0V0C42 0 42 42 84 42Z'/%3E%3C/svg%3E"); }
.card > .go:last-child:hover, .page:hover h3 { filter: var(--relief) brightness(1.12); }
.card > .go:last-child:focus-visible { outline: none; text-decoration: underline 2px; text-underline-offset: 5px; }

/* Le citazioni di Umesh come un messaggio che ti ha mandato lui (deciso il 2026-10-29): l'avatar tondo e una
   bolla di chat della stessa carta, sempre a sinistra come un messaggio ricevuto. Niente fili, gocce né parola
   hindi: è un oggetto diverso dalle card e si deve vedere subito. Niente verde (il WhatsApp è uno per schermata).
   Resta una .card, così il reel e le pagine la fanno scorrere come le altre */
.card.quote { overflow: visible; display: flex; align-items: flex-end; gap: 12px; width: min(36rem, 100%); padding: 0;
  border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(.hold, .scene) > .card.quote { align-self: flex-start; }
.card.quote::before, .card.quote::after { display: none; }
.card .avatar { flex: none; width: 60px; aspect-ratio: 1; border-radius: 50%; scale: none;
  box-shadow: 0 0 0 2px var(--print), 0 10px 24px rgb(0 0 0 / .45); }
.bubble { padding: 18px 24px 24px; border-radius: 24px 24px 24px 6px; /* l'angolo verso l'avatar è la "coda" */
  background: var(--print-paper); box-shadow: var(--print-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.bubble cite { display: block; margin-bottom: 8px; font: 500 15px/1.2 Rubik, sans-serif; font-style: normal; color: var(--primary); }

/* Footer gigante "sotto il cofano": finito il video lo stage si alza e scopre il footer, fermo
   sotto di lui. Lo sfondo resta fisso (sticky) e le card di carta ci scorrono sopra.
   Il footer sale di uno schermo sotto lo stage (o la scena) e lì resta attaccato in cima (sticky) per uno schermo di
   scroll, quello in cui lei si alza; poi lo spazio dopo di lui (body::after) lo lascia scorrere. Lo fa il browser:
   prima lo spostava site.js a ogni scroll, sempre un fotogramma in ritardo, e il footer tremava (2026-10-29) */
.foot { position: sticky; top: 0; z-index: 0; isolation: isolate; color: var(--paper); background: var(--ink);
  margin-top: -100vh; margin-top: -100lvh; }
body::after { content: ""; display: block; height: 100vh; height: 100lvh; }
/* Aurora: i colori dei chakra del logo, sfumati e fermi (il movimento era così lento che non si vedeva); grana e vignetta sopra */
.aura { position: sticky; top: 0; z-index: -1; height: 100vh; height: 100lvh;
  margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; }
.aura i { position: absolute; width: 75vmax; aspect-ratio: 1; border-radius: 50%; opacity: .68;
  background: radial-gradient(closest-side, var(--c), transparent); }
.aura i:nth-child(1) { --c: #2f6fe0; left: -30vmax; top: -30vmax; }
.aura i:nth-child(2) { --c: #7fbf2e; right: -32vmax; top: -12vmax; }
.aura i:nth-child(3) { --c: #f2a531; left: 10vw; top: 30vh; opacity: .55; }
.aura i:nth-child(4) { --c: #b83227; right: -20vmax; bottom: -40vmax; opacity: .75; }
.aura::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgb(0 0 0 / .5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.foot-in { max-width: 1240px; min-height: 100vh; min-height: 100svh; margin-inline: auto;
  padding: 14vh 6vw 0; display: flex; flex-direction: column; gap: 72px; }
.foot h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); max-width: 16ch; }
.foot a { color: inherit; text-decoration: none; }
.pages { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 16px; }
/* Le pagine del sito come piccole stampe della stessa carta delle card: tutta la card è un grande tasto. La foto
   va da bordo a bordo, sotto due righe di carta e, sul filo di sindoor del bordo basso, la goccia che sale col
   nome della pagina (l'h3, come il tasto delle card grandi). Sparse come stampe su un tavolo, ognuna appena
   storta: al passaggio si raddrizzano e si sollevano */
.page { --print: rgb(241 234 221 / .94); /* avorio caldo, anche sul telefono: sul buio dell'aurora il grigio spegneva tutto */
  --thread: inset 0 -2px 0 var(--primary), inset 0 -4px 3px -2px rgb(0 0 0 / .2);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 12px; background: var(--print-paper); box-shadow: var(--thread), var(--print-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  rotate: var(--tilt, 0deg); transition: translate .4s, rotate .4s, box-shadow .4s; }
.page:nth-child(3n + 1) { --tilt: -.9deg; }
.page:nth-child(3n + 2) { --tilt: .7deg; }
.page:nth-child(3n) { --tilt: -.35deg; }
.page:last-child { --tilt: .3deg; } /* la più larga: storta di poco */
.foot .page { color: var(--print-ink); } /* più forte di `.foot a`, che eredita il chiaro */
.page figure { margin: 0; }
.page img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale .6s; }
.page div { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 0; text-align: center; }
.page p { flex: 1; font-size: 15px; line-height: 1.45; color: var(--print-muted); }
/* La goccia col nome della pagina: sale dal filo del bordo basso */
.page h3 { --hip: 22px; order: 1; height: 38px; margin: 14px auto 0; display: flex; align-items: center;
  font-size: 1.15rem; line-height: 1; white-space: nowrap; padding-top: 4px; } /* niente freccia: è già tutta la card il tasto */
.page:hover { translate: 0 -5px; rotate: 0deg; box-shadow: var(--thread), var(--print-shadow), 0 34px 70px rgb(0 0 0 / .35); }
.page:hover img { scale: 1.05; }
/* Donazioni: una ricevuta d'offerta dei templi, della carta delle card. Due pezzi uniti da una perforazione:
   la matrice (perché dare, col timbro दान) e i modi di dare (PayPal, Wise, UPI). Le tacche della perforazione sono
   buchi veri (maschera), ci passa l'aurora; l'ombra la dà il drop-shadow del contenitore, che segue la maschera */
.give { --print: rgb(241 234 221 / .94);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); color: var(--print-ink); rotate: -.35deg;
  filter: drop-shadow(0 22px 40px rgb(0 0 0 / .45)) drop-shadow(0 2px 4px rgb(0 0 0 / .25)); }
.give > * { --notch: radial-gradient(circle 11px at var(--nx) 0, #0000 98%, #000),
    radial-gradient(circle 11px at var(--nx) 100%, #0000 98%, #000);
  background: var(--print-paper); box-shadow: inset 0 -2px 0 var(--primary), inset 0 -4px 3px -2px rgb(0 0 0 / .2);
  -webkit-mask: var(--notch); mask: var(--notch); -webkit-mask-composite: source-in; mask-composite: intersect; }
.give .stub { --nx: 100%; position: relative; padding: 34px 36px 34px; border-radius: 12px 0 0 12px;
  border-right: 2px dashed rgb(31 27 22 / .22); display: flex; flex-direction: column; gap: 12px; }
.give .ways { --nx: 0; list-style: none; margin: 0; padding: 14px 20px; border-radius: 0 12px 12px 0;
  display: flex; flex-direction: column; justify-content: center; }
.give h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.05; max-width: 9ch; }
.give .stub p { font-size: 15px; line-height: 1.5; color: var(--print-muted); max-width: 30ch; }
.give .said { margin-top: auto; padding-top: 6px; }
.give .said em { font: 600 1.05rem/1.35 Eczar, Georgia, serif; color: var(--print-ink); }
/* Il timbro: inchiostro di sindoor, un po' storto e non del tutto carico, come uno vero */
.give .stamp { position: absolute; top: 18px; right: 22px; width: 96px; color: var(--primary); rotate: -14deg;
  opacity: .78; mix-blend-mode: multiply; font: 600 10px Eczar, Georgia, serif; fill: currentColor; }
/* I modi di dare: tre tessere in fila coi loghi (si riconoscono al volo più del nome), tutta la tessera è il link */
.give .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; }
.ways li { position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--print-line); }
.ways li:first-child { border-left: 0; }
.give .ways a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 10px; border-radius: 10px; color: var(--print-ink); text-align: center; transition: background .25s; }
.ways .logo { display: flex; align-items: center; gap: 7px; height: 34px; transition: scale .25s; }
.ways .logo img { height: 100%; width: auto; }
.ways .upi .logo img { height: 30px; }
.ways b { font: 700 1.45rem/1 Rubik, sans-serif; letter-spacing: -.02em; }
.ways .pp { color: #003087; font-style: italic; } .ways .pp i { color: #0070e0; }
.ways .wise { color: #163300; }
.ways small { font-size: 14px; line-height: 1.3; color: var(--print-muted); }
.ways a:hover { background: rgb(255 255 255 / .45); }
.ways a:hover .logo { scale: 1.06; }
/* UPI: l'ID si copia (da computer il link upi:// non apre nulla), sotto le tre tessere su tutta la riga: in una
   colonna non ci sta. Il li sparisce dalla griglia (contents), così link e tasto ne sono figli diretti */
.ways .upi { display: contents; }
.ways .upi > a { border-left: 1px solid var(--print-line); border-radius: 0 10px 10px 0; }
.ways .upi button { grid-column: 1 / -1; justify-self: center; margin: 2px 0 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 34px;
  padding: 0 5px 0 11px; border: 1px dashed rgb(184 50 39 / .55); border-radius: 999px; background: rgb(255 255 255 / .45);
  font: 500 13px Rubik, sans-serif; color: var(--print-ink); cursor: pointer; }
.ways .upi code { font: inherit; }
.ways .upi button span { padding: 3px 9px; border-radius: 999px; background: var(--primary); color: var(--paper); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; }
.ways .upi button:hover { background: rgb(255 255 255 / .75); }
/* Social: una fila di icone tonde, chiare sul buio */
.info .social { display: flex; flex-wrap: wrap; gap: 10px; }
.info .social a { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid var(--glass-line); background: rgb(255 255 255 / .06); transition: background .25s, color .25s, translate .25s; }
.info .social svg { width: 21px; height: 21px; fill: currentColor; }
.info .social a:hover { background: var(--paper); color: var(--ink); translate: 0 -2px; text-decoration: none; }
.info { display: grid; grid-template-columns: 1.4fr repeat(2, 1fr); gap: 32px; font-size: 15px; }
.info h4 { font: 500 12px/1 Rubik, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px; }
.info ul { list-style: none; padding: 0; display: grid; gap: 2px; }
.info li a { display: inline-block; padding-block: 5px; } /* righe alte ~34px: col dito non si sbaglia link */
.info li a:hover, .info address a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.info address { font-style: normal; line-height: 1.5; color: var(--muted); }
.info .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font: 600 1.25rem/1.1 Eczar, Georgia, serif; }
.info .brand img { width: 48px; height: 48px; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
  background: var(--primary); color: var(--paper) !important; font-weight: 500; margin-bottom: 8px; }
/* testo scuro sul verde: il bianco era 1,98:1, sotto la soglia di leggibilità */
.btn.wa-btn { gap: 8px; padding-left: 16px; background: var(--wa); color: #0b141a !important; }
.btn.wa-btn svg { width: 24px; height: 24px; }
.wordmark { font: 600 min(12.6vw, 9.4rem)/.86 Eczar, Georgia, serif; letter-spacing: -.02em;
  margin-top: auto; padding-top: 24px; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 22px 0 28px;
  padding-bottom: max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--glass-line);
  font-size: 13px; color: var(--muted); }

/* ── Pagine interne ─────────────────────────────────────────────
   Header fisso: il logo riporta alla home; si ritira quando arriva il footer (che ha il suo WhatsApp) */
body > header { position: fixed; transition: translate .5s, opacity .5s; }
body > header.away { translate: 0 -120%; opacity: 0; }
header .home { display: flex; align-items: center; gap: 12px; }
header .home img { width: 44px; height: 44px; filter: drop-shadow(0 2px 10px rgb(0 0 0 / .6)); }

/* Pagine interne: una sola scena, il micro video in loop fermo sullo sfondo (sticky) per tutta la
   pagina e le card di carta che ci scorrono sopra, come nel reel ma senza scrub; in fondo la scena si alza e scopre il footer */
.scene { position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; padding: 0 6vw;
  box-shadow: 0 30px 80px rgb(0 0 0 / .7); } /* sta sopra il footer: quando si alza lo scopre, come lo stage della home */
.scene::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--primary); } /* il filo sul bordo */
/* Lo sfondo si sovrappone col margine dell'apertura, non col suo: così resta fermo fino al bordo della scena e sale con lei.
   Alto 100lvh, come lo stage della home: quando la barra del browser del telefono si ritira non resta una striscia vuota */
.scene > .bg { position: sticky; top: 0; z-index: -1; height: 100vh; height: 100lvh; overflow: hidden; margin: 0 -6vw; }
.scene > .bg + * { margin-top: -100vh; margin-top: -100lvh; }
.scene > :last-child { margin-bottom: 45vh; }
.scene > .bg :is(img, video) { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene > .bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .7)); }
.scene > .card { margin-top: 45vh; }
.scene > .card:nth-of-type(even) { align-self: flex-end; }

/* Apertura della pagina: titolo grande in basso sulla foto, che entra salendo */
.intro { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 14px; padding-bottom: 14vh; text-shadow: 0 2px 24px rgb(0 0 0 / .5); }
.intro h1 { font: 600 clamp(3.2rem, 9vw, 7rem)/.95 Eczar, Georgia, serif; text-wrap: balance; }
.intro .eyebrow { font: 500 13px/1 Rubik, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.intro p:last-child { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.intro > * { animation: rise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.intro > :nth-child(2) { animation-delay: .15s; }
.intro > :nth-child(3) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; translate: 0 30px; } }
/* il titolo sale senza sfumare: è il contenuto più grande della pagina, e da trasparente il browser non lo conta come disegnato */
.intro h1 { animation-name: rise-in; }
@keyframes rise-in { from { translate: 0 30px; } }
@media (prefers-reduced-motion: reduce) { .intro > *, .scene > .bg :is(img, video) { animation: none; } }

/* Tasto pausa del video di sfondo (lo crea site.js): piccolo, scuro e discreto in basso a destra, dove lo mettono
   i siti che aprono con un video; si ritira con l'header quando arriva il footer */
.motion { position: fixed; z-index: 3; right: max(24px, env(safe-area-inset-right, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(246 243 238 / .35); cursor: pointer; transition: translate .5s, opacity .5s, border-color .3s;
  background: rgb(11 11 12 / .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h3v12H8zM13 6h3v12h-3z' fill='%23f6f3ee'/%3E%3C/svg%3E") center / 20px no-repeat; }
.motion.paused { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6v12l9-6z' fill='%23f6f3ee'/%3E%3C/svg%3E"); }
.motion:hover { border-color: var(--paper); }
.motion.away { translate: 0 150%; opacity: 0; pointer-events: none; }

/* Video YouTube: si carica solo al clic (foto + tasto play), poi diventa il player */
.yt { position: relative; display: block; }
.yt img { aspect-ratio: 16 / 9; scale: none; } /* la copertina originale di YouTube, intera: ha il titolo vicino ai bordi */
.yt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; translate: -50% -50%;
  border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23f6f3ee'/%3E%3C/svg%3E") center / 34px no-repeat;
  box-shadow: 0 8px 30px rgb(0 0 0 / .45); transition: scale .3s; }
.yt:hover::after { scale: 1.08; }
.card iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* Elenco puntato dentro le card: righe brevi con un filo sottile a sinistra; si accende come il testo */
.points { list-style: none; padding: 0 0 0 16px; margin-top: 12px; display: grid; gap: 6px;
  border-left: 1px solid color-mix(in srgb, var(--primary) 70%, transparent); }
.card p + .points, .points + p { margin-top: 12px; }

/* Piccola galleria dentro una card: foto quadrate affiancate */
.card .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.card .gallery img { aspect-ratio: 1; border-radius: 10px; scale: none; }

/* Album di foto vere (dal 2026-11-02): nella card si vedono la copertina e quattro miniature, sull'ultima "+N".
   Ogni foto è un link alla foto grande: al tocco site.js apre il visore a schermo intero (senza JS, la foto da sola).
   Nella card una foto è un francobollo: le foto vere, con le facce e i gesti, si guardano nel visore */
.album { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.album a { position: relative; display: block; overflow: hidden; }
.album a:first-child { grid-column: 1 / -1; }
.album a:nth-child(n + 6) { display: none; }
/* Con meno di cinque foto le miniature riempiono la riga: 4 foto, tre miniature; 3 foto, due */
.album:has(> a:nth-child(4):last-child) { grid-template-columns: repeat(3, 1fr); }
.album:has(> a:nth-child(3):last-child) { grid-template-columns: repeat(2, 1fr); }
.album a:not(:first-child) img { aspect-ratio: 1; scale: none; transition: scale .6s; }
.album a:not(:first-child):hover img { scale: 1.06; }
/* Sulla copertina il segno "apri grande", in basso a destra */
.album a:first-child::after { content: ""; position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px;
  border-radius: 50%; box-shadow: 0 4px 14px rgb(0 0 0 / .35);
  background: rgb(20 16 12 / .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3ee' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 20px no-repeat; }
.album a[data-more]::after { content: attr(data-more); position: absolute; inset: 0; display: grid; place-items: center;
  background: rgb(20 16 12 / .55); color: var(--paper); font: 600 1.5rem/1 Eczar, Georgia, serif; }

/* Il visore (lo crea site.js): nero e a schermo intero, una foto per volta intera, si sfoglia col dito (scroll-snap,
   lo fa il browser) o con frecce e tastiera; sotto la didascalia, in alto il conteggio e la chiusura */
.viewer { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: var(--paper); }
.viewer::backdrop { background: #000; }
html:has(.viewer[open]) { overflow: hidden; } /* la pagina sotto non scorre */
.viewer ul { list-style: none; padding: 0; display: flex; height: 100%; overflow-x: auto; overscroll-behavior: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; }
.viewer ul::-webkit-scrollbar { display: none; }
.viewer li { flex: none; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; grid-template-rows: 1fr auto; padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
.viewer li img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.viewer li p { max-width: 40rem; margin-inline: auto; padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: 15px; line-height: 1.45; color: var(--muted); }
.viewer .count { position: absolute; left: max(20px, env(safe-area-inset-left, 0px)); top: calc(22px + env(safe-area-inset-top, 0px));
  font: 500 13px/1 Rubik, sans-serif; letter-spacing: .14em; color: var(--muted); }
.viewer button { position: absolute; z-index: 1; width: 48px; height: 48px; border: 1px solid rgb(246 243 238 / .3);
  border-radius: 50%; background: rgb(11 11 12 / .5) center / 22px no-repeat; cursor: pointer; transition: border-color .3s, opacity .3s; }
.viewer button:hover { border-color: var(--paper); }
.viewer button:disabled { opacity: 0; pointer-events: none; }
.viewer .close { right: max(12px, env(safe-area-inset-right, 0px)); top: calc(8px + env(safe-area-inset-top, 0px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23f6f3ee' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.viewer :is(.prev, .next) { top: 50%; translate: 0 -50%; }
.viewer .prev { left: max(16px, env(safe-area-inset-left, 0px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E"); }
.viewer .next { right: max(16px, env(safe-area-inset-right, 0px));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E"); }
@media (hover: none) { .viewer :is(.prev, .next) { display: none; } } /* sul telefono si sfoglia col dito */

/* Etichette (es. le materie insegnate) */
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--print-line);
  background: rgb(31 27 22 / .04); font-size: 15px; }
/* Due tasti affiancati (vanno a capo su schermi stretti) */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.actions .go { margin-top: 0; }
.go.down::after { content: "↓"; }
.go.down:hover::after { translate: 0 3px; }

@media (max-width: 767px) {
  /* Sul telefono niente vetro (deciso con l'utente il 2026-10-26): la sfocatura sopra un video che si muove si
     ricalcola a ogni fotogramma. Carta piena, del tono che il vetro prendeva sulle scene scure */
  :root { --print: rgb(224 218 207); }
  .card, .page, .bubble { -webkit-backdrop-filter: none; backdrop-filter: none; }
  header { padding: calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
  header .brand { display: none; }
  .card { padding: 58px 24px 26px; }
  .card figure { margin: -12px -12px 22px; }
  .card::before { inset: 6px; border-radius: 9px; }
  .card::after, .card > .go:last-child { --hip: 60px; } /* fianchi più corti: il tasto più lungo sta nella card */
  .card::after { height: 36px; font-size: 1.4rem; }
  .card > .go:last-child { margin-bottom: -26px; }
  .card > figure:first-child:not(.inset) { margin: -56px -24px 22px; }
  .card .avatar { width: 48px; }
  .bubble { padding: 14px 20px 20px; }
  .scene { padding: 0 16px; }
  .scene > :last-child { margin-bottom: 35vh; }
  .scene > .bg { margin-inline: -16px; }
  .scene > .card { margin-top: 35vh; }
  .scene > .card:nth-of-type(even) { align-self: auto; }
  header .home img { width: 40px; height: 40px; }
  .motion { right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .foot-in { padding: 10vh 16px 0; gap: 56px; }
  .pages { grid-template-columns: 1fr 1fr; gap: 12px; }
  .page:last-child { grid-column: 1 / -1; }
  .page div { padding: 10px 10px 0; }
  .page h3 { height: 36px; margin-top: 10px; font-size: 1.1rem; }
  .page p { font-size: 13px; }
  .give { grid-template-columns: 1fr; rotate: 0deg; }
  .give .stub { --notch: radial-gradient(circle 11px at 0 100%, #0000 98%, #000), radial-gradient(circle 11px at 100% 100%, #0000 98%, #000);
    padding: 28px 22px 26px; border-radius: 12px 12px 0 0; border-right: 0; border-bottom: 2px dashed rgb(31 27 22 / .22); box-shadow: none; }
  .give .ways { --notch: radial-gradient(circle 11px at 0 0, #0000 98%, #000), radial-gradient(circle 11px at 100% 0, #0000 98%, #000);
    padding: 4px 10px 8px; border-radius: 0 0 12px 12px; }
  .give .stamp { width: 80px; top: 14px; right: 14px; }
  .give .ways a { padding: 18px 4px 16px; gap: 8px; }
  .ways .logo { height: 26px; gap: 5px; } .ways .upi .logo img { height: 22px; }
  .ways b { font-size: 1.1rem; }
  .ways small { font-size: 12.5px; }
  .info { grid-template-columns: 1fr; gap: 32px; } /* marchio, contatti e social uno sotto l'altro: l'email è lunga, le icone stanno in fila */
}
@media (max-width: 360px) { .card::after, .card > .go:last-child { --hip: 36px; } .card > .go:last-child { font-size: 15px; } } /* telefoni piccoli */