/* Sito statico della rivista (app/sito.py): concept validato da Emanuele il 28/10/2026
   (docs/sito-tuttochiaro/concept-2026-10-28/, https://claude.ai/artifact/RoaqaNAKCJPNApLBTiD27r).
   Un solo foglio per tutte le pagine; le regole della sola home stanno sotto .pg-home. */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/BricolageGrotesque-800.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--carta:#FAF7F2;--ink:#1E1E1E;--ink-2:#5A544D;--riga:#E2DCD2;--box:#F2EEE7;--link:#B4470B;--arancio:#F26B1D;
  --f-titolo:"Bricolage Grotesque","Inter",system-ui,sans-serif;--f-testo:"Inter",system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--carta:#14161C;--ink:#EEE9E1;--ink-2:#ABA49A;--riga:#2B2F3A;--box:#1C1F27;--link:#FF9D5E;--arancio:#FF8A45;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--carta);color:var(--ink);font-family:var(--f-testo);font-size:18px;line-height:1.65}
.col{max-width:712px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--arancio);outline-offset:3px;border-radius:3px}
h1,h2{font-family:var(--f-titolo);font-weight:800;line-height:1.15;text-wrap:balance;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(30px,5vw,40px)}h2{font-size:22px}
p{margin:0}
.muted{color:var(--ink-2)}
header.t{border-bottom:1px solid var(--riga)}
header.t .col{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-block:16px}
.logo{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-family:var(--f-titolo);font-weight:800;font-size:20px}
.logo i{width:26px;height:26px;border-radius:50%;background:var(--arancio);color:#fff;display:grid;place-items:center;font-style:normal;font-size:16px}
header.t nav{display:flex;gap:4px;padding:4px;font-size:15px;border:1px solid var(--riga);border-radius:999px;background:var(--box)}
header.t nav a,.soc-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;color:var(--ink-2);
  text-decoration:none;font-weight:600;letter-spacing:.01em;transition:background .15s,color .15s}
header.t nav a:hover,.soc-btn:hover{color:var(--ink);background:var(--carta)}
header.t nav a[aria-current="page"]{background:var(--ink);color:var(--carta)}
main{padding-block:36px 64px}
article{display:flex;flex-direction:column;gap:30px}
.capo{display:flex;flex-direction:column;gap:12px}
.rubrica{font-size:14px;color:var(--ink-2)}
.firma{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--riga);border-bottom:1px solid var(--riga);padding-block:10px}
.firma b{color:var(--ink);font-weight:600}
.risposta{border-left:3px solid var(--arancio);padding:2px 0 2px 18px;display:flex;flex-direction:column;gap:6px}
.lbl{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.risposta p{font-size:20px;line-height:1.5}
section{display:flex;flex-direction:column;gap:12px}
ol,ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.fonti ol{font-size:15px;color:var(--ink-2)}
.metodo{border-top:1px solid var(--riga);padding-top:20px;font-size:15px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.metodo b{color:var(--ink)}
.home-motto{font-size:15px;color:var(--ink-2)}
.home-motto b{color:var(--ink);font-family:var(--f-titolo);font-weight:800}
.impegni{list-style:none;margin:0;padding:12px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;border-top:1px solid var(--riga);border-bottom:1px solid var(--riga)}
@media (max-width:620px){.impegni{grid-template-columns:repeat(2,minmax(0,1fr))}}
.impegni li{display:flex;gap:8px;align-items:center;font-size:13px;line-height:1.3}
.impegni svg{flex:none;width:30px;height:30px}
.impegni .tratto{stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.impegni .acc{stroke:var(--arancio);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* effetto «Dock di macOS»: l'impegno puntato cresce di più, i vicini sempre meno (1° e 2° grado); l'icona si solleva più del
   testo. Solo con mouse, mai con movimento ridotto. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
.impegni{--dock:cubic-bezier(.25,1.25,.45,1);overflow:visible}
.impegni li{position:relative;transform-origin:50% 100%;transition:transform .32s var(--dock)}
.impegni svg{transform-origin:50% 100%;transition:transform .32s var(--dock),filter .32s ease}
.impegni li:hover{transform:translateY(-5px) scale(1.1);z-index:3}
.impegni li:hover svg{transform:translateY(-6px) scale(1.55);filter:drop-shadow(0 6px 6px rgba(20,22,28,.18))}
.impegni li:has(+ li:hover),.impegni li:hover + li{transform:translateY(-3px) scale(1.05);z-index:2}
.impegni li:has(+ li:hover) svg,.impegni li:hover + li svg{transform:translateY(-3px) scale(1.25)}
.impegni li:has(+ li + li:hover),.impegni li:hover + li + li{transform:translateY(-1px) scale(1.02);z-index:1}
.impegni li:has(+ li + li:hover) svg,.impegni li:hover + li + li svg{transform:scale(1.1)}
}
.elenco{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.elenco li{border-bottom:1px solid var(--riga);padding-block:16px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center}
.elenco li.senza{grid-template-columns:minmax(0,1fr)}
.elenco img{width:56px;height:70px;object-fit:cover;border-radius:6px;display:block}
.elenco a.tit{font-family:var(--f-titolo);font-weight:700;font-size:21px;line-height:1.25;color:var(--ink);text-decoration:none}
.elenco a.tit:hover{text-decoration:underline}
.elenco .info{font-size:14px;color:var(--ink-2);display:flex;gap:4px 12px;flex-wrap:wrap}
.home{display:flex;flex-direction:column;gap:22px}
.passi-foto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:760px){.passi-foto{grid-template-columns:repeat(2,minmax(0,1fr))}}
.passi-foto li{display:flex;flex-direction:column;gap:8px}
.passi-foto img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;filter:saturate(.85) contrast(.97)}
.passi-foto figure{margin:0;display:flex;flex-direction:column;gap:6px}
.passi-foto figcaption{font-size:12px;color:var(--ink-2)}
.passi-foto b{font-family:var(--f-titolo);font-size:17px;line-height:1.25}
.passi-foto p{font-size:14px;color:var(--ink-2);line-height:1.45}
footer.p{border-top:1px solid var(--riga)}
footer.p .col{padding-block:24px 40px;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-2)}
footer.p nav{display:flex;gap:6px 16px;flex-wrap:wrap}
/* pallina che rimbalza nella testata, tra il logo e il menu (solo decorazione, nascosta ai lettori di schermo). Variazioni
   «a caso» senza script: altezza dei salti (--alto, 7,3 s), schiacciamento (--sch, 5,9 s) e percorso con pause e cambi di
   direzione (13,7 s) hanno durate diverse e non multiple tra loro, quindi la sequenza si ripete identica solo dopo minuti. */
@property --alto{syntax:'<length>';inherits:true;initial-value:22px}
@property --sch{syntax:'<number>';inherits:true;initial-value:1.3}
.rimbalzo{flex:1;align-self:stretch;position:relative;min-width:60px;margin:0 18px}
.rimbalzo::after{content:"";position:absolute;left:0;right:0;bottom:12px;border-bottom:1px dashed var(--riga)}
.rimbalzo .x{position:absolute;left:0;right:12px;bottom:13px;height:0}
.rimbalzo .p{position:absolute;left:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--arancio);transform-origin:50% 100%}
.rimbalzo .o{position:absolute;left:1px;bottom:-3px;width:10px;height:4px;border-radius:50%;background:rgba(20,22,28,.18)}
@media (prefers-reduced-motion:no-preference){
.rimbalzo{animation:alto 7.3s ease-in-out infinite,sch 5.9s ease-in-out infinite}
.rimbalzo .x{animation:va 13.7s ease-in-out infinite}
.rimbalzo .p{animation:salta .7s infinite}
.rimbalzo .o{animation:ombra .7s infinite}
}
@keyframes alto{0%{--alto:22px}17%{--alto:12px}33%{--alto:30px}46%{--alto:16px}61%{--alto:34px}79%{--alto:9px}100%{--alto:22px}}
@keyframes sch{0%{--sch:1.3}29%{--sch:1.15}52%{--sch:1.45}74%{--sch:1.2}100%{--sch:1.3}}
@keyframes va{
  0%{transform:translateX(0)} 17%{transform:translateX(38%)} 23%{transform:translateX(38%)}
  39%{transform:translateX(92%)} 50%{transform:translateX(68%)} 61%{transform:translateX(100%)}
  72%{transform:translateX(55%)} 79%{transform:translateX(55%)} 91%{transform:translateX(14%)} 100%{transform:translateX(0)}}
@keyframes salta{
  0%  {transform:translateY(0) scale(var(--sch),calc(2 - var(--sch)));animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  12% {transform:translateY(-2px) scale(.92,1.1);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  50% {transform:translateY(calc(-1 * var(--alto))) scale(1,1);animation-timing-function:cubic-bezier(.65,0,.8,.4)}
  100%{transform:translateY(0) scale(var(--sch),calc(2 - var(--sch)))}}
@keyframes ombra{0%,100%{transform:scale(1.2);opacity:1}50%{transform:scale(.5);opacity:.35}}
/* omino che insegue la pallina: stesso percorso (va, 13,7 s) ma 0,9 s in ritardo, si gira nel verso in cui corre, alza le
   braccia per afferrarla con il tempo sfasato rispetto ai rimbalzi, così non la prende mai. Solo decorazione, senza script. */
.rimbalzo .ox{position:absolute;left:0;right:20px;bottom:12px;height:0}
.rimbalzo .om{position:absolute;left:0;bottom:0;width:20px;height:28px;transform-origin:50% 100%}
.rimbalzo .om svg{display:block;width:20px;height:28px;overflow:visible}
.rimbalzo .om .t{stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rimbalzo .om .testa{fill:var(--carta);stroke:var(--ink);stroke-width:1.8}
.rimbalzo .om .br,.rimbalzo .om .gs,.rimbalzo .om .gd{transform-box:view-box}
.rimbalzo .om .br{transform-origin:10px 11px}
.rimbalzo .om .gs,.rimbalzo .om .gd{transform-origin:10px 18px}
@media (prefers-reduced-motion:no-preference){
.rimbalzo .ox{animation:va 13.7s ease-in-out .9s infinite backwards}
.rimbalzo .om{animation:verso 13.7s step-end .9s infinite backwards,saltello 1.4s ease-in-out .25s infinite}
.rimbalzo .om .br{animation:afferra .7s ease-in-out .32s infinite}
.rimbalzo .om .gs{animation:corsa .36s ease-in-out infinite alternate}
.rimbalzo .om .gd{animation:corsa .36s ease-in-out -.36s infinite alternate}
}
@keyframes verso{0%{transform:scaleX(1)}39%{transform:scaleX(-1)}50%{transform:scaleX(1)}61%{transform:scaleX(-1)}100%{transform:scaleX(-1)}}
@keyframes saltello{0%,60%,100%{translate:0 0}78%{translate:0 -6px}}
@keyframes afferra{0%,100%{transform:rotate(0)}45%{transform:rotate(-150deg)}60%{transform:rotate(-165deg)}}
@keyframes corsa{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
@media (max-width:560px){.rimbalzo{display:none}}
footer.p .col{align-items:center;text-align:center}   /* piè di pagina al centro */
footer.p nav{justify-content:center}
/* logo: «?» e «tutto chiaro» sono un solo collegamento alla home, con lo stesso effetto al passaggio su tutta l'area */
.logo{cursor:pointer;transition:color .18s ease}
.logo i{transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.logo:hover,.logo:focus-visible{color:var(--arancio)}
@media (prefers-reduced-motion:no-preference){.logo:hover i,.logo:focus-visible i{transform:rotate(-12deg) scale(1.12)}}
/* chiusura animata anche su Safari: lo script aggiunge .esce, aspetta la fine del rientro e poi chiude il pop-up */
@media (prefers-reduced-motion:no-preference){
#sociale.esce{transform:translate(min(26vw,300px),-42vh) scale(.1,.04);opacity:0;
  transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .12s linear .43s}
#sociale.esce::backdrop{background:rgba(20,22,28,0)}
}
/* tutta la testata riporta agli articoli: lo spazio libero è un link alla home */
.vuoto{flex:1;align-self:stretch;min-width:24px}
a.rimbalzo{display:block}
/* pulsante «torna su», sempre visibile */
html{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.su{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:5;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--carta);
  text-decoration:none;box-shadow:0 8px 22px rgba(20,22,28,.22);transition:transform .2s ease,background .2s ease}
.su svg{width:22px;height:22px;stroke:var(--arancio);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.su:hover{transform:translateY(-3px)}
.su:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}
/* articolo: l'omino ha preso la pallina. Scena sotto il titolo, larga quanto la colonna del titolo: l'omino passeggia avanti
   e indietro e palleggia (la pallina sale e ricade sulle mani, che la accompagnano). Stessi limiti della testata. */
.campo{position:relative;height:64px;margin-top:-4px}
.campo::after{content:"";position:absolute;left:0;right:0;bottom:8px;border-bottom:1px dashed var(--riga)}
.campo .cx{position:absolute;left:0;right:24px;bottom:8px;height:0}
.campo .gioca{position:absolute;left:0;bottom:0;width:24px;height:34px;transform-origin:50% 100%}
.campo svg{display:block;width:24px;height:34px;overflow:visible}
.campo .t{stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.campo .testa{fill:var(--carta);stroke:var(--ink);stroke-width:1.9}
.campo .br{transform-box:view-box;transform-origin:12px 13px}
.campo .gs,.campo .gd{transform-box:view-box;transform-origin:12px 22px}
.campo .pp{position:absolute;left:6px;bottom:30px;width:12px;height:12px;border-radius:50%;background:var(--arancio);transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
.campo .cx{animation:passeggia 16s ease-in-out infinite alternate}
.campo .gioca{animation:giro 32s step-end infinite}
.campo .pp{animation:palleggio .8s infinite}
.campo .br{animation:mani .8s ease-in-out infinite}
.campo .gs{animation:corsa .5s ease-in-out infinite alternate}
.campo .gd{animation:corsa .5s ease-in-out -.5s infinite alternate}
}
@keyframes passeggia{0%{transform:translateX(0)}20%{transform:translateX(30%)}28%{transform:translateX(30%)}62%{transform:translateX(78%)}70%{transform:translateX(78%)}100%{transform:translateX(100%)}}
@keyframes giro{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
@keyframes palleggio{
  0%  {transform:translateY(0) scale(1.2,.8);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  10% {transform:translateY(-2px) scale(.94,1.08);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  50% {transform:translateY(-24px) scale(1,1);animation-timing-function:cubic-bezier(.65,0,.8,.4)}
  100%{transform:translateY(0) scale(1.2,.8)}}
@keyframes mani{0%,100%{transform:rotate(-150deg)}12%{transform:rotate(-135deg)}50%{transform:rotate(-160deg)}88%{transform:rotate(-142deg)}}
/* gioco variato «a caso» senza script: percorso con soste e cambi di direzione (17,3 s), altezza dei palleggi (--alt2, 6,1 s)
   e saltelli (3,7 s) hanno durate non multiple tra loro, quindi la scena si ripete identica solo dopo minuti */
@property --alt2{syntax:'<length>';inherits:true;initial-value:24px}
@media (prefers-reduced-motion:no-preference){
.campo{animation:alt2 6.1s ease-in-out infinite}
.campo .cx{animation:passeggia2 17.3s ease-in-out infinite}
.campo .gioca{animation:giro2 17.3s step-end infinite,saltello2 3.7s ease-in-out infinite}
.campo .pp{animation:palleggio2 .8s infinite}
}
@keyframes alt2{0%{--alt2:24px}21%{--alt2:14px}38%{--alt2:34px}55%{--alt2:18px}72%{--alt2:40px}88%{--alt2:12px}100%{--alt2:24px}}
@keyframes passeggia2{
  0%{transform:translateX(0)} 14%{transform:translateX(22%)} 19%{transform:translateX(22%)} 33%{transform:translateX(64%)}
  40%{transform:translateX(48%)} 52%{transform:translateX(88%)} 57%{transform:translateX(88%)} 68%{transform:translateX(100%)}
  79%{transform:translateX(70%)} 86%{transform:translateX(70%)} 100%{transform:translateX(0)}}
@keyframes giro2{0%{transform:scaleX(1)}33%{transform:scaleX(-1)}40%{transform:scaleX(1)}68%{transform:scaleX(-1)}}
@keyframes saltello2{0%,64%,100%{translate:0 0}78%{translate:0 -7px}}
@keyframes palleggio2{
  0%  {transform:translateY(0) scale(1.2,.8);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  10% {transform:translateY(-2px) scale(.94,1.08);animation-timing-function:cubic-bezier(.2,.6,.35,1)}
  50% {transform:translateY(calc(-1 * var(--alt2))) scale(1,1);animation-timing-function:cubic-bezier(.65,0,.8,.4)}
  100%{transform:translateY(0) scale(1.2,.8)}}
/* partita: coreografia di 24 s senza script. L'omino palleggia con le mani passeggiando, poi col piede, tira: il pallone
   vola in arco e rimbalza, lui lo rincorre, lo raccoglie e ricomincia nell'altra direzione. Palleggi di altezza variabile.
   I rimbalzi veloci (--b, 0,7 s) sono un ciclo a parte moltiplicato per --amp della coreografia. */
@property --ox{syntax:'<length>';inherits:true;initial-value:6px}
@property --base{syntax:'<length>';inherits:true;initial-value:30px}
@property --amp{syntax:'<length>';inherits:true;initial-value:26px}
@property --fly{syntax:'<length>';inherits:true;initial-value:0px}
@property --arm{syntax:'<angle>';inherits:true;initial-value:-150deg}
@property --kick{syntax:'<angle>';inherits:true;initial-value:0deg}
@property --corre{syntax:'<number>';inherits:true;initial-value:1}
@property --b{syntax:'<number>';inherits:true;initial-value:0}
@property --lr{syntax:'<angle>';inherits:true;initial-value:0deg}
.campo .bx{position:absolute;left:0;right:24px;bottom:8px;height:0;pointer-events:none}
.campo .pb{position:absolute;left:0;bottom:0;width:12px;height:12px;border-radius:50%;background:var(--arancio);
  transform:translate(var(--ox),calc(-1 * (var(--base) + var(--fly) + var(--b) * var(--amp))))}
.campo .pp{display:none}
.campo .br{transform:rotate(var(--arm))}
.campo .gs{transform:rotate(calc(var(--lr) * var(--corre)))}
.campo .gd{transform:rotate(calc(-1 * var(--lr) * var(--corre)));rotate:var(--kick)}
@media (prefers-reduced-motion:no-preference){
.campo{animation:ox 24s linear infinite,base 24s linear infinite,amp 24s linear infinite,fly 24s linear infinite,
  arm 24s linear infinite,kick 24s linear infinite,corre 24s linear infinite,rimb .7s infinite,gambe .36s ease-in-out infinite alternate}
.campo .cx{animation:omx 24s ease-in-out infinite}
.campo .gioca{animation:verso 24s step-end infinite}
.campo .bx{animation:pax 24s ease-in-out infinite}
.campo .br,.campo .gs,.campo .gd{animation:none}
}
@keyframes rimb{0%{--b:0;animation-timing-function:cubic-bezier(.2,.7,.35,1)}50%{--b:1;animation-timing-function:cubic-bezier(.65,0,.8,.4)}100%{--b:0}}
@keyframes gambe{from{--lr:-22deg}to{--lr:22deg}}
@keyframes omx{0%{transform:translateX(10%)}20.833%{transform:translateX(40%)}36.25%{transform:translateX(40%);animation-timing-function:cubic-bezier(.4,0,.3,1)}45.417%{transform:translateX(92%)}47.5%{transform:translateX(92%)}66.667%{transform:translateX(55%)}79.583%{transform:translateX(55%);animation-timing-function:cubic-bezier(.4,0,.3,1)}89.167%{transform:translateX(4%)}91.25%{transform:translateX(4%)}100%{transform:translateX(10%)}}
@keyframes pax{0%{transform:translateX(10%)}20.833%{transform:translateX(40%)}35%{transform:translateX(40%);animation-timing-function:cubic-bezier(.25,.6,.4,1)}43.75%{transform:translateX(92%)}47.5%{transform:translateX(92%)}66.667%{transform:translateX(55%)}78.75%{transform:translateX(55%);animation-timing-function:cubic-bezier(.25,.6,.4,1)}87.5%{transform:translateX(4%)}91.25%{transform:translateX(4%)}100%{transform:translateX(10%)}}
@keyframes verso{0%{transform:scaleX(1)}47.5%{transform:scaleX(-1)}91.25%{transform:scaleX(1)}}
@keyframes ox{0%{--ox:6px}20.833%{--ox:6px}22.083%{--ox:16px}45.417%{--ox:16px}47.5%{--ox:6px}66.667%{--ox:6px}67.917%{--ox:-4px}89.167%{--ox:-4px}91.25%{--ox:6px}100%{--ox:6px}}
@keyframes base{0%{--base:30px}20.833%{--base:30px}22.083%{--base:0px}45.417%{--base:0px}47.5%{--base:30px}66.667%{--base:30px}67.917%{--base:0px}89.167%{--base:0px}91.25%{--base:30px}100%{--base:30px}}
@keyframes amp{0%{--amp:26px}10.833%{--amp:34px}20.833%{--amp:20px}22.083%{--amp:14px}34.167%{--amp:16px}34.792%{--amp:0px}47.083%{--amp:0px}47.5%{--amp:22px}56.25%{--amp:36px}66.667%{--amp:18px}67.917%{--amp:12px}77.5%{--amp:15px}78.125%{--amp:0px}90.833%{--amp:0px}91.25%{--amp:28px}100%{--amp:26px}}
@keyframes fly{0%{--fly:0px}35%{--fly:0px;animation-timing-function:cubic-bezier(.2,.7,.35,1)}37.5%{--fly:44px;animation-timing-function:cubic-bezier(.65,0,.8,.4)}40%{--fly:0px;animation-timing-function:cubic-bezier(.2,.7,.35,1)}41.25%{--fly:12px;animation-timing-function:cubic-bezier(.65,0,.8,.4)}42.5%{--fly:0px;animation-timing-function:cubic-bezier(.2,.7,.35,1)}43.125%{--fly:4px;animation-timing-function:cubic-bezier(.65,0,.8,.4)}43.75%{--fly:0px}78.75%{--fly:0px;animation-timing-function:cubic-bezier(.2,.7,.35,1)}81.458%{--fly:50px;animation-timing-function:cubic-bezier(.65,0,.8,.4)}84.167%{--fly:0px;animation-timing-function:cubic-bezier(.2,.7,.35,1)}85.417%{--fly:14px;animation-timing-function:cubic-bezier(.65,0,.8,.4)}86.667%{--fly:0px;animation-timing-function:cubic-bezier(.2,.7,.35,1)}87.292%{--fly:5px;animation-timing-function:cubic-bezier(.65,0,.8,.4)}87.917%{--fly:0px}100%{--fly:0px}}
@keyframes arm{0%{--arm:-150deg}20.833%{--arm:-150deg}22.083%{--arm:0deg}45.417%{--arm:0deg}47.5%{--arm:-150deg}66.667%{--arm:-150deg}67.917%{--arm:0deg}89.167%{--arm:0deg}91.25%{--arm:-150deg}100%{--arm:-150deg}}
@keyframes kick{0%{--kick:0deg}33.958%{--kick:0deg}34.583%{--kick:-35deg}35.083%{--kick:55deg}36.458%{--kick:0deg}77.5%{--kick:0deg}78.125%{--kick:-35deg}78.833%{--kick:55deg}80.208%{--kick:0deg}100%{--kick:0deg}}
@keyframes corre{0%{--corre:1}20.833%{--corre:1}21.667%{--corre:0}36.25%{--corre:0}36.667%{--corre:1}45.417%{--corre:1}45.833%{--corre:0}47.5%{--corre:0}47.917%{--corre:1}66.667%{--corre:1}67.5%{--corre:0}79.583%{--corre:0}80%{--corre:1}89.167%{--corre:1}89.583%{--corre:0}91.25%{--corre:0}91.667%{--corre:1}100%{--corre:1}}
@media (max-width:560px){.campo{display:none}}
header.t .col,footer.p .col{max-width:1040px}       /* testata e piè larghi come la home; il testo degli articoli resta a 712px */
.soc-btn{font:inherit;font-size:15px;font-weight:600;background:none;border:0;cursor:pointer}
.soc-btn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--arancio)}
footer.p nav a{color:var(--ink);text-decoration:none;font-weight:600;padding-bottom:2px;border-bottom:2px solid var(--arancio);transition:color .15s}
footer.p nav a:hover{color:var(--link)}
.soc-card{transition:transform .15s,border-color .15s}
.soc-card:hover{transform:translateY(-2px)}
.soc-btn:focus-visible{outline:2px solid var(--arancio);outline-offset:3px;border-radius:3px}
#sociale{width:min(440px,calc(100% - 32px));max-height:calc(100% - 32px);margin:auto;padding:0;border:1px solid var(--riga);border-radius:20px;
  background:var(--carta);color:var(--ink);box-shadow:0 24px 60px rgba(20,22,28,.28);overflow:auto}
#sociale::backdrop{background:rgba(20,22,28,.45)}
/* effetto «genio» di macOS: il pop-up nasce dal pulsante Social (in alto a destra), stretto e schiacciato, e si distende
   al centro con una sola curva morbida; alla chiusura rifà lo stesso percorso al contrario (stessa durata e stessa curva; sfuma solo alla fine, così il rientro si vede). Solo transform e opacity (fluido anche su
   telefono), @starting-style + transizioni discrete, niente script; con movimento ridotto si apre senza animazione. */
@media (prefers-reduced-motion:no-preference){
#sociale{transform-origin:100% 0;will-change:transform,opacity;
  transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .12s linear .43s,overlay .55s allow-discrete,display .55s allow-discrete}
#sociale:popover-open{transform:none;opacity:1;
  transition:transform .55s cubic-bezier(.65,0,.35,1),opacity .12s linear,overlay .55s allow-discrete,display .55s allow-discrete}
#sociale:not(:popover-open){transform:translate(min(26vw,300px),-42vh) scale(.1,.04);opacity:0}
@starting-style{#sociale:popover-open{transform:translate(min(26vw,300px),-42vh) scale(.1,.04);opacity:0}}
#sociale::backdrop{transition:background .35s ease,overlay .55s allow-discrete,display .55s allow-discrete}
@starting-style{#sociale:popover-open::backdrop{background:rgba(20,22,28,0)}}
}
#sociale .soc-in{padding:22px;display:flex;flex-direction:column;gap:16px}
#sociale .soc-testa{display:flex;justify-content:space-between;align-items:center;gap:12px}
#sociale .soc-testa h2{font-size:24px;display:flex;align-items:center;gap:10px}
#sociale .soc-testa h2::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--arancio)}
#sociale .chiudi{width:44px;height:44px;flex:none;display:grid;place-items:center;font:inherit;font-size:20px;line-height:1;color:var(--ink-2);
  background:var(--box);border:1px solid var(--riga);border-radius:50%;cursor:pointer}
#sociale .chiudi:hover{color:var(--ink);border-color:var(--ink-2)}
#sociale p{font-size:15px;color:var(--ink-2);line-height:1.5}
.soc-card{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;border:1px solid var(--riga);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink);background:var(--box)}
.soc-card:hover{border-color:var(--ink-2)}
.soc-card svg{width:64px;height:64px;display:block}
.soc-card b{font-family:var(--f-titolo);font-weight:800;font-size:21px;display:block}
.soc-card span{font-size:15px;color:var(--ink-2)}
/* --- solo home --- */
.pg-home main .col{max-width:1040px}                          /* home più larga: impegni su una riga e più spazio all'effetto Dock */
.pg-home .home-motto{font-size:17px}
.pg-home .impegni{gap:16px;padding:18px 0}
.pg-home .impegni li{font-size:15px;gap:12px}
.pg-home .impegni svg{width:38px;height:38px}
.pg-home .elenco a.tit{font-size:23px}
.elenco a.tit{transition:color .18s ease}
.elenco li:hover a.tit,.elenco a.tit:focus-visible{color:var(--arancio);text-decoration:none}   /* arancio del logo su tutta la riga */
.elenco img{transition:box-shadow .18s ease}
.elenco li:hover img{box-shadow:0 0 0 2px var(--arancio)}