/* ------------------------------------------------------------------
   amerigogismondi.it — foglio di stile
   Impianto: catalogo (proposta C) con home a sale (proposta B).
   Il sito fa da parete bianca: il colore sta tutto nelle tele.
   ------------------------------------------------------------------ */

:root{
  --ground:#FBFAF7;      /* bianco appena caldo, come un muro di galleria */
  --surface:#FFFFFF;
  --mat:#F2F0EA;         /* fondo del passe-partout dietro le opere */
  --ink:#1A1815;
  --body:#3D3932;
  --muted:#6E6960;
  --line:#E2DFD8;
  --line-forte:#CFCAC0;
  --accent:#27506B;      /* blu d'inchiostro da cartellino, non compete con le tele */
  --accent-tenue:#EAF0F4;
  --focus:#27506B;
  --su-accento:#FFFFFF;
  --ok-esito:#E6F0E9;
  --crit-esito:#F6E9E4;

  --testo:"Newsreader",Georgia,"Times New Roman",serif;
  --dati:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --gutter:clamp(18px,4vw,44px);
  --max:1320px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#171613;
    --surface:#1E1D19;
    --mat:#232219;
    --ink:#EFECE4;
    --body:#C8C3B8;
    --muted:#918B7F;
    --line:#2F2D27;
    --line-forte:#403D35;
    --accent:#8CBAD4;
    --accent-tenue:#1B2830;
    --focus:#8CBAD4;
    --su-accento:#171613;
    --ok-esito:#16241C;
    --crit-esito:#2A1D17;
  }
}
:root[data-theme="dark"]{
  --ground:#171613;
  --surface:#1E1D19;
  --mat:#232219;
  --ink:#EFECE4;
  --body:#C8C3B8;
  --muted:#918B7F;
  --line:#2F2D27;
  --line-forte:#403D35;
  --accent:#8CBAD4;
  --accent-tenue:#1B2830;
  --focus:#8CBAD4;
  --su-accento:#171613;
  --ok-esito:#16241C;
  --crit-esito:#2A1D17;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--body);
  font-family:var(--testo);
  font-size:17px;
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

/* height:auto e' indispensabile: le immagini hanno width e height dichiarati
   nell'HTML (servono a evitare i sobbalzi in caricamento), e senza questa riga
   il browser stringe la larghezza ma tiene l'altezza dell'attributo, deformando
   la figura appena il contenitore e' piu' stretto dell'originale. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;color:var(--ink);font-weight:400;text-wrap:balance;line-height:1.14}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
}

.contenitore{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.salta{position:absolute;left:-9999px}
.salta:focus{left:var(--gutter);top:8px;z-index:60;background:var(--surface);
  padding:10px 16px;border:1px solid var(--line-forte);border-radius:2px}

/* cartellino: i dati tecnici hanno il carattere dei cartellini da museo */
.dati{font-family:var(--dati);font-size:11.5px;letter-spacing:.07em;
  text-transform:uppercase;font-variant-numeric:tabular-nums}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:40;background:var(--ground);
  border-bottom:1px solid var(--line)}
.testata .contenitore{display:flex;align-items:center;justify-content:space-between;
  gap:20px;min-height:64px}
.marchio{font-size:20px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.marchio span{color:var(--muted)}
.navigazione{display:flex;gap:clamp(14px,2.4vw,30px);align-items:center}
.navigazione a{text-decoration:none;font-size:15.5px;color:var(--body);padding:4px 0;
  border-bottom:1px solid transparent}
.navigazione a:hover{color:var(--ink);border-bottom-color:var(--line-forte)}
.navigazione a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}

.comandi{display:flex;align-items:center;gap:10px}
.apri-menu{display:none;background:none;border:1px solid var(--line-forte);
  border-radius:2px;color:var(--ink);font:inherit;font-size:14px;padding:6px 12px;cursor:pointer}

/* Comando del tema: mostra l'icona di dove si va, non di dove si e'. */
.tema{display:grid;place-items:center;width:34px;height:34px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:50%;color:var(--body);
  transition:border-color .18s ease,color .18s ease}
.tema:hover{border-color:var(--line-forte);color:var(--ink)}
.tema svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.tema .luna{display:block}
.tema .sole{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tema .luna{display:none}
  :root:not([data-theme="light"]) .tema .sole{display:block}
}
:root[data-theme="dark"] .tema .luna{display:none}
:root[data-theme="dark"] .tema .sole{display:block}

/* Dimensione delle opere scelta dal visitatore: un solo moltiplicatore per
   altezze delle tessere e larghezza delle colonne, in tutto il sito. Le tele
   restano intere: cambia solo quanto sono grandi e quante stanno in riga. */
:root{--scala:1}
:root[data-dimensione="piccole"]{--scala:.7}
:root[data-dimensione="grandi"]{--scala:1.5}
.anima .opera .cornice{transition:border-color .18s ease,height .3s ease}

.dimensione .pulsanti{display:flex;border:1px solid var(--line);border-radius:17px;padding:2px}
.dimensione button{display:grid;place-items:center;width:30px;height:28px;padding:0;
  background:none;border:0;border-radius:14px;color:var(--muted);cursor:pointer;
  transition:color .18s ease,background-color .18s ease}
.dimensione button:hover{color:var(--ink)}
.dimensione button[aria-pressed="true"]{background:var(--accent-tenue);color:var(--accent)}
.dimensione svg{fill:currentColor}
.dimensione.nel-menu{display:none}
/* Solo dove ci sono opere da ridimensionare. */
body:not(:has(.opera)) .dimensione{display:none !important}

@media (max-width:760px){
  .apri-menu{display:block}
  .navigazione{position:fixed;inset:64px 0 auto 0;background:var(--ground);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--gutter) 20px;display:none}
  .navigazione[data-aperto]{display:flex}
  .navigazione a{padding:13px 0;border-bottom:1px solid var(--line);font-size:17px}
  /* Sul telefono la testata non ha posto: il selettore va nel menu. */
  .dimensione.in-testata{display:none}
  .dimensione.nel-menu{display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:14px 0 2px}
  .etichetta-dimensione{color:var(--muted);font-family:var(--dati);font-size:10.5px;
    letter-spacing:.08em;text-transform:uppercase}
  .dimensione.nel-menu button{width:40px;height:34px}
}

/* ---------- apertura della home ---------- */
/* overflow:hidden perche' l'immagine, con l'effetto di profondita' piu' sotto,
   si sposta e si ingrandisce: senza, sborda in fondo come una striscia chiara
   fuori dal velo scuro. */
.apertura{position:relative;background:var(--mat);overflow:hidden}
.apertura img{width:100%;height:min(76vh,660px);object-fit:cover;object-position:center 42%}
.apertura .velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,10,8,.10) 0%,rgba(12,10,8,.16) 45%,rgba(12,10,8,.72) 100%)}
.apertura .testo{position:absolute;left:0;right:0;bottom:0;padding:0 0 clamp(24px,4vw,52px);
  color:#fff}
.apertura h1,
.apertura .titolo-sito{color:#fff;font-size:clamp(34px,6.6vw,72px);
  letter-spacing:-.02em;line-height:1.14;margin:0;font-weight:400}
.apertura .sottotitolo{margin-top:10px;font-size:clamp(13px,1.6vw,15px);
  font-family:var(--dati);letter-spacing:.12em;text-transform:uppercase;opacity:.92}
.apertura .didascalia{position:absolute;right:var(--gutter);top:calc(var(--gutter) - 4px);
  color:#fff;opacity:.78;font-family:var(--dati);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;text-align:right;max-width:44%}

/* ---------- sale (home) ---------- */
.sala{padding:clamp(44px,6vw,78px) 0;border-bottom:1px solid var(--line)}
.sala-intestazione{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 30px;
  align-items:end;margin-bottom:clamp(20px,3vw,30px)}
.sala-intestazione .occhiello{color:var(--accent);margin-bottom:8px;display:block}
.sala-intestazione h1,
.sala-intestazione h2{font-size:clamp(24px,3.4vw,36px);letter-spacing:-.012em}
.sala-intestazione p{margin-top:10px;max-width:56ch;color:var(--body)}
.tutte{text-decoration:none;color:var(--accent);white-space:nowrap;font-size:15.5px;
  border-bottom:1px solid var(--accent-tenue);padding-bottom:3px}
.tutte:hover{border-bottom-color:var(--accent)}

.fila{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(10px,1.4vw,18px)}
.fila .secondarie{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
@media (max-width:820px){
  .sala-intestazione{grid-template-columns:1fr}
  .fila{grid-template-columns:1fr}
  .fila .secondarie{grid-template-columns:1fr 1fr}
}

/* ---------- opera nella griglia ---------- */
/* Le tele non si tagliano mai: object-fit contain su un fondo che fa da passe-partout. */
.opera{display:block;text-decoration:none;color:inherit}
.opera .cornice{background:var(--mat);border:1px solid var(--line);overflow:hidden;
  display:grid;place-items:center;transition:border-color .18s ease}
.opera:hover .cornice,.opera:focus-visible .cornice{border-color:var(--line-forte)}
.opera .cornice img{width:100%;height:100%;object-fit:contain}
/* Il <picture> deve riempire la cornice: se no l'immagine prende la larghezza
   scritta in "sizes" e, con le opere grandi, resta piccola in mezzo al fondo.
   Il margine di passe-partout lo da' la cornice. */
.opera .cornice{padding:8px}
.opera .cornice picture{display:block;width:100%;height:100%;min-height:0}
/* Titolo e misura sono <span> dentro un <a>: senza display:block restano in
   linea, si attaccano l'uno all'altro e i margini verticali non fanno effetto. */
.opera .titolo{display:block;margin-top:9px;color:var(--ink);font-size:16px;line-height:1.3}
.opera .misura{display:block;margin-top:2px;color:var(--muted);font-size:11px;font-family:var(--dati);
  letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}

.alta-260 .cornice{height:calc(clamp(180px,26vw,260px) * var(--scala))}
.alta-360 .cornice{height:calc(clamp(240px,34vw,380px) * var(--scala))}
.alta-540 .cornice{height:calc(clamp(280px,44vw,540px) * var(--scala))}

.intestazione-catalogo{padding:clamp(28px,4vw,46px) 0 clamp(18px,2.4vw,26px)}
.intestazione-catalogo h1{font-size:clamp(28px,4.2vw,44px);letter-spacing:-.02em;margin-bottom:12px}
.intestazione-catalogo p{max-width:62ch;color:var(--body)}

/* ---------- griglia del catalogo ---------- */
.strumenti{position:sticky;top:64px;z-index:30;background:var(--ground);
  border-bottom:1px solid var(--line);padding:14px 0}
.strumenti .contenitore{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.cerca{flex:1 1 250px;position:relative;min-width:0}
.cerca input{width:100%;font:inherit;font-size:15.5px;padding:9px 13px 9px 34px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-forte);border-radius:2px}
.cerca input::placeholder{color:var(--muted)}
.cerca svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.7}
.filtro{display:flex;align-items:center;gap:7px}
.filtro > span{color:var(--muted);font-family:var(--dati);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.filtro select{font:inherit;font-size:15px;padding:8px 11px;background:var(--surface);
  color:var(--ink);border:1px solid var(--line-forte);border-radius:2px}
.conteggio{margin-left:auto;color:var(--muted);font-family:var(--dati);font-size:11.5px;
  letter-spacing:.07em;text-transform:uppercase;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.azzera{background:none;border:0;color:var(--accent);font:inherit;font-size:14.5px;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:4px}
.azzera[hidden]{display:none}
/* Un elemento nascosto dagli script resta nascosto anche se il suo stile
   gli da' display:grid o block: senza questa riga le righe dell'elenco
   filtrate restavano a vista. */
[hidden]{display:none !important}

.griglia{display:grid;gap:clamp(18px,2.4vw,32px) clamp(12px,1.8vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(210px * var(--scala))),1fr));
  padding:clamp(28px,4vw,46px) 0}
@media (max-width:520px){
  .griglia{grid-template-columns:1fr 1fr;gap:18px 12px}
  :root[data-dimensione="piccole"] .griglia{grid-template-columns:repeat(3,1fr);gap:14px 8px}
  :root[data-dimensione="grandi"] .griglia{grid-template-columns:1fr}
  .strumenti{top:64px}
}
.nessun-esito{padding:60px 0 80px;text-align:center;color:var(--muted)}
.nessun-esito strong{display:block;color:var(--ink);font-size:22px;margin-bottom:8px}

/* ---------- scheda dell'opera ---------- */
.briciole{padding:18px 0 0;font-size:14.5px;color:var(--muted)}
.briciole a{color:var(--accent);text-decoration:none}
.briciole a:hover{text-decoration:underline;text-underline-offset:3px}

.scheda{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(260px,.85fr);
  gap:clamp(24px,3.5vw,54px);padding:22px 0 clamp(40px,5vw,64px);align-items:start}
@media (max-width:900px){.scheda{grid-template-columns:1fr;gap:26px}}

.tela{background:var(--mat);border:1px solid var(--line);display:grid;place-items:center;
  padding:clamp(12px,2vw,26px)}
.tela img{max-height:min(78vh,760px);width:auto;max-width:100%;object-fit:contain}

.scheda h1{font-size:clamp(27px,3.6vw,40px);letter-spacing:-.015em;margin-bottom:4px}
.scheda .anno-grande{font-family:var(--dati);font-size:13px;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase}
.cartellino{margin-top:26px;border-top:1px solid var(--line)}
.cartellino div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
.cartellino dt{color:var(--muted);font-family:var(--dati);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase}
.cartellino dd{margin:0;color:var(--ink);font-size:16px}
.cartellino dd a{color:var(--accent);text-decoration:none}
.cartellino dd a:hover{text-decoration:underline;text-underline-offset:3px}
.da-completare{color:var(--muted);font-style:italic}

.richiedi{display:inline-block;margin-top:24px;padding:12px 22px;background:var(--accent);
  color:var(--su-accento);text-decoration:none;border-radius:2px;font-size:16px;
  transition:opacity .18s ease}
.richiedi:hover{opacity:.88}

.scorri{display:flex;justify-content:space-between;gap:16px;padding:22px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:6px}
.scorri a{text-decoration:none;color:var(--body);font-size:15px;max-width:46%}
.scorri a:hover{color:var(--ink)}
.scorri .verso{display:block;color:var(--muted);font-family:var(--dati);font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:3px}
.scorri .avanti{text-align:right;margin-left:auto}

.affini{padding:clamp(34px,4.5vw,56px) 0}
.affini h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:20px}

/* ---------- pagine di testo ---------- */
.pagina-testo{padding:clamp(34px,5vw,64px) 0 clamp(48px,6vw,80px);max-width:70ch}
.pagina-testo h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.02em;margin-bottom:22px}
.pagina-testo h2{font-size:clamp(19px,2.3vw,24px);margin:38px 0 12px}
.pagina-testo p{margin-bottom:16px}
.pagina-testo a{color:var(--accent)}
/* Solo gli elenchi semplici del testo (privacy): quelli con una classe, come
   l'elenco delle mostre, hanno il loro disegno e niente puntini. */
.pagina-testo ul:not([class]){list-style:disc;padding-left:22px;margin:0 0 16px}
.pagina-testo ul:not([class]) > li{margin-bottom:8px}
/* Tabelle e formula della pagina riservata dei prezzi: si legge dal telefono,
   quindi una tabella larga scorre di lato invece di stringersi. */
.pagina-testo table{border-collapse:collapse;margin:0 0 20px;font-size:14.5px;
  display:block;overflow-x:auto;max-width:100%}
.pagina-testo th,.pagina-testo td{padding:6px 14px 6px 0;border-bottom:1px solid var(--line2);
  text-align:left;vertical-align:top}
.pagina-testo th{font-weight:600;border-bottom-color:var(--line-forte)}
.pagina-testo pre{font-family:var(--dati);font-size:14px;margin:0 0 16px;padding:10px 14px;
  background:var(--mat);overflow-x:auto}
.pagina-testo code{font-family:var(--dati);font-size:.92em}
.riservata .avviso{color:var(--muted);font-size:14.5px;padding-bottom:12px;
  border-bottom:1px solid var(--line2)}
/* Il listino da stampare (listino.php): schede su due colonne, con
   l'immagine grande quanto basta a riconoscere il quadro da lontano. */
.listino .pagina-testo{max-width:none}
.listino h1{font-size:clamp(22px,3vw,30px);margin:18px 0 6px}
.listino .intestazione{color:var(--muted);font-size:14px}
.listino h2{font-size:17px;margin:22px 0 4px}
.listino h2 .quante{color:var(--muted);font-size:11px;margin-left:6px}
.listino .voci{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));column-gap:28px}
.listino .voci li{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);
  grid-template-rows:auto auto 1fr;column-gap:16px;align-items:start;margin:0;
  padding:10px 0;border-bottom:1px solid var(--line2)}
.listino .miniatura{grid-row:1 / span 3;display:flex;align-items:center;justify-content:center;
  width:150px;height:150px}
.listino .miniatura img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.listino .titolo{font-size:16px;line-height:1.25}
.listino .voci .dati{font-size:13px}
.listino .voci .prezzo{align-self:end;font-size:19px;font-weight:600;white-space:nowrap}
.listino .voci .prezzo.fuori{font-size:13px;font-weight:400;color:var(--muted)}
.listino .spunta{position:absolute;right:0;bottom:12px;display:flex;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.listino .spunta span{display:inline-block;width:16px;height:16px;
  border:1px solid var(--line-forte)}
.listino .totale{margin-top:18px;text-align:right;font-size:14px}
/* Gli adesivi messi sui quadri, uno per fascia di prezzo: lo sfondo della voce
   ha lo stesso colore, nel listino e nella pagina degli organizzatori. Tinte
   piene come gli adesivi veri, quindi il testo sopra resta scuro anche con il
   tema scuro; e si stampano, che il browser di suo gli sfondi li toglie. */
.fascia-300{--adesivo:#8EC3F7}
.fascia-400{--adesivo:#8DEB7F}
.fascia-500{--adesivo:#EEF75A}
.fascia-600{--adesivo:#FF9A5C}
.fascia-700{--adesivo:#FF7CC8}
[class^="fascia-"]{background:var(--adesivo);color:#181512;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
[class^="fascia-"] .dati,[class^="fascia-"] .dettaglio,[class^="fascia-"] .spunta,
[class^="fascia-"] .salvataggio{color:#3a342e}
.legenda-adesivi{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;font-size:13px}
.legenda-adesivi span{padding:3px 10px}
.listino .voci li[class^="fascia-"]{padding:10px;margin-bottom:6px;border-bottom:0}
.listino .voci li[class^="fascia-"] .spunta{right:10px}
.listino .voci li[class^="fascia-"] .spunta span{border-color:#181512;background:#fff}
.con-note li[class^="fascia-"]{padding:12px;margin-bottom:6px;border-bottom:0}
/* Sopra una tinta piena il grigio dei dati non si legge, e con il tema scuro
   diventa chiaro su chiaro: nelle note tutto il testo della voce e' inchiostro
   scuro, qualunque sia il tema. I dati vanno a capo, o sul telefono il prezzo
   esce dal riquadro. */
.con-note li[class^="fascia-"] .titolo,.con-note li[class^="fascia-"] .titolo a,
.con-note li[class^="fascia-"] .dettaglio,.con-note li[class^="fascia-"] .stato-voce,
.con-note li[class^="fascia-"] .salvataggio{color:#181512}
.con-note li[class^="fascia-"] .dettaglio{font-size:13px;font-weight:600;white-space:normal}
.con-note li[class^="fascia-"].venduta .stato-voce,
.con-note li[class^="fascia-"] .salvataggio.errore,
.con-note li[class^="fascia-"] .segno-acquirente{color:#7A0F0A}
.con-note li[class^="fascia-"] .miniatura{background:rgba(255,255,255,.6)}
@media (max-width:560px){
  .listino .voci li{grid-template-columns:110px minmax(0,1fr)}
  .listino .miniatura{width:110px;height:110px}
}
.modulo .informativa{display:block;margin-top:14px;max-width:60ch;color:var(--muted);
  font-size:13.5px;line-height:1.5}

.segnaposto{border:1px dashed var(--line-forte);background:var(--accent-tenue);
  padding:18px 20px;border-radius:2px;margin:20px 0}
.segnaposto .etichetta{color:var(--accent);font-family:var(--dati);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;display:block;margin-bottom:8px}
.segnaposto p{font-size:15.5px;margin-bottom:8px}
.segnaposto p:last-child{margin-bottom:0}
.segnaposto ul{list-style:disc;padding-left:20px;font-size:15.5px}
.segnaposto li{margin-bottom:5px}

/* ---------- mostra ---------- */
/* L'apertura della home diventa la mostra finche' non e' conclusa; il blocco
   ordinario resta nella pagina, nascosto, e ritorna al suo posto dopo. */
.mostra-apertura img{object-position:center 50%}
.mostra-apertura .velo{
  background:linear-gradient(180deg,rgba(12,10,8,.20) 0%,rgba(12,10,8,.34) 40%,rgba(12,10,8,.82) 100%)}
.mostra-apertura .occhiello{color:#F0D9A8;margin-bottom:14px}
.mostra-apertura h1{font-size:clamp(30px,5.4vw,60px);line-height:1.06}
.mostra-apertura h1 em{display:block;font-size:.52em;font-style:italic;opacity:.94;
  margin-top:6px;letter-spacing:0}
.mostra-apertura .luogo{margin-top:14px;font-size:clamp(15px,1.9vw,19px);opacity:.95}
.mostra-apertura .luogo .mappa{color:#fff;text-underline-offset:3px;white-space:nowrap}
.cartellino .mappa{color:var(--accent);font-size:15px;white-space:nowrap}
.mostra-apertura .quando{margin-top:8px;opacity:.86;font-size:11.5px;letter-spacing:.06em}
.mostra-apertura .azioni{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 12px}
.bottone{display:inline-block;padding:11px 20px;background:var(--surface);color:var(--ink);
  text-decoration:none;border-radius:2px;font-size:15.5px;border:1px solid transparent;
  transition:opacity .18s ease}
.bottone:hover{opacity:.88}
.bottone.tenue{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.bottone.tenue:hover{border-color:#fff;opacity:1}

.segnale{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-left:6px;vertical-align:2px}

.stato-mostra{display:inline-block;padding:3px 9px;border-radius:2px;margin-bottom:12px}
.stato-in-corso{background:var(--accent);color:var(--su-accento)}
.stato-prossima{background:var(--accent-tenue);color:var(--accent)}
.stato-conclusa{background:var(--mat);color:var(--muted);border:1px solid var(--line)}

.scheda h1 em{font-style:italic;color:var(--muted);font-size:.62em;display:block;margin-top:6px}
.invito{max-width:560px;margin:0 0 26px;border:1px solid var(--line);background:var(--mat)}
.patrocinio{display:flex;align-items:center;gap:16px;margin:0 0 30px}
.patrocinio img{width:auto;height:80px;flex:none}
.patrocinio span{font-style:italic;font-size:15.5px;color:var(--muted);line-height:1.35}
.patrocinio strong{display:block;font-style:normal;font-family:var(--dati);font-weight:600;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:2px}
/* Lo stemma accompagna ogni citazione del patrocinio, anche in piccolo. */
.con-stemma{display:inline-flex;align-items:center;gap:8px}
.con-stemma .stemma{width:auto;flex:none}
.mostra-apertura .patrocinio-home{display:flex;margin-top:10px;font-size:14px;font-style:italic;
  color:rgba(255,255,255,.86)}
.mostra-apertura .patrocinio-home .stemma{height:32px}
.cartellino .con-stemma .stemma{height:28px}
.voce-mostra .patrocinio-voce{display:flex;margin-top:10px;font-size:14px;font-style:italic;
  color:var(--muted)}
.voce-mostra .patrocinio-voce .stemma{height:26px}

.elenco-mostre{display:grid;gap:18px;margin:0 0 34px}
.voce-mostra a{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;
  text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--surface);
  padding:18px;transition:border-color .18s ease}
.voce-mostra a:hover{border-color:var(--line-forte)}
.voce-mostra .cornice{background:var(--mat);display:block}
.voce-mostra .cornice img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.voce-mostra .dettagli{display:block;align-self:center}
.voce-mostra .titolo{display:block;color:var(--ink);font-size:clamp(20px,2.6vw,27px);
  line-height:1.15;margin-bottom:6px}
.voce-mostra .titolo em{font-style:italic;color:var(--muted);font-size:.72em}
.voce-mostra .luogo{display:block;color:var(--body);font-size:16px}
.voce-mostra .quando{display:block;color:var(--muted);margin-top:8px}
@media (max-width:700px){
  .voce-mostra a{grid-template-columns:1fr;gap:14px}
}

/* ---------- archivio: mostre e rassegna stampa ---------- */
.storia{margin:clamp(30px,4vw,46px) 0}
.storia h2{font-size:clamp(19px,2.4vw,25px);margin:clamp(28px,3.4vw,40px) 0 16px}
.storia h2:first-child{margin-top:0}
.storia > p{max-width:66ch;margin-bottom:12px}

.elenco-date{display:grid;gap:0;border-top:1px solid var(--line);max-width:80ch}
.elenco-date li{display:grid;grid-template-columns:158px minmax(0,1fr);gap:6px 20px;
  padding:13px 0;border-bottom:1px solid var(--line2);align-items:baseline}
.elenco-date .quando{color:var(--muted);white-space:nowrap}
.elenco-date .dove{color:var(--ink);font-size:16.5px;line-height:1.35}
.elenco-date .citta{display:block;color:var(--muted);font-size:14.5px;margin-top:2px}
.elenco-date .nota{display:block;color:var(--muted);font-size:13.5px;margin-top:5px;
  line-height:1.4;max-width:56ch}
@media (max-width:620px){
  .elenco-date li{grid-template-columns:1fr;gap:3px}
}

.citazione{margin:22px 0;padding-left:20px;border-left:2px solid var(--accent-line);
  max-width:62ch}
.citazione blockquote{margin:0;font-size:clamp(18px,2.2vw,21px);line-height:1.45;
  color:var(--ink);font-style:italic}
.citazione figcaption{margin-top:8px;color:var(--muted);font-family:var(--dati);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}

.nota-fonti{max-width:66ch;color:var(--muted);font-size:14.5px;margin-top:16px}

/* ---------- elenco delle opere in mostra ---------- */
.lista-mostra{columns:2;column-gap:clamp(28px,4vw,56px);margin-top:24px}
.lista-mostra h3{font-size:15px;font-weight:600;margin:26px 0 6px;
  break-after:avoid;break-inside:avoid}
.lista-mostra > h3:first-child{margin-top:0}
.lista-mostra h3 .quante{color:var(--muted);font-size:11px;margin-left:7px;
  letter-spacing:.06em}
.opere-mostra{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.opere-mostra li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:2px 16px;padding:8px 0;border-bottom:1px solid var(--line2);
  align-items:baseline;break-inside:avoid}
.opere-mostra .titolo{font-size:16px;line-height:1.3}
.opere-mostra .dettaglio{color:var(--muted);font-size:12px;white-space:nowrap;
  text-align:right}
@media (max-width:720px){
  .lista-mostra{columns:1}
  .opere-mostra .dettaglio{text-align:left}
}

/* ---------- elenco illustrato e note per gli organizzatori ---------- */
.per-organizzatori{margin-top:22px;font-size:13px}
.per-organizzatori a{color:var(--muted)}
.elenco-mostra h2{font-size:19px;margin:30px 0 8px}
.strumenti-elenco{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;
  margin:18px 0 4px}
.strumenti-elenco .sezioni{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}
.strumenti-elenco .cerca{display:flex;gap:8px;align-items:center;font-size:15px}
.strumenti-elenco input[type=search]{font:inherit;font-size:15px;padding:6px 10px;
  width:16rem;max-width:62vw;border:1px solid var(--line-forte);
  background:var(--surface);color:var(--ink)}
.sezione{scroll-margin-top:84px}
.organizzatori .sezione{scroll-margin-top:12px}
.nessuna{color:var(--muted);margin-top:20px}
.togli-filtro{font:inherit;font-size:15px;font-weight:600;padding:7px 14px;cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--su-accento)}
.elenco-mostra h2 .quante,.organizzatori h2 .quante{color:var(--muted);font-size:11px;
  margin-left:7px;letter-spacing:.06em}
.elenco-illustrato{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.elenco-illustrato li{display:grid;grid-template-columns:150px minmax(0,1fr) auto;
  gap:6px 16px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line2);
  break-inside:avoid}
.elenco-illustrato .miniatura{width:150px;height:150px;grid-row:span 2;background:var(--mat);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.elenco-illustrato .miniatura img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain}
.elenco-illustrato .titolo{font-size:16px;line-height:1.3}
.elenco-illustrato .dettaglio{color:var(--muted);font-size:12px;white-space:nowrap;
  text-align:right}
.organizzatori main{padding-top:28px;padding-bottom:60px}
.organizzatori h1{font-size:clamp(24px,4vw,34px);margin-bottom:10px}
.organizzatori h2{font-size:19px;margin:30px 0 8px}
.organizzatori .avviso{max-width:66ch;color:var(--muted);font-size:14.5px}
.organizzatori .riepilogo{margin:14px 0 10px;font-size:13px}
.organizzatori .filtri{display:flex;gap:8px;flex-wrap:wrap}
.organizzatori .filtri button{font:inherit;font-size:14px;padding:5px 12px;cursor:pointer;
  border:1px solid var(--line-forte);background:var(--surface);color:var(--ink)}
.organizzatori .filtri button[aria-pressed="true"]{background:var(--accent);
  border-color:var(--accent);color:var(--su-accento)}
/* Pagina delle note: miniatura a sinistra, titolo, misure e stato raccolti
   accanto, gli interessati sotto. Sul telefono gli interessati prendono tutta
   la larghezza, perche' e' li' che si scrive. */
.con-note li{grid-template-columns:150px minmax(0,1fr);grid-template-rows:auto 1fr;
  align-items:start;gap:10px 18px;padding:12px 0}
.con-note .miniatura{grid-row:1 / span 2}
.con-note .testa{display:flex;flex-direction:column;gap:3px;min-width:0}
.con-note .testa .dettaglio{text-align:left}
.con-note .stato-voce{font-size:12px;color:var(--accent);letter-spacing:.04em}
.con-note li.venduta .stato-voce{color:#B3261E;font-weight:600}
.con-note .interessati-voce{grid-column:2;display:grid;gap:8px;min-width:0}
.con-note .persone{display:grid;gap:8px}
.con-note .persone:empty{display:none}
.con-note .persona{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;
  align-items:start}
.con-note textarea{width:100%;font:inherit;font-size:15px;padding:6px 8px;
  border:1px solid var(--line-forte);background:var(--surface);color:var(--ink);resize:vertical}
.con-note .persona[data-acquirente] textarea{border:2px solid #B3261E}
.con-note .comandi-persona{display:flex;flex-direction:column;gap:6px}
.con-note .comandi-persona button,.con-note .aggiungi{font:inherit;font-size:14px;
  cursor:pointer;border:1px solid var(--line-forte);background:var(--surface);
  color:var(--ink);padding:5px 10px;white-space:nowrap}
.con-note .togli{font-size:18px;line-height:1}
.con-note .segno-acquirente{font-size:11px;color:#B3261E;font-weight:600;
  text-transform:uppercase;text-align:center}
.con-note .azioni{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.con-note .salvataggio{font-size:11px;color:var(--muted)}
.con-note .salvataggio.errore{color:#B3261E;font-weight:600}
.con-note li.venduta .titolo::after{content:"";display:inline-block;width:.6em;height:.6em;
  margin-left:.45em;border-radius:50%;background:#B3261E;vertical-align:.1em}
@media (max-width:560px){
  .elenco-illustrato li{grid-template-columns:112px minmax(0,1fr);
    grid-template-rows:auto 1fr;align-items:start}
  .elenco-illustrato .miniatura{width:112px;height:112px}
  .elenco-illustrato .dettaglio{grid-column:2;text-align:left}
  .con-note li{grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto}
  .con-note .miniatura{width:96px;height:96px;grid-row:1}
  .con-note .interessati-voce{grid-column:1 / -1}
  /* Senza interessati c'e' solo il pulsante: sta accanto alla miniatura. */
  .con-note li[data-interessati=""] .interessati-voce{grid-column:2}
  .con-note li[data-interessati=""] .miniatura{grid-row:1 / span 2}
  .con-note li[data-interessati=""]{grid-template-rows:auto 1fr}
}
@media print{
  .testata,.chiusura,.salta,.briciole,.filtri,.strumenti-elenco{display:none}
  .listino .avviso{display:none}
  .listino h1{margin-top:0;font-size:20px}
  .listino h2{break-after:avoid;margin-top:12px}
  .listino .voci{grid-template-columns:1fr 1fr;column-gap:8mm}
  .listino .voci li{break-inside:avoid;grid-template-columns:36mm minmax(0,1fr);column-gap:4mm;
    padding:2mm 0;border-bottom-color:#bbb}
  .listino .miniatura{width:36mm;height:36mm}
  .listino .voci li[class^="fascia-"]{padding:2mm;margin-bottom:1.5mm}
  .listino .voci li[class^="fascia-"] .spunta{right:2mm}
  .listino .spunta{bottom:3mm;color:#000}
  .listino .spunta span{border-color:#000}
  .elenco-illustrato li{padding:4px 0}
  .elenco-mostra h2{margin-top:16px}
}

/* ---------- modulo di contatto ---------- */
.modulo{display:grid;gap:18px;max-width:34rem;margin:26px 0}
.campo{display:grid;gap:6px}
.campo label{color:var(--ink);font-size:15.5px}
.campo .aiuto{color:var(--muted);font-size:13.5px}
.campo input,.campo textarea{font:inherit;font-size:16.5px;padding:11px 13px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-forte);
  border-radius:2px;width:100%}
.campo textarea{min-height:9rem;resize:vertical;line-height:1.5}
.campo input:focus-visible,.campo textarea:focus-visible{border-color:var(--accent)}
/* Trappola per i programmi automatici: invisibile a chi legge, non a un robot
   che compila ogni campo che trova. Niente display:none, che alcuni riconoscono. */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.invia{justify-self:start;padding:12px 26px;background:var(--accent);
  color:var(--su-accento);border:0;border-radius:2px;font:inherit;font-size:16px;
  cursor:pointer;transition:opacity .18s ease}
.invia:hover{opacity:.88}
.esito{padding:16px 18px;border-radius:2px;margin:22px 0;max-width:34rem}
.esito.riuscito{background:var(--ok-esito);border:1px solid var(--accent-line)}
.esito.fallito{background:var(--crit-esito);border:1px solid var(--line-forte)}
.esito strong{display:block;color:var(--ink);margin-bottom:4px}

/* ------------------------------------------------------------------
   Movimento
   Tutto quanto segue esiste solo se il browser ha eseguito lo script
   iniziale e il sistema non chiede meno movimento: la classe "anima" la
   mette quello script. Senza, la pagina resta ferma e completa — mai
   contenuto nascosto in attesa di una rivelazione che potrebbe non
   arrivare.
   ------------------------------------------------------------------ */

.anima .rivela{opacity:0;transform:translateY(16px)}
.anima .rivela.dentro{opacity:1;transform:none;
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.68,.28,1)}
/* Ritardo a scalare dentro la stessa fila: le opere si posano una dopo
   l'altra invece di apparire tutte insieme come un lampo. */
.anima .rivela.dentro:nth-child(2){transition-delay:.06s}
.anima .rivela.dentro:nth-child(3){transition-delay:.12s}
.anima .rivela.dentro:nth-child(4){transition-delay:.18s}

/* L'apertura scorre piu' lenta della pagina: quel poco di profondita' che
   fa sembrare la fotografia una finestra invece di un fondale. Si applica
   solo all'immagine dell'apertura, che e' gia' ritagliata per scelta:
   sulle tele non si tocca nulla, non si spostano e non si tagliano mai. */
@supports (animation-timeline: view()){
  .anima .apertura img{
    animation:deriva linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes deriva{
    from{transform:translateY(-3%) scale(1.06)}
    to{transform:translateY(3%) scale(1.06)}
  }
}

/* Le sale come stanze da attraversare: il nome resta appeso in alto finche'
   si guardano le opere, poi lo spinge via quello della sala successiva.
   Solo da tablet in su: su telefono ruberebbe troppa altezza. */
@media (min-width:821px){
  .sala-intestazione{position:sticky;top:64px;z-index:20;background:var(--ground);
    padding:18px 0 16px;margin-bottom:clamp(14px,2vw,22px)}
}

/* La cornice segue il formato della tela invece di imporre un quadrato a
   tutte: i verticali stanno alti, gli orizzontali bassi. La griglia respira
   e il passe-partout si riduce, senza mai ritagliare il dipinto. */
.opera[data-formato="verticale"] .cornice{height:calc(clamp(230px,32vw,330px) * var(--scala))}
.opera[data-formato="quadrato"] .cornice{height:calc(clamp(190px,26vw,265px) * var(--scala))}
.opera[data-formato="orizzontale"] .cornice{height:calc(clamp(150px,21vw,215px) * var(--scala))}
.fila > .opera[data-formato] .cornice{height:calc(clamp(280px,44vw,540px) * var(--scala))}
.fila .secondarie .opera[data-formato="verticale"] .cornice{height:calc(clamp(180px,26vw,260px) * var(--scala))}
.fila .secondarie .opera[data-formato="quadrato"] .cornice{height:calc(clamp(160px,22vw,225px) * var(--scala))}
.fila .secondarie .opera[data-formato="orizzontale"] .cornice{height:calc(clamp(130px,18vw,185px) * var(--scala))}
/* Nella griglia le tessere si allineano in alto: le basi restano irregolari,
   come su una parete allestita, non come le celle di un foglio di calcolo. */
.griglia{align-items:start}

/* ---------- chiusura ---------- */
.chiusura{border-top:1px solid var(--line);background:var(--surface);
  padding:clamp(34px,4.5vw,52px) 0 clamp(28px,4vw,40px);margin-top:auto}
.chiusura .contenitore{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:28px 40px}
.chiusura h2{font-size:11px;font-family:var(--dati);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.chiusura a{color:var(--body);text-decoration:none;font-size:15.5px;display:block;padding:3px 0}
.chiusura a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.chiusura .nota{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;
  color:var(--muted);font-size:13.5px}

body{display:flex;flex-direction:column;min-height:100vh}
main{flex:1}