/* ============================================================
   Foglio di stile condiviso da tutte le pagine del sito.
   Modifica qui i colori e i caratteri: cambiano ovunque.
   ============================================================ */

:root{
  --stone:#E7E9E3;
  --paper:#F4F5F1;
  --ink:#1C231E;
  --ink-soft:#5A6356;
  --line:#C9CCC2;
  --vine:#35462F;
  --brass:#8F6A16;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Karla",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--stone);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* testo segnaposto da sostituire con i tuoi dati */
.ph{border-bottom:1px dotted var(--brass)}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- barra di navigazione ---------- */
header{border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0}
.logo{font-family:var(--serif);font-size:26px;line-height:1;letter-spacing:-.01em;text-decoration:none}
.logo span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.navlinks{display:flex;gap:26px;font-size:15px}
.navlinks a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
.navlinks a:hover,.navlinks a[aria-current="page"]{border-bottom-color:var(--brass)}
@media(max-width:860px){.navlinks{display:none}}

.btn{display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;text-decoration:none;padding:11px 22px;border-radius:2px;border:1px solid var(--vine);transition:background .18s,color .18s}
.btn-solid{background:var(--vine);color:var(--paper)}
.btn-solid:hover{background:#26331F}
.btn-ghost{background:transparent;color:var(--vine)}
.btn-ghost:hover{background:rgba(53,70,47,.07)}
.btn-chiaro{background:var(--paper);color:var(--vine);border-color:var(--paper)}
.btn-chiaro:hover{background:#fff}

/* ---------- apertura homepage ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;padding:76px 0 64px;align-items:start}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,68px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 22px}
h1 em{font-style:italic;color:var(--brass)}
.lede{font-size:18px;color:var(--ink-soft);max-width:44ch;margin-bottom:30px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:44px;padding:52px 0 48px}}

/* ---------- blocco "carta dei vini" ---------- */
.carta{background:var(--paper);border:1px solid var(--line);padding:26px 26px 20px}
.carta h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.riga{display:flex;align-items:baseline;gap:8px;padding:9px 0;font-size:15px;text-decoration:none}
.riga .nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.riga:hover .nome{color:var(--brass)}
.riga .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);min-width:18px}
.riga .zona{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap}
.carta .altro{font-family:var(--mono);font-size:12px;color:var(--brass);padding-top:14px;margin-top:6px;border-top:1px solid var(--line);text-decoration:none;display:inline-block}
.carta .altro:hover{text-decoration:underline}

/* ---------- fascia numeri ---------- */
.dati{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.dati .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:26px;padding-bottom:26px}
.dato .n{font-family:var(--serif);font-size:34px;line-height:1}
.dato .l{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px}
@media(max-width:700px){.dati .wrap{grid-template-columns:repeat(2,1fr);gap:22px}}

/* ---------- sezioni generiche ---------- */
section{padding:80px 0}
h2.tit{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.01em;margin:10px 0 14px}
.intro{color:var(--ink-soft);max-width:56ch;margin-bottom:44px}
.chiaro{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- schede cantina in griglia ---------- */
.griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;transition:border-color .18s}
.card:hover{border-color:var(--brass)}
.card-corpo{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .reg{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.card h3{font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.15}
.card:hover h3{color:var(--brass)}
.card p{font-size:15px;color:var(--ink-soft)}
.card .meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:860px){.griglia{grid-template-columns:1fr}}

/* ---------- servizi ---------- */
.servizi{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.serv h3{font-family:var(--sans);font-weight:600;font-size:17px;margin:12px 0 8px}
.serv p{font-size:15px;color:var(--ink-soft)}
.serv .num{font-family:var(--mono);font-size:12px;color:var(--brass);padding-bottom:12px;border-bottom:1px solid var(--line);display:block}
@media(max-width:860px){.servizi{grid-template-columns:1fr;gap:32px}}

/* ---------- riquadri foto ----------
   Sostituisci il div .foto con: <img src="foto/nome-file.jpg" alt="descrizione">
*/
.foto{background:var(--paper);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}
.foto span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-soft);line-height:1.8}
.foto-larga{aspect-ratio:21/9}
.foto-media{aspect-ratio:3/2}
.foto-alta{aspect-ratio:4/5}

/* ---------- scheda cantina ---------- */
.briciole{font-family:var(--mono);font-size:12px;color:var(--ink-soft);padding:22px 0 0}
.briciole a{text-decoration:none}
.briciole a:hover{color:var(--brass)}
.scheda-testa{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;padding:34px 0 56px;align-items:start}
.scheda-testa h1{font-size:clamp(38px,5.4vw,60px);margin:14px 0 20px}
.fatti{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px}
.fatto{background:var(--stone);padding:16px 18px}
.fatto dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.fatto dd{font-size:17px;margin-top:4px}
@media(max-width:860px){.scheda-testa{grid-template-columns:1fr;gap:36px;padding-bottom:40px}}

.racconto{max-width:62ch}
.racconto p+p{margin-top:18px}
.racconto p{color:var(--ink-soft)}
.foto-coppia{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
@media(max-width:700px){.foto-coppia{grid-template-columns:1fr}}

/* ---------- elenco vini del produttore ---------- */
.vini{border-top:1px solid var(--ink)}
.vini-testa,.vino{display:grid;grid-template-columns:1.7fr 66px 1fr 96px 132px;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.vini-testa{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);padding:10px 0}
.gruppo{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding:26px 0 8px;border-bottom:1px solid var(--line)}
.v-nome{font-size:17px}
.v-den{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-soft);letter-spacing:.04em;margin-top:3px}
.v-annata,.v-form{font-family:var(--mono);font-size:14px}
.v-uve{font-size:15px;color:var(--ink-soft)}
.v-disp{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.disp-si{color:var(--vine)}
.disp-forse{color:var(--brass)}
@media(max-width:760px){
  .vini-testa{display:none}
  .vino{grid-template-columns:1fr auto;gap:4px 16px;padding:18px 0}
  .v-nome{grid-column:1/-1}
  .v-annata::before{content:"Annata ";color:var(--ink-soft)}
  .v-form::before{content:"Formati ";color:var(--ink-soft)}
  .v-annata,.v-uve,.v-form,.v-disp{font-size:13px}
  .v-disp{grid-column:1/-1;margin-top:4px}
}

/* ---------- richiesta listino ---------- */
.listino{background:var(--vine);color:var(--paper)}
.listino .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:80px;padding-bottom:80px;align-items:start}
.listino .eyebrow{color:#A9B6A1}
.listino h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,42px);line-height:1.1;margin:10px 0 14px}
.listino p{color:#C6D0BF;max-width:42ch}
form{display:grid;gap:14px}
.due{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#A9B6A1;margin-bottom:6px}
input,select{width:100%;font-family:var(--sans);font-size:16px;color:var(--paper);background:transparent;border:1px solid #56684E;border-radius:2px;padding:11px 13px}
select option{color:var(--ink)}
input:focus,select:focus{border-color:var(--paper);outline:none}
button{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--vine);background:var(--paper);border:none;border-radius:2px;padding:13px 24px;cursor:pointer;justify-self:start;margin-top:4px}
button:hover{background:#fff}
.nota{font-family:var(--mono);font-size:11px;color:#A9B6A1;line-height:1.6}
@media(max-width:860px){.listino .wrap{grid-template-columns:1fr;gap:36px}.due{grid-template-columns:1fr}}

/* fascia richiamo compatta, in fondo alle schede cantina */
.richiamo{background:var(--vine);color:var(--paper)}
.richiamo .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:44px;padding-bottom:44px}
.richiamo h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15}
.richiamo p{color:#C6D0BF;font-size:15px;margin-top:6px}

/* ---------- piede ---------- */
footer{border-top:1px solid var(--line);padding:40px 0;font-size:14px;color:var(--ink-soft)}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.foot .mono{font-family:var(--mono);font-size:12px;line-height:1.9}

@media(prefers-reduced-motion:no-preference){
  .riga{animation:sali .5s ease-out backwards}
  .riga:nth-child(2){animation-delay:.05s}
  .riga:nth-child(3){animation-delay:.1s}
  .riga:nth-child(4){animation-delay:.15s}
  .riga:nth-child(5){animation-delay:.2s}
  .riga:nth-child(6){animation-delay:.25s}
  @keyframes sali{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ---------- fascia con l'immagine della vigna ---------- */
.vigna{position:relative;height:clamp(150px,17vw,230px);overflow:hidden;border-bottom:1px solid var(--line)}
.vigna svg,.vigna img{width:100%;height:100%;object-fit:cover;display:block}
.vigna-nota{position:absolute;left:0;right:0;bottom:11px;max-width:1120px;margin:0 auto;padding:0 28px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);text-shadow:0 1px 6px rgba(28,35,30,.55)}
.vigna-nota.ph{border-bottom:0}

/* ---------- pagine area ---------- */
.card-area .reg{color:var(--brass)}
.card-area h3{font-family:var(--serif);font-weight:400;font-size:27px}
.testa-gruppo{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--ink);margin-bottom:22px}
.testa-gruppo .gruppo{border-bottom:0;padding-bottom:10px}
.link-area{font-family:var(--mono);font-size:12px;color:var(--brass);text-decoration:none;white-space:nowrap}
.link-area:hover{text-decoration:underline}

/* la vigna apre la pagina: il titolo sotto ha bisogno di meno stacco */
.vigna + .wrap .hero{padding-top:56px}
@media(max-width:860px){.vigna + .wrap .hero{padding-top:40px}}