/* Fondazione Evangelisti — stile condiviso.
   Titoli in Lora, testi in Inter. Fondo bianco caldo neutro, inchiostro scuro, rosso del logo solo come accento
   (logo, porta, link). Impaginazione con titoli a margine; ornamento unico: la forma della porta. */
:root{
  --paper:#f6f3f2; --white:#ffffff; --ink:#1c1415; --muted:#685d5e; --line:#e6dfdd;
  --red:#db0b2e; --red-deep:#a9061f; --on-red:#ffffff; --on-red-soft:rgba(255,255,255,.78);
  --display:"Lora", Georgia, "Times New Roman", serif;
  --text:"Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter:4vw;
  --max:1200px;
  --bar-h:76px;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--text); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor; outline-offset:4px}
h1,h2,h3{font-family:var(--display); font-weight:500; margin:0; line-height:1.02; letter-spacing:-.015em; text-wrap:balance}
p{margin:0}
img{max-width:100%}
.wrap{max-width:var(--max); margin:0 auto}

/* sezioni a tema pieno */
.t-red{background:var(--red); color:var(--on-red)}
.t-paper{background:var(--paper); color:var(--ink)}
.t-white{background:var(--white); color:var(--ink)}
.label{font-family:var(--text); font-size:.95rem; font-style:italic; letter-spacing:.01em}
.t-red .label{color:var(--on-red-soft)}
.t-paper .label, .t-white .label{color:var(--red)}

/* barra di avanzamento */
.progress{position:fixed; left:0; right:0; top:0; height:3px; z-index:60}
.progress span{display:block; height:100%; background:var(--ink); transform-origin:0 50%; transform:scaleX(0)}

/* intestazione "inset": logo a sinistra, link e bottone a destra */
.bar{position:fixed; z-index:50; left:0; right:0; top:0; height:calc(var(--bar-h) + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) var(--gutter) 0; display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--ink); transition:color .3s, background .3s, opacity .35s, transform .35s}
.bar.on-red{color:#fff}
.bar.solid{background:var(--paper)}
.bar.solid.on-red{background:var(--red)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand .bm{height:34px; width:auto; aspect-ratio:417/418; display:block; fill:#db0b2e; transition:fill .3s}
/* scritta del logo in Lora, come nel logo originale: testo vero, nitido e che segue il colore della barra */
.brand .bw{display:block; font-family:var(--display); font-weight:400; font-size:10.8px; line-height:1.06; letter-spacing:0; color:inherit; white-space:nowrap}
.bar.on-red .brand .bm{fill:#fff}
.nav{display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); font-size:0.9rem}
.nav a{text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s}
.nav a:hover,.nav a[aria-current="page"]{background-size:100% 1px}
.nav .pill{background:none; border:1px solid currentColor; border-radius:999px; padding:9px 18px}
.nav .pill:hover{background:currentColor}
.nav .pill:hover span{color:var(--paper)}
.bar.on-red .nav .pill:hover span{color:var(--red)}
@media (max-width:820px){ .nav{gap:12px; font-size:.86rem} .nav .long{display:none} .nav .pill{display:none} }
/* sul cellulare la scritta "Fondazione Evangelisti" resta accanto alla porta */

/* bottoni a pillola */
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--text); font-size:0.9rem; padding:15px 28px; border-radius:999px; border:1px solid currentColor; transition:background .25s, color .25s}
.t-red .btn{background:#fff; color:var(--red); border-color:#fff}
.t-red .btn:hover{background:transparent; color:#fff}
.t-paper .btn, .t-white .btn{background:var(--red); color:#fff; border-color:var(--red)}
.t-paper .btn:hover, .t-white .btn:hover{background:transparent; color:var(--red)}
.btn svg{width:16px; height:16px}
.textlink{text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px; font-style:italic}
.textlink:hover{border-bottom-width:2px}

/* scritta che scorre */
.marquee{overflow:hidden; white-space:nowrap; padding-block:14px}
.marquee .track{display:inline-flex; gap:0; animation:marquee 38s linear infinite}
.marquee h2{font-size:15px; letter-spacing:.04em; padding-right:.6em; display:inline-flex; align-items:center; gap:.6em; flex:none; white-space:nowrap; text-wrap:nowrap}
.marquee h2::after{content:""; width:.42em; height:.42em; background:currentColor; clip-path:polygon(0 0,100% 0,100% 100%,67% 100%,67% 32%,33% 32%,33% 100%,0 100%)}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* piè di pagina essenziale */
.foot{padding:clamp(56px,9vh,96px) var(--gutter) 32px}
.foot .row{display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; max-width:var(--max); margin:0 auto}
.foot .name{font-family:var(--display); font-size:clamp(1.25rem,2.34vw,1.87rem); line-height:1}
.foot .mid svg{width:44px; height:44px; fill:var(--red); display:block}
.foot nav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 22px}
.foot nav a{text-decoration:none}
.foot nav a:hover{text-decoration:underline}
.foot .legal{max-width:var(--max); margin:40px auto 0; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; font-size:.85rem; color:var(--muted)}
@media (max-width:760px){ .foot .row{grid-template-columns:1fr} .foot nav{justify-content:flex-start} }

@media (prefers-reduced-motion: reduce){
  .marquee .track{animation:none}
  .btn,.nav a{transition:none}
}

/* ===== Rifiniture "alla Apple" =====
   1. barra in alto come materiale traslucido: i contenuti scorrono sotto, sfocati
   2. risposta immediata alla pressione su pulsanti, schede e link
   3. spaziatura delle lettere che cambia con la dimensione del testo */

/* 1 — barra traslucida */
:root{ --glass:rgba(246,243,242,.72); --glass-red:rgba(219,11,46,.84) }
.bar.solid{background:var(--glass); -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%)}
.bar.solid.on-red{background:var(--glass-red)}
.bar.solid .nav{font-weight:500}            /* testo un filo più pieno sopra la sfocatura, per restare leggibile */
@media (prefers-reduced-transparency: reduce){
  .bar.solid{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none}
  .bar.solid.on-red{background:var(--red)}
}
@media (prefers-contrast: more){
  .bar.solid{background:var(--paper); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1px 0 var(--ink)}
}

/* 2 — risposta alla pressione: parte quando il dito o il mouse preme, non quando si rilascia */
a, button{touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.btn, .nav .pill{transition:background .25s, color .25s, transform 100ms ease-out}
.btn:active, .nav .pill:active{transform:scale(.97)}
.pcard, .next{transition:transform 120ms ease-out}
.pcard:active{transform:scale(.985)}
.next:active{transform:scale(.995)}
.nav a:active, .inlink:active, .foot nav a:active, .brand:active, .crumbs a:active{opacity:.55; transition:opacity 0s}
@media (prefers-reduced-motion: reduce){
  .btn:active, .nav .pill:active, .pcard:active, .next:active{transform:none; opacity:.7}
}

/* 3 — tipografia: lettere più strette nei titoli grandi, neutre nel testo, appena più larghe nelle didascalie */
h1, h2{letter-spacing:-.022em; line-height:1.04}
h3{letter-spacing:-.008em; line-height:1.2}
.ch-n, .where, .legal, .crumbs, .list-intro{letter-spacing:.006em}

/* ===== PROVA MINIMAL (dalla competenza minimalist-ui, solo le parti compatibili) =====
   Restano invariati: apertura dalla porta, apertura rossa, fascia che scorre, Inter, rosso del logo.
   Cambiano: foto più calde e desaturate, schede con angoli appena arrotondati e bordo sottilissimo,
   pulsanti quasi squadrati, più spazio tra i capitoli. */
:root{ --hair:rgba(28,20,21,.08); --radius:0; --radius-sm:6px }  /* foto e video con angoli retti */

/* foto: calde e desaturate, così stanno insieme come una serie */
.ch .photo img, .pcard .photo img, .video-link img, .inline-photo img, .chapter img{filter:saturate(.72) sepia(.08) contrast(.97)}

/* schede e cornici: angoli appena arrotondati, bordo sottilissimo */
.ch .photo, .pcard .photo, .inline-photo .frame, .video-link{border-radius:var(--radius); overflow:hidden}
.partner{border:1px solid var(--hair); border-radius:12px; background:var(--white)}
.ticks li, .steps li{border-color:var(--hair)}
.rights, .rights li, .areas, .areas li{border-color:var(--hair)}

/* pulsanti quasi squadrati */
.btn, .nav .pill{border-radius:var(--radius-sm)}
.t-paper .btn, .t-white .btn{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.t-paper .btn:hover, .t-white .btn:hover{background:transparent; color:var(--ink)}

/* più spazio tra i capitoli */
.ch{padding-top:clamp(104px,16vh,184px)}
.hz .ch{padding:0 clamp(56px,6vw,112px)}
.hz .ch-body{gap:clamp(44px,4.6vw,84px)}
.hz .ch:first-child{padding-left:var(--gutter)}
.hz .h-track{padding-top:calc(var(--bar-h) + clamp(36px,6vh,64px)); padding-bottom:clamp(40px,7vh,72px)}
.ch-head h2{letter-spacing:-.03em}
.chapter{padding-block:clamp(88px,14vh,160px)}
.pc-img img{filter:saturate(.72) sepia(.08) contrast(.97)}

/* ===== Movimento armonioso e discreto =====
   Una sola curva per tutto il sito: ease-out cubic-bezier(0.22, 1, 0.36, 1); durate tra 300 e 600 ms;
   spostamenti piccoli (al massimo 16px) sempre insieme a una dissolvenza; negli elenchi 70 ms tra un elemento e l'altro (motion.js). */
:root{ --ease-soft:cubic-bezier(0.22, 1, 0.36, 1) }
/* entrate: l'elemento parte trasparente e 16px più in basso, poi si posa */
html.rv-on .rv{transition:opacity 500ms var(--ease-soft), translate 600ms var(--ease-soft); transition-delay:var(--rv-d, 0ms)}
html.rv-on .rv:not(.rv-in){opacity:0; translate:0 16px}
/* passaggi del mouse e cambi di stato: stessa curva, niente scatti */
.nav a{transition:background-size 400ms var(--ease-soft), opacity 300ms var(--ease-soft)}
.bar{transition:color 400ms var(--ease-soft), background 400ms var(--ease-soft), opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft)}
.brand .bm{transition:fill 400ms var(--ease-soft)}
.news h3, .pcard h3{transition:color 300ms var(--ease-soft)}
.news-more, .ms-more, .nw-back, .nw-links a, .site-foot a, .inlink, .crumbs a{transition:text-decoration-thickness 300ms var(--ease-soft), opacity 300ms var(--ease-soft)}
.site-foot .sf-ig, .site-foot .sf-in{transition:opacity 300ms var(--ease-soft)}
.btn{transition:background 300ms var(--ease-soft), color 300ms var(--ease-soft), transform 300ms var(--ease-soft)}
/* schede delle news: al passaggio la foto si avvicina appena */
.news .photo img{transition:scale 600ms var(--ease-soft)}
@media (hover:hover){ .news:hover .photo img{scale:1.03} }
@media (prefers-reduced-motion: reduce){
  html.rv-on .rv{transition:none}
  html.rv-on .rv:not(.rv-in){opacity:1; translate:none}
  .news:hover .photo img{scale:1}
}

/* ===== MENU DA CELLULARE =====
   Sotto i 760px i link del menu lasciano il posto a un pulsante "Menu": aprendolo, una schermata a tutta pagina
   mostra le voci grandi in Lora, una sotto l'altra (creata da menu.js, uguale in tutte le pagine). */
.nav-toggle{display:none; align-items:center; gap:10px; background:none; border:0; padding:10px 0 10px 12px; margin:0; color:inherit; font:500 .9rem/1 var(--text); cursor:pointer}
.nav-toggle i{position:relative; display:block; width:22px; height:10px}
.nav-toggle i::before, .nav-toggle i::after{content:""; position:absolute; left:0; right:0; height:1.5px; background:currentColor; transition:transform 300ms var(--ease-soft), top 300ms var(--ease-soft)}
.nav-toggle i::before{top:0}
.nav-toggle i::after{top:8.5px}
html.menu-open .nav-toggle i::before{top:4.25px; transform:rotate(45deg)}
html.menu-open .nav-toggle i::after{top:4.25px; transform:rotate(-45deg)}
.m-menu{position:fixed; inset:0; z-index:49; display:flex; flex-direction:column; justify-content:space-between; gap:32px; padding:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 32px) var(--gutter) calc(32px + env(safe-area-inset-bottom,0px)); background:var(--paper); color:var(--ink); opacity:0; visibility:hidden; transition:opacity 350ms var(--ease-soft), visibility 0s linear 350ms; overflow-y:auto}
.m-menu nav{display:flex; flex-direction:column; align-items:flex-start; gap:6px; border-top:1px solid var(--line)}
.m-menu nav a{display:block; width:100%; padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; font-family:var(--display); font-weight:500; font-size:clamp(1.65rem,7.4vw,2.25rem); line-height:1.05; letter-spacing:-.02em; transform:translateY(14px); opacity:0; transition:transform 500ms var(--ease-soft), opacity 400ms var(--ease-soft)}
.m-menu nav a[aria-current="page"]{color:var(--red)}
.m-menu .m-foot{font-size:.85rem; line-height:1.6; color:var(--muted)}
.m-menu .m-foot a{color:var(--ink)}
html.menu-open .m-menu{opacity:1; visibility:visible; transition:opacity 350ms var(--ease-soft)}
html.menu-open .m-menu nav a{transform:none; opacity:1}
html.menu-open, html.menu-open body{overflow:hidden}
html.menu-open .bar{color:var(--ink) !important; background:var(--paper) !important; opacity:1 !important; transform:none !important; pointer-events:auto !important}
html.menu-open .bar .brand .bm{fill:#db0b2e !important}
@media (max-width:760px){
  .bar > .nav{display:none}
  .nav-toggle{display:inline-flex}
}
@media (min-width:761px){ .m-menu{display:none} }
@media (prefers-reduced-motion: reduce){ .m-menu, .m-menu nav a, .nav-toggle i::before, .nav-toggle i::after{transition:none} }

/* foto alleggerite per il cellulare (<picture>): il contenitore non conta nell'impaginazione */
picture.pm{display:contents}