/* Layout: fasce di colore alternate (sole, cielo, prato, mattone) come i giorni di festa nel parco;
   colonna di lettura comoda, foto e ritratti su carte colorate. */
@font-face{font-family:"Young Serif";src:url(fonts/young-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(fonts/cinzel-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --fondo:#fffdf8;         /* bianco caldo */
  --carta:#ffffff;
  --inchiostro:#2a2420;    /* testo */
  --grigio:#6b5f57;        /* testo secondario */
  --filo:#eadfd4;          /* linee */
  --mattone:#c4512b;       /* rosso mattone del logo, acceso */
  --mattone-testo:#a8411f; /* mattone per testo e link */
  --sole:#ffc93c;  --sole-chiaro:#fff2c8;
  --cielo:#3d8fd1; --cielo-chiaro:#e3f1fc;
  --prato:#4f9d5b; --prato-chiaro:#e5f4e3;
  --pesca:#fde6da;
  --su-mattone:#ffffff;
  /* carte dei ritratti: tinte fisse, il disegno a matita ci si fonde sopra */
  --t1:#ffe9a8; --t2:#d6ebfb; --t3:#d9f0d5; --t4:#fdd9c7;
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --lapide:"Cinzel", "Trajan Pro", Georgia, serif;
  --testo:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --misura:64ch;
  --raggio:18px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#1d1916; --carta:#262019; --inchiostro:#f6eee6; --grigio:#c3b5a9; --filo:#3d342d;
    --mattone:#e0663d; --mattone-testo:#ff9a72;
    --sole:#ffcf4d; --sole-chiaro:#3a3019; --cielo:#79b9ef; --cielo-chiaro:#1b2a37;
    --prato:#86c98f; --prato-chiaro:#1d2c1f; --pesca:#3a2720; --su-mattone:#1d1916;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fondo:#1d1916; --carta:#262019; --inchiostro:#f6eee6; --grigio:#c3b5a9; --filo:#3d342d;
  --mattone:#e0663d; --mattone-testo:#ff9a72;
  --sole:#ffcf4d; --sole-chiaro:#3a3019; --cielo:#79b9ef; --cielo-chiaro:#1b2a37;
  --prato:#86c98f; --prato-chiaro:#1d2c1f; --pesca:#3a2720; --su-mattone:#1d1916;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--inchiostro);font-family:var(--testo);font-size:1.0625rem;line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--mattone-testo);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{text-decoration-thickness:2.5px}
:focus-visible{outline:3px solid var(--cielo);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.2rem,5.6vw,3.9rem);letter-spacing:-.01em}
h2{font-size:clamp(1.65rem,3.5vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0}
.wrap{max-width:72rem;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.prosa{max-width:var(--misura);display:grid;gap:1em}
.prosa ul{margin:0;padding-left:1.2em;display:grid;gap:.4em}
.prosa li::marker{color:var(--mattone)}
.piccolo{font-size:.93rem;color:var(--grigio)}
.lapide{font-family:var(--lapide);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--grigio)}
.sopra{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--mattone-testo);display:flex;align-items:center;gap:.5rem}
.sopra::before{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--sole);box-shadow:.95rem 0 0 var(--cielo),1.9rem 0 0 var(--mattone);margin-right:2.1rem;flex:none}

/* nastro del voto */
.nastro{background:var(--sole);color:#2a2420;font-size:.95rem}
.nastro .wrap{display:flex;flex-wrap:wrap;gap:.2rem 1rem;align-items:center;justify-content:center;padding-block:.55rem;text-align:center}
.nastro a{color:inherit;font-weight:700}
.nastro strong{letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}

/* testata */
.testata{background:var(--fondo);border-bottom:1px solid var(--filo)}
.testata .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 2rem;padding-block:.9rem}
.marchio{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--inchiostro)}
.marchio img{width:48px;height:auto}
.marchio span{font-family:var(--display);font-size:1.4rem;line-height:1.05}
.marchio em{font-style:normal;color:var(--mattone)}
.marchio small{display:block;font-family:var(--testo);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-top:.25rem}
.menu{display:flex;flex-wrap:wrap;gap:.35rem .4rem;margin:0;padding:0;list-style:none}
.menu a{display:block;color:var(--inchiostro);text-decoration:none;font-weight:700;font-size:.97rem;padding:.4rem .85rem;border-radius:999px}
.menu a:hover{background:var(--sole-chiaro)}
.menu a[aria-current="page"]{background:var(--mattone);color:var(--su-mattone)}

/* fasce */
main{display:block}
.sezione{padding-block:clamp(2.75rem,6vw,4.75rem)}
.fascia-sole{background:var(--sole-chiaro)}
.fascia-cielo{background:var(--cielo-chiaro)}
.fascia-prato{background:var(--prato-chiaro)}
.fascia-pesca{background:var(--pesca)}
.testa-sezione{display:grid;gap:.7rem;margin-bottom:2rem;max-width:var(--misura)}

/* apertura */
.apertura .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,5vw,3.5rem);align-items:center;padding-block:clamp(2rem,5vw,4rem)}
.apertura .testo{display:grid;gap:1.25rem;min-width:0}
.apertura figure{margin:0;position:relative}
.apertura figure img{border-radius:var(--raggio);width:100%;object-fit:cover}
.foto-cornice{position:relative}
.foto-cornice::before{content:"";position:absolute;inset:auto -12px -12px auto;width:60%;height:60%;background:var(--sole);border-radius:var(--raggio);z-index:0}
.foto-cornice::after{content:"";position:absolute;inset:-12px auto auto -12px;width:30%;height:35%;background:var(--cielo);border-radius:var(--raggio);z-index:0;opacity:.85}
.foto-cornice img{position:relative;z-index:1}
.cartiglio{justify-self:start;font-family:var(--lapide);letter-spacing:.18em;font-size:clamp(.82rem,1.6vw,.98rem);color:var(--mattone-testo);padding:.5rem 1.4rem;border:1.5px solid var(--mattone);border-radius:999px/60%;text-transform:uppercase}
.attacco{font-size:1.15rem;max-width:56ch}
.pulsanti{display:flex;flex-wrap:wrap;gap:.75rem}
.btn{display:inline-block;padding:.8rem 1.35rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--mattone);color:var(--mattone-testo);background:transparent;transition:transform .15s}
.btn.pieno{background:var(--mattone);color:var(--su-mattone)}
.btn:hover{transform:translateY(-2px)}

/* riquadro voto */
.voto{background:var(--carta);border-radius:var(--raggio);padding:clamp(1.4rem,3vw,2.2rem);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start;box-shadow:0 0 0 2px var(--sole)}
.voto .prosa{gap:.85em}
.numeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0}
.numeri div{display:grid;gap:.2rem;background:var(--sole-chiaro);border-radius:12px;padding:.8rem .7rem;align-content:start}
.numeri div:nth-child(2){background:var(--cielo-chiaro)}
.numeri div:nth-child(3){background:var(--prato-chiaro)}
.numeri dt{font-family:var(--display);white-space:nowrap;font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1;font-variant-numeric:tabular-nums}
.numeri dd{margin:0;font-size:.84rem;color:var(--grigio);line-height:1.35}
.dati-voto{display:grid;gap:.35rem;font-size:.95rem}

/* appuntamenti */
.agenda{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;max-width:54rem}
.agenda li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;padding:1rem 1.2rem;background:var(--carta);border-radius:14px}
.agenda time{font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mattone-testo);padding-top:.2rem;font-variant-numeric:tabular-nums}
.agenda b{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem}

/* elenco progetti */
.progetti{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:1.25rem}
.progetto{display:grid;grid-template-rows:auto 1fr;background:var(--carta);border-radius:var(--raggio);overflow:hidden;color:inherit;text-decoration:none;border:1px solid var(--filo);transition:transform .15s, box-shadow .15s}
a.progetto:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(60,30,10,.45)}
.progetto .immagine{aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;background:var(--t1);max-width:100%}
.progetto:nth-child(4n+2) .immagine{background:var(--t2)}
.progetto:nth-child(4n+3) .immagine{background:var(--t3)}
.progetto:nth-child(4n+4) .immagine{background:var(--t4)}
.progetto .immagine img{width:100%;height:100%;object-fit:contain;padding:.8rem;mix-blend-mode:multiply}
.progetto .immagine img.copri{object-fit:cover;padding:0;mix-blend-mode:normal}
.progetto .corpo{display:grid;gap:.45rem;padding:1.1rem 1.2rem 1.3rem;align-content:start;min-width:0}
.progetto h3{transition:color .15s}
a.progetto:hover h3{color:var(--mattone-testo)}
.stato{justify-self:start;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;white-space:nowrap;color:#2a2420}
.stato.attivo{background:#bfe6bf}
.stato.voto-s{background:var(--sole)}
.stato.arrivo{background:#cfe5fa}
.stato.corso{background:#f6d6c6}

/* figure e citazioni */
.affianco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1.5rem,5vw,4rem);align-items:start}
.affianco > *{min-width:0}
figure{margin:0;display:grid;gap:.6rem}
figcaption{font-size:.87rem;color:var(--grigio)}
.foto{border-radius:var(--raggio)}
blockquote{margin:0;padding:1rem 1.25rem;background:var(--carta);border-radius:14px;border-left:5px solid var(--sole);font-family:var(--display);font-size:1.2rem;line-height:1.45;display:grid;gap:.5rem}
blockquote cite{font-family:var(--testo);font-style:normal;font-size:.9rem;color:var(--grigio)}
.leggenda{font-family:var(--display);font-size:1.1rem;line-height:1.75;max-width:46ch;display:grid;gap:1.1em}
.leggenda .voce{color:var(--mattone-testo)}

/* tre cerchi */
.tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;max-width:56rem}
.tre div{display:grid;gap:.4rem;align-content:start;background:var(--carta);border-radius:14px;padding:1rem}
.tre i{width:2.4rem;height:2.4rem;border-radius:50%;display:block;border:6px solid}
.tre .b i{border-color:#2f6fc4} .tre .r i{border-color:#d2422a} .tre .g i{border-color:#f0b419}

/* persone */
.ritratti{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:2rem 1.5rem}
.ritratti figure{gap:.7rem}
.ritratti .tela{background:var(--t1);border-radius:50% 50% var(--raggio) var(--raggio)/38% 38% var(--raggio) var(--raggio);aspect-ratio:5/6;overflow:hidden;max-width:100%}
.ritratti figure:nth-child(4n+2) .tela{background:var(--t2)}
.ritratti figure:nth-child(4n+3) .tela{background:var(--t3)}
.ritratti figure:nth-child(4n+4) .tela{background:var(--t4)}
.ritratti .tela img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.ritratti figcaption{color:var(--inchiostro);font-size:1rem;display:grid;gap:.15rem}
.ritratti figcaption b{font-family:var(--display);font-weight:400;font-size:1.2rem}
.ritratti figcaption span{color:var(--grigio);font-size:.9rem;line-height:1.4}
.ritratti.centrati figcaption{text-align:center}

/* sostegno */
.vie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.via{background:var(--carta);border-radius:var(--raggio);padding:1.5rem;display:grid;gap:.75rem;align-content:start;border-top:6px solid var(--sole)}
.via:nth-child(2){border-top-color:var(--cielo)} .via:nth-child(3){border-top-color:var(--mattone)} .via:nth-child(4){border-top-color:var(--prato)}
.cf{font-family:var(--display);font-size:2rem;letter-spacing:.05em;font-variant-numeric:tabular-nums;user-select:all}
.avviso{background:var(--sole-chiaro);padding:.8rem 1.1rem;border-radius:12px;font-size:.95rem;color:var(--inchiostro)}

/* piede */
.piede{background:var(--mattone);color:var(--su-mattone)}
.piede a{color:inherit}
.piede .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:2rem;padding-block:2.75rem}
.piede h2{font-size:1.25rem;margin-bottom:.6rem}
.piede p,.piede li{font-size:.95rem}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.loghi{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.1rem}
.loghi span{background:#ffffff;border-radius:12px;padding:.45rem .6rem;display:grid;place-items:center}
.loghi img{height:52px;width:auto}
.colophon{border-top:1px solid color-mix(in srgb, var(--su-mattone) 30%, transparent)}
.colophon .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;padding-block:1rem;font-size:.85rem}
.colophon .lapide{color:inherit}

@media (max-width:820px){
  .apertura .wrap,.voto,.affianco,.piede .wrap,.vie{grid-template-columns:minmax(0,1fr)}
  .apertura figure{order:-1}
  .agenda li{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .tre{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){ .numeri{grid-template-columns:minmax(0,1fr)} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* documenti */
.documenti{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));gap:.9rem}
.doc{display:grid;gap:.3rem;align-content:start;background:var(--carta);border-radius:14px;padding:1rem 1.1rem;color:var(--inchiostro);text-decoration:none;border:1px solid var(--filo);transition:transform .15s}
.doc:hover{transform:translateY(-2px)}
.doc b{font-family:var(--display);font-weight:400;font-size:1.08rem;line-height:1.25;color:var(--mattone-testo)}
.doc .tipo{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio)}

/* galleria */
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:1rem}
.galleria figure{gap:.45rem}
.galleria a{display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:var(--carta);max-width:100%}
.galleria img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.galleria a:hover img{transform:scale(1.03)}

/* foto in bianco e nero */
img.bn{filter:grayscale(1) contrast(1.05)}

/* Rudolf: il suo spirito è con noi */
#volontari figure.spirito .tela{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(circle at 20% 80%, #c9b6f2 0%, rgba(201,182,242,0) 50%),
    radial-gradient(circle at 85% 65%, #e7c9f5 0%, rgba(231,201,245,0) 45%),
    linear-gradient(170deg, #efe7ff 0%, #d4c2f5 55%, #b39ae8 100%);
  box-shadow:0 0 28px 4px rgba(155,120,230,.35);
}
#volontari figure.spirito .tela img{opacity:.85}
.ritratti figure.spirito figcaption span{font-style:italic;color:#8a6bd1}
@media (prefers-reduced-motion:no-preference){
  #volontari figure.spirito .tela{animation:aura 6s ease-in-out infinite alternate}
  @keyframes aura{from{box-shadow:0 0 18px 2px rgba(155,120,230,.25)}to{box-shadow:0 0 36px 8px rgba(155,120,230,.45)}}
}

/* posto vuoto: invito per chi arriverà */
.ritratti figure.invito .tela{display:grid;place-items:center;background:transparent;border:2.5px dashed var(--mattone);text-decoration:none;transition:background .2s}
.ritratti figure.invito .tela:hover{background:var(--sole-chiaro)}
.ritratti figure.invito .piu{font-family:var(--display);font-size:clamp(3rem,8vw,4.5rem);line-height:1;color:var(--mattone)}
.ritratti figure.invito figcaption span{font-style:italic}

/* telefono: due ritratti per riga, un po' più piccoli */
@media (max-width:560px){
  .ritratti{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .9rem}
  .ritratti figcaption b{font-size:1.05rem}
  .ritratti figcaption span{font-size:.82rem}
}

/* caffè: online e al bar */
.caffe{display:grid;gap:.9rem}
.caffe > div{display:grid;gap:.4rem;background:var(--sole-chiaro);border-radius:12px;padding:.9rem 1rem}
.caffe h3{font-size:1.08rem}
.caffe .btn{justify-self:start;margin-top:.2rem}
.caffe .avviso{background:var(--carta)}

/* Fonte: galleria verticale */
.galleria.verticale a{aspect-ratio:3/4}
/* Documenti: apri / scarica */
.doc .titolo{text-decoration:none}
.doc .titolo:hover b{text-decoration:underline}
.doc .azioni{display:flex;gap:1rem;margin-top:.35rem;font-size:.88rem;font-weight:700}
.doc .azioni a{color:var(--mattone-testo);text-decoration:none}
.doc .azioni a:hover{text-decoration:underline}
/* Adesioni */
ol.adesioni{padding-left:1.3rem}
ol.adesioni li{margin-bottom:.35rem}
ol.adesioni a{color:var(--mattone-testo)}