/*
Theme Name: Extopia
Theme URI: https://extopia.org
Author: Innova Design Studio
Author URI: https://innovadesignstudio.it
Description: Tema su misura per la landing di Extopia APS (Caltagirone).
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: extopia
*/

@font-face{font-family:'Peace Sans';src:url('assets/fonts/peace-sans.ttf') format('truetype');font-weight:400 900;font-display:swap}
@font-face{font-family:'Biscottini';src:url('assets/fonts/biscottini-regular.otf') format('opentype');font-weight:400;font-display:swap}
/* ===== Sanchez — self-hosted (GDPR: nessuna chiamata a fonts.gstatic.com) ===== */
/* latin-ext */
@font-face {
  font-family: 'Sanchez';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/sanchez-italic-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sanchez';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/sanchez-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sanchez';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/sanchez-normal-latinext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sanchez';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/sanchez-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bordeaux:#8c3c4a;--bordeaux-d:#6d2c37;--teal:#027276;--teal-d:#015659;--giallo:#edb259;--giallo-l:#f3ca8b;
  --paper:#FBF6F6;--ink:#2A2320;
  --display:'Peace Sans',system-ui,sans-serif;--body:'Sanchez',Georgia,serif;
  --maxw:1160px;
}

/* ===== PRELOADER · l'enso entra (stile awwwards), poi zoom e reveal della hero dal suo centro ===== */
.preloader{display:none}
html.js .preloader{
  display:block;position:fixed;inset:0;z-index:200;background:var(--giallo);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--hole,0px) - 48px),#000 var(--hole,0px));
  mask-image:radial-gradient(circle at 50% 50%,transparent calc(var(--hole,0px) - 48px),#000 var(--hole,0px));
}
html.js .pl-enso{
  position:fixed;inset:0;margin:auto;z-index:201;width:min(56vmin,430px);height:min(56vmin,430px);
  will-change:transform,opacity;pointer-events:none;opacity:0;
}
.pl-enso .pl-img{width:100%;height:100%;display:block}
.pl-enso .enso-fill{fill:var(--bordeaux)}
/* stato iniziale: tratto nascosto già dal primo paint, così l'enso non appare completo prima dell'animazione */
#ensoStroke{stroke-dasharray:1000;stroke-dashoffset:1000}
html.pl-done .preloader,html.pl-done .pl-enso{display:none!important}
@media (prefers-reduced-motion:reduce){html.js .preloader,html.js .pl-enso{display:none!important}}

*{margin:0;padding:0;box-sizing:border-box}
/* Lo sfondo su HTML e non solo su body e' quello che si vede quando la pagina rimbalza oltre
   il fondo su mobile. Senza, il colore del "canvas" (la superficie infinita dietro la pagina)
   lo eredita il body: qui e' --paper, quasi bianco, sotto un footer quasi nero. Da qui la
   striscia bianca oltre la fine. overscroll-behavior-y:none ferma il rimbalzo su Chrome
   Android ma non il rimbalzo del documento su Safari iOS, quindi il colore giusto serve
   comunque. Tenuto uguale al footer: e' il fondo pagina quello che si scavalca leggendo. */
html{scroll-behavior:smooth;overflow-x:clip;overscroll-behavior-y:none;background:var(--ink)}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior-y:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,5vw,52px)}
section{padding:clamp(72px,10vw,120px) 0}
.tag{font-family:var(--body);display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;padding:7px 15px;border-radius:999px;margin-bottom:24px}

html.js .rv{opacity:0;transform:translateY(24px)}
html.js .kick,html.js .hsub,html.js .cta-row .btn{opacity:0;transform:translateY(24px)}
html.js .hero-h1 .ln>span{transform:translateY(115%)}
html.js .dot{opacity:0}
@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .kick,html.js .hsub,html.js .cta-row .btn{opacity:1;transform:none}
  html.js .hero-h1 .ln>span{transform:none}
  html.js .dot{opacity:1}
  html{scroll-behavior:auto}
}

header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;padding:18px clamp(22px,5vw,52px);transition:background .35s}
header.s{background:var(--bordeaux-d)}
header img{height:30px}
header nav{margin-left:auto;display:flex;gap:4px;align-items:center}
header nav a{font-family:var(--body);font-size:14.5px;color:var(--paper);padding:8px 13px;border-radius:999px;transition:background .2s,color .2s}
header nav a:hover{background:rgba(255,255,255,.14)}
.menu{display:none;margin-left:auto;background:rgba(255,255,255,.12);border:0;padding:0;color:var(--paper);cursor:pointer;width:48px;height:48px;border-radius:50%;place-items:center}
.menu:hover{background:rgba(237,178,89,.22)}
.menu-enso{width:40px;height:40px;display:block;overflow:visible}
.menu-enso circle{fill:none;stroke:var(--giallo);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:66 10;transform:rotate(-28deg);transform-origin:center}

.hero{background:var(--bordeaux);color:var(--paper);min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 70px}
.dots-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 155px),transparent calc(100% - 46px));mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 155px),transparent calc(100% - 46px))}
.dots{position:absolute;inset:0;pointer-events:none;will-change:transform}
.dots circle{fill:none;stroke-width:2}
.hero-in{position:relative;z-index:2;max-width:960px}
.hero .kick{font-family:var(--body);font-style:italic;color:var(--giallo-l);font-size:clamp(16px,2.2vw,22px);margin-bottom:22px}
.hero-h1{font-size:clamp(2.6rem,8.6vw,6rem);color:var(--paper);margin-bottom:30px;line-height:1.0}
.hero-h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero-h1 .ln>span{display:block;will-change:transform}
.hero-h1 em{font-style:normal;color:var(--giallo)}
.hsub{font-size:clamp(1.1rem,1.9vw,1.35rem);color:#F3E6E4;max-width:46ch;margin-bottom:38px;line-height:1.55}
.btn{font-family:var(--display);font-weight:400;display:inline-flex;align-items:center;gap:10px;font-size:16px;padding:16px 30px;border-radius:999px;cursor:pointer;transition:transform .22s cubic-bezier(.22,1,.36,1)}
.btn:hover{transform:translateY(-3px)}
.btn-o{background:var(--giallo);color:var(--bordeaux-d)}
.btn-l{background:transparent;border:2px solid rgba(255,255,255,.5);color:var(--paper)}
/* La spaziatura tra i CTA la fa il gap del contenitore, non i margini dei pulsanti:
   così vale identica sia affiancati sia impilati, a qualsiasi larghezza. */
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

.blk h2{font-size:clamp(2rem,4.6vw,3.4rem)}
.about{background:var(--paper);position:relative;height:70svh;min-height:480px;padding:0;overflow:hidden}
.about-copy{position:absolute;z-index:3;top:0;left:0;max-width:min(740px,60%);padding:clamp(92px,13vh,132px) clamp(22px,5vw,52px) 0;pointer-events:none}
.about-copy .tag{background:var(--teal);color:var(--paper)}
.about-copy h2{color:var(--bordeaux);max-width:none;margin-bottom:18px;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.08}
.about-copy p{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--ink);max-width:44ch}
.pit{position:absolute;inset:0;z-index:1;overflow:hidden;touch-action:pan-y}
.chip-src{position:absolute;inset:0;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-end;justify-content:flex-end;padding:clamp(18px,4vw,52px)}
.perche{background:var(--giallo)}
.perche .tag{background:var(--bordeaux);color:var(--paper)}
.perche h2{color:var(--bordeaux-d);font-size:clamp(3rem,9vw,6.5rem);margin-bottom:22px}
.perche p{color:var(--ink);font-size:clamp(1.15rem,1.9vw,1.5rem);max-width:60ch;line-height:1.5}
.perche p b{color:var(--bordeaux-d)}
.chip{font-family:var(--display);font-weight:400;font-size:clamp(.92rem,1.7vw,1.3rem);padding:9px 20px;border-radius:999px;color:var(--paper);white-space:nowrap;user-select:none;-webkit-user-select:none}
.pit.physics .chip{position:absolute;top:0;left:0;will-change:transform;cursor:grab;touch-action:none}
.pit.physics .chip:active{cursor:grabbing}
/* La chip "Cipolla" e' un link, non una maniglia: non si trascina (vedi CATEGORIA_LINK in
   extopia.js). Puntatore da link, e touch-action:auto cosi' una passata verticale che parte
   da qui SCORRE la pagina invece di essere catturata: e' il browser a distinguere il tap dallo
   scorrimento, ed e' il motivo per cui la parola non si apre piu' per sbaglio. */
.pit.physics .chip[data-link],.pit.physics .chip[data-link]:active{cursor:pointer;touch-action:auto}
.chip:nth-of-type(3n+1){background:var(--bordeaux);color:var(--paper)}
.chip:nth-of-type(3n+2){background:var(--teal);color:var(--paper)}
.chip:nth-of-type(3n){background:var(--giallo);color:var(--bordeaux-d)}
/* Chip "Cipolla" (l'unica con data-link): cambia colore ogni 1s per farsi notare, perché
   nasconde il minigioco Semina. Cicla le STESSE tre coppie fondo/testo delle altre chip,
   quelle dell'array COLORS in extopia.js: sono le combinazioni con il contrasto già
   verificato dall'audit, giallo compreso (che vuole testo bordeaux scuro, non chiaro).
   Le tappe sono duplicate cosi' il colore SCATTA a fine periodo invece di sfumare, che
   attraverserebbe tinte intermedie mai verificate. La durata è il giro completo dei tre
   colori: 3s = 1s per colore, cioe' 1 Hz, sotto la soglia di 3 Hz di WCAG 2.3.1. Le
   animazioni vincono sugli stili inline, quindi non serve alzare la specificita' contro le
   regole nth-of-type qui sopra. */
.chip[data-link]{animation:chip-cipolla 3s linear infinite}
@keyframes chip-cipolla{
  0%,33.32%{background:var(--bordeaux);color:var(--paper)}
  33.33%,66.65%{background:var(--teal);color:var(--paper)}
  66.66%,100%{background:var(--giallo);color:var(--bordeaux-d)}
}
/* Reduced-motion: niente lampeggio. La chip resta gialla, cioe' il colore piu' acceso dei
   tre, quindi si distingue comunque dalle vicine; l'invito a cliccarla non dipende dal
   movimento. L'aria-label continua a dire che apre il gioco. */
@media (prefers-reduced-motion:reduce){.chip[data-link]{animation:none;background:var(--giallo);color:var(--bordeaux-d)}}

.do{background:var(--teal);color:var(--paper)}
/* #014a4d e non --teal-d (#015659): su giallo quello dava 4.49:1, sotto la soglia AA di 4.5. Qui siamo a 5.32:1. */
.do .tag{background:var(--giallo);color:#014a4d}
.do h2{color:var(--paper);margin-bottom:20px;max-width:16ch}
.do .do-intro{color:#E7F4F2;max-width:56ch;margin-bottom:34px;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.55}
.do ul{list-style:none;border-top:1px solid rgba(255,255,255,.25)}
.do li{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.25);font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,3.2vw,2.2rem);display:flex;justify-content:space-between;align-items:baseline;gap:20px;position:relative;color:var(--paper);transition:padding-left .32s cubic-bezier(.22,1,.36,1),color .32s}
.do li::before{content:"";position:absolute;left:-2px;top:50%;width:0;height:3px;background:var(--giallo);border-radius:2px;transform:translateY(-50%);transition:width .32s cubic-bezier(.22,1,.36,1)}
.do li:hover{padding-left:28px;color:var(--giallo-l)}
.do li:hover::before{width:20px}
.do li span{font-family:var(--body);font-size:14px;color:#E7F4F2;white-space:nowrap}

.projects{background:var(--giallo)}
.projects .tag{background:var(--bordeaux);color:var(--paper)}
.projects h2{color:var(--bordeaux-d);margin-bottom:36px}
.pj-intro{color:var(--bordeaux-d);max-width:52ch;margin-bottom:38px;font-size:clamp(1.05rem,1.7vw,1.25rem)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pgrid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
@media (max-width:960px){.pgrid-3{grid-template-columns:1fr 1fr}}
/* card non in evidenza (griglia a 3): titolo più piccolo */
.pgrid-3 .pcard h3{font-size:clamp(1.35rem,2.6vw,1.85rem)}
.pcard{background:var(--paper);border-radius:16px;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;min-height:300px;transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s cubic-bezier(.22,1,.36,1)}
.pcard:hover{transform:translateY(-7px);box-shadow:0 22px 46px rgba(42,35,32,.17)}
.pcard .pt{font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.pcard h3{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--bordeaux);margin-bottom:12px;position:relative}
.pcard h3::after{content:"";position:absolute;left:0;bottom:-9px;height:6px;width:78px;background:var(--bordeaux);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);filter:url(#rough)}
.pcard:hover h3::after{transform:scaleX(1)}
.pcard p{font-size:1.05rem;color:var(--ink);margin-bottom:26px;opacity:.85}
.pcard .go{font-family:var(--display);align-self:flex-start;padding:13px 26px;border-radius:999px;background:var(--bordeaux);color:var(--paper);transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s}
.pcard .go:hover,.pcard:hover .go{transform:translateY(-3px)}
.pcard.c-co .pt,.pcard.c-co h3{color:var(--teal)}
.pcard.c-co h3::after{background:var(--teal)}
.pcard.c-co .go{background:var(--teal)}
/* wordmark SpazioPoi in Biscottini (font del brand cliente) */
.pcard h3.wm-sp{font-family:'Biscottini',var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(2rem,5vw,3.2rem);line-height:.95;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.62em;row-gap:2px;color:#2a2320}
/* wordmark Contempo: logo ufficiale del brand cliente */
.pcard h3.wm-co{display:flex;align-items:flex-end;min-height:clamp(1.8rem,4vw,2.8rem)}
.logo-contempo{height:clamp(30px,4.6vw,42px);width:auto;display:block;fill:currentColor}
.pcard.c-co h3.wm-co{color:#2a2320}
/* CPT Progetti: logo che sostituisce il titolo (sfondo trasparente, niente bordi) */
.pcard h3.pcard-logo{margin:0 0 14px;padding:0;background:none;line-height:0}
.pcard h3.pcard-logo::after{display:none}
.pcard h3.pcard-logo img{height:var(--logo-h,66px);width:auto;max-width:100%;object-fit:contain;display:block}

.support{background:var(--bordeaux-d);color:var(--paper)}
.support .tag{background:var(--giallo);color:var(--bordeaux-d)}
.support h2{color:var(--paper);margin-bottom:8px}
.support .sub{color:#EBD9D6;margin-bottom:52px;max-width:48ch;font-size:1.1rem}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mode{background:rgba(255,255,255,.06);border-radius:14px;padding:28px;display:flex;flex-direction:column}
.mode h3{font-size:1.5rem;color:var(--giallo);margin-bottom:10px}
.mode p{color:#EBD9D6;font-size:1rem;margin-bottom:22px}
/* margin-top:auto incolla l'ultima riga al fondo: i tre CTA si allineano tra loro
   anche con testi di lunghezza diversa. */
.mode .data{margin-top:auto}
/* Il 5×1000 è un DATO da copiare, non un'azione: resta testo, non finge di essere un pulsante. */
.mode span.data{font-family:var(--body);display:block;color:var(--paper);font-size:1.05rem;letter-spacing:.02em}
/* Donazioni e Tesseramento sono azioni: pastiglia ocra piena, la stessa forma dei CTA
   del brand (hero e card progetti). Prima erano testo semplice e non si capiva fossero link. */
.mode a.data{font-family:var(--display);align-self:flex-start;display:inline-flex;align-items:center;gap:9px;background:var(--giallo);color:var(--bordeaux-d);padding:13px 24px;border-radius:999px;transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s}
.mode a.data:hover{transform:translateY(-3px);background:var(--giallo-l)}
@media (prefers-reduced-motion:reduce){.mode a.data{transition:background .2s}.mode a.data:hover{transform:none}}

.contact{background:var(--paper)}
.contact .tag{background:var(--teal);color:var(--paper)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,40px);align-items:start}
.contact h2{color:var(--bordeaux);margin-bottom:12px}
.contact .sub{color:var(--ink);margin-bottom:26px;max-width:40ch;opacity:.8}
/* form in orizzontale: Nome | Email in riga, Messaggio/consenso/invio a tutta larghezza */
.contact form{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;align-items:start;max-width:760px}
.contact form .field{margin-bottom:0}
.contact form .field:has(textarea){grid-column:1/-1}
.contact form .field-consent{grid-column:1/-1;margin:0}
.contact form p,.contact form .form-note,.contact form button[type=submit],.contact form input[type=submit],.contact form .wpcf7-submit,.contact form .wpcf7-spinner,.contact .wpcf7-response-output{grid-column:1/-1}
.contact form button[type=submit],.contact form input[type=submit],.contact form .wpcf7-submit{justify-self:start}
@media (max-width:560px){.contact form{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{font-family:var(--body);display:block;font-size:13px;color:var(--ink);margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:var(--body);font-size:16px;background:#fff;border:1.5px solid rgba(42,35,32,.34);border-radius:10px;padding:13px 15px;color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--teal)}
.field textarea{min-height:120px;resize:vertical}
.info{display:flex;flex-wrap:wrap;gap:14px 34px;margin-top:8px}
.info .row{padding:0;border:0;display:flex;flex-direction:column;gap:2px;font-size:1rem}
.info .row .k{color:var(--teal);min-width:0;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase}

footer{background:var(--ink);color:#E9D7D4;padding:clamp(50px,6vw,74px) 0 38px}
.foot-top{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;margin-bottom:36px}
.foot-brand img{height:30px;width:auto;margin-bottom:16px}
.foot-brand p{font-size:.98rem;line-height:1.5;color:rgba(233,215,212,.72);max-width:34ch}
.foot-cols{display:flex;gap:clamp(34px,6vw,80px);flex-wrap:wrap}
.foot-col h3{font-family:var(--body);font-weight:400;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--giallo);margin-bottom:14px}
.foot-col a,.foot-col span{display:block;font-size:1rem;color:#E9D7D4;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(233,215,212,.16);padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;font-size:.82rem;color:rgba(233,215,212,.62)}
.foot-bot a{color:var(--giallo);text-decoration:none}
.foot-bot a:hover{text-decoration:underline}

@media (max-width:860px){ header nav{display:none} .menu{display:grid} }
@media (max-width:820px){ .pgrid,.pgrid-3,.contact-grid{grid-template-columns:1fr} .modes{grid-template-columns:1fr} }
@media (max-width:640px){ .about{height:100svh} .about-copy{max-width:100%;padding:clamp(58px,7.5vh,82px) clamp(22px,5vw,52px) 44px;background:linear-gradient(var(--paper) 52%,rgba(251,246,246,.62) 76%,rgba(251,246,246,0))} .about-copy h2{font-size:clamp(1.5rem,6.6vw,2.05rem)} .about-copy h2 br{display:none} .about-copy p{max-width:100%} .chip{font-size:.72rem;padding:5px 10px} .do li{flex-direction:column;align-items:flex-start;gap:2px} .do li span{white-space:normal} }

/* ===== MOSSA 1 · materialità: grana + pennellate ===== */
.grain{position:fixed;inset:0;z-index:95;pointer-events:none;mix-blend-mode:multiply;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pass{line-height:0;position:relative;z-index:2;margin:-1px 0;pointer-events:none}
.pass svg{display:block;width:100%;height:clamp(24px,3.4vw,42px)}
.pass path{stroke-linecap:round}

/* ===== MOSSA 2 · navigazione: sezione attiva nel menu ===== */
header nav a{position:relative}
header nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:5px;height:2px;background:var(--giallo);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
header nav a:hover::after,header nav a.active::after{transform:scaleX(1)}
header nav a.lang::after{display:none}
header nav a.active{color:var(--giallo-l)}

/* ===== MOSSA 3 · affordance buzzword: hint + rimescola ===== */
.pit-hint{font-family:var(--body);font-size:14px;color:var(--ink);opacity:.7;margin-top:20px;display:flex;align-items:center;gap:9px;transition:opacity .5s;max-width:34ch}
.pit-hint.gone{opacity:0}
.pit-hint svg{width:20px;height:20px;flex:none;color:var(--teal)}
.reshuffle{pointer-events:auto;font-family:var(--display);font-weight:400;font-size:14.5px;color:var(--paper);background:var(--bordeaux);border:0;border-radius:999px;padding:11px 22px;margin-top:16px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s}
.reshuffle:hover{transform:translateY(-2px);background:var(--bordeaux-d)}
.reshuffle svg{width:16px;height:16px;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.reshuffle:hover svg{transform:rotate(-180deg)}
@media (prefers-reduced-motion:reduce){.reshuffle svg{transition:none}}
/* torna su · enso-progress */
.to-top{position:fixed;right:clamp(16px,3.5vw,28px);bottom:clamp(16px,3.5vw,28px);z-index:70;width:clamp(52px,7vw,60px);height:clamp(52px,7vw,60px);border:0;padding:0;cursor:pointer;border-radius:50%;background:var(--bordeaux-d);color:var(--paper);box-shadow:0 10px 26px rgba(42,35,32,.28);display:grid;place-items:center;opacity:0;transform:translateY(10px) scale(.82);pointer-events:none;transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1),background .2s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top.show:hover{transform:translateY(-3px);background:var(--bordeaux)}
.to-top:focus-visible{outline:3px solid var(--giallo);outline-offset:3px}
.tt-enso{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tt-enso circle{fill:none;stroke-linecap:round}
.tt-track{stroke:var(--giallo);opacity:.22;stroke-width:6}
.tt-ring{stroke:var(--giallo);stroke-width:6.5;stroke-dasharray:251.33;stroke-dashoffset:251.33;transition:stroke-dashoffset .15s linear;filter:url(#roughEnso)}
.tt-arrow{position:relative;width:40%;height:40%}
.tt-arrow path{fill:none;stroke:var(--paper);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}.to-top.show,.to-top.show:hover{transform:none}.tt-ring{transition:none}}

/* ===== QA: focus, skip-link, menu mobile, form, link info, lingua ===== */
:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.menu:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px rgba(237,178,89,.6)}
.skip{position:fixed;left:10px;top:-64px;z-index:130;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:0 0 10px 10px;font-family:var(--body);transition:top .2s}
.skip:focus{top:0}
/* Testo che esiste per chi usa uno screen reader ma non si vede.
   Serve alle etichette del modulo contatti: a video restano solo i placeholder, come da
   scelta di design, ma i campi continuano ad avere un nome per chi non vede lo schermo.
   Non usare display:none né visibility:hidden: quelli lo tolgono anche agli screen reader. */
.solo-lettori{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.field input::placeholder,.field textarea::placeholder{color:rgba(42,35,32,.56)}
.form-note{font-size:12.5px;color:var(--ink);opacity:.62;margin-top:12px;max-width:46ch}
/* Nota che prende il posto del modulo quando è spento: qui non è una postilla in piccolo,
   è l'unico modo che resta per scrivere, quindi si legge come il testo di servizio. */
.form-off{font-size:1rem;opacity:.9;margin-top:22px}
.form-off a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}
.form-off a:hover{color:var(--bordeaux-d)}
.info a{color:var(--teal)}
.info a:hover{text-decoration:underline}
.brand{display:inline-flex;align-items:center}
.lang{padding:7px 12px;border-radius:999px;font-family:var(--body);font-size:14px;color:var(--paper);white-space:nowrap}
.lang .en{opacity:.42}

/* ===== Selettore lingua (GTranslate, aspetto "lang_codes") =====
   Il plugin rende due link testuali, IT e EN, e marca quello attivo con .gt-current-lang.
   Li rivestiamo come il vecchio segnaposto "IT · EN" del tema: lingua corrente piena, l'altra
   in trasparenza, dentro il pill .lang. Il bordo del pill stava su "header nav .lang": ora che
   il selettore e' fuori dalla nav va rimesso qui, o sotto gli 860px resterebbe senza. */
/* Il pill sta su .lang e non su "header > .lang" perche' sotto gli 860px lo stesso elemento
   viene spostato in fondo al menu: lo stile deve valere in tutti e due i posti. */
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.4)}
header>.lang{margin-left:4px}
.lang .gtranslate_wrapper{display:inline-flex;align-items:center}
.lang .glink{color:var(--paper);opacity:.42;transition:opacity .2s;text-decoration:none}
.lang .glink.gt-current-lang,.lang .glink:hover,.lang .glink:focus-visible{opacity:1}
.lang .glink:hover{text-decoration:underline}
/* Separatore: pointer-events:none perche' la barra non sia una zona cliccabile che cambia lingua. */
.lang .glink+.glink::before{content:"/";margin:0 7px;opacity:.42;pointer-events:none;display:inline-block}
/* Il gadget di Google ("Traduttore" + combo) serve al funzionamento ma non si mostra. */
.lang #google_translate_element2{display:none}
/* Google, quando traduce, prova a spingere la pagina giu' con una barra propria: qui c'e' un
   header fisso, la sposterebbe fuori posto. */
.skiptranslate iframe{display:none!important}
body{top:0!important}
/* NB: sotto gli 860px il selettore lingua non sta piu' nella barra (il JS lo sposta in fondo
   al menu), quindi la barra torna a logo + hamburger e .menu tiene il suo margin-left:auto.
   Qui c'era una regola che glielo toglieva per far posto al pill: spingeva l'hamburger
   accanto al logo. Non rimetterla. */
.mobile-menu{display:none}
.mobile-menu.open{display:flex;position:fixed;inset:0;z-index:120;background:var(--bordeaux-d);flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;padding:0 clamp(30px,9vw,60px);overflow:hidden}
.mm-enso{position:absolute;top:50%;left:50%;width:min(88vw,410px);height:min(88vw,410px);transform:translate(-50%,-50%);pointer-events:none;z-index:1;fill:var(--giallo);opacity:.18}
/* margin auto sopra e sotto: i link restano centrati nello spazio che AVANZA sopra il blocco
   in fondo, invece di essere centrati nel pannello e finirgli addosso sugli schermi bassi. */
.mm-links{position:relative;z-index:2;display:flex;flex-direction:column;gap:0;width:100%;margin:auto 0}
.mm-links a{font-family:var(--display);color:var(--paper);font-size:clamp(1.9rem,8.5vw,2.6rem);padding:7px 0}
.mm-close{position:absolute;top:14px;right:clamp(16px,5vw,28px);width:48px;height:48px;padding:0;background:none;border:0;color:var(--paper);font-size:30px;line-height:1;cursor:pointer}
/* Fondo del menu: mail, social e selettore lingua.
   NEL FLUSSO, non in posizione assoluta: era assoluto e sugli schermi bassi i link del menu
   ci finivano sopra. Da elemento flex in colonna la sovrapposizione non e' piu' possibile a
   nessuna altezza di schermo, invece di dipendere da quanto sono stretti i link. */
.mm-foot{position:relative;z-index:2;width:100%;margin-bottom:clamp(24px,5vh,44px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.mm-mail{font-family:var(--body);font-size:15px;color:var(--paper);opacity:.82;word-break:break-all}
.mm-mail:hover{opacity:1;text-decoration:underline}
.mm-social{display:flex;gap:10px;margin-left:auto}
.mm-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--paper);border:1px solid rgba(255,255,255,.24);transition:color .2s,border-color .2s,background .2s}
.mm-social a:hover{color:var(--ink);background:var(--giallo);border-color:var(--giallo)}
/* Il selettore, quando il JS lo sposta qui dentro, va a capo su una riga sua. L'a capo lo
   forza un separatore a larghezza piena e altezza zero: dare flex-basis:100% al pill lo
   allargherebbe a tutta la riga, e un bordo arrotondato lungo 1200px non e' un pill. */
.mm-foot::before{content:"";flex:0 0 100%;height:0;order:1}
.mm-foot .lang{order:2;flex:0 0 auto}
.menu[aria-expanded="true"]{color:var(--giallo)}

/* ===== Contact Form 7: allinea l'output al design della Proposta F ===== */
.contact form .wpcf7-form-control-wrap{display:block}
.contact form input[type=submit].btn,.contact form .wpcf7-submit{background:var(--bordeaux);color:var(--paper);border:0}
.field-consent{margin:4px 0 14px;font-family:var(--body);font-size:13.5px;color:var(--ink);display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.field-consent a{color:var(--teal);text-decoration:underline}
.field-consent .wpcf7-list-item{margin:0}
.field-consent .wpcf7-list-item-label{margin-left:6px}
.contact .wpcf7-response-output{font-family:var(--body);font-size:14px;border-radius:10px;margin:16px 0 0;padding:11px 15px;border-width:1.5px}
.contact .wpcf7-not-valid-tip{font-family:var(--body);font-size:12.5px;color:var(--bordeaux);margin-top:5px}
.contact form .wpcf7-spinner{margin:10px 0 0}

/* ===== Gate comparsa cookie banner Complianz (COMPORTAMENTO, non stile del banner) =====
 * Vela solo opacity/visibility del contenitore finché extopia.js non aggiunge .cmplz-ready
 * su <html> (a hero finita, o via failsafe). Non tocca lo stato di consenso né il display
 * gestito da Complianz: se il banner non deve comparire (consenso già dato), resta nascosto.
 * visibility:hidden = niente focus/tab prima della comparsa (nessun focus-trap). */
body.extopia-home #cmplz-cookiebanner-container{transition:opacity .45s ease}
html:not(.cmplz-ready) body.extopia-home #cmplz-cookiebanner-container{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){body.extopia-home #cmplz-cookiebanner-container{transition:none}}

/* ==========================================================================
   DIARIO · sezione home, archivio, articolo e pagine interne
   Le card non hanno "chrome": immagine, filetto, testo sulla carta. È la lane
   dichiarata nel brand (broadside civico stampato), non la griglia di riquadri.
   ========================================================================== */

/* --- Pagine interne: niente hero sotto l'header, quindi l'header parte già pieno --- */
/* Pagine interne: header pieno dal primo pixel, perche' sotto non c'e' una banda colorata che
   regga un menu chiaro in trasparenza.
   ECCEZIONI il Diario (body.blog) e l'articolo singolo (body.single): montano la testata
   .phero bordeaux, alta abbastanza da passarci sotto l'header, quindi si comportano come la
   home — trasparente all'inizio e barra quando si scorre, che la mette header.s. */
body.extopia-inner:not(.blog):not(.single) header{background:var(--bordeaux-d)}

/* --- Testata delle pagine interne --- */
.phero{background:var(--bordeaux);color:var(--paper);position:relative;overflow:hidden;padding:clamp(118px,16vh,172px) 0 clamp(44px,6.5vw,72px)}
.phero .wrap{position:relative;z-index:2}
.phero .tag{background:var(--giallo);color:var(--bordeaux-d)}
.phero h1{font-family:var(--display);font-weight:400;color:var(--paper);font-size:clamp(2rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.01em;max-width:22ch;text-wrap:balance}
.phero-sub{color:#F3E6E4;max-width:58ch;margin-top:18px;font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.55}
.phero-enso{position:absolute;top:50%;right:-9%;width:min(52vw,430px);transform:translateY(-46%);z-index:1;pointer-events:none;line-height:0}
.phero-enso svg{width:100%;height:auto;display:block;fill:var(--giallo);opacity:.13}
.pback{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-size:14px;color:#EBD9D6;margin-bottom:20px;padding:7px 15px 7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.3);transition:background .2s,color .2s}
.pback:hover{background:rgba(255,255,255,.14);color:var(--paper)}
.pback .arr{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.pback:hover .arr{transform:translateX(-4px)}

/* --- Riga meta: data in corsivo (come il kicker della hero), categoria a pastiglia --- */
.nmeta{font-family:var(--body);font-size:13.5px;color:var(--teal);display:flex;flex-wrap:wrap;align-items:center;gap:9px;line-height:1.4}
.nmeta time{font-style:italic}
.nmeta .sep{opacity:.45}
.nmeta .ncat{background:rgba(2,114,118,.1);border-radius:999px;padding:3px 11px;font-size:12.5px}
.nmeta-hero{color:var(--giallo-l);margin-top:18px}
.nmeta-hero .ncat{background:rgba(255,255,255,.14)}

/* --- Sezione "Diario" in home --- */
.news{background:var(--paper)}
.news .tag{background:var(--teal);color:var(--paper)}
.news h2{color:var(--bordeaux);margin-bottom:10px}
.news-intro{color:var(--ink);opacity:.82;max-width:52ch;font-size:clamp(1.02rem,1.6vw,1.15rem)}
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;margin-bottom:44px}
.news-all{font-family:var(--display);display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;padding:13px 26px;border-radius:999px;background:var(--bordeaux);color:var(--paper);white-space:nowrap;transition:transform .22s cubic-bezier(.22,1,.36,1),background .22s}
.news-all:hover{transform:translateY(-3px);background:var(--bordeaux-d)}
.news-all .arr{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.news-all:hover .arr{transform:translateX(4px)}

/* Diario senza articoli: la sezione resta (richiesta cliente), ma al posto della griglia
   va una riga di attesa, non un riquadro vuoto. */
.news-attesa{display:flex;align-items:center;gap:18px;color:var(--ink);opacity:.82;font-size:clamp(1.02rem,1.6vw,1.15rem);line-height:1.5;padding:6px 0}
.news-enso{flex:0 0 auto;width:clamp(48px,8vw,68px);line-height:0}
.news-enso svg{width:100%;height:auto;display:block;fill:var(--bordeaux);opacity:.2}

/* --- Griglia e card articolo --- */
.ngrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,34px)}
.ngrid-2{grid-template-columns:repeat(2,1fr)}
.ncard-a{display:flex;flex-direction:column;height:100%}
.ncard-media{position:relative;aspect-ratio:1.4;border-radius:14px;overflow:hidden;background:#F1E4E3;display:grid;place-items:center}
.ncard-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.ncard-enso{width:56%;line-height:0}
.ncard-enso svg{width:100%;height:auto;display:block;fill:var(--bordeaux);opacity:.16}
.ncard-body{padding-top:18px;margin-top:18px;border-top:1.5px solid rgba(140,60,74,.26);display:flex;flex-direction:column;flex:1 1 auto}
.ncard h3{font-size:clamp(1.28rem,2.1vw,1.62rem);color:var(--bordeaux);margin:12px 0 0;position:relative;display:inline-block;align-self:flex-start}
.ncard h3::after{content:"";position:absolute;left:0;bottom:-7px;height:5px;width:64px;background:var(--bordeaux);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.22,1,.36,1);filter:url(#rough)}
.ncard:hover h3::after{transform:scaleX(1)}
.ncard p{font-size:1rem;color:var(--ink);opacity:.82;margin:16px 0 0;line-height:1.6}
.ncard .ngo{font-family:var(--display);color:var(--teal);margin-top:20px;padding-top:2px;display:inline-flex;align-items:center;gap:9px;align-self:flex-start}
.ncard .ngo .arr{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.ncard:hover .ngo .arr{transform:translateX(5px)}
.ncard{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.ncard:hover{transform:translateY(-6px)}
.ncard:hover .ncard-media img{transform:scale(1.055)}
.ncard-a:focus-visible{outline:3px solid var(--ink);outline-offset:5px;border-radius:16px;box-shadow:0 0 0 8px rgba(237,178,89,.6)}
/* sulla banda gialla dei correlati il filetto e il "Leggi" cambiano colore */
.related{background:var(--giallo)}
.related .tag{background:var(--bordeaux);color:var(--paper)}
.related .ngrid{margin-bottom:38px}
.related .ncard-media{background:rgba(140,60,74,.12)}
.related .ncard-body{border-top-color:rgba(109,44,55,.4)}
.related .ncard p{opacity:.88}
.related .ncard .ngo{color:var(--bordeaux-d)}
.related .news-all{background:var(--bordeaux-d)}
/* Sul giallo il teal scende a ~3:1 e il bordeaux chiaro a ~4.2:1: sotto AA.
   Stessa soluzione già adottata dalla sezione Progetti, che ha lo stesso fondo. */
.related .nmeta{color:var(--bordeaux-d)}
.related .nmeta .ncat{background:rgba(109,44,55,.14)}
.related .ncard h3{color:var(--bordeaux-d)}
.related .ncard h3::after{background:var(--bordeaux-d)}

/* --- Archivio --- */
.listing{background:var(--paper)}
article.blk{padding:clamp(72px,10vw,120px) 0}
.listing .navigation.pagination{margin-top:clamp(44px,6vw,68px);display:flex;justify-content:center}
.listing .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.listing .page-numbers{font-family:var(--body);font-size:15px;min-width:44px;height:44px;padding:0 15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--ink);border:1.5px solid rgba(140,60,74,.3);transition:background .2s,color .2s,border-color .2s}
.listing .page-numbers:hover{background:rgba(140,60,74,.1);border-color:var(--bordeaux)}
.listing .page-numbers.current{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--paper)}
.listing .page-numbers.dots{border-color:transparent}

/* --- Stato vuoto (archivio senza articoli, ricerca a vuoto, 404) --- */
.empty{text-align:center;max-width:52ch;margin:0 auto;padding:clamp(20px,4vw,44px) 0}
.empty-enso{display:block;width:min(38vw,190px);margin:0 auto 26px;line-height:0}
.empty-enso svg{width:100%;height:auto;display:block;fill:var(--bordeaux);opacity:.2}
.empty h2{color:var(--bordeaux);font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:14px}
.empty p{color:var(--ink);opacity:.82;margin-bottom:28px;font-size:1.06rem}
.empty-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn-g{background:transparent;border:2px solid var(--bordeaux);color:var(--bordeaux)}
.empty .search-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.empty .search-form input[type=search]{font-family:var(--body);font-size:15px;padding:13px 18px;border-radius:999px;border:1.5px solid rgba(140,60,74,.32);background:transparent;color:var(--ink);min-width:min(100%,260px)}
.empty .search-form input[type=submit]{font-family:var(--display);padding:13px 26px;border-radius:999px;border:0;background:var(--bordeaux);color:var(--paper);cursor:pointer}

/* --- Articolo e pagine statiche --- */
.article-body{background:var(--paper)}
.single-cover{max-width:940px;margin:0 auto clamp(38px,5vw,58px);line-height:0}
.single-cover img{width:100%;height:auto;display:block;border-radius:16px}
.single-cover figcaption{font-family:var(--body);font-size:.88rem;line-height:1.5;color:var(--ink);opacity:.7;font-style:italic;margin-top:12px;text-align:center}

.prose{max-width:68ch;margin:0 auto;font-size:clamp(1.04rem,1.5vw,1.13rem);line-height:1.75;color:var(--ink)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.25rem);line-height:1.1;color:var(--bordeaux);margin-top:1.9em}
.prose h3{font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.15;color:var(--bordeaux-d);margin-top:1.7em}
.prose h4{font-family:var(--body);font-weight:700;font-size:1.05rem;color:var(--bordeaux-d);margin-top:1.6em}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .2s}
.prose a:hover{color:var(--bordeaux)}
.prose strong{color:var(--bordeaux-d)}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--bordeaux)}
.prose blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.24rem,2.5vw,1.58rem);line-height:1.3;color:var(--bordeaux);margin:1.9em 0;padding-top:.75em;position:relative}
.prose blockquote::before{content:"";position:absolute;top:0;left:0;width:82px;height:6px;background:var(--giallo);border-radius:3px;filter:url(#rough)}
.prose blockquote cite{display:block;font-family:var(--body);font-style:italic;font-size:.86rem;color:var(--ink);opacity:.75;margin-top:.7em}
.prose img{max-width:100%;height:auto;border-radius:14px;display:block}
.prose figure{margin:2em 0}
.prose figcaption{font-family:var(--body);font-size:.88rem;line-height:1.5;color:var(--ink);opacity:.7;font-style:italic;margin-top:.65em}
.prose hr{border:0;height:6px;width:96px;background:var(--bordeaux);border-radius:3px;filter:url(#rough);margin:2.4em auto;opacity:.5}
.prose table{width:100%;border-collapse:collapse;font-size:.96rem}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid rgba(140,60,74,.22)}
.prose th{font-family:var(--body);font-weight:700;color:var(--bordeaux-d)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:rgba(140,60,74,.09);padding:2px 6px;border-radius:5px}
.prose pre{background:var(--ink);color:var(--paper);padding:20px 22px;border-radius:12px;overflow-x:auto}
.prose pre code{background:none;padding:0;color:inherit}
.prose .aligncenter{margin-left:auto;margin-right:auto}
.prose .alignleft{float:left;margin:.4em 1.6em 1.2em 0}
.prose .alignright{float:right;margin:.4em 0 1.2em 1.6em}
.prose .wp-caption{max-width:100%}
.prose iframe,.prose video{max-width:100%;border-radius:14px}
.page-links{font-family:var(--body);font-size:.95rem;margin-top:2em}

.single-tags{max-width:68ch;margin:clamp(34px,4vw,48px) auto 0;display:flex;flex-wrap:wrap;gap:9px}
.single-tags a{font-family:var(--body);font-size:13px;color:var(--teal);background:rgba(2,114,118,.1);border-radius:999px;padding:6px 14px;transition:background .2s}
.single-tags a:hover{background:rgba(2,114,118,.2)}

.single-share{max-width:68ch;margin:clamp(30px,4vw,44px) auto 0;padding-top:24px;border-top:1.5px solid rgba(140,60,74,.26);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share-l{font-family:var(--body);font-style:italic;font-size:14px;color:var(--ink);opacity:.7;margin-right:4px}
.share-b{font-family:var(--body);font-size:13.5px;color:var(--bordeaux);border:1.5px solid rgba(140,60,74,.32);border-radius:999px;padding:7px 15px;transition:background .2s,color .2s}
.share-b:hover{background:var(--bordeaux);color:var(--paper)}

.single-nav{max-width:68ch;margin:clamp(38px,5vw,56px) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sn{display:flex;flex-direction:column;gap:7px;padding:20px 22px;border-radius:14px;border:1.5px solid rgba(140,60,74,.24);transition:border-color .24s,transform .24s cubic-bezier(.22,1,.36,1)}
.sn:hover{border-color:var(--bordeaux);transform:translateY(-3px)}
.sn-l{font-family:var(--body);font-style:italic;font-size:13px;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.sn-t{font-family:var(--display);font-size:1.06rem;line-height:1.2;color:var(--bordeaux)}
.sn-n{text-align:right;grid-column:2}
.sn-n .sn-l{justify-content:flex-end}

/* --- Icone social: tracciate, colore ereditato dal contesto --- */
.ico{width:22px;height:22px;display:block;flex:0 0 auto;overflow:visible}
/* fill/stroke sono proprietà ereditate: impostarle sullo <use> arriva dentro il simbolo.
   Il puntino di Instagram ha fill="currentColor" come attributo, quindi resta pieno. */
.ico use{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* footer: solo icone, dentro un disco che si accende al passaggio */
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#E9D7D4;border:1px solid rgba(233,215,212,.24);transition:color .2s,border-color .2s,background .2s,transform .2s cubic-bezier(.22,1,.36,1)}
.foot-social a:hover{color:var(--ink);background:var(--giallo);border-color:var(--giallo);transform:translateY(-2px)}

/* contatti: icona + handle sulla stessa riga */
.social-inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.social-inline a{display:inline-flex;align-items:center;gap:8px;color:var(--teal)}
.social-inline .ico{width:19px;height:19px}
.social-inline a:hover span{text-decoration:underline}

@media (prefers-reduced-motion:reduce){.foot-social a{transition:color .2s,background .2s}.foot-social a:hover{transform:none}}

/* --- Footer: informative legali --- */
/* .foot-strip resta anche con un solo figlio: porta filetto, margine e respiro dei link
   legali. Conteneva anche il blocco di cofinanziamento, tolto su richiesta del 05/08/2026. */
.foot-strip{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:26px 40px;margin-top:34px;padding:22px 0;border-top:1px solid rgba(233,215,212,.18)}

/* Filetto, margine e respiro sopra/sotto li porta .foot-strip, non questi link. */
.foot-legal{display:flex;flex-wrap:wrap;gap:10px 20px}
/* padding verticale per arrivare a 24px di area cliccabile (WCAG 2.2 SC 2.5.8). */
.foot-legal a{font-family:var(--body);font-size:13.5px;color:#E9D7D4;opacity:.78;transition:opacity .2s;display:inline-flex;align-items:center;min-height:24px;padding:2px 0}
.foot-legal a:hover{opacity:1;text-decoration:underline}

/* --- Movimento ridotto --- */
@media (prefers-reduced-motion:reduce){
  .ncard,.ncard-media img,.ncard h3::after,.ncard .ngo .arr,.news-all,.news-all .arr,.pback .arr,.sn,.share-b{transition:none}
  .ncard:hover,.sn:hover,.news-all:hover{transform:none}
  .ncard:hover .ncard-media img,.ncard:hover .ngo .arr,.news-all:hover .arr,.pback:hover .arr{transform:none}
}

/* --- Responsive --- */
@media (max-width:980px){
  .ngrid{grid-template-columns:repeat(2,1fr)}
  .phero-enso{right:-18%;width:min(64vw,380px);opacity:.85}
}
@media (max-width:760px){
  .foot-strip{gap:22px}
  .news-head{flex-direction:column;align-items:flex-start;gap:22px}
  .single-nav{grid-template-columns:1fr}
  .sn-n{text-align:left;grid-column:1}
  .sn-n .sn-l{justify-content:flex-start}
}
@media (max-width:620px){
  .ngrid,.ngrid-2{grid-template-columns:1fr}
  .phero h1{max-width:100%}
  .prose .alignleft,.prose .alignright{float:none;margin:1.4em auto}
}