/* =========================================================
   Giampaolo Mocci — life as a climber
   Restyling. Impostato sul telefono, ampliato verso il PC.
   ========================================================= */

:root{
  /* --- colore --- */
  --ink:        #0c1315;   /* granito bagnato in ombra */
  --ink-soft:   #1b2427;
  --stone:      #eef1f1;   /* fondo chiaro delle sezioni alternate */
  --paper:      #ffffff;
  /* --- COLORE D'ACCENTO ---
     Tutto il sito prende il colore da queste quattro righe.
     Per cambiarlo basta sostituirle: non c'è nessun colore scritto
     a mano altrove nel foglio di stile.

     Ocra (attiva)
       --accento:#c8871f  --accento-scuro:#8a5a12
       --accento-chiaro:#e6b25e  --su-accento:#201603

     Azzurro (quella di prima)
       --accento:#00a5c5  --accento-scuro:#04788e
       --accento-chiaro:#4fd3ee  --su-accento:#ffffff            */

  --accento:        #c8871f;   /* fondi pieni: etichette, pulsanti, filetti */
  --accento-scuro:  #8a5a12;   /* testo d'accento su fondo bianco */
  --accento-chiaro: #e6b25e;   /* testo d'accento su fondo scuro */
  --su-accento:     #201603;   /* testo scritto sopra il colore pieno */
  --muted:      #6b7679;
  --hair:       #d9dfe0;

  /* --- carattere ---
     display: il geometrico corsivo di "life as a climber", che resta
              la voce del sito (titoli, etichette, didascalie).
     testo:   grazie umanistico per i paragrafi lunghi.
     PER RIMETTERE TUTTO IN CORSIVO: --testo: var(--display);
     e aggiungere font-style:italic a .prose p */
  --display: "Century Gothic","Questrial","URW Gothic","Avant Garde",
             "Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --testo:   "Iowan Old Style","Palatino Linotype","Book Antiqua",
             Palatino,Georgia,serif;

  /* --- misure --- */
  --wrap: 1180px;
  /* larghezza dei paragrafi lunghi: piena, dentro il --wrap.
     PER TORNARE ALLA COLONNA STRETTA: --leggibile: 62ch;
     valore intermedio, righe sotto le 100 battute: 82ch */
  --leggibile: 100%;
  --gut: 1.25rem;
  --tocco: 44px;           /* area minima toccabile */
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:var(--testo);
  font-size:1.0625rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:900px){ body{ font-size:1.125rem; } }

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accento-scuro); text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accento); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.leggibile{ max-width:var(--leggibile); }

.salta{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:.8rem 1rem; z-index:999; }
.salta:focus{ left:.6rem; top:.6rem; }
.solo-lettori{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* =========================================================
   Etichetta di sezione — sostituisce le quattro fasce piene
   ========================================================= */
.etichetta{
  display:flex; align-items:center; gap:.85rem;
  margin:0 0 1.6rem;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accento-scuro);
}
.etichetta::after{ content:""; flex:1; height:1px; background:var(--accento); opacity:.45; }
.su-scuro .etichetta{ color:var(--accento-chiaro); }
.su-scuro .etichetta::after{ background:var(--accento-chiaro); opacity:.35; }

.titolo-sezione{
  margin:0 0 1.1rem;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.75rem,6vw,2.75rem); line-height:1.1;
  letter-spacing:-.01em; color:var(--ink);
}
.su-scuro .titolo-sezione{ color:#fff; }

.sezione{ padding:3.5rem 0; }
@media (min-width:900px){ .sezione{ padding:5.5rem 0; } }
.sezione--stone{ background:var(--stone); }
.sezione--ink{ background:var(--ink); color:#c3cccf; }

/* =========================================================
   Intestazione
   ========================================================= */
.testata{
  position:sticky; top:0; z-index:90;
  border-bottom:1px solid var(--hair);
  padding-top:env(safe-area-inset-top);
  isolation:isolate;
}
/* Lo sfondo sfocato sta su uno pseudo-elemento: se backdrop-filter
   stesse su .testata, questa diventerebbe blocco contenitore per gli
   elementi in position:fixed e il menu a schermo intero si ancorerebbe
   all'intestazione invece che alla finestra. */
.testata::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(10px);
}
.testata__riga{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:56px;
}
@media (min-width:900px){ .testata__riga{ min-height:70px; } }

.marchio{ display:flex; align-items:center; gap:.55rem; text-decoration:none;
  min-height:var(--tocco); }
.marchio__nome, .marchio__claim{ line-height:1.2; }
.marchio__nome{
  font-family:var(--display); font-weight:600; font-size:1.0625rem;
  letter-spacing:-.01em; color:var(--ink);
}
.marchio__claim{
  font-family:var(--display); font-style:italic; font-size:.8125rem; color:var(--muted);
  display:none;
}
@media (min-width:560px){ .marchio__claim{ display:inline; } }

/* menu */
.apri-menu{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-width:var(--tocco); min-height:var(--tocco);
  background:none; border:0; cursor:pointer; padding:0 .2rem;
  font-family:var(--display); font-style:italic; font-size:.75rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
}
.apri-menu svg{ width:22px; height:22px; fill:currentColor; }

.menu{ list-style:none; margin:0; padding:0; }
@media (max-width:899px){
  .menu{
    position:fixed; inset:0; z-index:95;
    background:var(--ink);
    display:flex; flex-direction:column; justify-content:center; gap:.4rem;
    padding:5rem var(--gut) calc(2rem + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateY(-100%);
    visibility:hidden;   /* a menu chiuso i link non sono raggiungibili col tab */
    transition:transform .38s cubic-bezier(.4,0,.2,1), visibility 0s linear .38s;
  }
  .menu.aperto{
    transform:translateY(0);
    visibility:visible;
    transition:transform .38s cubic-bezier(.4,0,.2,1), visibility 0s;
  }
  .menu a{
    display:block; padding:.7rem 0; text-decoration:none;
    font-family:var(--display); font-style:italic; font-size:1.75rem;
    color:#fff; border-bottom:1px solid rgba(255,255,255,.12);
  }
  .menu a[aria-current="page"]{ color:var(--accento); }
  .chiudi-menu{
    position:fixed; top:calc(.6rem + env(safe-area-inset-top)); right:var(--gut); z-index:100;
    width:var(--tocco); height:var(--tocco); display:none;
    background:none; border:0; cursor:pointer; color:#fff;
  }
  .chiudi-menu svg{ width:24px; height:24px; fill:currentColor; margin-inline:auto; }
  body.menu-aperto .chiudi-menu{ display:block; }
  body.menu-aperto{ overflow:hidden; }
}
/* le voci che portano fuori dal sito lo dichiarano */
.menu a.esterno::after,
.piede a[target="_blank"]::after{ content:"↗"; margin-left:.25rem; font-size:.85em; }

@media (min-width:900px){
  .apri-menu, .chiudi-menu{ display:none; }
  .menu{ display:flex; gap:1.4rem; }
  .menu a{
    text-decoration:none; padding:.6rem 0;
    min-height:var(--tocco); display:inline-flex; align-items:center;
    font-family:var(--display); font-style:italic; font-size:.9375rem;
    color:var(--ink-soft); border-bottom:2px solid transparent;
  }
  .menu a:hover{ color:var(--accento-scuro); }
  .menu a[aria-current="page"]{ border-bottom-color:var(--accento); color:var(--ink); }
}

/* =========================================================
   Apertura: slideshow a piena altezza
   ========================================================= */
.apertura{ position:relative; background:var(--ink); overflow:hidden; }
.apertura__vista{ position:relative; height:calc(100svh - 56px); min-height:420px; max-height:780px; }
@media (min-width:900px){
  .apertura__vista{ height:calc(100vh - 70px); max-height:820px; }
}
.apertura__rullo{ position:absolute; inset:0; }
.diapositiva{
  position:absolute; inset:0; margin:0;
  opacity:0; transition:opacity 1.1s ease;
}
.diapositiva.attiva{ opacity:1; }
.diapositiva img{ width:100%; height:100%; object-fit:cover; }
.apertura__velo{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,14,16,.82) 0%, rgba(8,14,16,.25) 42%, rgba(8,14,16,0) 70%);
}

.apertura__testo{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 var(--gut) calc(2.4rem + env(safe-area-inset-bottom));
}
.apertura__nome{
  margin:0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,10vw,4.5rem); line-height:1; letter-spacing:-.02em;
  color:#fff;
}
.apertura__claim{
  margin:.5rem 0 0;
  font-family:var(--display); font-style:italic;
  font-size:clamp(.95rem,3.6vw,1.4rem); color:var(--accento-chiaro);
}
.apertura__dato{
  margin:1.4rem 0 0; max-width:34rem;
  font-family:var(--testo); font-size:.9375rem; line-height:1.55; color:#c8d3d6;
}
.apertura__dato b{ color:#fff; font-weight:600; }

.apertura__comandi{
  position:absolute; right:var(--gut);
  bottom:calc(2.4rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.55rem;
}
.apertura__punti{ display:flex; gap:.45rem; }
.apertura__punti button{
  width:var(--tocco); height:var(--tocco); padding:0;
  background:none; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.apertura__punti button::before{
  content:""; width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(255,255,255,.9); transition:background .2s ease;
}
.apertura__punti button[aria-selected="true"]::before{ background:#fff; }
.apertura__conta{
  font-family:var(--display); font-size:.75rem; letter-spacing:.16em; color:#fff; opacity:.8;
}
@media (max-width:759px){
  /* su telefono i comandi vanno sotto al testo, non accanto */
  .apertura__testo{ padding-bottom:calc(5rem + env(safe-area-inset-bottom)); }
  .apertura__comandi{
    left:calc(var(--gut) - .55rem); right:auto;
    bottom:calc(1rem + env(safe-area-inset-bottom));
  }
}
.apertura__credito:empty{ display:none; }
.apertura__credito{
  position:absolute; left:var(--gut); top:1rem;
  font-family:var(--display); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.55);
}

/* =========================================================
   Citazione di apertura
   ========================================================= */
.citazione{ margin:0; }
.citazione blockquote{
  margin:0; max-width:34ch;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.35rem,5.2vw,2.25rem); line-height:1.32; color:var(--ink);
}
.citazione cite{
  display:block; margin-top:1.2rem; font-style:normal;
  font-family:var(--display); font-size:.75rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

/* =========================================================
   SEGNO DISTINTIVO — la scheda in stile topo
   ========================================================= */
.settori{ display:grid; gap:3rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .settori{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:3.5rem 2.5rem; } }
@media (min-width:1080px){ .settori{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.settore{ display:flex; flex-direction:column; min-width:0; }
.settore__foto{
  display:block; position:relative; overflow:hidden;
  background:var(--ink); aspect-ratio:3/2;
}
.settore__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.settore:hover .settore__foto img{ transform:scale(1.04); }
.settore__disciplina{
  position:absolute; left:0; bottom:0;
  padding:.4rem .8rem;
  background:var(--accento); color:var(--su-accento);
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
}

.settore__titolo{
  margin:.55rem 0 .55rem;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.3rem; line-height:1.25; letter-spacing:-.01em;
}
.settore__titolo a{ color:var(--ink); text-decoration:none;
  display:inline-block; padding-block:.6rem; }
.settore__titolo a:hover{ color:var(--accento-scuro); }

/* la riga dei dati: quello che serve sapere prima di partire */
.topo{
  list-style:none; display:flex; flex-wrap:wrap; margin:0 0 .9rem; padding:0;
  font-family:var(--display); font-size:.8125rem; letter-spacing:.04em; color:var(--muted);
}
.topo li{ display:flex; align-items:center; }
.topo li + li::before{
  content:""; width:1px; height:11px; margin-inline:.6rem;
  background:var(--accento); opacity:.6;
}
.topo b{ color:var(--ink); font-weight:600; }
.su-scuro .topo{ color:#8d9a9e; }
.su-scuro .topo b{ color:#fff; }

.settore__testo{ margin:0 0 1.1rem; font-size:.9375rem; line-height:1.62; }
.settore__vai{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem; min-height:var(--tocco);
  font-family:var(--display); font-style:italic; font-size:.8125rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accento-scuro); text-decoration:none;
}
.settore__vai::after{ content:"→"; transition:transform .2s ease; }
.settore__vai:hover::after{ transform:translateX(4px); }

/* =========================================================
   Galleria su fondo scuro
   ========================================================= */
.galleria{
  display:grid; gap:10px;
  grid-auto-flow:column; grid-auto-columns:76%;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-bottom:1rem;
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  scrollbar-width:thin;
}
.galleria > figure{ margin:0; scroll-snap-align:center; }
@media (min-width:760px){
  .galleria{
    grid-auto-flow:row; grid-template-columns:repeat(4,1fr);
    overflow:visible; margin-inline:0; padding-inline:0; gap:14px;
  }
}
.galleria img{ width:100%; aspect-ratio:2/3; object-fit:cover; background:#1c2427; }
.galleria figcaption{ padding-top:.7rem; }
.galleria b{
  display:block; font-family:var(--display); font-style:italic; font-size:.9375rem; color:#fff;
}
.galleria span{
  display:block; font-family:var(--display); font-size:.75rem; line-height:1.5; color:#8d9a9e;
}
.scorri-suggerimento{
  margin:.9rem 0 0; font-family:var(--display); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:#6f7c80;
}
@media (min-width:760px){ .scorri-suggerimento{ display:none; } }

/* =========================================================
   Testo lungo
   ========================================================= */
.prose p{ margin:0 0 1.15rem; }
.prose p:last-child{ margin-bottom:0; }
.prose .attacco{
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,3.4vw,1.3rem); line-height:1.5; color:var(--ink);
}
.capolettera::first-letter{
  float:left; font-family:var(--display); font-style:italic;
  font-size:3.6rem; line-height:.82; margin:.16rem .5rem 0 0; color:var(--accento-scuro);
}
.firma{ margin-top:2rem; }
.firma img{ width:130px; }

.grido{
  margin:2.2rem 0 0;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.1rem,4vw,1.6rem); letter-spacing:.02em; color:var(--accento-scuro);
}

/* =========================================================
   Video — anteprime finte, YouTube si carica solo al clic
   ========================================================= */
.video-griglia{ display:grid; gap:2.4rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .video-griglia{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.6rem 2.5rem; } }
@media (min-width:1080px){ .video-griglia{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.video{ margin:0; min-width:0; }
.video__telaio{
  position:relative; width:100%; aspect-ratio:16/9;
  padding:0; border:0; cursor:pointer; overflow:hidden;
  background:#000; display:block;
}
.video__telaio img{ width:100%; height:100%; object-fit:cover; transition:opacity .3s ease; }
.video__telaio:hover img{ opacity:.72; }
.video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:var(--accento); display:grid; place-items:center;
  transition:transform .25s ease;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.video__telaio:hover .video__play{ transform:translate(-50%,-50%) scale(1.08); }
.video__play svg{ width:26px; height:26px; fill:var(--su-accento); margin-left:3px; }
.video__telaio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.video__titolo{
  margin:1rem 0 .6rem;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.2rem; line-height:1.25; color:var(--ink);
}
.su-scuro .video__titolo{ color:#fff; }

.video__esterno{
  display:inline-flex; align-items:center; gap:.35rem; min-height:var(--tocco);
  font-family:var(--display); font-style:italic; font-size:.875rem;
  letter-spacing:.06em; color:var(--accento-chiaro); text-decoration:none;
}
.video__esterno::after{ content:"↗"; }
.video__esterno:hover{ text-decoration:underline; }

.canale{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;
  margin-top:2.6rem;
}
.canale__vai{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:var(--tocco); padding:.7rem 1.3rem;
  background:var(--accento); color:var(--su-accento); text-decoration:none;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:.875rem; letter-spacing:.06em;
  transition:background .2s ease;
}
.canale__vai:hover{ background:var(--accento-scuro); }
.canale__vai svg{ width:20px; height:20px; fill:currentColor; }
.canale__nota{
  margin:0; font-family:var(--display); font-size:.75rem;
  letter-spacing:.04em; color:var(--muted);
}
.su-scuro .canale__nota{ color:#8d9a9e; }

/* =========================================================
   Contatti
   ========================================================= */
.contatti__mail{
  display:inline-block; margin-top:.6rem;
  font-family:var(--display); font-style:italic;
  font-size:clamp(1.2rem,5vw,2rem); color:var(--ink); text-decoration:none;
  border-bottom:2px solid var(--accento); padding-bottom:.15rem;
  min-height:var(--tocco);
}
.contatti__mail:hover{ color:var(--accento-scuro); }
.contatti__dove{
  margin:1.2rem 0 0; font-family:var(--display); font-size:.8125rem;
  letter-spacing:.08em; color:var(--muted);
}

/* =========================================================
   Sponsor
   ========================================================= */
.gruppo + .gruppo{ margin-top:2.6rem; }
.gruppo__titolo{
  margin:0 0 1.2rem;
  font-family:var(--display); font-style:italic; font-size:.8125rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.loghi{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1rem;
}
@media (min-width:560px){ .loghi{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.loghi a{
  display:grid; place-items:center; gap:.5rem;
  min-height:var(--tocco); text-decoration:none;
}
.loghi img{
  height:56px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55; transition:filter .25s ease, opacity .25s ease;
}
.loghi a:hover img, .loghi a:focus-visible img{ filter:none; opacity:1; }
.loghi span{
  font-family:var(--display); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); text-align:center;
}

/* =========================================================
   Piede
   ========================================================= */
.piede{
  background:var(--ink); color:#7f8c90;
  padding:3rem 0 calc(2.4rem + env(safe-area-inset-bottom));
}
.piede__riga{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; justify-content:space-between; align-items:center; }
.piede nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.piede a{
  font-family:var(--display); font-style:italic; font-size:.875rem;
  color:#c3cccf; text-decoration:none; min-height:var(--tocco);
  display:inline-flex; align-items:center;
}
.piede a:hover{ color:#fff; }
.piede small{
  font-family:var(--display); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase;
}

/* comparsa progressiva alla lettura */
.compare{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.compare.visibile{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .compare{ opacity:1; transform:none; } }


/* =========================================================
   Modulo di contatto a comparsa
   L'indirizzo non compare piu' in pagina: si scrive da qui.
   ========================================================= */
.contatti__scrivi{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:.6rem; padding:.85rem 1.6rem; min-height:var(--tocco);
  border:0; border-radius:2px; cursor:pointer;
  background:var(--accento); color:var(--su-accento);
  font-family:var(--display); font-style:italic;
  font-size:clamp(1rem,4vw,1.35rem); letter-spacing:.02em;
  transition:background .2s ease;
}
.contatti__scrivi:hover{ background:var(--accento-scuro); color:#fff; }
.contatti__scrivi::after{ content:"→"; transition:transform .2s ease; }
.contatti__scrivi:hover::after{ transform:translateX(4px); }

.piede__riga .scrivi-piede{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:inherit; text-decoration:underline;
  text-underline-offset:3px;
}

.velo{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:1rem; overflow-y:auto;
  background:rgba(12,19,21,.72);
}
.velo[hidden]{ display:none; }

.modulo{
  position:relative; width:100%; max-width:34rem; margin:auto;
  background:var(--paper); padding:2rem 1.4rem 1.8rem;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
@media (min-width:560px){ .modulo{ padding:2.4rem 2.4rem 2rem; } }

.modulo__chiudi{
  position:absolute; top:.4rem; right:.4rem;
  width:var(--tocco); height:var(--tocco);
  background:none; border:0; cursor:pointer; color:var(--muted);
}
.modulo__chiudi svg{ width:22px; height:22px; fill:currentColor; margin-inline:auto; }
.modulo__chiudi:hover{ color:var(--ink); }

.modulo h2{
  margin:.2rem 0 1.4rem;
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,6vw,2rem); color:var(--ink); line-height:1.15;
}

.campo{ margin-bottom:1.1rem; }
.campo label{
  display:block; margin-bottom:.35rem;
  font-family:var(--display); font-size:.8125rem; font-style:italic;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.campo input,
.campo select,
.campo textarea{
  width:100%; padding:.7rem .8rem; min-height:var(--tocco);
  font-family:var(--testo); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--hair); border-radius:2px;
}
.campo textarea{ min-height:8rem; resize:vertical; line-height:1.6; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus{ outline:2px solid var(--accento); outline-offset:1px; border-color:transparent; }

/* Campo esca: fuori dallo schermo, non nascosto con display:none,
   perche' i programmi automatici saltano cio' che e' dichiarato invisibile. */
.esca{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.consenso{
  display:flex; gap:.7rem; align-items:flex-start;
  margin:1.3rem 0 1.5rem; font-size:.875rem; line-height:1.55; color:var(--ink-soft);
}
.consenso input{ width:20px; height:20px; margin-top:.15rem; flex:0 0 auto; accent-color:var(--accento); }
.consenso a{ color:var(--accento-scuro); }

.modulo__invia{
  width:100%; padding:.95rem 1.4rem; min-height:var(--tocco);
  border:0; border-radius:2px; cursor:pointer;
  background:var(--accento); color:var(--su-accento);
  font-family:var(--display); font-style:italic; font-size:1.05rem;
  letter-spacing:.04em; transition:background .2s ease;
}
.modulo__invia:hover{ background:var(--accento-scuro); color:#fff; }
.modulo__invia[disabled]{ opacity:.55; cursor:default; }

.modulo__esito{
  margin:1rem 0 0; font-size:.9375rem; line-height:1.5; min-height:1.4rem;
}
.modulo__esito.ok{ color:var(--accento-scuro); }
.modulo__esito.errore{ color:#a4231d; }

body.modulo-aperto{ overflow:hidden; }

/* =========================================================
   Slideshow dentro una sezione
   Riusa .apertura__rullo / .diapositiva / .apertura__punti
   dell'apertura: cambia solo la cornice, che non deve essere
   alta quanto lo schermo, e la didascalia, che sta fuori.
   ========================================================= */
.rullo-sezione{ margin:0 0 1.8rem; }
.rullo-sezione__cornice{ position:relative; background:var(--ink); overflow:hidden; }
.apertura__vista.rullo-sezione__vista{
  height:auto; min-height:0; max-height:none;
  /* sul telefono 16:10 e non 16:9: 16:9 schiaccia troppo le foto di gruppo.
     Piu' la cornice e' alta, piu' il browser taglia ai lati. */
  aspect-ratio:16 / 10;
}
@media (min-width:900px){
  .apertura__vista.rullo-sezione__vista{ aspect-ratio:2 / 1; }
}
/* il velo qui serve solo a staccare pallini e contatore dalla foto */
.rullo-sezione .apertura__velo{
  background:linear-gradient(to top, rgba(8,14,16,.55) 0%, rgba(8,14,16,.10) 30%, rgba(8,14,16,0) 52%);
}
.rullo-sezione .apertura__comandi{ right:.9rem; left:auto; bottom:.9rem; }

/* didascalia su due righe, sotto la foto: niente sovrapposizioni */
.rullo-sezione__dida{
  margin:.85rem 0 0; display:flex; flex-direction:column; gap:.1rem;
  min-height:2.9rem;   /* riservata in anticipo: la pagina non salta al cambio */
}
.rullo-sezione .apertura__credito{
  position:static; left:auto; top:auto;
  color:var(--accento-scuro);
}
.rullo-sezione .apertura__nota{
  font-family:var(--display); font-size:.95rem; line-height:1.35; color:var(--muted);
}


/* =========================================================
   Blocco unico delle correzioni e delle pagine nuove.
   Prima stava sparso dentro cms.php, index.php e chi-sono.php:
   qui e' scritto una volta sola e vale per tutto il sito.
   ========================================================= */

/* --- niente deve spingere la pagina di lato --- */
html{ overflow-x:clip; }
body{ overflow-x:clip; max-width:100%; }
img, video, iframe, svg{ max-width:100%; }
.prose{ overflow-wrap:break-word; }
.prose a{ overflow-wrap:anywhere; }

/* --- pagina dell'articolo --- */
.articolo__meta{
  margin:0 0 1.6rem; font-family:var(--display); font-size:.75rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.articolo__somm{
  margin:0 0 2rem; font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,3.2vw,1.3rem); line-height:1.5; color:var(--ink);
}
.articolo__hero{ margin:0 0 1.4rem; background:var(--ink); }
.articolo__hero img{ width:100%; height:auto; display:block; }
.articolo__credito{
  margin:.5rem 0 1.6rem; font-family:var(--display); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.scheda-tec{ margin:0 0 2.4rem; padding:1.1rem 1.3rem; background:var(--stone); }
.scheda-tec dl{
  margin:0; display:grid; gap:.7rem 1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.scheda-tec dt{
  font-family:var(--display); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.scheda-tec dd{ margin:.15rem 0 0; font-family:var(--display); font-size:.9375rem; color:var(--ink); }

.foto{ margin:2rem 0; }
.foto img{ width:100%; height:auto; display:block; background:var(--stone); }
.foto figcaption{
  margin-top:.7rem; font-family:var(--display); font-size:.9375rem;
  line-height:1.4; color:var(--muted);
}
.prose h2{
  margin:2.4rem 0 .9rem; font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,3.6vw,1.5rem); line-height:1.25; color:var(--ink);
}
.etichette{ list-style:none; margin:2.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.etichette a{
  font-family:var(--display); font-size:.8125rem; color:var(--muted);
  border:1px solid var(--hair); border-radius:2px; padding:.3rem .65rem; text-decoration:none;
}
.etichette a:hover{ border-color:var(--accento); color:var(--accento-scuro); }
.torna{ margin:3rem 0 0; }

/* --- la citazione impaginata larga, centrata, fra virgolette --- */
.citazione--frase{ text-align:center; }
.citazione--frase blockquote{
  max-width:none;
  font-size:clamp(1.05rem,2.4vw,1.55rem);
  line-height:1.45;
  text-wrap:balance;
}
.citazione--frase blockquote::before{ content:'\201C'; }
.citazione--frase blockquote::after{ content:'\201D'; }
.citazione--frase cite{ margin-top:1rem; }

/* --- la frase della sezione Insegnamento --- */
.frase-guida{ margin:0 0 2.6rem; }
.frase-guida blockquote{
  margin:0; font-size:clamp(1.5rem,4.4vw,2rem); line-height:1.25; text-wrap:balance;
}

/* --- pagina Chi sono --- */
.sezione--apre{ padding-top:.875rem; }
@media (min-width:900px){ .sezione--apre{ padding-top:1.375rem; } }
.sezione--cit{ padding:1.75rem 0; }
@media (min-width:900px){ .sezione--cit{ padding:2.75rem 0; } }
.sezione--attacca{ padding-top:0; }
/* --- il ritratto di Chi sono sta FUORI dal .wrap in chi-sono.php:
       per questo occupa tutta la larghezza della finestra.
       Niente aspect-ratio e niente object-fit: la foto resta intera
       e l'altezza segue da sola la larghezza, a ogni dimensione. --- */
.ritratto{ margin:0 0 2.4rem; }
.ritratto img{ width:100%; height:auto; display:block; background:var(--stone); }
.ritratto figcaption{
  margin-top:.6rem; font-family:var(--display); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}