/* ============================================================================
   MARKETING ASSOCIATI — proposta di home
   Marca invariata: Anton apre, Gilroy porta il testo, il serif è la voce
   citata. Arancio = diventare socio, blu = esplorare. Quello che cambia è
   l'impianto, non l'identità.
   ========================================================================== */

/* L'intervallo 100-900 e' quello dichiarato dal sito originale, e non e' un
   dettaglio: il file di Anton ha un peso solo. Dichiarando 400, ogni regola
   che chiede 800 — e le regole del Premio lo chiedono — cade fuori
   intervallo e il browser FINGE il grassetto ingrossando i contorni.
   Dichiarando l'intervallo, il peso richiesto rientra e il disegno resta
   quello vero. */
@font-face{font-family:'Anton';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/anton.woff2') format('woff2')}
@font-face{font-family:'Gilroy';font-style:normal;font-weight:300 400;font-display:swap;src:url('assets/fonts/gilroy-light.woff2') format('woff2')}
@font-face{font-family:'Gilroy';font-style:normal;font-weight:700 900;font-display:swap;src:url('assets/fonts/gilroy-extrabold.woff2') format('woff2')}
@font-face{font-family:'Droid Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/droidserif-italic.woff2') format('woff2')}

:root{
  /* Colori presi dal sito esistente, non reinventati */
  --ink:#050d16;          /* fondo più profondo dell'originale: fa risaltare le foto */
  --ink-2:#0b1724;
  --ink-3:#13233440;
  --carta:#EAF1F8;
  --carta-soft:#9FB4C8;
  --arancio:#F0842A;
  --arancio-cupo:#DB6900;
  --blu:#4FA6E4;
  --filo:#ffffff1f;
  --filo-forte:#ffffff33;

  --display:'Anton','Arial Narrow',Helvetica,sans-serif;
  --testo:'Gilroy',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --voce:'Droid Serif',Georgia,'Times New Roman',serif;

  --maxw:1240px;
  --gutter:clamp(20px,5vw,40px);

  /* Una curva sola per tutto: parte decisa e frena, come una massa che si posa */
  --curva:cubic-bezier(.22,.68,0,1);
  --lento:900ms;
  --medio:520ms;
  --rapido:220ms;

  /* Un solo raggio, piccolo: la marca è editoriale e squadrata, non morbida.
     Le squircle da 2rem qui sarebbero un linguaggio estraneo. */
  --raggio:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--carta);
  font-family:var(--testo);
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit}

/* Grana fissa: dà alla pagina una materia di stampa invece dell'uniforme
   piatto del nero digitale. Fissa e non cliccabile, così non ridisegna
   niente durante lo scorrimento. */
.grana{
  position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.035;
  background-image: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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.contenitore{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- Tipografia ---------------------------------------------------- */

/* Anton apre. Mai oltre due righe: alla terza smette di essere un'insegna.
   Regola ereditata dal sito esistente, qui applicata dall'inizio. */
.titolo{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  margin:0;
  text-wrap:balance;
}
.t-xl{font-size:clamp(44px,8.5vw,116px)}
.t-l{font-size:clamp(34px,5.4vw,72px)}
.t-m{font-size:clamp(26px,3.2vw,40px)}

/* La frase lunga non va in Anton: va nel corpo, grande e leggera. */
.frase{
  font-family:var(--testo);
  font-weight:300;
  font-size:clamp(26px,3.6vw,48px);
  line-height:1.16;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
}
.frase .acceso{color:var(--blu)}

/* Il serif è la voce che qualcuno pronuncia. Sempre corsivo, mai altro. */
.voce{
  font-family:var(--voce);
  font-style:italic;
  font-size:clamp(18px,2.1vw,25px);
  line-height:1.45;
  color:var(--carta-soft);
  margin:0;
}

.corpo{color:var(--carta-soft);max-width:62ch;margin:0}
.corpo strong{color:var(--carta);font-weight:700}

/* L'occhiello esiste, ma è razionato: tre in tutta la pagina. */
.occhiello{
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--blu);margin:0 0 18px;
}

/* ---------- Pulsanti ------------------------------------------------------ */
/* L'arancio dice una cosa sola: si diventa soci. Tutto il resto esplora. */

.btn{
  --b:transparent;
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--testo);font-weight:700;
  font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:15px 22px;border:1px solid var(--b);border-radius:var(--raggio);
  text-decoration:none;cursor:pointer;background:transparent;color:var(--carta);
  transition:background var(--medio) var(--curva),border-color var(--medio) var(--curva),
             color var(--medio) var(--curva),transform var(--rapido) var(--curva);
}
.btn .freccia{
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  display:grid;place-items:center;background:#ffffff1a;
  transition:transform var(--medio) var(--curva),background var(--medio) var(--curva);
}
.btn .freccia svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .freccia{transform:translate(3px,-2px)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--blu);outline-offset:3px}

.btn-socio{background:var(--arancio-cupo);--b:var(--arancio-cupo);color:#fff}
.btn-socio:hover{background:var(--arancio);--b:var(--arancio)}
.btn-socio .freccia{background:#00000026}

.btn-esplora{--b:var(--filo-forte);color:var(--carta)}
.btn-esplora:hover{--b:var(--blu);color:#fff;background:#4fa6e41f}

/* ---------- Testata ------------------------------------------------------- */

.testata{
  position:fixed;top:0;left:0;right:0;z-index:5;
  transition:background var(--medio) var(--curva),border-color var(--medio) var(--curva),
             backdrop-filter var(--medio) var(--curva);
  border-bottom:1px solid transparent;
}
.testata.appoggiata{
  background:#050d16d9;backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--filo);
}
.testata-in{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.marchio{display:block;flex:0 0 auto}
.marchio img{width:128px;height:auto}
.menu{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);list-style:none;margin:0;padding:0}
.menu a{
  font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--carta);position:relative;padding:6px 0;
  transition:color var(--medio) var(--curva);
}
/* Il filetto cresce da sinistra invece di accendersi: dice la direzione. */
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--blu);
  transform:scaleX(0);transform-origin:left;transition:transform var(--medio) var(--curva);
}
.menu a:hover{color:#fff}
.menu a:hover::after{transform:scaleX(1)}
.testata .btn{padding:11px 18px;font-size:12.5px}

.apri-menu{display:none;width:44px;height:44px;border:1px solid var(--filo-forte);background:transparent;border-radius:var(--raggio);cursor:pointer;position:relative}
.apri-menu span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--carta);transition:transform var(--medio) var(--curva),opacity var(--rapido) var(--curva)}
.apri-menu span:nth-child(1){top:16px}
.apri-menu span:nth-child(2){top:26px}
body.menu-aperto .apri-menu span:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-aperto .apri-menu span:nth-child(2){transform:translateY(-5px) rotate(-45deg)}

/* ---------- Apertura ------------------------------------------------------
   Il claim NON sta direttamente sopra la fotografia. Provato: su una macro
   luminosa e affollata come la piuma di pavone non si legge, e per farlo
   leggere servirebbe un velo cosi' pesante da spegnere la fotografia. Che e'
   il contrario di quello che serve, visto che le venti fotografie sono il
   patrimonio visivo dell'associazione.
   La soluzione e' una lastra vera: il testo si appoggia su una superficie
   propria, semitrasparente e sfocata, come una didascalia su una stampa.
   La fotografia resta intera sopra, il testo e' leggibile sempre, e il
   contrasto non dipende da quale delle venti immagini sta passando. */

.apertura{
  position:relative;min-height:min(94svh,880px);
  display:grid;align-items:end;overflow:hidden;isolation:isolate;
}
.lastre{position:absolute;inset:0;z-index:-2}
.lastra{position:absolute;inset:0;opacity:0;transition:opacity 1400ms var(--curva)}
.lastra.accesa{opacity:1}
.lastra img{width:100%;height:100%;object-fit:cover}
.velo{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#050d1699 0,#050d1626 26%,#050d1600 48%,#050d1699 86%,#050d16 100%);
}
.apertura-in{
  position:relative;max-width:var(--maxw);margin:0 auto;width:100%;
  padding:140px var(--gutter) clamp(60px,7vw,92px);
}

/* La lastra del testo. Vetro scuro con un filo di luce sul bordo alto:
   si capisce che e' un oggetto appoggiato, non una macchia. */
.insegna{
  max-width:min(660px,88%);
  background:#050d16d9;
  backdrop-filter:blur(26px) saturate(130%);
  -webkit-backdrop-filter:blur(26px) saturate(130%);
  border:1px solid var(--filo);
  border-radius:var(--raggio);
  box-shadow:inset 0 1px 0 #ffffff1f, 0 30px 80px #00000059;
  padding:clamp(28px,3.4vw,46px);
}
.insegna h1{margin:0}
.insegna .voce{margin-top:20px;max-width:42ch}
.insegna .azioni{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,36px)}

/* Gli elementi dell'apertura entrano al caricamento, non allo scorrimento:
   sono gia' sullo schermo, aspettare un osservatore sarebbe assurdo. */
.entra{opacity:0;transform:translateY(22px);filter:blur(5px);
  animation:entrata 900ms var(--curva) forwards}
.entra[data-ritardo="1"]{animation-delay:120ms}
.entra[data-ritardo="2"]{animation-delay:240ms}
@keyframes entrata{to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){
  .entra{opacity:1;transform:none;filter:none;animation:none}
}

/* Venti pallini chiedevano di essere contati. Una barra dice solo
   "sta girando", che e' l'unica cosa che serve sapere. */
.avanzamento{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff14;z-index:1}
.avanzamento i{display:block;height:100%;width:0;background:var(--arancio)}
.conta{
  position:absolute;right:var(--gutter);bottom:26px;z-index:1;
  font-size:12.5px;letter-spacing:.18em;color:var(--carta-soft);font-weight:700;
}

/* ---------- Banda delle parole ------------------------------------------- */

.banda{
  border-block:1px solid var(--filo);background:var(--ink-2);
  overflow:hidden;padding:17px 0;
}
.banda-pista{display:flex;width:max-content;animation:scorri 46s linear infinite}
.banda-gruppo{display:flex;align-items:center;flex:0 0 auto}
.banda-voce{
  font-weight:700;font-size:clamp(13px,1.5vw,16px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--carta-soft);white-space:nowrap;
}
.banda-voce::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--arancio);margin:0 clamp(18px,3vw,38px);vertical-align:middle}
@keyframes scorri{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .banda-pista{animation:none;width:100%;flex-wrap:wrap}
  .banda-gruppo:nth-child(2){display:none}
}

/* ---------- Sezioni ------------------------------------------------------- */

.sezione{padding-block:clamp(84px,10vw,150px)}
.sezione-testa{margin-bottom:clamp(40px,5vw,66px);max-width:44ch}

/* ---------- Le tre aree: griglia asimmetrica ------------------------------ */
/* Non tre blocchi uguali a specchio: Eventi è il cuore e pesa il doppio,
   gli altri due gli stanno accanto. La gerarchia la fa la misura. */

.aree{display:grid;grid-template-columns:1.45fr 1fr;gap:16px}
.area{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,3vw,40px);
  border:1px solid var(--filo);border-radius:var(--raggio);
  background:var(--ink-2);overflow:hidden;isolation:isolate;
  text-decoration:none;color:inherit;min-height:300px;
  transition:border-color var(--lento) var(--curva),transform var(--lento) var(--curva);
}
.area:hover{border-color:var(--filo-forte);transform:translateY(-3px)}
.area:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
.area-grande{grid-row:span 2;min-height:560px}
.area-sfondo{position:absolute;inset:0;z-index:-2}
.area-sfondo img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1600ms var(--curva)}
.area:hover .area-sfondo img{transform:scale(1.07)}
.area-velo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,#050d1659 0,#050d16d9 52%,#050d16f2 100%)}
.area-num{
  font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,62px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px #ffffff59;margin-bottom:14px;
}
.area h3{margin:0}
.area-kicker{font-family:var(--voce);font-style:italic;color:var(--blu);margin:10px 0 0;font-size:17px}
.area p{color:var(--carta-soft);margin:16px 0 0;font-size:16px;line-height:1.55;max-width:52ch}
.area-vai{
  display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--blu);
}
.area-vai svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--medio) var(--curva)}
.area:hover .area-vai svg{transform:translateX(4px)}

/* ---------- Premio: manifesto ------------------------------------------- */

.premio{border-top:1px solid var(--filo);background:var(--ink-2)}
.premio-in{
  display:grid;grid-template-columns:1fr clamp(300px,34vw,430px);
  gap:clamp(36px,6vw,80px);align-items:center;
}
.premio .reg{font-size:.3em;vertical-align:super}
.premio-manifesto{
  display:block;border:1px solid var(--filo);border-radius:var(--raggio);overflow:hidden;
  transition:transform var(--lento) var(--curva),border-color var(--lento) var(--curva);
}
.premio-manifesto:hover{transform:translateY(-5px);border-color:var(--filo-forte)}
.premio-manifesto img{width:100%;height:auto}

/* ---------- Prossimi eventi --------------------------------------------- */
/* È il prodotto vero dell'associazione: qui la pagina si ferma e mostra. */

.evento{
  display:grid;grid-template-columns:1.15fr 1fr;gap:0;
  border:1px solid var(--filo);border-radius:var(--raggio);overflow:hidden;
  background:var(--ink-2);text-decoration:none;color:inherit;
  transition:border-color var(--lento) var(--curva);
}
.evento:hover{border-color:var(--filo-forte)}
.evento:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
.evento-testo{padding:clamp(28px,3.6vw,52px)}
.evento-quando{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}
/* La data si legge tutta alla stessa misura: giorno, mese e anno sono un dato solo. */
.evento-data{margin:0 0 18px;font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--arancio)}
.evento-g{font-family:var(--testo);font-weight:800;font-size:clamp(40px,4.4vw,58px);line-height:.85;letter-spacing:-.03em;color:var(--arancio)}
/* Dentro le schede evento niente Anton: Anton apre la pagina e le sezioni, la scheda elenca in Gilroy. */
.evento-titolo{font-family:var(--testo);font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.01em;margin:0;color:var(--carta)}
.evento-ma{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--carta-soft)}
.evento-tag{
  display:inline-block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--blu);border:1px solid #4fa6e459;border-radius:999px;
  padding:5px 13px;margin-bottom:16px;
}
.evento-dove{color:var(--carta-soft);font-size:15.5px;margin:16px 0 0}
.evento-foto{position:relative;overflow:hidden;min-height:260px}
.evento-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1600ms var(--curva)}
.evento:hover .evento-foto img{transform:scale(1.06)}
/* Gli eventi in programma sono piu' d'uno: si impilano. */
.eventi-prossimi{display:grid;gap:clamp(18px,2vw,26px)}
/* La foto di un evento in programma e' spesso la locandina: si mostra intera, non si ritaglia. */
.eventi-prossimi .evento-foto{background:#0a0d12}
.eventi-prossimi .evento-foto img{object-fit:contain;transform:none}
.eventi-prossimi .evento:hover .evento-foto img{transform:none}
/* Senza immagine la scheda resta tipografica, su una colonna sola. */
.evento-senza{grid-template-columns:1fr}
/* Nella pagina Eventi gli appuntamenti in programma stanno affiancati: il testo e' breve. */
.eventi-prossimi.affiancati{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
@media (max-width:760px){.eventi-prossimi.affiancati{grid-template-columns:1fr}}

/* ---------- Chiusura ------------------------------------------------------ */

.chiusura{border-top:1px solid var(--filo);background:var(--ink-2)}
.chiusura-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,5vw,70px);align-items:end}

/* ---------- Piede --------------------------------------------------------- */

.piede{border-top:1px solid var(--filo);padding-block:clamp(54px,6vw,76px) 0}
.piede-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.piede img{width:230px;height:auto;margin-bottom:18px}
.piede .piede-t{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--blu);margin:0 0 18px;font-weight:700}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.piede a{color:var(--carta-soft);text-decoration:none;font-size:15.5px;transition:color var(--medio) var(--curva)}
.piede a:hover{color:var(--carta)}
.piede p{color:var(--carta-soft);font-size:15.5px;margin:0 0 11px}
.piede-coda{
  margin-top:clamp(44px,5vw,64px);border-top:1px solid var(--filo);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-size:13.5px;color:#7d90a4;
}

/* ---------- Comparsa allo scorrimento ------------------------------------ */

.appare{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity var(--lento) var(--curva),transform var(--lento) var(--curva),filter var(--lento) var(--curva)}
.appare.visto{opacity:1;transform:none;filter:none}
.appare[data-ritardo="1"]{transition-delay:90ms}
.appare[data-ritardo="2"]{transition-delay:180ms}
.appare[data-ritardo="3"]{transition-delay:270ms}
@media (prefers-reduced-motion:reduce){
  .appare{opacity:1;transform:none;filter:none;transition:none}
  .lastra{transition:none}
}

/* ---------- Schermi stretti ---------------------------------------------- */

@media (max-width:1000px){
  .aree{grid-template-columns:1fr}
  .area-grande{grid-row:auto;min-height:420px}
  .premio-in{grid-template-columns:1fr}
  .premio-manifesto{max-width:420px}
  .evento{grid-template-columns:1fr}
  .evento-foto{min-height:240px;order:-1}
  .chiusura-in{grid-template-columns:1fr;align-items:start}
  .piede-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .menu,.testata .btn{display:none}
  .apri-menu{display:block}
  body.menu-aperto .menu{
    display:grid;position:fixed;inset:72px 0 auto;background:#050d16f7;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    padding:30px var(--gutter) 38px;gap:22px;border-bottom:1px solid var(--filo);
  }
  body.menu-aperto .menu a{font-size:19px;letter-spacing:.05em}
  .apertura{min-height:auto}
  .apertura-in{padding-top:124px}
  .insegna{max-width:none}
  .piede-in{grid-template-columns:1fr}
  .conta{display:none}
}

/* ==========================================================================
   PAGINE INTERNE
   Stessa grammatica della home, scala ridotta: l'apertura e' piu' bassa,
   la fotografia e' ferma (una sola, non venti) e la lastra del testo resta,
   perche' il problema del contrasto e' identico.
   ========================================================================== */

.menu a.qui{color:#fff}
.menu a.qui::after{transform:scaleX(1)}

.apertura-interna{min-height:min(64svh,560px)}
.apertura-interna .apertura-in{padding-top:148px;padding-bottom:clamp(44px,5vw,66px)}
.apertura-interna .insegna{max-width:min(720px,92%)}
.apertura-interna .frase{font-size:clamp(28px,4.2vw,56px)}
.sfondo-fisso{position:absolute;inset:0;z-index:-2}
.sfondo-fisso img{width:100%;height:100%;object-fit:cover}

.fondo-2{background:var(--ink-2);border-block:1px solid var(--filo)}

/* ---------- Missione (Chi siamo) ---------------------------------------- */
.missione{border-bottom:1px solid var(--filo)}
/* Rimasta una frase sola, puo' prendersi tutto lo spazio: e' la
   dichiarazione della pagina, non una didascalia accanto a un claim. */
.frase-missione{font-size:clamp(30px,4.4vw,58px);max-width:26ch}

/* ---------- Schede (finalita') ------------------------------------------ */
/* Non scatole con fondo: solo un filetto in alto. Il contenitore non serve
   quando basta una linea a dire "qui comincia un'altra voce". */
.schede-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo)}
.scheda{background:var(--ink);padding:clamp(24px,2.6vw,34px)}
.scheda p{color:var(--carta-soft);font-size:15.5px;line-height:1.6;margin:12px 0 0}
/* Dentro una scatola il titolo non va in Anton: la gerarchia la fanno peso
   e misura. E' la prima regola tipografica del sito, qui applicata. */
.titolo-scheda{font-family:var(--testo);font-weight:700;font-size:19px;letter-spacing:-.01em;margin:0;color:var(--carta)}

/* ---------- Valori ------------------------------------------------------- */
.valori{display:grid;gap:0;border-top:1px solid var(--filo)}
.valore{display:grid;grid-template-columns:82px 1fr;gap:6px 26px;padding:26px 0;border-bottom:1px solid var(--filo);align-items:start}
.valore-n{font-family:var(--display);font-weight:400;font-size:44px;line-height:.85;color:transparent;-webkit-text-stroke:1.5px #f0842a99}
.valore p{color:var(--carta-soft);margin:8px 0 0;font-size:16px;max-width:72ch}

/* ---------- Chi la guida ------------------------------------------------- */
.guida{display:grid;grid-template-columns:clamp(180px,20vw,250px) 1fr;column-gap:clamp(32px,4.5vw,60px);align-items:start}
.guida h2{grid-column:1/-1;margin:0 0 clamp(34px,4vw,56px)}
.guida-foto{margin:0 0 18px}
.guida-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raggio)}
.guida-ruolo{color:var(--carta-soft);font-size:15.5px;margin:0}
.citazione{
  font-family:var(--voce);font-style:italic;font-size:clamp(20px,2.3vw,27px);
  color:var(--carta);margin:28px 0 0;padding-left:22px;border-left:3px solid var(--arancio);line-height:1.42;
}
.dati{margin-top:clamp(48px,5vw,70px);display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--filo)}
.dato{text-align:center;padding:28px 18px 6px;border-right:1px solid var(--filo)}
.dato:last-child{border-right:0}
.dato-n{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,60px);color:var(--arancio);line-height:1;display:block}
.dato-l{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--carta-soft);font-weight:700;margin-top:8px;display:block}
.nota-dati{margin:18px 0 0;font-size:13.5px;color:#7d90a4;text-align:center}

/* ---------- Servizi: linguette ------------------------------------------ */
.linguette{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo);margin-bottom:clamp(36px,4vw,56px)}
.linguetta{
  background:var(--ink);border:0;cursor:pointer;text-align:left;
  padding:clamp(20px,2.2vw,28px);color:var(--carta-soft);font-family:var(--testo);
  display:grid;gap:6px;position:relative;
  transition:color var(--medio) var(--curva),background var(--medio) var(--curva);
}
.linguetta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--arancio);
  transform:scaleX(0);transform-origin:left;transition:transform var(--medio) var(--curva)}
.linguetta:hover{color:var(--carta)}
.linguetta.qui{color:var(--carta);background:var(--ink-2)}
.linguetta.qui::after{transform:scaleX(1)}
.linguetta-n{font-weight:700;font-size:17px;letter-spacing:-.01em}
.linguetta-m{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blu);font-weight:700}
.linguetta:focus-visible{outline:2px solid var(--blu);outline-offset:-2px}

.pannello.nascosto{display:none}
.pannello-lead{font-family:var(--voce);font-style:italic;font-size:clamp(18px,2.1vw,24px);
  color:var(--carta-soft);max-width:60ch;margin:0 0 clamp(34px,4vw,50px)}
.servizi-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filo)}
.servizio{background:var(--ink);padding:clamp(22px,2.4vw,32px);display:grid;gap:10px;align-content:start}
.servizio-n{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--arancio)}
.servizio p{color:var(--carta-soft);font-size:15.5px;line-height:1.6;margin:0}

/* ---------- Pagine legali ------------------------------------------------ */
.legale{max-width:74ch}
.legale-sez{margin-bottom:clamp(30px,3.4vw,44px)}
.legale-sez p{color:var(--carta-soft);margin:12px 0 0;font-size:16px;line-height:1.7}

.in-arrivo{max-width:60ch}

@media (max-width:1000px){
  .missione-in{grid-template-columns:1fr}
  .schede-griglia{grid-template-columns:repeat(2,1fr)}
  .servizi-griglia{grid-template-columns:1fr}
  .linguette{grid-template-columns:1fr}
  .guida{grid-template-columns:1fr}
  .guida h2{margin-bottom:26px}
  .guida-foto img{aspect-ratio:16/10;object-position:center 28%}
  .guida-foto{max-width:420px}
}
@media (max-width:760px){
  .schede-griglia{grid-template-columns:1fr}
  .valore{grid-template-columns:1fr;gap:4px}
  .valore-n{font-size:34px}
  .dati{grid-template-columns:1fr}
  .dato{border-right:0;border-bottom:1px solid var(--filo);padding:20px 0}
  .dato:last-child{border-bottom:0}
  .apertura-interna .apertura-in{padding-top:124px}
}

/* Una cella vuota in fondo alla griglia non e' respiro, e' un buco.
   Ma la correzione vale SOLO quando l'ultima riga ne ha due: con cinque voci
   su tre colonne serve, con sei no — e applicarla sempre creava il buco che
   doveva togliere. La condizione sta nel selettore: ultima voce in posizione
   3n+2, cioe' ne resta una sola da affiancare. */
.schede-griglia .scheda:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:1000px){
  /* Due colonne: serve quando l'ultima e' dispari, cioe' in posizione 2n+1. */
  .schede-griglia .scheda:last-child{grid-column:auto}
  .schede-griglia .scheda:last-child:nth-child(2n+1){grid-column:span 2}
}
@media (max-width:760px){.schede-griglia .scheda:last-child{grid-column:auto}}

/* ==========================================================================
   EVENTI
   ========================================================================== */
.filtri{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,3.4vw,44px)}
.filtro{
  background:transparent;border:1px solid var(--filo);border-radius:999px;cursor:pointer;
  color:var(--carta-soft);font-family:var(--testo);font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:9px 17px;
  transition:border-color var(--medio) var(--curva),color var(--medio) var(--curva),background var(--medio) var(--curva);
}
.filtro:hover{color:var(--carta);border-color:var(--filo-forte)}
.filtro.qui{background:var(--carta);border-color:var(--carta);color:var(--ink)}
.filtro:focus-visible{outline:2px solid var(--blu);outline-offset:2px}

.archivio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,24px)}
.arch{
  border:1px solid var(--filo);border-radius:var(--raggio);overflow:hidden;background:var(--ink);
  display:flex;flex-direction:column;
  transition:border-color var(--lento) var(--curva),transform var(--lento) var(--curva);
}
.arch:hover{border-color:var(--filo-forte);transform:translateY(-3px)}
.arch.nascosto{display:none}
.arch-foto{aspect-ratio:4/3;overflow:hidden}
.arch-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1600ms var(--curva)}
.arch:hover .arch-foto img{transform:scale(1.06)}
.arch-testo{padding:clamp(20px,2.2vw,26px);display:grid;gap:9px;align-content:start}
.arch-data{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--blu);font-weight:700;margin:0}
.arch-sub{font-family:var(--voce);font-style:italic;color:var(--carta-soft);font-size:16px;margin:0;line-height:1.4}
.arch-sintesi{color:var(--carta-soft);font-size:15px;line-height:1.55;margin:0}
.arch-ospiti{font-size:14px;color:#7d90a4;margin:0}
/* Le schede senza fotografia non devono sembrare rotte: prendono un filetto
   arancio in alto, cosi' l'assenza diventa una variante e non un buco. */
.arch-senza .arch-testo{border-top:2px solid var(--arancio)}

/* ==========================================================================
   PREMIO
   ========================================================================== */
.premio-manifesto-riga{display:grid;grid-template-columns:1fr clamp(280px,30vw,380px);gap:clamp(36px,5vw,70px);align-items:start}
.finalita-premio{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.finalita-premio li{color:var(--carta-soft);font-size:16px;line-height:1.6;padding-left:0}
.finalita-premio strong{
  display:block;font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:21px;letter-spacing:.02em;color:var(--arancio);margin-bottom:5px;
}
.sez-premio-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filo)}
.sez-premio{background:var(--ink-2);padding:clamp(24px,2.6vw,34px);display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:start}
.sez-lettera{font-family:var(--display);font-weight:400;font-size:46px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px #f0842a99}
.sez-motto{font-family:var(--voce);font-style:italic;color:var(--blu);font-size:16.5px;margin:10px 0 0;line-height:1.4}
.sez-testo{color:var(--carta-soft);font-size:15.5px;line-height:1.6;margin:14px 0 0}
.sez-esempi{font-size:13.5px;color:#7d90a4;margin:10px 0 0}

.tappe{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.tappa{background:var(--ink);padding:clamp(22px,2.4vw,30px);display:grid;gap:8px}
.tappa-k{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--carta-soft);font-weight:700}
.tappa-v{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.2vw,27px);color:var(--carta);line-height:1}

.passi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo)}
.passo{background:var(--ink);padding:clamp(24px,2.6vw,34px);display:grid;gap:10px;align-content:start}
.passo-n{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.14em;color:var(--arancio);text-transform:uppercase}
.passo p{color:var(--carta-soft);font-size:15.5px;line-height:1.6;margin:0}

/* ==========================================================================
   MODULO DI ISCRIZIONE
   ========================================================================== */
.modulo{max-width:900px}
.gruppo{border:0;padding:0;margin:0 0 clamp(44px,5vw,66px)}
.gruppo legend{padding:0;margin-bottom:clamp(22px,2.4vw,30px)}
.quote{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.quota{
  background:var(--ink);padding:18px 20px;display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:12px;cursor:pointer;
  transition:background var(--medio) var(--curva);
}
.quota:hover{background:var(--ink-2)}
.quota input{accent-color:var(--arancio);margin:0;grid-row:1;justify-self:start;position:absolute;opacity:0}
.quota-n{font-weight:700;font-size:16px;color:var(--carta)}
.quota-p{font-family:var(--display);font-weight:400;font-size:20px;color:var(--arancio)}
/* La scelta si vede sul contenitore, non su un pallino da 13px. */
.quota:has(input:checked){background:var(--ink-2);box-shadow:inset 3px 0 0 var(--arancio)}
.quota:has(input:focus-visible){outline:2px solid var(--blu);outline-offset:-2px}

.campi{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.campo{display:grid;gap:7px}
.campo-largo{grid-column:1/-1}
.campo label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--carta-soft)}
.campo .obbl{color:var(--arancio)}
.campo input,.campo select{
  background:var(--ink-2);border:1px solid var(--filo);border-radius:var(--raggio);
  padding:13px 14px;color:var(--carta);font-family:var(--testo);font-size:16px;
  transition:border-color var(--medio) var(--curva),background var(--medio) var(--curva);
}
.campo input:focus,.campo select:focus{outline:0;border-color:var(--blu);background:#0b1724}
.consensi{display:grid;gap:16px;max-width:76ch}
.consenso{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;cursor:pointer;color:var(--carta-soft);font-size:15px;line-height:1.55}
.consenso input{accent-color:var(--arancio);margin-top:4px;width:17px;height:17px}
.nota-modulo{color:#7d90a4;font-size:14.5px;margin:0 0 26px;max-width:66ch}
.consenso a{color:var(--blu);text-decoration:underline;text-underline-offset:3px}
.consenso .obbl{color:var(--arancio)}
.consensi-t{margin:14px 0 0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--carta-soft)}
.consensi-t span{text-transform:none;letter-spacing:0;font-weight:400;color:#7d90a4;font-size:14.5px}
.errore-modulo{margin:18px 0 0;padding:12px 16px;border:1px solid var(--arancio);border-radius:var(--raggio);color:var(--carta);font-size:15px;max-width:66ch}
.modulo button[disabled]{opacity:.6;cursor:wait}

@media (max-width:1000px){
  .archivio{grid-template-columns:repeat(2,1fr)}
  .premio-manifesto-riga{grid-template-columns:1fr}
  .sez-premio-lista{grid-template-columns:1fr}
  .tappe{grid-template-columns:repeat(2,1fr)}
  .passi{grid-template-columns:1fr}
}
@media (max-width:760px){
  .archivio{grid-template-columns:1fr}
  .quote,.campi{grid-template-columns:1fr}
  .tappe{grid-template-columns:1fr}
  .campo-largo{grid-column:auto}
}

/* Il titolo del pannello e' gia' scritto sulla linguetta: a schermo
   sarebbe un doppione, ma senza di lui la pagina salta da h1 a h3 e la
   struttura si rompe per chi naviga con lo screen reader. */
.solo-lettori{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   PREMIO — struttura completa
   La pagina e' lunga e divisa in articoli di regolamento: una barra di
   ancore sotto la testata e' l'unico modo per non costringere a scorrere
   alla cieca. Sta sotto il menu del sito, non al suo posto.
   ========================================================================== */
.ancore{
  position:sticky;top:72px;z-index:4;
  background:#050d16e6;backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-block:1px solid var(--filo);
}
/* 68px e non 58: il pulsante ne occupa 50, e in una barra di 58 restavano
   quattro pixel per parte — il pulsante sembrava incastrato invece che
   appoggiato. */
.ancore-in{display:flex;align-items:center;gap:clamp(12px,2vw,26px);height:68px;overflow-x:auto;scrollbar-width:none}
.ancore-in::-webkit-scrollbar{display:none}
/* :not(.btn) non e' un vezzo. Senza, questa regola vale 0,1,1 e scavalca
   sia .ancore-btn sia .btn: il pulsante si ritrovava padding 5px 0 e il
   testo grigio-azzurro invece del bianco, cioe' schiacciato e spento.
   La regola e' per le voci di navigazione, non per il pulsante: ora lo dice. */
.ancore a:not(.btn){
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--carta-soft);text-decoration:none;white-space:nowrap;padding:5px 0;
  transition:color var(--medio) var(--curva);
}
.ancore a:not(.btn):hover{color:var(--carta)}
.ancore .ancore-btn{
  margin-left:auto;padding:12px 22px;font-size:12.5px;color:#fff;
  flex:0 0 auto;
}
.ancore .ancore-btn .freccia{width:24px;height:24px;flex-basis:24px}

.sezione-testa.larga{max-width:72ch}

/* Richiamo: un pannello con una barra arancio a sinistra. Non e' una scheda
   fra le altre, e' una parentesi che interrompe la lettura apposta. */
.richiamo{
  border:1px solid var(--filo);border-left:3px solid var(--arancio);
  border-radius:var(--raggio);background:var(--ink);
  padding:clamp(22px,2.4vw,30px);margin:0 0 clamp(32px,3.6vw,46px);max-width:80ch;
}
.richiamo p{color:var(--carta-soft);font-size:15.5px;line-height:1.6;margin:10px 0 0}
.richiamo-ia{border-left-color:var(--blu);margin:clamp(34px,4vw,50px) 0 0}

/* Quote */
.prezzi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.prezzo{background:var(--ink);padding:clamp(26px,3vw,38px);display:grid;gap:9px;align-content:start}
.prezzo-cat{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--carta-soft)}
.prezzo-amt{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(34px,4vw,54px);line-height:1;color:var(--carta)}
.prezzo-per{font-size:14.5px;color:#7d90a4;line-height:1.5}
.prezzo-spicco{background:var(--ink-2);box-shadow:inset 0 2px 0 var(--arancio)}
.prezzo-spicco .prezzo-amt{color:var(--arancio)}
.nota-prezzi{margin:26px 0 0;color:var(--carta-soft);font-size:15px;line-height:1.65;max-width:84ch}

/* Premi */
.carte-premio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--filo);border:1px solid var(--filo)}
.carte-premio .carta-premio:first-child{box-shadow:inset 0 2px 0 var(--arancio)}
.carta-premio{background:var(--ink);padding:clamp(24px,2.8vw,34px);display:grid;gap:12px;align-content:start}
.carta-k{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--blu);margin:0}
.carta-premio p{color:var(--carta-soft);font-size:15.5px;line-height:1.6;margin:0}
.carta-serif{font-family:var(--voce);font-style:italic;color:var(--carta)}
.carta-lista{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.carta-lista li{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;color:var(--carta-soft);font-size:15px;line-height:1.55}
.carta-pos{font-family:var(--display);font-weight:400;font-size:19px;color:var(--arancio);line-height:1.2}

/* Pannello di chiusura del Premio */
.pannello-cta{
  margin-top:clamp(40px,4.6vw,62px);border:1px solid var(--filo);border-radius:var(--raggio);
  background:var(--ink-2);padding:clamp(28px,3.4vw,46px);
  display:grid;gap:24px;align-items:center;grid-template-columns:1fr auto;
}
.pannello-cta .frase{font-size:clamp(24px,2.8vw,36px)}
.pannello-cta .azioni{display:flex;flex-wrap:wrap;gap:14px}

.contatti-griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.contatti-griglia .corpo{margin-top:12px;font-size:16px;line-height:1.7}
.nota-marchi{margin:clamp(40px,4.6vw,62px) 0 0;color:#7d90a4;font-size:13.5px;line-height:1.7;max-width:92ch}

@media (max-width:1000px){
  .prezzi,.carte-premio{grid-template-columns:1fr}
  .pannello-cta{grid-template-columns:1fr}
  .contatti-griglia{grid-template-columns:1fr}
}
@media (max-width:760px){
  .ancore{top:72px}
  .ancore-btn{display:none}
}

/* ==========================================================================
   VOCE TEMPORANEA — REWRITERS FEST
   Si distingue dalle altre voci restando nei colori del sito: pastiglia
   blu e un punto arancio che pulsa. Il pieno arancio resta all'iscrizione.
   ========================================================================== */
.menu a.voce-rw{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--blu);background:#4fa6e426;color:#fff;
  padding:8px 14px 8px 11px;border-radius:999px;
  transition:background var(--medio) var(--curva);
}
.menu a.voce-rw::after{display:none}
.menu a.voce-rw:hover,.menu a.voce-rw.qui{background:#4fa6e44d;color:#fff}
.voce-rw-punto{width:7px;height:7px;border-radius:50%;background:var(--arancio);flex:0 0 7px;
  box-shadow:0 0 0 0 #f0842aaa;animation:rw-pulsa 2.2s var(--curva) infinite}
@keyframes rw-pulsa{0%{box-shadow:0 0 0 0 #f0842aaa}70%{box-shadow:0 0 0 8px #f0842a00}100%{box-shadow:0 0 0 0 #f0842a00}}
@media (prefers-reduced-motion:reduce){.voce-rw-punto{animation:none}}
@media (max-width:760px){body.menu-aperto .menu a.voce-rw{justify-self:start}}

/* ---------- Pagina ReWriters fest. ---------------------------------------- */
.rw-apertura .insegna{max-width:min(760px,94%)}
.rw-apertura .rw-logo-fest{display:block;width:clamp(220px,26vw,340px);height:auto;margin:0 0 clamp(22px,2.6vw,32px)}
.rw-due{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.rw-temi{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rw-temi li{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--carta-soft);
  border:1px solid var(--filo-forte);border-radius:999px;padding:6px 12px}
.rw-evento{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.rw-quando{border:1px solid var(--filo);border-radius:var(--raggio)}
.rw-quando .occhiello{margin-bottom:16px}
.rw-quando-data{color:var(--carta)!important;font-weight:700;font-size:21px!important;margin:0!important}
.rw-quando-ora{color:var(--arancio)!important;font-weight:700;font-size:17px!important;margin:6px 0 0!important}
.rw-criteri{margin-top:clamp(48px,5vw,70px)}
.rw-ospiti{grid-template-columns:repeat(2,1fr);max-width:900px}
/* La griglia delle schede allarga l'ultima quando e' la seconda di tre: qui sono due, restano affiancate.
   Il selettore ricopia quello originale, piu' una classe: altrimenti non lo scavalca. */
.schede-griglia.rw-ospiti .scheda:last-child:nth-child(3n+2){grid-column:auto}
.rw-ospiti .occhiello{margin-bottom:12px}
.rw-giorno{grid-template-columns:clamp(120px,14vw,170px) 1fr}
.rw-giorno-n{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--carta-soft)}
.rw-giorno-n b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(34px,3.4vw,44px);letter-spacing:0;line-height:1;color:var(--arancio);margin-bottom:6px}
.rw-orari{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.rw-orari li{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:16px;color:var(--carta)}
.rw-orari span{font-weight:700;color:var(--carta-soft);min-width:46px}
.rw-nostro{border-left:2px solid var(--arancio);background:#f0842a14;padding:10px 14px;margin-left:-16px}
.rw-nostro em{font-family:var(--voce);font-style:italic;color:var(--arancio);font-size:15px}
@media (max-width:1000px){.rw-due,.rw-evento{grid-template-columns:1fr}}
@media (max-width:760px){
  .rw-ospiti{grid-template-columns:1fr}
  .rw-giorno{grid-template-columns:1fr}
  .rw-nostro{margin-left:0}
}