/* josotosan — foglio di stile del sito.
   Colori solo dalle variabili dei temi (questi blocchi sono l'unico posto con colori scritti),
   niente opacity; caratteri e spazi in rem, così il testo cresce con il pannello «Aspetto».
   Contrasti (li controlla sito/tests/test_stile.py): testo e collegamenti 4,5:1 su fondo, superficie
   e campo; bordo dei campi e anello di messa a fuoco 3:1; testo dei pulsanti 4,5:1 sul pulsante. */

@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans.c24a515faa91.woff2") format("woff2");
  font-weight:300 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Italic.0b02bf8aa34b.woff2") format("woff2");
  font-weight:300 800;font-stretch:75% 100%;font-style:italic;font-display:swap}

/* Chiaro (anche il predefinito) */
:root{
  --fondo:#f6f8f9; --superficie:#ffffff; --campo:#ffffff;
  --testo:#16202a; --testo-2:#45525e; --linea:#cdd5dc; --bordo-campo:#6a7681;
  --accento:#0b5d73; --pulsante:#0b5d73; --pulsante-testo:#ffffff;
  --errore:#a8231b; --ok:#1d6a39; --fuoco:#0b5d73;
}
/* Penombra */
:root[data-theme="medio"]{
  --fondo:#2a3239; --superficie:#333c45; --campo:#39434d;
  --testo:#f1f4f6; --testo-2:#cad3db; --linea:#56636f; --bordo-campo:#9ba8b4;
  --accento:#86d4e3; --pulsante:#86d4e3; --pulsante-testo:#10232a;
  --errore:#ffb4ab; --ok:#94dcab; --fuoco:#86d4e3;
}
/* Scuro */
:root[data-theme="dark"]{
  --fondo:#0f141a; --superficie:#18202a; --campo:#1d2631;
  --testo:#eef2f5; --testo-2:#b9c4ce; --linea:#3a4653; --bordo-campo:#8794a1;
  --accento:#6cc6d8; --pulsante:#6cc6d8; --pulsante-testo:#0b1a20;
  --errore:#ff9e94; --ok:#7ed49b; --fuoco:#6cc6d8;
}
/* Automatico: con il sistema scuro, gli stessi colori del tema Scuro (copia: lo controlla un test) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --fondo:#0f141a; --superficie:#18202a; --campo:#1d2631;
    --testo:#eef2f5; --testo-2:#b9c4ce; --linea:#3a4653; --bordo-campo:#8794a1;
    --accento:#6cc6d8; --pulsante:#6cc6d8; --pulsante-testo:#0b1a20;
    --errore:#ff9e94; --ok:#7ed49b; --fuoco:#6cc6d8;
  }
}
/* Il pannello «Aspetto» prende i colori dalle variabili del sito */
:root{
  --asp-sfondo:var(--superficie);--asp-testo:var(--testo);--asp-tenue:var(--testo-2);--asp-bordo:var(--bordo-campo);
  --asp-accento:var(--pulsante);--asp-accento-testo:var(--pulsante-testo);--asp-campo:var(--campo)}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:"Open Sans",system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.6}
h1,h2,h3{line-height:1.25;margin:1.6rem 0 .7rem}
h1{font-size:2rem;margin-top:1.2rem}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
a{color:var(--accento);text-underline-offset:.15em}
a:hover{text-decoration-thickness:.15em}
img{max-width:100%;height:auto}
code{font-size:.92em}
.contenitore{width:100%;max-width:72rem;margin:0 auto;padding:0 1rem}

.salta{position:absolute;left:1rem;top:-10rem;background:var(--superficie);color:var(--testo);padding:.5rem 1rem;
  border:2px solid var(--fuoco);z-index:10}
.salta:focus{top:.5rem}

/* La testata è comune (pj_base/testata.css, pj-base 0.40): qui solo il logo del sito; i colori vengono dalle variabili del tema. */
.marchio-logo{-webkit-mask-image:url("../img/testasolo.591ffbfbb544.svg");mask-image:url("../img/testasolo.591ffbfbb544.svg")}
.esci{margin:0}

main{min-height:60vh}
.piede{border-top:1px solid var(--linea);background:var(--superficie);margin-top:3rem;padding:1rem 0;color:var(--testo-2);font-size:.95rem}
.piede-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;list-style:none;margin:0;padding:0}
.piede a{color:var(--accento)}

/* Gallerie: opere, eventi, diario */
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:1rem;list-style:none;margin:1rem 0;padding:0}
.tessera{display:flex;flex-direction:column;gap:.3rem;height:100%;text-decoration:none;color:var(--testo);
  background:var(--superficie);border:1px solid var(--linea);border-radius:.5rem;padding:.5rem}
.tessera:hover{border-color:var(--accento)}
.tessera:hover .tessera-titolo{text-decoration:underline}
.tessera img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.3rem;background:var(--campo)}
.tessera-titolo{font-weight:700;overflow-wrap:anywhere}
.tessera-sotto{color:var(--testo-2);font-size:.9rem;margin:0}
.galleria-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:.8rem;margin:1rem 0}
.figura{margin:0}
.figura img{display:block;width:100%;height:auto;border-radius:.3rem}
.figura figcaption{color:var(--testo-2);font-size:.9rem;margin-top:.3rem}
.figura.grande{margin:1rem 0}
.figura.grande img{width:auto;max-width:100%;max-height:80vh;margin:0 auto}
.opera .voci{max-width:40rem}
.riquadro-foto{border:1px solid var(--linea);border-radius:.4rem;padding:.5rem 1rem;margin:0 0 1rem}
.anteprima{display:block;max-width:10rem;height:auto;margin:.3rem 0}
.elenco-diario{list-style:none;margin:0;padding:0}
.elenco-diario h2{margin-bottom:.2rem}
.rassegna{list-style:none;margin:0;padding:0}
.rassegna>li{border-top:1px solid var(--linea);padding:1rem 0}
.rassegna h2{margin:.2rem 0}
.rassegna .figura{max-width:36rem;margin-top:.8rem}

/* Prima pagina */
.galleria.tre{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.editoriale{max-width:48rem;margin:1.5rem 0}

/* Bottega: catalogo e compositore */
.video-cornice{margin:1rem 0;max-width:60rem}
.video-cornice iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:var(--campo)}
.carrello{list-style:none;margin:1rem 0;padding:0}
.carrello>li{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;border-top:1px solid var(--linea);padding:.8rem 0}
.carrello-cosa{flex:1 1 16rem;overflow-wrap:anywhere}
.carrello input[type=number]{width:4.5rem;font:inherit;padding:.25rem .4rem;border:1px solid var(--bordo-campo);
  border-radius:.3rem;background:var(--campo);color:var(--testo)}
.scelte{border:1px solid var(--linea);border-radius:.4rem;padding:.5rem 1rem;margin:0 0 1rem;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:.5rem}
.scelte legend{font-weight:700;padding:0 .3rem}
.scelta{display:flex;align-items:center;gap:.4rem}
.scelta input{width:1.3rem;height:1.3rem;flex:none;accent-color:var(--pulsante)}
.scelta label{display:flex;align-items:center;gap:.5rem;overflow-wrap:anywhere;min-width:0}
.scelta img{width:4rem;height:4rem;object-fit:cover;border-radius:.3rem;flex:none;background:var(--campo)}
.azioni-riga{display:flex;flex-wrap:wrap;gap:.5rem}
.anteprima-gadget{max-width:20rem;margin:1rem 0}

/* Libri: copertina in verticale (A5), scheda su due colonne dove c'è spazio */
.galleria.libri .tessera img{aspect-ratio:1/1.414;object-fit:contain}
.libro-scheda{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;margin:1rem 0}
@media (min-width:48rem){.libro-scheda{grid-template-columns:minmax(0,min(20rem,40%)) minmax(0,1fr)}}
.libro-copertina img{border:1px solid var(--linea)}
.scaricamenti{list-style:none;margin:1rem 0;padding:0}
.scaricamenti li{margin:0 0 .6rem}
.libro .pulsante{max-width:100%;overflow-wrap:anywhere}

/* Il campo «Cerca» della gestione (sito/_gestione_cerca.html) */
.gestione-cerca{display:flex;gap:.5rem;align-items:center;margin:0 0 1rem;max-width:40rem}
.gestione-cerca input{flex:1 1 auto;min-width:0;min-height:2.5rem;padding:.3rem .6rem;border:1px solid var(--bordo-campo);border-radius:.3rem;background:var(--campo);color:var(--testo);font:inherit}

/* Briciole e strumenti sopra il contenuto (pj_base/_briciole.html, _azioni_pagina.html) e la matita di modifica negli elenchi */
.sopra-pagina{padding-top:.8rem}
.sopra-pagina .azioni-pagina{margin-bottom:0}
.matita{font-size:.9rem;font-weight:400;text-decoration:none;color:var(--accento);padding:0 .3rem;border:1px solid var(--linea);border-radius:.3rem;vertical-align:middle}
.matita:hover{border-color:var(--accento)}