@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Source+Sans+3:wght@400;500;600&display=swap');

:root{
  --carta:#F3EFEC;
  --carta-2:#EAE3DF;
  --inchiostro:#2E2328;
  --tenue:#8A7B7E;
  --rosa:#B8697F;
  --riga:#D9CFCB;
  --mis:clamp(1.15rem,4vw,1.6rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:'Source Sans 3',system-ui,sans-serif;font-weight:400;
  font-size:clamp(15px,1.6vw,16.5px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

h1,h2,h3,.bodoni{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.005em}
h1{font-size:clamp(3.1rem,13vw,8.5rem);line-height:.88;margin:0}
h2{font-size:clamp(2rem,6.5vw,3.6rem);line-height:1.02;margin:0}
h3{font-size:clamp(1.35rem,3.6vw,1.8rem);line-height:1.15;margin:0}
p{margin:0 0 1em}
.guida{font-family:'Fraunces',Georgia,serif;font-weight:500;color:var(--rosa);font-size:1rem;letter-spacing:.01em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.q{width:min(1180px,100% - 2.4rem);margin-inline:auto}
@media(min-width:900px){.q{width:min(1180px,100% - 5rem)}}

/* ---------- testata ---------- */
.testata{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0;flex-wrap:wrap}
.marchio{display:block;width:clamp(5.5rem,10vw,7.5rem);text-decoration:none}
.marchio img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.menu{display:flex;gap:1.4rem;font-size:.9rem;letter-spacing:.02em}
.menu a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{border-color:var(--rosa)}

/* ---------- apertura ---------- */
.apertura{padding:clamp(1.6rem,5vw,3.4rem) 0 0}
.apertura h1{margin-bottom:.35em}
.sommario{max-width:33ch;font-size:var(--mis);line-height:1.45}
.apertura-riga{display:grid;gap:1.6rem}
@media(min-width:820px){
  .apertura-riga{grid-template-columns:1fr auto;align-items:end}
  .dato{text-align:right;font-size:.88rem;color:var(--tenue);line-height:1.5}
}

/* ---------- carta colori ---------- */
.cartacolori{display:flex;width:100%;height:clamp(84px,15vw,150px);margin:clamp(1.8rem,4.5vw,2.8rem) 0 0;overflow:hidden}
.cartacolori span{flex:1 1 0;min-width:0}
.didascalia{display:flex;justify-content:space-between;gap:1rem;padding-top:.55rem;font-size:.78rem;color:var(--tenue);letter-spacing:.03em}
.didascalia span:last-child{white-space:nowrap}
@media(max-width:520px){.didascalia{font-size:.72rem}}

/* ---------- collezione ---------- */
.collezioni{padding:clamp(1.4rem,3vw,2.4rem) 0 0}
.collezione{padding:clamp(2.6rem,7vw,4.4rem) 0;border-top:1px solid var(--riga)}
.collezione:first-of-type{border-top:none}
.coll-griglia{display:grid;gap:1.8rem}
@media(max-width:819px){
  .coll-griglia{display:flex;flex-direction:column}
  .coll-testo{display:contents}
  .coll-testo .guida{order:1}
  .coll-testo h2{order:2;margin:.15em 0 -.8rem}
  .coll-foto{order:3}
  .coll-testo p{order:4}
  .coll-testo .scheda{order:5}
  .coll-testo .apri{order:6;align-self:flex-start}
}
@media(min-width:820px){
  .coll-griglia{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,4rem);align-items:start}
  .collezione:nth-of-type(even) .coll-testo{order:2}
}
.coll-testo p{max-width:44ch;color:#4a3c40}
.coll-testo h2{margin:.3em 0 .5em}
.scheda{margin:1.4rem 0 0;font-size:.86rem;color:var(--tenue)}
.scheda div{display:flex;gap:.8rem;padding:.42rem 0;border-top:1px solid var(--riga)}
.scheda dt{flex:0 0 8.5em;margin:0}
.scheda dd{margin:0;color:var(--inchiostro)}
.coll-foto{position:relative}
.coll-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;max-height:74vh;object-position:center}
.tinte{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}
.tinte i{width:1.15rem;height:1.15rem;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(46,35,40,.14)}
.apri{display:inline-block;margin-top:1.6rem;font-size:.92rem;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid var(--inchiostro);padding-bottom:3px}
.apri:hover{color:var(--rosa);border-color:var(--rosa)}

/* ---------- pagina collezione ---------- */
.pagina{padding:clamp(2rem,5vw,3.4rem) 0 0}
.ritorno{font-size:.85rem;color:var(--tenue);text-decoration:none}
.ritorno:hover{color:var(--rosa)}
.intro{max-width:52ch;margin:.8rem 0 clamp(2rem,5vw,3rem)}
.intro h1{font-size:clamp(2.6rem,8vw,4.6rem);margin-bottom:.25em}

.pezzi{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,3vw,2rem) clamp(.7rem,2.2vw,1.4rem)}
@media(min-width:760px){.pezzi{grid-template-columns:repeat(3,1fr)}}
.pezzo{position:relative}
.pezzo img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--carta-2)}
.pezzo h3{font-size:clamp(1.05rem,2.4vw,1.3rem);margin:.65rem 0 .1rem}
.pezzo .prezzo{font-size:.92rem;color:var(--tenue)}
.pezzo .dettaglio{font-size:.82rem;color:var(--tenue);margin-top:.3rem;line-height:1.45}
.pezzo .tinta{position:absolute;top:.7rem;left:.7rem;width:1.4rem;height:1.4rem;border-radius:50%;box-shadow:0 0 0 2px var(--carta)}
.chiedi{display:inline-block;margin-top:.7rem;font-size:.85rem;letter-spacing:.02em;text-decoration:none;color:var(--rosa);border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- coda ---------- */
.coda{margin-top:clamp(4rem,10vw,7rem);border-top:1px solid var(--riga);padding:clamp(2.6rem,6vw,4rem) 0 3rem}
.coda-griglia{display:grid;gap:2rem}
@media(min-width:820px){.coda-griglia{grid-template-columns:1.2fr .8fr .8fr}}
.coda h2{font-size:clamp(1.7rem,4.4vw,2.4rem);margin-bottom:.4em}
.coda p{max-width:38ch;color:#4a3c40}
.coda h4{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:500;font-size:.85rem;color:var(--tenue);margin:0 0 .6rem;letter-spacing:.03em}
.coda ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.coda li{padding:.18rem 0}
.coda a{text-decoration:none;border-bottom:1px solid var(--riga)}
.coda a:hover{border-color:var(--rosa);color:var(--rosa)}
.firma{margin-top:2.6rem;font-size:.76rem;color:var(--tenue);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.wa{display:inline-block;margin-top:1.4rem;background:var(--inchiostro);color:var(--carta);
    text-decoration:none;padding:.85rem 1.7rem;font-size:.92rem;letter-spacing:.03em;border:none}
.wa:hover{background:var(--rosa)}

/* ---------- domande frequenti ---------- */
.faq{padding:clamp(2.6rem,7vw,4.4rem) 0;border-top:1px solid var(--riga)}
.faq h2{margin:.2em 0 .65em}
.faq details{max-width:52rem;border-top:1px solid var(--riga);padding:.85rem 0}
.faq details:last-child{border-bottom:1px solid var(--riga)}
.faq summary{cursor:pointer;font-weight:600;line-height:1.4}
.faq details p{max-width:65ch;margin:.65rem 0 0;color:#4a3c40}

:focus-visible{outline:2px solid var(--rosa);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}