/* Snezana Milovanovic, quadri. Rosso velluto e oro, come una sala di museo: notte rosso scuro, avorio per leggere,
   l'oro per le cornici, i titoli che contano e le azioni. I quadri non si ritagliano mai: stanno interi in una cornice d'oro. */
:root {
  --carta: #f8f1e4;
  --carta-2: #f1e5cf;
  --inchiostro: #2b0a0f;
  --grigio: #6b4d45;
  --linea: #e3d1b2;
  --notte: #2a070c;
  --notte-2: #3b0b13;
  --rosso: #8c1526;
  --rosso-scuro: #6a0f1c;
  --oro: #c9a24a;
  --oro-chiaro: #ecd28c;
  --oro-testo: #7a5716; /* oro leggibile sull'avorio */
  --avorio-spento: #d9c6ae;
  --accento: var(--rosso);
  --accento-scuro: var(--rosso-scuro);
  --lamina: linear-gradient(115deg, #9b7424 0%, #e9cf86 26%, #c9a24a 48%, #f3dd9a 68%, #a47c2a 100%);
  --serif: 'Bodoni Moda', Georgia, "Times New Roman", serif;
  --sans: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --larghezza: 76rem;
  --raggio: 2px;
  --uscita: cubic-bezier(.16,1,.3,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0; background: var(--carta); color: var(--inchiostro);
  font: 400 1.0625rem/1.65 var(--sans); -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--rosso); }
p { margin: 0 0 1em; text-wrap: pretty; }
.contenitore { width: min(100% - 2.5rem, var(--larghezza)); margin-inline: auto; }
.salta { position: absolute; left: -999px; top: 0; background: var(--oro); color: var(--notte); padding: .75rem 1rem; z-index: 10; }
.salta:focus { left: 1rem; }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 3px; }
.occhiello { font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--oro-testo); margin-bottom: 1.25rem; }

/* le parti scure: notte rosso velluto, testo avorio, l'oro per i titoli */
.scuro { background: var(--notte); color: var(--carta); }
.scuro .occhiello { color: var(--oro); }
.scuro h1 em, .scuro h2 em { color: var(--oro-chiaro); }
.scuro :focus-visible { outline-color: var(--oro-chiaro); }
/* l'oro in lamina: solo sulle parole che contano */
.lamina { background: var(--lamina); background-size: 220% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent !important; padding-right: .06em; }

/* il fregio: due fili d'oro e un rombo */
.fregio { display: flex; align-items: center; justify-content: center; gap: .9rem; color: var(--oro); margin: 0 auto 1.6rem; }
.fregio::before, .fregio::after { content: ""; width: clamp(2.5rem, 8vw, 5rem); height: 1px; background: currentColor; }
.fregio span { width: .5rem; height: .5rem; transform: rotate(45deg); border: 1px solid currentColor; }

/* testata */
.testata { background: var(--notte); color: var(--carta); border-bottom: 1px solid rgba(201,162,74,.35); position: relative; z-index: 5; }
.testata .contenitore { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.75rem; }
.marchio { display: flex; align-items: center; gap: .8rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 500; text-decoration: none; line-height: 1.1; min-height: 44px; }
.marchio::before { content: "SM"; flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--oro); border-radius: 50%; font: italic 500 .95rem/1 var(--serif); color: var(--oro-chiaro); letter-spacing: .02em; }
.marchio small { display: block; font: 600 .66rem/1.3 var(--sans); color: var(--oro); letter-spacing: .2em; text-transform: uppercase; margin-top: .2rem; }
.menu { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; padding: .75rem 0; display: inline-block; font-size: .95rem; letter-spacing: .02em; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }

/* bottoni: oro pieno per l'azione principale, filo d'oro per le altre */
.azioni { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 3.1rem;
  padding: .8rem 1.5rem; border-radius: var(--raggio); border: 1px solid transparent;
  font: 600 .95rem/1.2 var(--sans); letter-spacing: .03em; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, background-position .6s var(--uscita), color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-oro { background: var(--lamina); background-size: 200% 100%; color: var(--notte); }
.btn-oro:hover { background-position: 100% 0; }
.btn-chiama { background: var(--rosso); color: #fff; }
.btn-chiama:hover { background: var(--rosso-scuro); }
.scuro .btn-chiama, .contatti .btn-chiama, .racconto .btn-chiama { background: var(--lamina); background-size: 200% 100%; color: var(--notte); }
.scuro .btn-chiama:hover, .contatti .btn-chiama:hover, .racconto .btn-chiama:hover { background-position: 100% 0; }
.btn-wa { background: transparent; color: inherit; border-color: currentColor; }
.btn-wa:hover { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.scuro .btn-wa, .contatti .btn-wa { border-color: var(--oro); color: var(--oro-chiaro); }
.scuro .btn-wa:hover, .contatti .btn-wa:hover { background: rgba(201,162,74,.14); color: var(--carta); }
.btn-scuro { background: var(--notte); color: var(--carta); }
.btn-scuro:hover { background: var(--rosso-scuro); }
.btn-linea { border-color: currentColor; color: inherit; background: transparent; }
.btn-linea:hover { background: var(--inchiostro); color: var(--carta); border-color: var(--inchiostro); }
.scuro .btn-linea, .contatti .btn-linea { border-color: rgba(236,210,140,.55); color: var(--carta); }
.scuro .btn-linea:hover, .contatti .btn-linea:hover { background: var(--carta); color: var(--notte); border-color: var(--carta); }

/* apertura: un sipario rosso, tutto tipografico (sta in piedi anche prima che arrivino i quadri) */
.apertura {
  position: relative; overflow: hidden; text-align: center;
  min-height: calc(100svh - 4.75rem); display: grid; align-items: center; padding: clamp(4rem, 10vw, 7rem) 0 clamp(5rem, 10vw, 7rem);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(140,21,38,.55), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, #4a0d17, transparent 60%),
    var(--notte);
}
/* le pieghe del velluto ai lati */
.apertura::before, .apertura::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 14vw; max-width: 12rem; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 1.1rem, rgba(140,21,38,.18) 1.6rem, rgba(0,0,0,.28) 2.6rem);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
}
.apertura::before { left: 0; }
.apertura::after { right: 0; transform: scaleX(-1); }
.apertura-testo { position: relative; max-width: 58rem; margin-inline: auto; }
.apertura h1 { font-size: clamp(3.1rem, 9vw, 7.4rem); line-height: .98; letter-spacing: -0.025em; }
.apertura h1 .lamina { font-style: italic; display: inline-block; }
.apertura .sotto { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--avorio-spento); max-width: 36rem; margin: 1.75rem auto 2.4rem; }
.apertura .azioni { justify-content: center; }
.scendi { position: absolute; left: 50%; bottom: 1.25rem; width: 2.75rem; height: 2.75rem; margin-left: -1.375rem; display: grid; place-items: center; }
.scendi span { width: 1px; height: 2.4rem; background: linear-gradient(var(--oro), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .scendi span { animation: scendi 2.4s var(--uscita) 3; transform-origin: top; }
  @keyframes scendi { 0% { transform: scaleY(0); } 60%, 100% { transform: scaleY(1); } }
  .fx-on .apertura-testo > *, .fx-on .intestazione .contenitore > * { animation: entra 1s var(--uscita) both; }
  .fx-on .apertura-testo > :nth-child(2), .fx-on .intestazione .contenitore > :nth-child(2) { animation-delay: .1s; }
  .fx-on .apertura-testo > :nth-child(3), .fx-on .intestazione .contenitore > :nth-child(3) { animation-delay: .2s; }
  .fx-on .apertura-testo > :nth-child(4), .fx-on .intestazione .contenitore > :nth-child(4) { animation-delay: .3s; }
  .fx-on .apertura-testo > :nth-child(5) { animation-delay: .4s; }
  @keyframes entra { from { opacity: 0; transform: translate3d(0, 20px, 0); } }
  /* la luce passa una volta sull'oro del titolo */
  .fx-on .apertura h1 .lamina, .fx-on .intestazione h1 .lamina { animation: luce 2.6s var(--uscita) .5s both; }
  @keyframes luce { from { background-position: 100% 0; } to { background-position: 0 0; } }
}

/* la fascia d'oro: i soggetti, scorrono con la pagina (nessun movimento quando la pagina è ferma) */
.fascia { background: var(--lamina); color: var(--notte); overflow: hidden; padding: 1.1rem 0; border-block: 1px solid #8f6a1f; }
.fascia p { margin: 0; white-space: nowrap; font: italic 500 clamp(1.5rem, 3.2vw, 2.4rem)/1.1 var(--serif); letter-spacing: -0.01em; text-align: center; }
.fascia p span { display: inline-block; margin-inline: .6em; font-style: normal; font-size: .6em; vertical-align: .25em; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fascia p { text-align: left; animation: fascia linear both; animation-timeline: view(); }
    @keyframes fascia { from { transform: translateX(4%); } to { transform: translateX(-38%); } }
  }
}

/* la cornice d'oro: il quadro intero, con un filo scuro tra oro e tela */
.oro-cornice {
  padding: clamp(6px, 1.1vw, 12px); background: var(--lamina);
  box-shadow: inset 0 0 0 1px rgba(90,60,10,.6), 0 0 0 1px rgba(60,10,16,.5), 0 24px 40px -18px rgba(0,0,0,.7);
}
.oro-cornice img, img.oro-cornice { outline: 1px solid rgba(43,10,15,.55); }

/* il racconto (racconto-sticky): sala rossa, il quadro in cornice d'oro, lo zoom si avvicina alle pennellate */
.racconto { --fx-rs-sfondo: var(--notte); --fx-rs-accento: var(--oro); --fx-rs-scheda: rgba(42,7,12,.92); --fx-rs-testo: var(--carta); color: var(--carta); }
.racconto[data-fx-tema="velluto"] { --fx-rs-sfondo: #6a0f1c; }
.racconto.fx-rs-on .fx-rs-quadro { inset: 9svh 7%; display: flex; align-items: center; justify-content: center; }
.racconto.fx-rs-on .fx-rs-palco { background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(201,162,74,.12), transparent 70%); }
.racconto.fx-rs-on .fx-rs-quadro > img {
  width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  padding: 10px; background: var(--lamina);
  box-shadow: inset 0 0 0 1px rgba(90,60,10,.6), 0 30px 50px -20px rgba(0,0,0,.75);
}
.racconto .fx-rs-quadro figcaption { position: absolute; left: 0; right: 0; bottom: -5svh; text-align: center; font: italic 500 1rem var(--serif); color: var(--oro-chiaro); transition: opacity .4s ease; }
.racconto .fx-rs-quadro figcaption a { text-underline-offset: 4px; padding: .5rem; }
.racconto[data-fx-passo="2"] figcaption { opacity: 0; }
.racconto .numero { font: italic 500 1.1rem var(--serif); color: var(--oro); margin: 0 0 .5rem; letter-spacing: .04em; }
.racconto h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); margin-bottom: 1rem; }
.racconto .fx-rs-passo p { font-size: 1.1rem; max-width: 26rem; color: var(--avorio-spento); }
.racconto .azioni { margin-top: 1.6rem; }
.racconto.fx-rs-on .fx-rs-passo > * { border: 1px solid rgba(201,162,74,.3); border-radius: var(--raggio); }
@media (min-width: 900px) {
  .racconto.fx-rs-on:not([data-fx-modo="pieno"]) .fx-rs-passo > * { border: 0; }
}
@media (max-width: 899px) {
  .racconto.fx-rs-on .fx-rs-quadro { inset: 5svh 6% 42svh; }
  .racconto .fx-rs-quadro figcaption { display: none; }
  .racconto.fx-rs-on .fx-rs-passo { align-items: flex-end; padding-bottom: 6svh; }
  .racconto h2 { font-size: 1.8rem; }
  .racconto .fx-rs-passo p { font-size: 1rem; }
}
/* pagina opera: il palco pieno, schede ai lati */
.racconto-pieno.fx-rs-on .fx-rs-quadro { inset: 7svh 5%; }
@media (min-width: 900px) { .racconto-pieno.fx-rs-on .fx-rs-passo > * { max-width: 24rem; } }

/* sezioni */
.sezione { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.sezione-alt { background: var(--carta-2); }
.titolo-sezione { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 3rem; }
.titolo-sezione h2 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.titolo-sezione a { font-weight: 600; text-underline-offset: 6px; padding: .5rem 0; color: var(--rosso); }
.scuro .titolo-sezione a { color: var(--oro-chiaro); }

/* intestazione delle pagine interne: una fascia di sala rossa */
.intestazione { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); background: radial-gradient(ellipse 70% 90% at 20% 0%, rgba(140,21,38,.5), transparent 70%), var(--notte); color: var(--carta); }
.intestazione .occhiello { color: var(--oro); }
.intestazione h1 { font-size: clamp(3.2rem, 9vw, 6.4rem); letter-spacing: -0.025em; }
.intestazione h1 .lamina { font-style: italic; }
.intestazione .sotto { font-size: 1.15rem; color: var(--avorio-spento); max-width: 34rem; margin: 1.4rem 0 2rem; }

/* griglia delle opere: ogni quadro su una parete rossa, in cornice d'oro */
.opere { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.25rem 2rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.scheda a { text-decoration: none; display: block; }
.scheda .cornice { position: relative; background: radial-gradient(ellipse 80% 70% at 50% 40%, #4a0d17, var(--notte)); overflow: hidden; aspect-ratio: 4 / 5; }
.scheda .cornice .fx-mi, .scheda .cornice .fx-mj { height: 100%; }
.scheda .cornice .fx-mj, .scheda .cornice:not(:has(.fx-mj)) { display: grid; place-items: center; }
.scheda img {
  width: auto; height: auto; max-width: 74%; max-height: 74%; padding: 6px; background: var(--lamina);
  box-shadow: inset 0 0 0 1px rgba(90,60,10,.6), 0 18px 30px -12px rgba(0,0,0,.8);
  transition: transform .7s var(--uscita);
}
@media (hover: hover) { .scheda a:hover img { transform: scale(1.04); } .scheda a:hover h3 { color: var(--rosso); } }
.scheda h3 { font-size: 1.5rem; margin: 1.15rem 0 .35rem; transition: color .2s ease; }
.scheda .dettagli { color: var(--grigio); font-size: .92rem; margin: 0; }
.scheda .prezzo { font: italic 500 1.25rem var(--serif); color: var(--oro-testo); margin: .45rem 0 0; }
.venduto { position: absolute; top: .9rem; left: .9rem; z-index: 2; background: var(--lamina); color: var(--notte); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .35rem .7rem; }
.vuoto { grid-column: 1 / -1; padding: 3.5rem 1.5rem; text-align: center; border: 1px solid var(--linea); color: var(--grigio); background: var(--carta); }
.vuoto strong { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--inchiostro); margin-bottom: .5rem; }

/* filtri della galleria */
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.filtri button { min-height: 2.75rem; padding: .5rem 1.15rem; border-radius: var(--raggio); border: 1px solid rgba(201,162,74,.5); background: transparent; font: 600 .9rem var(--sans); letter-spacing: .03em; color: var(--carta); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.filtri button:hover { border-color: var(--oro-chiaro); }
.filtri button[aria-pressed="true"] { background: var(--lamina); color: var(--notte); border-color: var(--oro); }

/* l'artista: la frase che si accende d'oro */
.artista { text-align: center; }
.artista .frase { font-family: var(--serif); font-size: clamp(2.1rem, 5.4vw, 4.4rem); line-height: 1.1; letter-spacing: -0.015em; max-width: 20ch; margin: 0 auto 3.5rem; text-wrap: balance; color: var(--oro-chiaro); }
.artista .frase em { font-style: italic; }
.artista { --fx-spento: .22; }
.artista-testo { display: grid; gap: 0 3rem; max-width: 50rem; margin-inline: auto; color: var(--avorio-spento); text-align: left; }
@media (min-width: 760px) { .artista-testo { grid-template-columns: 1fr 1fr; } }

/* come acquistare: tre passi con i numeri romani in oro */
.passi { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .passi { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.passi li { position: relative; padding-top: 1.4rem; border-top: 1px solid var(--linea); }
.passi li::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--oro); transform-origin: 0 50%; }
.passi .romano { display: block; font: italic 500 3.4rem/1 var(--serif); color: var(--oro-testo); margin-bottom: .6rem; }
.passi h3 { font-size: 1.65rem; margin: 0 0 .5rem; }
.passi p { color: var(--grigio); margin: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .passi li::after { animation: linea linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    @keyframes linea { from { transform: scaleX(0); } }
  }
}

/* pagina della singola opera: il quadro su parete rossa, in cornice d'oro */
.opera { display: grid; gap: 2.5rem; padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3.5rem, 8vw, 6rem); }
@media (min-width: 900px) { .opera { grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: start; } .opera-testo { position: sticky; top: 2rem; } }
.opera-foto { background: radial-gradient(ellipse 80% 70% at 50% 40%, #4a0d17, var(--notte)); padding: clamp(1.75rem, 5vw, 4rem); display: grid; place-items: center; min-height: 20rem; }
.opera-foto img { width: auto; max-height: 72svh; padding: 10px; background: var(--lamina); box-shadow: inset 0 0 0 1px rgba(90,60,10,.6), 0 30px 50px -20px rgba(0,0,0,.75); }
.opera h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); margin-bottom: 1rem; }
.opera .prezzo-grande { font: italic 500 2rem var(--serif); color: var(--oro-testo); margin: 0 0 1.25rem; }
.opera dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; margin: 0 0 1.75rem; padding: 1.1rem 0; border-block: 1px solid var(--linea); }
.opera dt { color: var(--grigio); }
.opera dd { margin: 0; }
.opera .nota { font-size: .95rem; color: var(--grigio); margin-top: 1rem; }
.vicino-link { display: inline-block; padding: .6rem 0; font-weight: 600; color: var(--rosso); text-underline-offset: 5px; }
.indietro { display: inline-block; padding: .75rem 0; margin-top: .5rem; text-underline-offset: 5px; }

/* contatti: il finale in rosso pieno */
.contatti { background: radial-gradient(ellipse 80% 90% at 50% 0%, #a3182b, transparent 70%), var(--rosso-scuro); color: var(--carta); text-align: center; }
.contatti .occhiello { color: var(--oro-chiaro); }
.contatti h2 { font-size: clamp(2.8rem, 7.5vw, 5.6rem); margin-bottom: 1.25rem; }
.contatti h2 em { color: var(--oro-chiaro); }
.contatti p { max-width: 36rem; margin: 0 auto 2.2rem; color: #f0dcc6; font-size: 1.15rem; }
.contatti .azioni { justify-content: center; }
.contatti :focus-visible { outline-color: var(--oro-chiaro); }
.piede { background: var(--notte); color: var(--avorio-spento); border-top: 1px solid rgba(201,162,74,.3); padding: 2rem 0 2.5rem; font-size: .95rem; }
.piede .contenitore { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.piede a { text-underline-offset: 4px; padding: .4rem 0; display: inline-block; min-height: 44px; line-height: 2; }

@media (max-width: 640px) {
  .opere { grid-template-columns: 1fr 1fr; gap: 2.25rem 1rem; }
  .scheda img { padding: 4px; max-width: 78%; max-height: 78%; }
  .scheda h3 { font-size: 1.15rem; margin-top: .75rem; }
  .scheda .dettagli { font-size: .82rem; }
  .menu { gap: 1rem; }
  .menu a { font-size: .9rem; }
  .marchio { font-size: 1.05rem; gap: .6rem; }
  .marchio::before { width: 2.2rem; height: 2.2rem; font-size: .8rem; }
  .marchio small { display: none; }
  .azioni .btn { flex: 1 1 100%; }
  .apertura::before, .apertura::after { width: 9vw; }
}
@media (max-width: 380px) { .marchio span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }