/* =====================================================================
   FORNELLI RESISTENTI PARMA — variante B ("Piazza")
   Tavolozza chiara e colorata, ricavata dall'illustrazione del logo.
   Regola di progetto: NESSUN GRADIENTE. Tinte piatte, blocchi di colore
   separati da bordi ondulati (SVG), gerarchia data dai colori.
   ===================================================================== */

/* ------------------------------------------------------------ TOKENS */
:root{
  /* fondali */
  --paper:      #FDF6EC;  /* bianco caldo, il fondo principale */
  --paper-2:    #F7EADA;  /* secondo pannello caldo */
  --quiet:      #EFE6DA;  /* fondo sobrio: la sezione su Trieste */

  /* colori del marchio (presi dall'illustrazione) */
  --teal:       #12768F;  /* i vetri del furgone, scurito per il contrasto */
  --teal-deep:  #0C5A6E;
  --teal-pale:  #CBE7EC;
  --saffron:    #F2A118;  /* la ciotola di riso */
  --saffron-pale:#FBE3B4;
  --tomato-pale:#F8DCD5;  /* per l'evidenza al passaggio, come gli altri "pale" */
  --tomato:     #D62F26;  /* la carrozzeria */
  --tomato-deep:#AF2018;
  --leaf:       #4B8B3B;  /* il verde delle verdure */
  --leaf-pale:  #D8E8CF;

  /* testo */
  --ink:        #2B1D14;  /* il bruno del logo, scurito */
  --ink-soft:   #5C4A3D;
  --ink-faint:  #6B5849;

  /* misure */
  --shell:      1180px;
  --pad:        clamp(1rem, 4vw, 2.5rem);
  --r:          14px;      /* raggio generoso: il tondo del lettering */
  --r-sm:       8px;
  --sec-pad:    clamp(3.5rem, 8vw, 7rem);

  /* type */
  --display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------- RESET */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .22vw,1.09rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.06; font-weight:800; font-family:var(--display); }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--saffron); color:var(--ink); }

.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto; padding-inline:var(--pad);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tomato); color:#fff; padding:.75rem 1.25rem; font-weight:700;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:4px; }

/* barra di avanzamento lettura */
.progress{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:150;
  background:rgba(43,29,20,.08);
}
.progress span{
  display:block; height:100%; width:0; background:var(--tomato);
  transform-origin:left;
}

/* ----------------------------------------------------------- BUTTONS */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.6rem;
  background:var(--bg); color:var(--fg);
  border:2px solid var(--bd); border-radius:999px;
  font:800 .86rem/1 var(--body); letter-spacing:.02em;
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background .16s ease, color .16s ease,
             border-color .16s ease;
}
/* EVIDENZA AL PASSAGGIO — regola del sito: niente bordi o ombre su un solo
   lato (ne' sotto ne' a sinistra). Un elemento si evidenzia cambiando
   colore pieno: i pulsanti si riempiono, le schede si colorano con la tinta
   chiara del proprio segno (il dischetto, il numero) e si inclinano appena. */
.btn:active{ transform:scale(.97); }
.btn-sm{ padding:.62rem 1.1rem; font-size:.78rem; }
.btn-tomato{ --bg:var(--tomato); --fg:#fff; --bd:var(--tomato); }
.btn-tomato:hover{ --bg:var(--tomato-deep); --bd:var(--tomato-deep); }
.btn-ink{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn-outline{ --bd:var(--ink); }
.btn-outline:hover{ --bg:var(--ink); --fg:var(--paper); }

/* ------------------------------------------------------------ HEADER */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:.9rem;
  padding-top:calc(.9rem + env(safe-area-inset-top, 0px));
  transition:background .25s ease, padding .25s ease;
}
.site-header.is-stuck{
  background:var(--paper);
  padding-block:.5rem;
  padding-top:calc(.5rem + env(safe-area-inset-top, 0px));
}
.header-inner{ display:flex; align-items:center; gap:1.4rem; }
.brand{ flex:0 0 auto; line-height:0; }
.brand img{ width:clamp(150px,16vw,210px); transition:width .25s ease; }
.site-header.is-stuck .brand img{ width:clamp(132px,13vw,170px); }

.nav{ margin-left:auto; }
.nav ul{ display:flex; gap:clamp(.7rem,1.7vw,1.6rem); }
.nav a{
  display:inline-block; text-decoration:none;
  padding:.4rem .7rem; border-radius:999px;
  font-size:.86rem; font-weight:600; color:var(--ink-soft);
  transition:background .18s ease, color .18s ease;
}
.nav a:hover{ background:var(--teal-pale); color:var(--teal-deep); }

.nav-toggle{
  display:none; margin-left:auto;
  width:46px; height:40px; padding:0;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px;
}
.nav-toggle span{
  display:block; height:3px; width:26px; margin-inline:auto; border-radius:2px;
  background:var(--ink); transition:transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

@media (max-width:1000px){
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw,340px); margin-left:0;
    background:var(--paper);
    padding:calc(6rem + env(safe-area-inset-top, 0px)) 1.8rem 2rem;
    transform:translateX(100%); visibility:hidden; pointer-events:none;
    transition:transform .36s cubic-bezier(.4,0,.2,1), visibility .36s;
  }
  .nav.is-open{ transform:translateX(0); visibility:visible; pointer-events:auto; }
  .nav ul{ flex-direction:column; gap:.5rem; align-items:flex-start; }
  .nav a{ font-size:1.08rem; padding:.55rem .9rem; }
}

/* -------------------------------------------------------------- HERO */
.hero{
  position:relative; overflow:hidden;
  padding-top:clamp(7rem,13vw,9.5rem);
  background:var(--paper);
}
.hero-grid{
  display:grid; gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
  padding-bottom:clamp(2rem,5vw,3.5rem);
}
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }

.kicker{
  display:inline-flex; align-items:center; gap:.65rem;
  margin:0 0 1.2rem;
  font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal-deep);
}
.kicker .rule{ display:block; width:2rem; height:3px; border-radius:2px; background:var(--tomato); flex:0 0 auto; }

.hero-title{
  font-size:clamp(2.7rem,7.5vw,5.4rem);
  line-height:1;
  margin-bottom:1.3rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.1em;
}
/* ogni parola ha il suo sottolineato spesso, nei tre colori del furgone */
.hero-title .w{
  position:relative; display:inline-block;
  padding-bottom:.08em;
}
.hero-title .w::after{
  content:""; position:absolute; left:0; bottom:0;
  height:.13em; width:100%; border-radius:99px;
  transform:scaleX(0); transform-origin:left;
  animation:underline .7s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-title .w--teal::after{    background:var(--teal);    animation-delay:.15s; }
.hero-title .w--saffron::after{ background:var(--saffron); animation-delay:.35s; }
.hero-title .w--tomato::after{  background:var(--tomato);  animation-delay:.55s; }
@keyframes underline{ to{ transform:scaleX(1); } }

.hero-lead{
  max-width:52ch; font-size:clamp(1.02rem,.98rem + .4vw,1.2rem);
  color:var(--ink-soft);
}
.hero-lead strong{ color:var(--ink); font-weight:700; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

.hero-shot{ border-radius:var(--r); min-height:clamp(240px,34vw,400px); }
.ph--hero{ aspect-ratio:4/5; }
@media (max-width:900px){ .ph--hero{ aspect-ratio:16/10; } }

/* la strada sotto l'hero: il furgone entra una volta e si ferma */
.road{
  position:relative; height:clamp(56px,9vw,92px);
  background:var(--ink);
}
.road-line{
  /* linea di mezzeria tratteggiata: bordo dashed, non un gradiente */
  position:absolute; left:0; right:0; top:50%; height:0; margin-top:-2px;
  border-top:4px dashed var(--saffron);
}
.road-van{
  position:absolute; bottom:38%; left:0; width:clamp(96px,14vw,168px); height:auto;
  animation:drive 2.4s cubic-bezier(.16,.9,.3,1) .2s both;
}
@keyframes drive{
  from{ transform:translateX(-130%); }
  to{   transform:translateX(min(66vw, 760px)); }
}

/* --------------------------------------------- STRISCIA PROSSIMO EVENTO */
.next-strip{ background:var(--saffron); color:var(--ink); }
.next-inner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(.6rem,2.2vw,2rem);
  padding-block:1.05rem;
}
.next-inner p{ margin:0; }
.next-label{
  font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--saffron);
  padding:.35rem .75rem; border-radius:999px;
}
.next-title{ font-weight:600; font-size:.98rem; }
.next-count{
  font-family:var(--display); font-weight:800; font-size:1.2rem;
  margin-left:auto !important; font-variant-numeric:tabular-nums;
}
.next-link{
  font-size:.8rem; font-weight:800; text-decoration:none;
  padding:.4rem .9rem; border-radius:999px; border:2px solid var(--ink);
  transition:background .18s ease, color .18s ease;
}
.next-link:hover{ background:var(--ink); color:var(--saffron); }
@media (max-width:760px){ .next-count{ margin-left:0 !important; } }

/* ------------------------------------------------------------ TICKER */
.ticker{ overflow:hidden; white-space:nowrap; background:var(--teal); padding-block:.72rem; }
.ticker-track{
  display:inline-flex; align-items:center; gap:1.8rem;
  animation:slide 32s linear infinite;
}
.ticker-track span{
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  color:#fff; letter-spacing:.02em;
}
.ticker-track .sep{ font-size:.55rem; color:var(--saffron); font-family:var(--body); }
@keyframes slide{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ------------------------------------------------------------- BLOCCHI */
.block{ position:relative; padding-block:var(--sec-pad); }
.block--paper{   background:var(--paper); }
.block--paper2{  background:var(--paper-2); }
.block--quiet{   background:var(--quiet); }
.block--teal{    background:var(--teal-pale); }
.block--leaf{    background:var(--leaf-pale); }
.block--saffron{ background:var(--saffron-pale); }
.block, .closing{ scroll-margin-top:5rem; }

/* bordo ondulato: sta in cima al blocco e sborda sul blocco precedente */
.wave{
  position:absolute; left:0; right:0; top:0; line-height:0;
  transform:translateY(-99%);
  pointer-events:none;
}
.wave svg{ display:block; width:100%; height:clamp(26px,3.6vw,50px); }
.wave--flip svg{ transform:scaleX(-1); }
.wave--paper   svg path{ fill:var(--paper); }
.wave--teal    svg path{ fill:var(--teal-pale); }
.wave--leaf    svg path{ fill:var(--leaf-pale); }
.wave--saffron svg path{ fill:var(--saffron-pale); }

/* --------------------------------------------------------- INTESTAZIONI */
.sec-head{ margin-bottom:clamp(2rem,4.5vw,3.2rem); max-width:64ch; }
.eyebrow{
  display:inline-block; margin-bottom:.9rem;
  padding:.35rem .85rem; border-radius:999px;
  background:var(--teal); color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
}
.eyebrow--tomato{ background:var(--tomato); }
.eyebrow--ink{ background:var(--ink); color:var(--saffron); }
.sec-title{
  font-size:clamp(2.1rem,5.2vw,3.9rem);
  letter-spacing:-.01em; text-wrap:balance;
}
.sec-title--sm{ font-size:clamp(1.8rem,3.8vw,2.7rem); }
.sec-title em{ font-style:normal; color:var(--tomato); }
.block--saffron .sec-title em{ color:var(--teal-deep); }
.sec-sub{ margin-top:1.1rem; max-width:60ch; color:var(--ink-soft); font-size:1.05rem; }
.sec-sub strong{ color:var(--ink); font-weight:700; }

.lead{
  font-size:clamp(1.14rem,1.05rem + .5vw,1.4rem);
  line-height:1.45; font-weight:600; color:var(--ink);
  max-width:40ch;
}
/* Il tono del testo corrente arriva per EREDITA' dal blocco, non da una
   regola su `p`: cosi' non schiaccia le classi dei componenti (.eyebrow,
   .lead, .sticker...) che hanno specificita' piu' bassa. */
.block{ color:var(--ink-soft); }
.block h1, .block h2, .block h3, .block h4,
.block strong, .block dd, .block .lead{ color:var(--ink); }
.block strong{ font-weight:700; }

/* ------------------------------------------------------------- NUMERI */
.stats{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.stats li{
  background:var(--paper); border:2px solid var(--ink);
  border-radius:var(--r); padding:1.5rem 1.35rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.stat-n{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.3rem,4.6vw,3.3rem); line-height:1;
  color:var(--tomato); font-variant-numeric:tabular-nums;
  display:flex; align-items:baseline; gap:.3rem;
}
.stats li:nth-child(2) .stat-n{ color:var(--teal); }
.stats li:nth-child(3) .stat-n{ color:var(--leaf); }
.stats li:nth-child(4) .stat-n{ color:var(--ink); }
.stat-n small{ font-size:.34em; font-weight:800; color:var(--ink-faint); }
.stat-l{ font-size:.92rem; line-height:1.4; color:var(--ink-soft); }

/* -------------------------------------------------------------- PASSI */
.steps{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); }
.step{
  position:relative;
  background:var(--paper); border-radius:var(--r);
  padding:2.4rem 1.6rem 1.7rem;
}
/* al passaggio la scheda prende la tinta chiara del suo dischetto */
.step:hover{ transform:rotate(-.8deg); background:var(--tomato-pale); }
.step:nth-child(2):hover{ transform:rotate(.8deg); background:var(--saffron-pale); }
.step:nth-child(3):hover{ background:var(--leaf-pale); }
.step:hover .menu-list li{ background:var(--paper); }
.step-n{
  position:absolute; top:-.9rem; left:1.4rem;
  width:2.6rem; height:2.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tomato); color:#fff;
  font-family:var(--display); font-weight:800; font-size:1.35rem;
}
.step:nth-child(2) .step-n{ background:var(--saffron); color:var(--ink); }
.step:nth-child(3) .step-n{ background:var(--leaf); }
.step h3{ font-size:1.42rem; margin-bottom:.6rem; }
.step p{ margin:0; font-size:.96rem; }

.menu-list{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.menu-list li{
  background:var(--saffron-pale); color:var(--ink);
  padding:.32rem .7rem; border-radius:999px;
  font-size:.8rem; font-weight:600;
}

/* La frase-manifesto: non piu' un riquadro col filetto, ma un pannello
   pieno nel teal del marchio. Il colore e' il fondo, non un bordo. */
.pill-note{
  color:rgba(253,246,236,.9);
  margin-top:clamp(2rem,4vw,3rem);
  background:var(--teal); border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.2rem);
  font-size:1.04rem;
}
.block--teal .pill-note{ color:rgba(253,246,236,.9); }
.pill-note strong{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.25rem,2.3vw,1.7rem); color:#fff; margin-bottom:.35rem;
}

/* -------------------------------------------------------------- ROTTA */
.route{
  margin:0 0 clamp(2.5rem,5vw,3.5rem);
  position:relative;
  background:var(--paper-2); border-radius:var(--r);
  padding:clamp(1.2rem,3vw,2rem) clamp(1rem,3vw,2rem) 1rem;
}
.route-svg{ width:100%; height:auto; display:block; overflow:visible; }
.route-path{
  stroke:var(--teal); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:10 12;
  opacity:.45;
}
.route-dot{ fill:var(--paper); stroke:var(--tomato); stroke-width:5; }
.route-dot--end{ stroke:var(--leaf); }
.route-city{
  font-family:var(--display); font-weight:800; font-size:19px;
  fill:var(--ink); letter-spacing:.06em;
}
/* Il furgone e' dentro l'SVG (animateMotion lungo il tracciato), quindi
   scala insieme alla mappa e non esce mai dal riquadro. Sul telefono si usa
   un disegno piu' compatto, con nomi e furgone proporzionati allo schermo.
   Senza JS o con movimento ridotto il furgone e' gia' parcheggiato a Trieste. */
.route-svg--narrow{ display:none; max-width:440px; margin-inline:auto; }
.route-svg--narrow .route-city{ font-size:16px; }
@media (max-width:700px){
  .route-svg--wide{ display:none; }
  .route-svg--narrow{ display:block; }
}
.route figcaption{
  margin-top:.6rem; text-align:center;
  font-size:.86rem; font-weight:600; color:var(--ink-faint);
}

/* ----------------------------------------------------------- TIMELINE */
.timeline{ display:grid; gap:1.1rem; }
/* Le tappe sono una sequenza: al posto del filetto colorato, il numero
   dentro un dischetto, in linea con l'occhiello. Stesso dispositivo dei
   "tre gesti", cosi' la pagina ha una sola idea di scheda. */
.timeline li{
  background:var(--paper-2); border-radius:var(--r);
  padding:clamp(1.3rem,2.6vw,1.8rem);
}
/* niente filetto a sinistra: la tappa si colora con la tinta del suo numero */
.timeline li:hover{ background:var(--saffron-pale); }
.timeline li:nth-child(2):hover{ background:var(--tomato-pale); }
.timeline li:nth-child(3):hover{ background:var(--teal-pale); }
.timeline li:nth-child(4):hover{ background:var(--leaf-pale); }
.tl-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.tl-num{
  flex:0 0 auto;
  width:1.85rem; height:1.85rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--saffron); color:var(--ink);
  font-family:var(--display); font-weight:800; font-size:1.02rem; line-height:1;
}
.timeline li:nth-child(2) .tl-num{ background:var(--tomato); color:#fff; }
.timeline li:nth-child(3) .tl-num{ background:var(--teal);   color:#fff; }
.timeline li:nth-child(4) .tl-num{ background:var(--leaf);   color:#fff; }
.tl-when{
  font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint);
}
.timeline h3{ font-size:clamp(1.25rem,2.4vw,1.7rem); margin-bottom:.5rem; }
.timeline p{ margin:0; max-width:70ch; }

/* -------------------------------------------------------------- SPLIT */
.split{
  display:grid; gap:clamp(1.8rem,4.5vw,3.5rem);
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.split-aside{ display:grid; gap:1rem; }
.aside-note{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* La citazione si annuncia da sola: una virgoletta grande al posto del
   filetto. E' un blocco, non e' in posizione assoluta: non puo' sovrapporsi
   al testo a nessuna larghezza. */
.quote{
  margin:2rem 0 0; padding:1.5rem 1.8rem 1.6rem;
  background:var(--paper); border-radius:var(--r);
}
.quote::before{
  content:"\201C";
  display:block;
  font-family:var(--display); font-weight:800;
  font-size:3.2rem; line-height:.62; color:var(--tomato);
  margin-bottom:.3rem;
}
.quote blockquote{
  margin:0 0 .6rem; font-family:var(--display); font-weight:700;
  font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem); line-height:1.24; color:var(--ink);
}
.quote figcaption{ font-size:.8rem; font-weight:700; color:var(--ink-faint); }

/* ------------------------------------------------------------ PARTNER */
.partners{ display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1.6rem; }
.partners li{
  background:var(--paper); border:2px solid var(--ink);
  padding:.55rem 1.1rem; border-radius:999px;
  font-size:.88rem; font-weight:700; color:var(--ink);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.partners li:nth-child(odd):hover{ background:var(--teal); color:#fff; border-color:var(--teal); transform:translateY(-3px) rotate(-1.5deg); }
.partners li:nth-child(even):hover{ background:var(--tomato); color:#fff; border-color:var(--tomato); transform:translateY(-3px) rotate(1.5deg); }
.open-note{ max-width:62ch; font-size:1.02rem; color:var(--ink-soft); }
.open-note a{ color:var(--teal-deep); font-weight:700; text-underline-offset:3px; }

.photo-pair{
  display:grid; gap:1rem; margin-top:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  align-items:start;
}
@media (max-width:760px){ .photo-pair{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- PLACEHOLDER */
.ph{
  display:grid; place-items:center; gap:.6rem;
  border:2px dashed rgba(43,29,20,.3);
  border-radius:var(--r);
  background:rgba(43,29,20,.045);
  color:var(--ink-faint);
  min-height:140px;
}
.ph--portrait{ aspect-ratio:3/4; }
.ph--square{ aspect-ratio:1/1; }
.ph--wide{ aspect-ratio:16/9; }
.ph--flyer{ aspect-ratio:2/3; }
.ph--video{ aspect-ratio:16/9; }
.ph--g{ aspect-ratio:4/3; }
.ph-label{
  font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  text-align:center; padding-inline:1rem;
}
.ph-play{
  width:74px; height:74px; border-radius:50%;
  display:grid; place-items:center; padding-left:.25rem;
  background:var(--tomato); color:#fff; font-size:1.6rem;
}
.ph-label-inline{
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint);
}

.video-el{ width:100%; aspect-ratio:16/9; border:0; display:block; border-radius:var(--r); background:#000; }
.video-el iframe{ width:100%; height:100%; border:0; }

/* ------------------------------------------------------------- FOTO */
/* Le foto prendono il posto dei placeholder con le stesse proporzioni.
   Ombra piena e sfalsata, come le schede: nessuna sfumatura. */
.photo{
  margin:0; position:relative; overflow:hidden;
  border-radius:var(--r); background:var(--paper-2);
}
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo--hero{ aspect-ratio:4/5; }
.photo--hero img{ object-position:50% 38%; }
@media (max-width:900px){ .photo--hero{ aspect-ratio:16/10; } }
.photo--portrait{ aspect-ratio:3/4; }
.photo--landscape{ aspect-ratio:4/3; }
.photo--square{ aspect-ratio:1/1; }
.photo--square img{ object-position:50% 30%; }
.photo--wide{ aspect-ratio:16/9; }

/* ------------------------------------------------------------ VIDEO */
/* Facciata cliccabile al posto dell'iframe: YouTube si carica solo al clic. */
.yt{ position:relative; overflow:hidden; background:var(--teal-deep); }
.yt-facade{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; padding:1.2rem; text-align:center;
  color:#fff; text-decoration:none; background:var(--teal-deep);
}
.yt-van{
  position:absolute; right:4%; bottom:6%;
  width:clamp(80px,16vw,190px); opacity:.2; pointer-events:none;
}
.yt-facade .ph-play{
  width:clamp(64px,8vw,88px); height:clamp(64px,8vw,88px);
  font-size:clamp(1.4rem,2vw,1.9rem);
  transition:transform .2s ease, background .2s ease;
}
.yt-facade:hover .ph-play, .yt-facade:focus-visible .ph-play{ transform:scale(1.08); background:var(--tomato-deep); }
.yt-title{
  position:relative; font-family:var(--display); font-weight:800;
  font-size:clamp(1.3rem,3vw,2.2rem); line-height:1.1;
}
.yt-note{
  position:relative; font-size:.8rem; font-weight:600;
  color:rgba(255,255,255,.82); max-width:34ch;
}
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-credit{ margin:.8rem 0 0; font-size:.84rem; color:var(--ink-faint); }
.video-credit a{ color:var(--teal-deep); font-weight:700; text-underline-offset:3px; }

/* ---------------------------------------------------------- GALLERIA */
/* Griglia a mosaico: le foto verticali occupano due righe. 4 verticali +
   4 orizzontali riempiono esattamente sia 3 colonne sia 2 colonne. */
.gallery-note{
  margin:clamp(2rem,4vw,3rem) 0 0; font-size:.8rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.gallery{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:clamp(140px,22vw,267px);
  grid-auto-flow:dense;
}
.g-item{
  display:block; position:relative; overflow:hidden;
  border-radius:var(--r); background:var(--paper);
  cursor:zoom-in;
}
.g-item--tall{ grid-row:span 2; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.g-item:hover{ transform:rotate(-.8deg); }
.g-item:nth-child(even):hover{ transform:rotate(.8deg); }
.g-item:hover img{ transform:scale(1.04); }
@media (max-width:620px){
  .gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; grid-auto-rows:clamp(110px,33vw,200px); }
}

/* Striscia "la cena in piazza", nella sezione Trieste: stesse schede
   della galleria ma ferme, perche' questa sezione ha un tono sobrio. */
.piazza-grid{
  display:grid; gap:1rem; margin-top:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.piazza-grid .g-item{ aspect-ratio:4/3; }
.piazza-grid .g-item:hover,
.piazza-grid .g-item:nth-child(even):hover{ transform:none; }
.piazza-grid .g-item:hover img{ transform:scale(1.02); }
@media (max-width:760px){
  .piazza-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .piazza-grid .g-item:first-child{ grid-column:1 / -1; }
}

/* ---------------------------------------------------------- LIGHTBOX */
.lightbox{
  border:0; padding:0; margin:auto; background:transparent;
  max-width:100vw; max-height:100vh; width:100%; height:100%;
  overflow:hidden;
}
.lightbox::backdrop{ background:rgba(43,29,20,.92); }
.lightbox[open]{ display:grid; place-items:center; }
.lb-figure{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:.8rem;
  padding:4.5rem 1rem 1.5rem;
}
.lb-img{
  max-width:min(92vw,1100px); max-height:calc(100vh - 10rem);
  width:auto; height:auto; border-radius:var(--r-sm);
}
.lb-cap{ color:var(--paper); font-size:.92rem; text-align:center; max-width:60ch; }
.lb-btn{
  position:fixed; z-index:2;
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid var(--paper); background:var(--ink); color:var(--paper);
  font:800 1.15rem/1 var(--body); cursor:pointer;
  transition:background .16s ease, color .16s ease;
}
.lb-btn:hover{ background:var(--paper); color:var(--ink); }
.lb-close{ top:calc(1rem + env(safe-area-inset-top,0px)); right:1rem; }
.lb-prev{ left:1rem; top:50%; margin-top:-24px; }
.lb-next{ right:1rem; top:50%; margin-top:-24px; }
@media (max-width:620px){
  .lb-prev, .lb-next{ top:auto; bottom:calc(1rem + env(safe-area-inset-bottom,0px)); margin-top:0; }
  .lb-figure{ padding-bottom:5rem; }
  .lb-img{ max-height:calc(100vh - 12rem); }
}
body.lb-open{ overflow:hidden; }

/* ------------------------------------------------------------ EVENTI */
.events{ display:grid; gap:clamp(1.3rem,2.6vw,2rem); }
.event{
  display:grid; grid-template-columns:minmax(0,.58fr) minmax(0,1fr);
  gap:clamp(1.3rem,3.5vw,2.6rem);
  background:var(--paper-2); border-radius:var(--r);
  padding:clamp(1.2rem,2.6vw,1.9rem);
  align-items:center;
}
@media (max-width:800px){ .event{ grid-template-columns:1fr; } }
.event-media{ align-self:stretch; display:flex; align-items:center; }
.event-media img{ width:100%; margin-inline:auto; border-radius:var(--r-sm); }
.sticker{
  display:inline-block; margin:0 0 1rem;
  background:var(--tomato); color:#fff;
  padding:.4rem .9rem; border-radius:var(--r-sm);
  font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  transform:rotate(-2.2deg);
}
.sticker--teal{ background:var(--teal); }
.event-date{ display:flex; align-items:baseline; gap:.5rem; margin:0 0 .2rem; }
.event-date .d{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem,5.5vw,3.8rem); line-height:.9; color:var(--ink);
}
.event-date .m{
  font-family:var(--display); font-weight:800; font-size:1.2rem;
  color:var(--tomato);
}
.event-date .y{ font-size:.82rem; font-weight:700; color:var(--ink-faint); }
.event-title{ font-size:clamp(1.7rem,3.4vw,2.4rem); margin-bottom:1.2rem; }
.event-meta{
  display:grid; gap:.8rem; margin:0 0 1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
}
.event-meta dt{
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.2rem;
}
.event-meta dd{ margin:0; font-size:.94rem; line-height:1.4; color:var(--ink); }
.event-meta a{ color:var(--teal-deep); font-weight:700; text-underline-offset:3px; }
.tbd{ color:var(--ink-faint); font-style:italic; font-size:.88rem; }
.event-note{ font-size:.93rem; margin-bottom:1.2rem; }

/* -------------------------------------------------------------- AIUTA */
.helps{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); }
.help{
  background:var(--paper); border-radius:var(--r);
  padding:1.6rem 1.4rem;
}
.help:hover{ transform:rotate(.8deg); background:var(--teal-pale); }
.help:nth-child(even):hover{ transform:rotate(-.8deg); }
.help h3{ font-size:1.24rem; margin-bottom:.6rem; }
.help p{ font-size:.94rem; }
.help a{ font-size:.84rem; font-weight:800; text-decoration:none; color:var(--teal-deep); }
.help a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* Donazioni: stessa scheda dei numeri in cima (bordo pieno su tutti i
   lati), cosi' si capisce che qui ci sono dati da usare, non un testo. */
.donate{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
  padding:clamp(1.4rem,3vw,2.2rem);
  background:var(--paper); border:2px solid var(--ink);
  border-radius:var(--r);
  display:grid; gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
  scroll-margin-top:6rem;
}
@media (max-width:820px){ .donate{ grid-template-columns:1fr; } }
.donate h3{ font-size:clamp(1.4rem,2.6vw,1.8rem); margin-bottom:.5rem; }
.donate p{ margin:0; font-size:.96rem; }

.bank{ margin:0; display:grid; gap:1rem; }
.bank dt{
  font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.25rem;
}
.bank dd{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .8rem;
  color:var(--ink); font-weight:600; line-height:1.4;
}
.bank-iban{
  /* cresce con lo schermo: sul telefono l'IBAN sta su una riga sola */
  font-weight:800; font-size:clamp(.75rem,5.1vw - .27rem,1.28rem);
  letter-spacing:.03em; font-variant-numeric:tabular-nums;
}
.copy{
  flex:0 0 auto;
  padding:.34rem .8rem; border-radius:999px;
  border:2px solid var(--ink); background:transparent; color:var(--ink);
  font:800 .7rem/1 var(--body); letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.copy:hover{ background:var(--ink); color:var(--paper); }
.copy.is-done{ background:var(--teal-deep); border-color:var(--teal-deep); color:#fff; }

/* ------------------------------------------------------------ DIARIO */
.diario-inner{
  display:grid; gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:820px){ .diario-inner{ grid-template-columns:1fr; } }

/* ----------------------------------------------------------- CLOSING -*/
.closing{
  position:relative; overflow:hidden;
  background:var(--teal); color:#fff;
  padding-block:clamp(4rem,9vw,7rem);
  text-align:center;
}
.closing-mark{
  position:absolute; right:-2%; bottom:-8%;
  width:clamp(150px,26vw,330px); opacity:.16;
  pointer-events:none;
}
.closing-inner{ position:relative; }
.closing-kicker{
  display:inline-block; margin-bottom:1.2rem;
  padding:.35rem .9rem; border-radius:999px;
  background:var(--saffron); color:var(--ink);
  font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
}
.closing-line{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,3.8vw,2.9rem); line-height:1.16;
  margin-bottom:2rem; text-wrap:balance;
  max-width:24ch; margin-inline:auto;
}
.closing-line em{ font-style:normal; color:var(--saffron); }
.closing-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.closing .btn-outline{ --bd:#fff; --fg:#fff; }
.closing .btn-outline:hover{ --bg:#fff; --fg:var(--teal-deep); }

/* ------------------------------------------------------------ FOOTER */
.site-footer{ background:var(--ink); color:var(--paper); }
.footer-inner{
  display:grid; gap:clamp(1.8rem,4vw,3rem);
  grid-template-columns:minmax(0,.85fr) repeat(3,minmax(0,1fr));
  padding-block:clamp(2.6rem,5vw,4rem);
}
@media (max-width:900px){ .footer-inner{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-brand img{ width:min(185px,58%); }
.footer-col h4{
  font-family:var(--body); font-size:.72rem; font-weight:800;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--saffron); margin-bottom:.9rem;
}
.footer-col p{ font-size:.9rem; color:rgba(253,246,236,.74); }
.footer-col strong{ color:var(--paper); }
.footer-col a{ color:var(--paper); text-underline-offset:3px; }
.socials a{ color:var(--teal-pale); }
.footer-bottom{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.4rem;
  border-top:1px solid rgba(253,246,236,.16);
  font-size:.78rem; color:rgba(253,246,236,.6);
}
.footer-bottom p{ margin:0; }
.credit a{ color:rgba(253,246,236,.8); }

/* -------------------------------------------------------- ANIMAZIONI */
/* La comparsa usa translate/scale (proprieta' singole), non transform:
   cosi' l'hover delle schede, che usa transform, non viene annullato.
   Nascosto solo se c'e' JavaScript (classe .js su <html>). */
.reveal{
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), translate .6s cubic-bezier(.2,.7,.3,1),
             scale .6s cubic-bezier(.2,.7,.3,1), transform .22s ease,
             background-color .22s ease, color .18s ease, border-color .18s ease;
}
.js .reveal{ opacity:0; translate:0 22px; scale:.99; }
.js .reveal.is-in{ opacity:1; translate:none; scale:none; }

body.nav-open{ overflow:hidden; }
/* menu aperto: la pagina dietro si scurisce tutta (niente bordo sul lato
   del pannello); un tocco sul fondo scuro chiude il menu */
body.nav-open::before{
  content:""; position:fixed; inset:0; z-index:90;
  background:rgba(43,29,20,.45);
}

/* Rispetto delle preferenze di movimento: si spegne tutto il movimento
   decorativo, il sito resta identico ma fermo. */
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; translate:none; scale:none; transition:none; }
  .ticker-track{ animation:none; }
  .road-van{ animation:none; transform:translateX(min(66vw,760px)); }
  .hero-title .w::after{ animation:none; transform:scaleX(1); }
  .btn:hover, .step:hover, .help:hover, .partners li:hover, .timeline li:hover,
  .g-item:hover, .g-item:nth-child(even):hover, .g-item:hover img, .yt-facade:hover .ph-play{ transform:none; }
  .progress{ display:none; }
}