@font-face{font-family:"Cormorant";src:url("fonts/cormorant-italic.woff2") format("woff2");font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost.woff2") format("woff2");font-weight:100 900;font-display:swap}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fcfcfc;color:#222;font-family:"Jost",Futura,"Century Gothic","Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.testata,main,footer{max-width:1240px;margin:0 auto;padding-left:48px;padding-right:48px}
.testata{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-top:56px;padding-bottom:56px}
.nome{font-family:"Copperplate Gothic Bold",Copperplate,"Copperplate Gothic","Arial Black",sans-serif;font-size:48px;font-weight:700;letter-spacing:2px;text-transform:uppercase;line-height:1}
.sottotitolo{margin:6px 0 0;font-size:13px;color:#999;letter-spacing:.5px}
nav a{font-size:13px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#999;margin-left:28px;transition:color .15s}
nav a:hover,nav a.attiva{color:#111}
nav{display:flex;flex-wrap:wrap;align-items:center;row-gap:10px}
.tema{margin-left:28px;padding-left:28px;border-left:1px solid #ddd;display:inline-flex;gap:16px}
.tema button{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:13px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#999;transition:color .15s}
.tema button:hover,.tema button[aria-pressed="true"]{color:#111}
.griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px}
.cella{display:block;text-align:center}
.quadro{display:block;position:relative;aspect-ratio:1/1;overflow:hidden;background:#f0f0ee}
.quadro img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
/* Pagine delle serie: foto nelle proporzioni originali, in righe da tre, lette da sinistra a destra */
.muro{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.muro .foto{display:block;margin:0;background:#f0f0ee}
.muro.a-colonne{display:flex;align-items:flex-start;gap:24px}
.muro.a-colonne .colonna{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:24px}
.muro img{width:100%;height:auto;transition:opacity .25s}
.muro .foto:hover img{opacity:.82}
.quadro .seconda{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.cella:focus-visible .seconda{opacity:1}
@media (hover:hover){.cella:hover .seconda{opacity:1}}
.etichetta{display:block;padding:14px 0 6px;font-size:15px;letter-spacing:1.5px;text-transform:uppercase}
.intro{max-width:680px;margin:0 0 40px}
h1{font-size:24px;font-weight:300;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 12px;line-height:1.3}
.intro p,.testo p{color:#575757;margin:0 0 1em}
.anno{font-size:13px;letter-spacing:1px;color:#999 !important}
.testo{max-width:680px}
.testo a{border-bottom:1px solid #bbb}
.testo a:hover{border-color:#111}
.foto404{width:100%;max-width:420px;height:auto;margin:0 0 32px}
.ritratto{width:100%;max-width:420px;margin:0 0 32px}
.frase{margin:64px auto 16px;max-width:520px;text-align:center;font-family:"Cormorant","Cormorant Garamond",Didot,"Bodoni 72",Baskerville,Georgia,serif;font-style:italic;font-weight:500;font-size:17px;line-height:1.5;color:#333;text-wrap:balance}
.altre{display:flex;justify-content:space-between;gap:24px;margin-top:56px;padding-top:24px;border-top:1px solid #e6e6e6}
.altre a{margin:0}
.vuoto{color:#999}
footer{padding-top:72px;padding-bottom:48px;font-size:12px;letter-spacing:1px;color:#999;text-transform:uppercase}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px}
.luna{display:inline-flex;align-items:center;gap:8px}
.luna svg{display:block}
.altrove{transition:color .15s}
.altrove:hover{color:#111}
.visore .annuncio{position:absolute;top:18px;left:70px;right:70px;margin:0;text-align:center;font-family:"Cormorant","Cormorant Garamond",Didot,Baskerville,Georgia,serif;font-style:italic;font-weight:500;font-size:22px;line-height:1.2;color:#333}
.visore .annuncio:empty{display:none}
.visore .premio{position:absolute;top:18px;left:70px;right:70px;margin:0;text-align:center;font-family:"Cormorant","Cormorant Garamond",Didot,Baskerville,Georgia,serif;font-style:italic;font-weight:500;font-size:22px;line-height:1.2;color:#333;opacity:0;transition:opacity 2.5s ease;pointer-events:none}
.visore .premio.visibile{opacity:1}
.visore.solo .prima,.visore.solo .dopo{display:none}
.visore.messaggio .dida{position:static;padding:0 24px;font-family:"Cormorant","Cormorant Garamond",Didot,Baskerville,Georgia,serif;font-style:italic;font-weight:500;font-size:24px;letter-spacing:0;text-transform:none}
a:focus-visible,button:focus-visible{outline:2px solid #111;outline-offset:3px}

/* Visore a tutto schermo */
.visore{position:fixed;inset:0;z-index:10;background:#fcfcfc;display:none;align-items:center;justify-content:center}
.visore.aperto{display:flex}
.visore img{max-width:calc(100vw - 140px);max-height:calc(100vh - 120px);object-fit:contain}
.visore button{position:absolute;background:none;border:0;cursor:pointer;color:#111;font:300 34px/1 "Jost",Futura,Arial,sans-serif;padding:16px}
.visore .chiudi{top:12px;right:16px}
.visore .prima{left:12px;top:50%;transform:translateY(-50%)}
.visore .dopo{right:12px;top:50%;transform:translateY(-50%)}
.visore .dida{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:#575757}

@media (max-width:900px){
  .testata,main,footer{padding-left:24px;padding-right:24px}
  .testata{flex-direction:column;align-items:flex-start;gap:20px;padding-top:36px;padding-bottom:36px}
  nav a{margin:0 22px 0 0}
  .tema{margin-left:0;padding-left:0;border-left:0;flex-basis:100%}
  .nome{font-size:36px}
  .frase{font-size:16px;margin-top:48px}
  .griglia{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .muro{grid-template-columns:repeat(2,1fr);gap:16px}
  .muro.a-colonne,.muro.a-colonne .colonna{gap:16px}
  .visore img{max-width:100vw;max-height:calc(100vh - 210px);max-height:calc(100svh - 210px)}
  .visore .prima,.visore .dopo{top:auto;bottom:6px;transform:none}
  /* sul telefono il titolo sta sopra la riga delle icone, cosi' i titoli lunghi non si accavallano */
  .visore .dida{bottom:78px;padding:0 20px;line-height:1.4}
}
@media (max-width:520px){
  .griglia{grid-template-columns:1fr}
  .muro{grid-template-columns:1fr}
  .altre{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Versione scura */
html{color-scheme:light}
html[data-tema="scura"]{color-scheme:dark}
html[data-tema="scura"] body{background:#111;color:#ececec}
html[data-tema="scura"] nav a:hover,html[data-tema="scura"] nav a.attiva,
html[data-tema="scura"] .tema button:hover,html[data-tema="scura"] .tema button[aria-pressed="true"]{color:#fff}
html[data-tema="scura"] .tema{border-color:#333}
html[data-tema="scura"] .quadro,html[data-tema="scura"] .muro .foto{background:#1c1c1c}
html[data-tema="scura"] .intro p,html[data-tema="scura"] .testo p{color:#b8b8b8}
html[data-tema="scura"] .testo a{border-color:#555}
html[data-tema="scura"] .testo a:hover{border-color:#fff}
html[data-tema="scura"] .frase{color:#d8d8d8}
html[data-tema="scura"] .altre{border-color:#2a2a2a}
html[data-tema="scura"] a:focus-visible,html[data-tema="scura"] button:focus-visible{outline-color:#fff}
html[data-tema="scura"] .visore{background:#111}
html[data-tema="scura"] .visore button{color:#ececec}
html[data-tema="scura"] .visore .dida{color:#b8b8b8}
body{transition:background-color .3s,color .3s}
html[data-tema="scura"] .altrove:hover{color:#fff}
html[data-tema="scura"] .visore .annuncio{color:#d8d8d8}
html[data-tema="scura"] .visore .premio{color:#d8d8d8}
@media (max-width:900px){.visore .premio,.visore .annuncio{font-size:18px;left:20px;right:64px}}

/* Inattivita' */
.riposo{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(12,12,12,.86);opacity:0;pointer-events:none;transition:opacity .6s ease}
.riposo.attivo{opacity:1;transition:opacity 3.5s ease}
.riposo p{margin:0;max-width:640px;text-align:center;font-family:"Cormorant","Cormorant Garamond",Didot,Baskerville,Georgia,serif;font-style:italic;font-weight:500;font-size:30px;line-height:1.3;color:#ececec;text-wrap:balance}
@media (max-width:900px){.riposo p{font-size:24px}}

/* Lente d'ingrandimento nel visore: icona rossa sotto la foto, a destra */
.visore .lente-btn{top:auto;bottom:33px;right:0;padding:6px;font-size:0;line-height:0;color:#d0021b;opacity:0;pointer-events:none;transition:opacity .7s ease}
.visore .lente-btn.visibile{opacity:1;pointer-events:auto}
.visore .lente-btn svg circle{transition:fill .15s}
.visore .lente-btn[aria-pressed="true"] svg circle{fill:currentColor}
html[data-tema="scura"] .visore .lente-btn{color:#ff4d5e}
.visore.messaggio .lente-btn{display:none}
.visore.con-lente img{cursor:none}
.lente{position:fixed;display:none;z-index:11;width:200px;height:200px;border-radius:50%;border:1px solid rgba(255,255,255,.9);box-shadow:0 3px 22px rgba(0,0,0,.4);background-color:#fcfcfc;background-repeat:no-repeat;pointer-events:none}
@media (max-width:900px){.lente{width:150px;height:150px}}

/* Ritratto diverso per versione chiara e scura */
.solo-scura{display:none}
html[data-tema="scura"] .solo-scura{display:block}
html[data-tema="scura"] .solo-chiara{display:none}

/* Cartolina: icona sotto la foto, a sinistra */
.visore .cartolina-btn{top:auto;bottom:33px;left:0;padding:6px;font-size:0;line-height:0;color:#111;opacity:.75;transition:opacity .15s}
.visore .cartolina-btn:hover{opacity:1}
html[data-tema="scura"] .visore .cartolina-btn{color:#ececec}
.visore.messaggio .cartolina-btn{display:none}

/* Invito alla lente: la foto si offusca e al centro compare la scritta */
.visore img{transition:filter .7s ease}
.visore.invitando img{filter:blur(7px) brightness(.9)}
.invito{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:13px 22px;background:rgba(252,252,252,.94);color:#111;font:400 14px/1 "Jost",Futura,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .7s ease}
.visore.invitando .invito{opacity:1}
html[data-tema="scura"] .invito{background:rgba(17,17,17,.9);color:#ececec}
.invito{color:#d0021b}
html[data-tema="scura"] .invito{color:#ff4d5e}

/* Condividi: icona accanto alla cartolina, e piccolo avviso "Link copiato" */
.visore .condividi-btn{top:auto;bottom:33px;left:32px;padding:6px;font-size:0;line-height:0;color:#111;opacity:.75;transition:opacity .15s}
.visore .condividi-btn:hover{opacity:1}
html[data-tema="scura"] .visore .condividi-btn{color:#ececec}
.visore.messaggio .condividi-btn,.visore.senza-link .condividi-btn{display:none}
.visore .avviso{position:absolute;bottom:66px;left:0;margin:0;padding:6px 10px;background:#111;color:#fcfcfc;font:400 11px/1 "Jost",Futura,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.visore .avviso.visibile{opacity:1}
html[data-tema="scura"] .visore .avviso{background:#ececec;color:#111}


/* ---------- Parole belle ---------- */
.parole-intro{margin:0 auto;text-align:center}
.parole{max-width:900px;margin:48px auto 140px;text-align:center;font-family:"Cormorant","Cormorant Garamond",Didot,Baskerville,Georgia,serif;font-weight:500;font-size:19px;line-height:2.6;color:#222}
.parola,.parole .punto{display:inline-block;transition:transform .55s cubic-bezier(.34,1.56,.64,1),color .25s ease}
.parola{position:relative;padding:0 3px;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.parola.su{z-index:2;color:#000}
.parola:focus-visible{outline:none;color:#000;text-decoration:underline;text-underline-offset:4px}
.parola.attiva{color:#d0021b}
.punto{color:#bbb;margin:0 7px;font-size:14px;vertical-align:middle}
.definizione{position:fixed;left:50%;bottom:24px;z-index:12;width:min(640px,92vw);padding:24px 30px 22px;background:#fcfcfc;border:1px solid #e4e4e4;box-shadow:0 10px 40px rgba(0,0,0,.08);text-align:left;transform:translate(-50%,calc(100% + 40px));visibility:hidden;transition:transform .4s cubic-bezier(.3,.7,.2,1),visibility 0s .4s}
.definizione.aperta{transform:translate(-50%,0);visibility:visible;transition:transform .4s cubic-bezier(.3,.7,.2,1),visibility 0s}
.def-parola{margin:0 0 6px;font-family:"Cormorant","Cormorant Garamond",Didot,Baskerville,Georgia,serif;font-style:italic;font-weight:500;font-size:32px;line-height:1.15;color:#111}
.def-testo{margin:0 0 14px;font-size:16px;line-height:1.6;color:#444}
.def-link{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#999;border-bottom:1px solid #ccc}
.def-link:hover{color:#111;border-color:#111}
.def-chiudi{position:absolute;top:8px;right:10px;padding:8px;background:none;border:0;cursor:pointer;font:300 26px/1 "Jost",Futura,Arial,sans-serif;color:#555}
html[data-tema="scura"] .parole{color:#ececec}
html[data-tema="scura"] .parola.su{color:#fff}
html[data-tema="scura"] .parola.attiva{color:#ff4d5e}
html[data-tema="scura"] .punto{color:#555}
html[data-tema="scura"] .definizione{background:#161616;border-color:#2a2a2a;box-shadow:0 10px 40px rgba(0,0,0,.5)}
html[data-tema="scura"] .def-parola{color:#fff}
html[data-tema="scura"] .def-testo{color:#bbb}
html[data-tema="scura"] .def-link:hover{color:#fff;border-color:#fff}
html[data-tema="scura"] .def-chiudi{color:#bbb}
@media (max-width:900px){.parole{margin-top:36px}.punto{margin:0 5px}.definizione{bottom:12px;padding:20px 22px 18px}.def-parola{font-size:28px}}

/* Il vezzo: un pallino al centro di ogni O del titolo */
.nome .o{position:relative;display:inline-block}
.nome .o::after{content:"";position:absolute;left:calc(50% - 1px);top:var(--o-y,52%);width:.1em;height:.1em;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}

/* Arpa: la foto da suonare in fondo alla galleria */
.arpa{max-width:520px;margin:88px auto 0;text-align:center}
.coro-prova,.pioggia-prova,.cromia-prova,.strappo-prova,.vento-prova,.colora-prova,.stencil-prova,.sfoca-prova,.parla-prova{padding:10px 22px;background:none;border:1px solid currentColor;color:#111;font:400 12px/1 "Jost",Futura,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.coro-prova:hover,.pioggia-prova:hover,.cromia-prova:hover,.strappo-prova:hover,.vento-prova:hover,.colora-prova:hover,.stencil-prova:hover,.sfoca-prova:hover,.parla-prova:hover{background:#111;color:#fcfcfc}
.coro.attivo .coro-prova,.pioggia.attiva .pioggia-prova,.strappo.attiva .strappo-prova,.cromia.attiva .cromia-prova,.vento.attiva .vento-prova,.colora.attiva .colora-prova,.stencil.attiva .stencil-prova,.sfoca.attiva .sfoca-prova,.parla.attiva .parla-prova{color:#d0021b;border-color:#d0021b}
.coro.attivo .coro-prova:hover,.pioggia.attiva .pioggia-prova:hover,.strappo.attiva .strappo-prova:hover,.cromia.attiva .cromia-prova:hover,.vento.attiva .vento-prova:hover,.colora.attiva .colora-prova:hover,.stencil.attiva .stencil-prova:hover,.sfoca.attiva .sfoca-prova:hover,.parla.attiva .parla-prova:hover{background:#d0021b;color:#fff}
html[data-tema="scura"] .coro-prova,html[data-tema="scura"] .pioggia-prova,html[data-tema="scura"] .cromia-prova,html[data-tema="scura"] .strappo-prova,html[data-tema="scura"] .vento-prova,html[data-tema="scura"] .colora-prova,html[data-tema="scura"] .stencil-prova,html[data-tema="scura"] .sfoca-prova,html[data-tema="scura"] .parla-prova{color:#ececec}
html[data-tema="scura"] .coro-prova:hover,html[data-tema="scura"] .pioggia-prova:hover,html[data-tema="scura"] .cromia-prova:hover,html[data-tema="scura"] .strappo-prova:hover,html[data-tema="scura"] .vento-prova:hover,html[data-tema="scura"] .colora-prova:hover,html[data-tema="scura"] .stencil-prova:hover,html[data-tema="scura"] .sfoca-prova:hover,html[data-tema="scura"] .parla-prova:hover{background:#ececec;color:#111}

/* Comandi dei giochi sonori: icona dell'audio + Try me */
.gioco-comandi{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:18px}
.audio-icona{display:inline-flex;color:#999}
/* Coro: i sassi che cantano */
.coro{max-width:620px;margin:88px auto 0;text-align:center}
.coro-tela{position:relative}
.coro-tela img{display:block;width:100%;height:auto}
.coro-tela svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.coro-zona{fill:transparent;stroke:none}
.coro.attivo .coro-tela svg{pointer-events:auto}
.coro.attivo .coro-zona{cursor:pointer}
.coro-bocca{fill:#fff;stroke:none}

.gioco-etichetta{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 22px;max-width:420px;font:400 11px/1 "Jost",Futura,Arial,sans-serif;letter-spacing:4px;text-transform:uppercase;color:#888}
.gioco-etichetta::before,.gioco-etichetta::after{content:"";flex:1;height:1px;background:currentColor;opacity:.45}
html[data-tema="scura"] .gioco-etichetta{color:#9a9a9a}
.pioggia{max-width:620px;margin:88px auto 0;text-align:center}
.pioggia-tela{position:relative}
.pioggia-tela img{display:block;width:100%;height:auto}
.pioggia-tela canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pioggia.attiva .pioggia-tela canvas{pointer-events:auto;cursor:pointer;touch-action:none}
.cromia{max-width:520px;margin:88px auto 0;text-align:center}
.cromia-tela{position:relative}
.cromia-tela img{display:block;width:100%;height:auto}
.cromia-tela canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
.cromia-tela canvas.pronta{opacity:1}
.cromia-tela.sopra{cursor:pointer}
.strappo{max-width:520px;margin:88px auto 0;text-align:center}
.strappo-tela{position:relative}
.strappo-tela img{display:block;width:100%;height:auto;visibility:hidden}
.strappo-tela.pronta img{visibility:visible}
.strappo-tela canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.strappo.attiva .strappo-tela canvas{cursor:grab;touch-action:none}
.strappo.attiva .strappo-tela canvas:active{cursor:grabbing}
.strappo-prova:disabled{opacity:.3;cursor:default;pointer-events:none}
.strappo-nota{min-height:1.4em;margin:14px 0 0;font:italic 400 17px/1.4 "Cormorant",Georgia,serif;color:#888;opacity:0;transition:opacity .8s}
.strappo-nota.vista{opacity:1}
.vento{max-width:620px;margin:88px auto 0;text-align:center}
.vento-tela{position:relative;container-type:inline-size;overflow:hidden}
.vento-tela.sopra{cursor:pointer}
.vento-tela img{display:block;width:100%;height:auto}
.vento-tela canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vento-gl{opacity:0;transition:opacity .3s}
.vento-gl.pronta{opacity:1}
.colora{max-width:560px;margin:88px auto 0;text-align:center}
.colora-tela{position:relative}
.colora-tela img{display:block;width:100%;height:auto}
.colora-tela canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .3s}
.colora-tela canvas.pronta{opacity:1}
.colora-tela.sopra{cursor:pointer}
.stencil{max-width:440px;margin:88px auto 0;text-align:center}
.stencil-tela{position:relative;width:100%;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06),0 10px 30px rgba(0,0,0,.08)}
.stencil-tela canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.stencil.attiva .stencil-tela canvas{cursor:crosshair;touch-action:none}
.sfoca{max-width:560px;margin:88px auto 0;text-align:center}
.sfoca-tela{position:relative;container-type:inline-size}
.sfoca-tela img{display:block;width:100%;height:auto}
.sfoca-tela canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .3s;touch-action:pan-y}
.sfoca-tela canvas.pronta{opacity:1}
.sfoca.attiva .sfoca-tela canvas{cursor:ns-resize;touch-action:none}
.sfoca-firma{position:absolute;left:4.5%;top:3.6%;font:600 2.7cqw/1 "Jost",Futura,Arial,sans-serif;letter-spacing:.42em;color:#fff;opacity:0;transition:opacity 1.2s;pointer-events:none}
.sfoca-firma.vista{opacity:.92}

/* Lingua: si vede solo il testo della lingua scelta */
html[data-lingua="en"] .l-it{display:none!important}
html:not([data-lingua="en"]) .l-en{display:none!important}
.lingua{margin-left:22px;display:inline-flex;align-items:flex-end;gap:12px;vertical-align:-5px}
.lingua button{background:none;border:0;padding:0;cursor:pointer;color:#999;opacity:.5;transition:color .2s,opacity .2s,transform .2s;line-height:0}
.lingua button:hover{opacity:.9;transform:translateY(-1px)}
.lingua button[aria-pressed="true"]{color:#111;opacity:1}
html[data-tema="scura"] .lingua button[aria-pressed="true"]{color:#fff}
@media (max-width:700px){.lingua{margin-left:16px}}
/* punti attivi: cerchi bianchi che respirano dove si puo' toccare */
.punti-attivi{position:absolute;inset:0;pointer-events:none}
.punti-attivi span{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 12px rgba(255,255,255,.5);opacity:0;transform:scale(.6)}
.punti-attivi span::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#fff}
.punti-attivi.visti span{animation:respiro 1.6s ease-in-out 3 both}
@keyframes respiro{0%{opacity:0;transform:scale(.6)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}
/* il verso sul muro, scritto col gesso */
@font-face{font-family:"Caveat";src:url(fonts/caveat.woff2) format("woff2");font-weight:500;font-display:swap}
.vento-verso{position:absolute;left:1%;top:13.6%;width:13.4%;height:12.8%;pointer-events:none}
.vento-verso p{position:absolute;left:0;top:50%;width:100%;margin:0;transform:translateY(-50%);font:500 3.5cqw/1.05 "Caveat","Bradley Hand","Segoe Print",cursive;
  color:#fff;text-align:left;filter:url(#gesso) drop-shadow(0 0 .6px rgba(20,16,12,.7)) drop-shadow(0 0 3px rgba(255,255,255,.55));transition:opacity 1.3s ease}
.vento-verso p{opacity:0}
.vento-verso p.scritto{opacity:1}
.vento-verso p.scritto.via{opacity:0}
/* fascia diagonale nera nell'angolo della copertina (PARATISSIMA 26) */
.quadro{container-type:inline-size}
.fascia{position:absolute;z-index:3;left:80%;top:20%;width:90%;transform:translate(-50%,-50%) rotate(45deg);background:#0b0b0b;color:#fff;
  display:flex;align-items:center;justify-content:center;gap:.5em;padding:.72em 0;font:700 2.95cqw/1 "Jost",Futura,Arial,sans-serif;
  box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none}
.fascia img{height:1em;width:auto;display:block}
.fascia b{font-weight:700;letter-spacing:.02em;font-size:1.22em;line-height:.8}
/* footer: privacy, cookie e "portami altrove" */
.piede-dx{display:inline-flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.privacy-link,.cookie-link{color:inherit;text-decoration:none;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.privacy-link:hover,.cookie-link:hover{color:#111}
html[data-tema="scura"] .privacy-link:hover,html[data-tema="scura"] .cookie-link:hover{color:#fff}
/* banner dei cookie: sobrio, in basso */
.cookie-banner{position:fixed;left:50%;bottom:20px;z-index:200;width:min(560px,calc(100% - 32px));transform:translate(-50%,16px);opacity:0;
  transition:opacity .4s,transform .4s;background:#fcfcfc;color:#111;border:1px solid #ddd;box-shadow:0 10px 30px rgba(0,0,0,.12);padding:18px 20px;
  display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;font:400 13px/1.5 "Jost",Futura,Arial,sans-serif}
.cookie-banner.visibile{opacity:1;transform:translate(-50%,0)}
.cookie-banner p{margin:0;flex:1 1 300px}
.cookie-banner a{color:inherit}
.cookie-scelte{display:flex;gap:10px}
.cookie-scelte button{padding:9px 18px;background:none;border:1px solid #111;color:#111;font:400 12px/1 "Jost",Futura,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.cookie-scelte button:hover{background:#111;color:#fcfcfc}
html[data-tema="scura"] .cookie-banner{background:#1a1a1a;color:#ececec;border-color:#333}
html[data-tema="scura"] .cookie-scelte button{border-color:#ececec;color:#ececec}
html[data-tema="scura"] .cookie-scelte button:hover{background:#ececec;color:#111}
/* icona per condividere un'opera interattiva: a destra, allineata al bordo dell'immagine */
.gioco-comandi{position:relative;min-height:36px}
.opera-condividi{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;margin-right:-6px;color:#999;cursor:pointer;line-height:0;transition:color .2s}
.opera-condividi:hover{color:#111}
html[data-tema="scura"] .opera-condividi:hover{color:#fff}
.opera-condividi-nota{position:absolute;right:30px;top:50%;transform:translateY(-50%);font:400 12px/1 "Jost",Futura,Arial,sans-serif;letter-spacing:1px;color:#999;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.opera-condividi-nota.vista{opacity:1}
/* cartolina dell'opera creata dal visitatore: accanto all'icona di condivisione, compare dopo il primo gesto */
.opera-cartolina{position:absolute;right:30px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;color:#999;cursor:pointer;line-height:0;opacity:0;pointer-events:none;transition:opacity .4s,color .2s}
.creata .opera-cartolina{opacity:1;pointer-events:auto}
.opera-cartolina:hover{color:#111}
html[data-tema="scura"] .opera-cartolina:hover{color:#fff}
.creata .opera-condividi-nota{right:62px}
/* il sottotitolo che si alterna: "Artista, a sua insaputa" / "Esploratore urbano", in dissolvenza */
.sottotitolo{display:grid}
.sottotitolo>span{grid-area:1/1;transition:opacity 1.2s ease}
.sottotitolo .st-due{opacity:0}
.sottotitolo.alterna .st-uno{opacity:0}
.sottotitolo.alterna .st-due{opacity:1}

/* Parla: il fantasma sul muro parla, e un fumetto scritto a mano ne da' la traduzione */
.parla{max-width:620px;margin:88px auto 0;text-align:center}
.parla-tela{position:relative;container-type:inline-size}
.parla-tela img{display:block;width:100%;height:auto}
.parla.attiva .parla-tela{cursor:pointer}
.parla-fumetto{position:absolute;left:0;top:0;width:40%;pointer-events:none;opacity:0;transform:scale(.25) rotate(-4deg);
  transition:opacity .25s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.parla-fumetto.visto{opacity:1;transform:none}
.parla-fumetto:not(.visto){transition:opacity .6s ease,transform .6s ease}
.parla-fumetto svg{position:absolute;overflow:visible;z-index:0}
.parla-fumetto .f-fondo{fill:#fdfcf8;stroke:none}
.parla-fumetto .f-tratto{fill:none;stroke:#1a1a1a;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.parla-fumetto .f-due{stroke-width:.9;opacity:.55}
.parla-testo{position:relative;z-index:1;margin:0;font:600 2.4cqw/1.15 "Jost",Futura,Arial,sans-serif;color:#1a1a1a;text-align:center;letter-spacing:.2px}
.parla-testo span{opacity:0;transition:opacity .25s}
.parla-testo span.detta{opacity:1}
.parla-trad{position:relative;z-index:1;margin:.5em 0 0;font:italic 400 1.6cqw/1 "Jost",Futura,Arial,sans-serif;letter-spacing:.3px;color:#8a8a8a;text-align:center;opacity:0;transition:opacity .6s .2s}
.parla-trad:empty{display:none}
.parla-fumetto.finito .parla-trad{opacity:1}
@media (max-width:520px){.parla-testo{font-size:3.1cqw}.parla-trad{font-size:2.2cqw}}
@media (max-width:900px){.visore .avviso{bottom:58px}
  /* sul telefono: titolo subito sotto la foto (lo posiziona lo script), frecce e icone sulla stessa riga in fondo */
  .visore .cartolina-btn,.visore .condividi-btn,.visore .lente-btn{bottom:16px}}