:root{
  --carta:#f3eee6; --carta-2:#e9e1d5; --argilla:#a8623d; --argilla-scura:#7d4428;
  --inchiostro:#2a2521; --grigio:#6e645b; --blu:#1d6b73; --linea:rgba(42,37,33,.14);
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--carta);color:var(--inchiostro);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1}
.occhiello{font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--argilla)}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,box-shadow .3s}
.top.pieno{background:rgba(243,238,230,.94);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--linea)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font:500 26px/1 var(--serif);letter-spacing:.04em;text-decoration:none}
.nav{display:flex;gap:28px;align-items:center;font-size:14px;letter-spacing:.06em}
.nav a{text-decoration:none;opacity:.85}.nav a:hover{opacity:1;color:var(--argilla)}
.lingua{border:1px solid var(--linea);padding:4px 10px;border-radius:20px;font-size:12px}
.menu-btn{display:none;background:none;border:0;font:inherit;font-size:14px;letter-spacing:.1em;cursor:pointer;color:inherit}

/* hero */
.hero{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;padding-top:68px}
.hero-testo{padding:40px 0}
.hero h1{font-size:clamp(56px,8vw,112px);letter-spacing:-.01em;margin:18px 0 10px}
.hero .sottotitolo{font:italic 400 clamp(22px,2.4vw,30px)/1.3 var(--serif);color:var(--grigio);margin-bottom:34px}
.hero-foto{height:calc(100svh - 120px);max-height:820px;border-radius:220px 220px 4px 4px;overflow:hidden}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.btn{display:inline-block;background:var(--inchiostro);color:var(--carta);text-decoration:none;padding:15px 30px;border-radius:40px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--argilla-scura)}
.btn.chiaro{background:transparent;color:var(--inchiostro);border:1px solid var(--inchiostro)}
.btn.chiaro:hover{background:var(--inchiostro);color:var(--carta)}
.segni{display:flex;gap:22px;margin-top:40px;font-size:13px;color:var(--grigio);flex-wrap:wrap}
.segni span::before{content:"·";margin-right:8px;color:var(--argilla)}

/* sezioni */
section{padding:120px 0}
.manifesto{background:var(--inchiostro);color:var(--carta)}
.manifesto .wrap{max-width:860px;text-align:center}
.manifesto h2{font-size:clamp(36px,5vw,58px);margin:20px 0 36px;font-style:italic}
.manifesto p{font:400 clamp(20px,2vw,24px)/1.6 var(--serif);opacity:.9;margin-bottom:22px}
.manifesto .firma{font:italic 22px var(--serif);color:#d9a27f;margin-top:30px}

.collezione{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center;padding:60px 0}
.collezione.inversa .col-foto{order:2}
.col-foto{border-radius:4px;overflow:hidden;aspect-ratio:4/5}
.col-foto img{width:100%;height:100%;object-fit:cover}
.collezione h3{font-size:clamp(38px,4.4vw,56px);margin:14px 0 22px}
.poesia{font:italic 400 21px/1.55 var(--serif);color:var(--grigio);white-space:pre-line;margin-bottom:26px}
.collezione p{margin-bottom:16px}
.titolo-sez{text-align:center;max-width:720px;margin:0 auto 56px}
.titolo-sez h2{font-size:clamp(42px,5vw,64px);margin:14px 0 16px}
.titolo-sez p{color:var(--grigio)}

/* catalogo */
.catalogo{background:var(--carta-2)}
.filtri{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:44px}
.filtri button{font:inherit;font-size:14px;background:transparent;border:1px solid var(--linea);padding:11px 18px;border-radius:30px;cursor:pointer;color:var(--inchiostro)}
.filtri button[aria-pressed=true]{background:var(--inchiostro);color:var(--carta);border-color:var(--inchiostro)}
.griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 28px}
.opera{display:flex;flex-direction:column;justify-content:flex-start;cursor:pointer;background:none;border:0;text-align:left;font:inherit;color:inherit}
.opera .foto{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--carta)}
.opera .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.opera:hover .foto img{transform:scale(1.04)}
.opera .h4{display:block;font:500 23px/1.2 var(--serif);margin:16px 0 4px}
.opera .riga{display:flex;padding-top:2px;justify-content:space-between;gap:12px;font-size:14px;color:var(--grigio)}
.opera .riga{margin-top:auto}
.opera .vedi{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--argilla);margin-top:8px}
.opera:focus-visible{outline:2px solid var(--argilla);outline-offset:6px}
.opera:focus-visible .foto img{transform:scale(1.04)}
.nota-fascia{display:block;font:400 14px/1.5 var(--sans);color:var(--grigio);margin-top:6px}
.opera .prezzo{color:var(--inchiostro);white-space:nowrap}
.bollino{position:absolute;top:14px;left:14px;background:var(--carta);color:var(--inchiostro);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:20px}
.opera.venduta .foto img{filter:saturate(.35) opacity(.85)}
.bollino.venduto{background:var(--inchiostro);color:var(--carta)}

/* scheda opera */
dialog{border:0;padding:0;max-width:1040px;width:calc(100% - 32px);max-height:calc(100svh - 32px);margin:auto;background:var(--carta);color:var(--inchiostro);border-radius:6px}
dialog::backdrop{background:rgba(30,26,22,.6)}
.scheda{display:grid;grid-template-columns:1fr 1fr}
.scheda .foto-grande{background:var(--carta-2)}
.scheda .foto-grande img{width:100%;height:100%;object-fit:cover;max-height:calc(100svh - 32px)}
.miniature{display:flex;gap:8px;padding:8px}
.miniature button{border:0;padding:0;width:64px;height:64px;cursor:pointer;opacity:.6;background:none}
.miniature button[aria-current=true]{opacity:1;outline:1px solid var(--inchiostro)}
.miniature img{width:100%;height:100%;object-fit:cover}
.scheda .testo{padding:48px 44px;overflow:auto;max-height:calc(100svh - 32px)}
.scheda h3{font-size:40px;margin:12px 0 8px}
.scheda .tipo{color:var(--grigio);font-size:15px;margin-bottom:22px}
.scheda .storia{font:italic 19px/1.6 var(--serif);margin-bottom:26px}
.scheda .prezzo-grande{font:500 30px var(--serif);margin-bottom:18px}
.unico{font-size:14px;color:var(--grigio);border-top:1px solid var(--linea);padding-top:18px;margin-top:26px}
.chiudi{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:50%;border:0;background:var(--carta);cursor:pointer;font-size:22px;z-index:2;color:var(--inchiostro)}
.pezzi{list-style:none;margin:10px 0 0}
.pezzi li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--linea)}
.pezzi li{flex-wrap:wrap}
.pezzi .nome{font:500 20px/1.3 var(--serif);flex:1 1 100%}
.pezzi .dx{width:100%;justify-content:space-between}
.pezzi .dx{display:flex;align-items:center;gap:14px;white-space:nowrap;font-size:15px}
.pezzi .btn{padding:12px 18px;font-size:12px}
.pezzi .esaurito{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}

/* chi è mara */
.mara{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
.mara-foto{position:sticky;top:100px;border-radius:4px 4px 200px 200px;overflow:hidden;aspect-ratio:3/4}
.mara-foto img{width:100%;height:100%;object-fit:cover}
.mara h2{font-size:clamp(42px,5vw,60px);margin:14px 0 28px}
.mara p{margin-bottom:18px}
.tecnica{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;border-top:1px solid var(--linea);padding-top:32px}
.tecnica h4{font:500 22px var(--serif);margin-bottom:6px}
.tecnica p{font-size:15px;color:var(--grigio)}

/* contatti */
.contatti{background:var(--inchiostro);color:var(--carta)}
.contatti .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.contatti h2{font-size:clamp(42px,5vw,60px);margin:14px 0 22px}
.contatti .occhiello{color:#d9a27f}
.contatti p{opacity:.85;margin-bottom:16px}
.contatti form label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin:18px 0 6px}
.contatti form input,.contatti form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(243,238,230,.35);color:var(--carta);font:inherit;padding:8px 0}
.contatti form input:focus,.contatti form textarea:focus{outline:0;border-color:#d9a27f}
.contatti form textarea{min-height:110px;resize:vertical}
.contatti form .btn{background:var(--carta);color:var(--inchiostro);margin-top:28px}
.contatti form .btn:hover{background:#d9a27f}
.nascosto{position:absolute;left:-9999px}
footer{background:var(--inchiostro);color:rgba(243,238,230,.6);font-size:13px;padding:28px 0 40px;border-top:1px solid rgba(243,238,230,.12)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* comparsa */
.js .appare{opacity:0;transform:translateY(24px);transition:opacity .9s,transform .9s}
.js .appare.visto{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.appare{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* telefono */
@media (max-width:900px){
  .wrap{padding:0 16px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--carta);flex-direction:column;padding:24px;gap:18px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
  .nav.aperto{display:flex}
  .top{background:rgba(243,238,230,.94)}
  .hero{grid-template-columns:1fr;gap:0;min-height:auto;padding-top:88px}
  .hero-foto{height:62svh;order:-1;border-radius:160px 160px 4px 4px}
  .hero-testo{padding:32px 0 56px}
  section{padding:80px 0}
  .collezione,.collezione.inversa{grid-template-columns:1fr;gap:28px;padding:36px 0}
  .collezione.inversa .col-foto{order:0}
  .griglia{grid-template-columns:repeat(2,1fr);gap:28px 14px}
  .opera .h4{display:block;font-size:19px}
  .opera .riga{flex-direction:column;gap:0}
  .scheda{grid-template-columns:1fr}
  .scheda .foto-grande img{max-height:52svh}
  .scheda .testo{padding:28px 22px;max-height:none}
  dialog{overflow:auto}
  .mara{grid-template-columns:1fr;gap:36px}
  .mara-foto{position:static;max-height:70svh}
  .tecnica{grid-template-columns:1fr}
  .contatti .wrap{grid-template-columns:1fr;gap:24px}
}

/* WordPress: barra di amministrazione e stili del tema che non devono entrare */
body.mg-home{margin:0}
.admin-bar .top{top:32px}
@media (max-width:782px){.admin-bar .top{top:46px}}
.mg-home h1,.mg-home h2,.mg-home h3,.mg-home h4{color:inherit;letter-spacing:normal}
.mg-home a:where(:not(.btn)){text-decoration-thickness:1px}

/* modulo «Mi interessa» e contatti */
.contatti .mg-modulo input[type=checkbox]{width:auto}
.mg-modulo .consenso{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14px;line-height:1.5;opacity:.9;margin-top:22px}
.mg-modulo .consenso input{width:18px;height:18px;flex:0 0 18px;margin-top:2px;accent-color:var(--argilla)}
.mg-modulo .consenso a{text-decoration:underline}
.mg-modulo .facolt{text-transform:none;letter-spacing:0;opacity:.8}
.mg-modulo .esito{min-height:1.2em;margin:14px 0 0;font-size:15px}
.mg-modulo .esito.no{color:#b3261e}
.contatti .mg-modulo .esito.no{color:#ffb4a8}
.mg-modulo .esito.si{font:italic 22px/1.5 var(--serif);opacity:1}
.in-scheda{margin-top:22px;padding-top:18px;border-top:1px solid var(--linea)}
.in-scheda .invito{font-size:15px;margin-bottom:6px}
.in-scheda label{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grigio);margin:14px 0 0}
.in-scheda input:not([type=checkbox]),.in-scheda textarea{display:block;width:100%;background:#fff;border:1px solid var(--linea);border-radius:4px;color:var(--inchiostro);font:inherit;font-size:16px;padding:10px 12px;margin-top:6px;text-transform:none;letter-spacing:0}
.in-scheda input:focus,.in-scheda textarea:focus{outline:2px solid var(--argilla);outline-offset:1px}
.in-scheda .consenso{color:var(--inchiostro)}
.in-scheda .btn{margin-top:18px}
.in-scheda .esito.si{color:var(--inchiostro)}

.scheda .storia{white-space:pre-line}
.griglia .vuoto{grid-column:1/-1;text-align:center;color:var(--grigio)}