/* ============================================================
   Mariassunta Telesca — www.mariassuntatelesca.com
   Foglio di stile principale
   ============================================================ */

/* ---------- Variabili e base ---------- */
:root{
  --gesso:#f4f0e7; --gesso-scuro:#e9e3d5; --nero:#171511;
  --oro:#c2a15c; --oro-chiaro:#dcc188; --oro-scuro:#9c7c3c; --oro-velo:#efe3c6;
  --foil:linear-gradient(115deg,#a8863f 0%,#d9bd85 30%,#f0dfae 50%,#c2a15c 70%,#a8863f 100%);
  --verderame:#6c8578; --cenere:#847d70; --crusco:#b8432c;
  --display:'Marcellus',serif; --pop:'Anton',sans-serif; --body:'Mulish',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--gesso);color:var(--nero);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro-scuro);outline-offset:3px}
[id]{scroll-margin-top:80px}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,52px)}
.eyebrow{font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--oro-scuro);font-weight:700}
.foil-testo{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.separatore{height:9px;background:repeating-linear-gradient(0deg,rgba(194,161,92,.55) 0 1px,transparent 1px 3px)}
h2.grande{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5vw,3.6rem);letter-spacing:.02em;line-height:1.15}

/* ---------- Reveal ---------- */
.rivela{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1s cubic-bezier(.2,.6,.2,1)}
.rivela.visibile{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .rivela{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .nastro-int{animation:none !important}
  .n1,.n2,.n3,.inmezzo{animation:none !important;opacity:1 !important;transform:none !important}
}

/* ---------- Nav ---------- */
nav{position:fixed;inset:0 0 auto;z-index:90;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(20px,4vw,44px);transition:background .35s,box-shadow .35s}
nav.solida{background:rgba(244,240,231,.92);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(156,124,60,.25)}
.marchio-nav{display:flex;align-items:center;gap:12px;text-decoration:none}
.marchio-nav svg{display:block}
.marchio-nav span{font-family:var(--display);font-size:.92rem;letter-spacing:.2em;text-transform:uppercase}
.menu{display:flex;gap:30px;list-style:none}
.menu a{text-decoration:none;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--nero);opacity:.7;transition:.25s}
.menu a:hover{opacity:1;color:var(--oro-scuro)}
.menu .cta{border:1px solid var(--oro-scuro);padding:9px 18px;color:var(--oro-scuro);opacity:1}
.menu .cta:hover{background:var(--oro-scuro);color:var(--gesso)}
@media(max-width:860px){.menu{display:none}}

/* ---------- Menu mobile ---------- */
.menu-btn{display:none;background:none;border:0;cursor:pointer;padding:10px;z-index:95}
.menu-btn .linea{display:block;width:26px;height:2px;background:var(--oro-scuro);transition:transform .3s,opacity .3s}
.menu-btn .linea+.linea{margin-top:7px}
.menu-btn[aria-expanded="true"] .linea:first-child{transform:translateY(4.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .linea:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media(max-width:860px){.menu-btn{display:block}}
.pannello-mobile{position:fixed;inset:0;z-index:92;background:var(--gesso);display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:6px;visibility:hidden;opacity:0;transition:opacity .35s,visibility .35s}
.pannello-mobile.aperto{visibility:visible;opacity:1}
.pannello-mobile a{font-family:var(--display);font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:12px 20px;color:var(--nero)}
.pannello-mobile a:hover{color:var(--oro-scuro)}
.pannello-mobile .cta-m{border:1px solid var(--oro-scuro);color:var(--oro-scuro);margin-top:18px;font-size:1.1rem;padding:14px 34px}
.pannello-mobile::before{content:"";width:64px;height:2px;background:var(--foil);margin-bottom:26px}
@media (prefers-reduced-motion: reduce){.pannello-mobile{transition:none}}
body.menu-aperto{overflow:hidden}

/* ---------- Hero ---------- */
.hero{min-height:100svh;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:
   radial-gradient(ellipse 75% 60% at 80% 30%, rgba(194,161,92,.22), transparent 62%),
   radial-gradient(ellipse 45% 35% at 8% 92%, rgba(220,193,136,.20), transparent 70%),
   var(--gesso);
  padding:120px 0 80px}
.arco-fondale{position:absolute;left:-8vw;bottom:-10vh;width:min(42vw,520px);opacity:.28;pointer-events:none;will-change:transform}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,70px);align-items:center;width:100%}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero .palco-hero{max-width:420px;margin:26px auto 0}}
.palco-hero{background:var(--nero);padding:clamp(12px,1.4vw,18px);box-shadow:0 40px 80px -34px rgba(23,21,17,.55);position:relative}
.palco-hero::after{content:"";position:absolute;inset:-14px;border:1px solid rgba(194,161,92,.5);pointer-events:none;transform:translate(10px,10px);z-index:-1}
.palco-hero .vetro{aspect-ratio:3/4;border:1px solid rgba(194,161,92,.4);overflow:hidden;position:relative;
  background:radial-gradient(ellipse 80% 50% at 50% 18%, rgba(241,237,228,.10), transparent 60%),#14120f;
  display:flex;align-items:center;justify-content:center}
.palco-hero .vetro img{width:100%;height:100%;object-fit:cover;display:block}
.palco-hero .attesa{position:absolute;inset:auto 0 18px;text-align:center;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#6a6458}
.palco-hero .sagoma{width:44%;opacity:.5}
.hero .sopratitolo{display:flex;align-items:center;gap:18px}
.hero .sopratitolo .filo{width:64px;height:2px;background:var(--foil)}
.nome-gigante{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:.02em;
  font-size:clamp(3.2rem,7.5vw,6rem);margin-top:26px}
.nome-gigante .riga{display:block}
.etichetta-hero{margin-top:22px;font-size:.76rem;letter-spacing:.34em;text-transform:uppercase;color:var(--cenere)}
.motto-hero{margin-top:clamp(34px,6vh,60px);font-family:var(--display);font-size:clamp(1.15rem,2.5vw,1.7rem);line-height:1.6;max-width:34ch}
.motto-hero em{font-style:normal;color:var(--oro-scuro)}
.motto-hero .inmezzo{display:block;margin-top:.5em;font-size:1.12em}
.n1,.n2,.n3,.inmezzo{opacity:0;transform:translateY(12px);animation:nascita .9s ease forwards}
.n1{animation-delay:.4s}.n2{animation-delay:1s}.n3{animation-delay:1.6s}.inmezzo{animation-delay:2.4s}
@keyframes nascita{to{opacity:1;transform:none}}
.hero .giu{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--oro-scuro);text-decoration:none;font-weight:700}
.hero .giu::after{content:"";display:block;width:1px;height:36px;background:var(--oro);margin:10px auto 0}

/* ---------- Nastro ---------- */
.nastro{background:var(--nero);color:var(--oro-chiaro);overflow:hidden;padding:14px 0;border-top:1px solid var(--oro);border-bottom:1px solid var(--oro)}
.nastro-int{display:flex;gap:0;width:max-content;animation:scorri 30s linear infinite}
.nastro-int span{font-family:var(--display);font-size:1rem;letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;padding-right:18px}
.nastro-int span i{font-style:normal;color:var(--verderame);padding:0 14px}
@keyframes scorri{to{transform:translateX(-50%)}}

/* ---------- Opere in scena ---------- */
#opere{padding:clamp(80px,12vh,140px) 0 0}
.opera-scena{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;
  padding:clamp(46px,8vh,90px) 0;position:relative}
.opera-scena:nth-child(even){grid-template-columns:.95fr 1.05fr}
.opera-scena:nth-child(even) .palco{order:2}
@media(max-width:880px){.opera-scena,.opera-scena:nth-child(even){grid-template-columns:1fr}
 .opera-scena:nth-child(even) .palco{order:0}}
.numerale{position:absolute;top:6px;left:-.04em;font-family:var(--display);
  font-size:clamp(6rem,14vw,12rem);line-height:1;color:transparent;
  -webkit-text-stroke:1px rgba(194,161,92,.5);pointer-events:none;user-select:none}
.opera-scena:nth-child(even) .numerale{left:auto;right:0}
.palco{background:var(--nero);padding:clamp(12px,1.6vw,20px);box-shadow:0 34px 70px -30px rgba(23,21,17,.5);position:relative;z-index:1}
.palco .vetro{aspect-ratio:4/5;border:1px solid rgba(194,161,92,.4);position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 55% at 50% 22%, rgba(241,237,228,.10), transparent 60%),#14120f;
  display:flex;align-items:center;justify-content:center}
.palco .vetro img{width:100%;height:100%;object-fit:cover;display:block}
.palco .attesa{position:absolute;inset:auto 0 18px;text-align:center;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#6a6458}
.palco .sagoma{width:46%;opacity:.55}
.scheda{position:relative;z-index:1;padding-top:clamp(48px,7vw,80px)}
.scheda .serie{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--verderame);font-weight:700}
.scheda h3{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:.02em;margin-top:12px}
.scheda .concetto{font-size:1.06rem;font-style:italic;color:#5c564a;margin-top:16px;max-width:44ch}
.scheda .tecnica{margin-top:26px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--oro-scuro);font-weight:700;line-height:2.1}
.scheda .edizione{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cenere);margin-top:2px}
.scheda .filo-oro{width:56px;height:2px;background:var(--foil);margin-top:26px}

/* ---------- Collezione orizzontale ---------- */
#collezione{background:var(--oro-velo);padding:clamp(80px,11vh,120px) 0;border-top:1px solid rgba(156,124,60,.3)}
.coll-testa{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.coll-testa .hint{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro-scuro);font-weight:700}
.binario{margin-top:44px;display:flex;gap:clamp(16px,2.4vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 6px 26px;scrollbar-width:thin;scrollbar-color:var(--oro) transparent}
.binario::-webkit-scrollbar{height:4px}
.binario::-webkit-scrollbar-thumb{background:var(--oro)}
.tessera{flex:0 0 min(72vw,300px);scroll-snap-align:start;background:var(--nero);padding:11px;
  box-shadow:0 20px 44px -22px rgba(23,21,17,.45);transition:transform .35s ease}
.tessera:hover{transform:translateY(-6px)}
.tessera .vetro{aspect-ratio:4/5;border:1px solid rgba(194,161,92,.4);position:relative;overflow:hidden;
  background:radial-gradient(ellipse 80% 55% at 50% 25%, rgba(241,237,228,.08), transparent 60%),#14120f;
  display:flex;align-items:center;justify-content:center}
.tessera .vetro img{width:100%;height:100%;object-fit:cover}
.tessera .sagoma{width:52%;opacity:.5}
.tessera figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:14px 4px 5px;color:var(--gesso)}
.tessera .titolo{font-family:var(--display);font-size:1.02rem;letter-spacing:.04em}
.tessera .anno{font-size:.66rem;letter-spacing:.2em;color:var(--oro-chiaro)}

/* ---------- Tre nascite ---------- */
#processo{padding:clamp(90px,13vh,150px) 0;position:relative;overflow:hidden}
#processo .punteggiato{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 3px 3px, rgba(108,133,120,.28) 1.3px, transparent 1.5px);background-size:26px 26px;
  mask-image:radial-gradient(ellipse 60% 70% at 85% 20%, black, transparent 70%)}
.nascite{margin-top:64px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(30px,5vw,64px)}
.nascita{border-top:2px solid var(--oro);padding-top:24px;position:relative}
.nascita .numero{font-family:var(--display);font-size:clamp(3rem,6vw,4.6rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--oro-scuro)}
.nascita h3{font-family:var(--display);font-weight:400;font-size:1.5rem;margin-top:14px;letter-spacing:.05em}
.nascita p{margin-top:14px;font-size:.96rem;color:#5c564a}
.processo-coda{margin-top:80px;text-align:center}
.processo-coda p{font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.55rem);max-width:40ch;margin:0 auto}
.processo-coda .firma-riga{margin-top:16px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--oro-scuro);font-weight:700}

/* ---------- Contatti ---------- */
#contatti{background:var(--gesso-scuro);padding:clamp(90px,13vh,150px) 0;border-top:1px solid rgba(156,124,60,.3);text-align:center}
#contatti .invito{font-family:var(--display);font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.55;max-width:34ch;margin:26px auto 0}
#contatti .filo{width:64px;height:2px;background:var(--foil);margin:34px auto 0}
.azioni{margin-top:36px;display:flex;gap:16px;flex-wrap:wrap}
#contatti .azioni{justify-content:center;margin-top:40px}
.btn{display:inline-block;text-decoration:none;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;padding:17px 32px;transition:.3s}
.btn.pieno{background:var(--nero);color:var(--oro-chiaro);border:1px solid var(--nero)}
.btn.pieno:hover{background:transparent;color:var(--nero)}
.btn.linea{border:1px solid var(--oro-scuro);color:var(--oro-scuro)}
.btn.linea:hover{background:var(--oro-scuro);color:var(--gesso)}

/* ---------- Autrice ---------- */
#autrice{padding:clamp(90px,13vh,150px) 0}
#autrice .colonne{display:grid;grid-template-columns:360px 1fr;gap:clamp(36px,6vw,84px)}
@media(max-width:860px){#autrice .colonne{grid-template-columns:1fr}}
.ritratto{aspect-ratio:3/4;background:var(--nero);padding:12px;box-shadow:0 26px 54px -26px rgba(23,21,17,.5)}
.ritratto .vetro{width:100%;height:100%;border:1px solid rgba(194,161,92,.4);display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse 80% 50% at 50% 20%, rgba(241,237,228,.09), transparent 60%),#14120f;
  color:#6a6458;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase}
.ritratto .vetro img{width:100%;height:100%;object-fit:cover;display:block}
#autrice .testo p{margin-bottom:1.15em;color:#4c4739;font-size:.99rem}
#autrice .testo p:first-of-type::first-letter{font-family:var(--display);font-size:3.2em;float:left;line-height:.82;margin:.05em .12em 0 0;color:var(--oro-scuro)}
.mostra-nota{margin-top:28px;padding:22px 26px;border-left:2px solid var(--oro);background:var(--oro-velo);font-size:.88rem;color:#5c564a}
.mostra-nota strong{color:var(--nero);font-weight:700}

/* ---------- Footer ---------- */
footer{background:var(--nero);color:var(--gesso);padding:70px 0 46px;text-align:center}
footer .nome-f{font-family:var(--display);font-size:1.15rem;letter-spacing:.26em;text-transform:uppercase;margin-top:20px}
footer .motto-f{margin-top:18px;font-family:var(--display);color:#b3ac9d;font-size:.95rem;line-height:1.7}
footer .motto-f i{font-style:normal;color:var(--oro-chiaro)}
.contatti-riga{margin-top:30px;display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.contatti-riga a{text-decoration:none;font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro-chiaro);font-weight:700}
.contatti-riga a:hover{color:#f0dfae}
footer .legale{margin-top:36px;font-size:.66rem;color:#6a6458;letter-spacing:.1em}

@media(max-width:640px){#esposizioni .rivela[style*="grid-template-columns:auto 1fr"]{grid-template-columns:1fr !important}}

/* ================= Elementi pop ================= */
/* esplosione halftone (retino) dietro i palchi delle opere Avigliano */
.halftone{position:absolute;width:min(46vw,420px);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 4px 4px, var(--crusco) 2.1px, transparent 2.5px);background-size:15px 15px;
  -webkit-mask-image:radial-gradient(circle, black 30%, transparent 70%);mask-image:radial-gradient(circle, black 30%, transparent 70%);
  opacity:.5}
.halftone.oro{background:radial-gradient(circle at 4px 4px, var(--oro) 2.1px, transparent 2.5px);background-size:15px 15px}
.opera-scena .palco{z-index:1}
.opera-scena .halftone{top:-40px;left:-60px}
.opera-scena:nth-child(even) .halftone{left:auto;right:-60px}

/* parola gigante a contorno dietro le sezioni (manifesto pop) */
.parola-fondale{position:absolute;left:0;right:0;top:8px;overflow:hidden;pointer-events:none;user-select:none;
  font-family:var(--display);font-size:clamp(4.5rem,13vw,11rem);line-height:1;letter-spacing:.06em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(184,67,44,.28);white-space:nowrap;text-align:center}

/* timbro rotante (badge circolare) sul palco del hero */
.timbro{position:absolute;top:-34px;right:-34px;width:112px;height:112px;z-index:3;animation:gira 16s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.timbro{animation:none}}
@media (max-width:900px){.timbro{top:-24px;right:-10px;width:92px;height:92px}}

/* ombra dura pop sulle tessere della collezione */
.tessera{transition:transform .3s ease, box-shadow .3s ease}
.tessera:hover{transform:translate(-4px,-8px);box-shadow:10px 12px 0 var(--oro), 0 26px 50px -22px rgba(23,21,17,.45)}
.tessera:nth-child(odd):hover{box-shadow:10px 12px 0 var(--crusco), 0 26px 50px -22px rgba(23,21,17,.45)}

/* etichetta serie Avigliano in rosso crusco */
.scheda .serie.avigliano, .serie-crusco{color:var(--crusco)}

/* nastro: parole alternate piene e a contorno, tocco pop */
.nastro-int span b{font-weight:400;color:transparent;-webkit-text-stroke:1px var(--oro-chiaro)}

/* ============ Voce pop: font e linee ============ */
/* titoli delle opere Avigliano in Anton: manifesto, non lapide */
.scheda.pop h3{font-family:var(--pop);font-weight:400;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(2.4rem,5.2vw,3.8rem);line-height:1.05}
/* la barra crusco al posto del filo sottile, nelle schede pop */
.scheda.pop .filo-oro{width:96px;height:7px;background:var(--crusco)}
/* evidenziatore pop: sottolineatura spessa da pennarello */
.marker{background:linear-gradient(transparent 62%, rgba(184,67,44,.35) 62% 92%, transparent 92%);padding:0 .08em}
.marker.oro{background:linear-gradient(transparent 62%, rgba(194,161,92,.45) 62% 92%, transparent 92%)}
/* parola di fondale in Anton: da iscrizione a poster */
.parola-fondale{font-family:var(--pop);letter-spacing:.02em;-webkit-text-stroke:2px rgba(184,67,44,.3)}
/* nastro in Anton */
.nastro{padding:12px 0;border-top:3px solid var(--oro);border-bottom:3px solid var(--oro)}
.nastro-int span{font-family:var(--pop);font-size:1.05rem;letter-spacing:.18em}
.nastro-int span b{-webkit-text-stroke:1.2px var(--oro-chiaro)}
/* freccia lunga pop per l'invito allo scorrimento */
.freccia-pop{display:inline-flex;align-items:center;gap:0;font-family:var(--pop);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--crusco)}
.freccia-pop::after{content:"";width:74px;height:3px;background:var(--crusco);margin-left:14px;position:relative;
  clip-path:polygon(0 40%, 84% 40%, 84% 0, 100% 50%, 84% 100%, 84% 60%, 0 60%)}
/* numeri delle tre nascite: contorno più spesso, da fumetto nobile */
.nascita .numero{-webkit-text-stroke:2px var(--oro-scuro)}
.nascita{border-top-width:4px}
/* card esposizioni: bordo inferiore grosso crusco per ancorarla */
#esposizioni .rivela[style*="grid-template-columns"]{border-bottom:6px solid var(--crusco) !important}

/* riga email nella sezione contatti */
.email-riga{margin-top:26px}
.email-riga a{text-decoration:none;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--oro-scuro)}
.email-riga a:hover{color:var(--nero)}