@charset "UTF-8";
/* =========================================================================
   PODERE DI' GIACHETTI — foglio di stile unico
   Direzione grafica «Alberese» (vedi 01-brand-identity)
   Regole non negoziabili: nessuna sans, angoli sempre vivi, niente ombre,
   nessun oro, il rombo come unico marcatore.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. TOKEN */
:root{
  /* colori di base */
  --fondo:       #E9E3D8;
  --carta:       #F4F0E7;
  --carta-alta:  #FAF7F1;
  --pietra:      #8A7E78;
  --pietra-cupa: #6E635E;
  --inchiostro:  #2C2622;
  --bordeaux:    #841E30;
  --bordeaux-cupo:#6B1727;
  --oliva:       #6E7359;

  /* colori di gamma, per tipologia di vino */
  --verde:    #127842;
  --carminio: #A22A42;
  --prugna:   #6B3D57;   /* di riserva: nessun vino lo usa oggi */
  --petrolio: #36607E;

  /* accento locale: ogni blocco può ridefinirlo */
  --gamma: var(--bordeaux);

  /* filetti */
  --filo:       color-mix(in srgb, var(--pietra) 40%, transparent);
  --filo-forte: color-mix(in srgb, var(--pietra) 72%, transparent);
  --filo-chiaro:color-mix(in srgb, var(--carta) 34%, transparent);

  /* caratteri */
  --display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --testo:   "EB Garamond", Garamond, "Iowan Old Style", "Times New Roman", serif;

  /* scala tipografica fluida */
  --t-mega:  clamp(2.7rem, 9vw, 6.5rem);
  --t-xxl:   clamp(2.1rem, 5.6vw, 4rem);
  --t-xl:    clamp(1.8rem, 4vw, 2.9rem);
  --t-l:     clamp(1.45rem, 2.6vw, 2rem);
  --t-m:     clamp(1.22rem, 1.7vw, 1.5rem);
  --t-corpo: clamp(1.04rem, .35vw + .95rem, 1.16rem);
  --t-piccolo: .95rem;
  --t-micro: .68rem;

  /* ritmo verticale */
  --s-1: .35rem;
  --s-2: .7rem;
  --s-3: 1.15rem;
  --s-4: 1.8rem;
  --s-5: 2.8rem;
  --s-6: 4.2rem;
  --s-7: 6rem;
  --s-8: clamp(4.5rem, 9vw, 8.5rem);

  /* misure */
  --misura: 34rem;          /* colonna di lettura, ~62 caratteri */
  --largo:  74rem;
  --medio:  58rem;
  --margine: clamp(1.15rem, 4vw, 3rem);

  /* proporzioni delle immagini */
  --r-largo: 16 / 9;
  --r-fascia: 21 / 9;
  --r-alto: 4 / 5;

  --testata-h: 4.6rem;
  --lento: .8s cubic-bezier(.22,.61,.36,1);
  --medio-t: .38s cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------- 2. AZZERAMENTO */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 1.5rem);
}

body{
  margin: 0;
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: var(--t-corpo);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video{ display: block; max-width: 100%; }
img{ height: auto; }

button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible{
  outline: 2px solid var(--bordeaux);
  outline-offset: 3px;
}

::selection{ background: var(--bordeaux); color: var(--carta-alta); }

.salta{
  position: absolute; left: -9999px; top: 0;
  background: var(--inchiostro); color: var(--carta);
  padding: .8rem 1.4rem; z-index: 200;
  letter-spacing: .18em; text-transform: uppercase; font-size: var(--t-micro);
}
.salta:focus{ left: 0; }

/* ------------------------------------------------------- 3. TIPOGRAFIA */
h1, h2, h3, h4, h5{
  font-family: var(--display);
  font-weight: 300;
  margin: 0;
  line-height: 1.18;
  text-wrap: balance;
  letter-spacing: .01em;
}

h1{ font-size: var(--t-xxl); }
h2{ font-size: var(--t-xl); }
h3{ font-size: var(--t-l); }
h4{ font-size: var(--t-m); }

p{ margin: 0 0 var(--s-3); }
p:last-child{ margin-bottom: 0; }

em, i{ font-style: italic; }
strong, b{ font-weight: 600; }

a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--filo);
  transition: border-color var(--medio-t), color var(--medio-t);
}
a:hover{ border-bottom-color: var(--gamma); color: var(--gamma); }

ul, ol{ margin: 0 0 var(--s-3); padding-left: 1.2rem; }
li{ margin-bottom: var(--s-1); }

code{
  font-family: var(--testo);
  font-style: italic;
  background: color-mix(in srgb, var(--pietra) 14%, transparent);
  padding: .05em .35em;
}

/* dicitura: la micro-scritta maiuscola che tiene insieme tutto il sistema */
.dicitura{
  font-family: var(--testo);
  font-weight: 600;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .26em;
  line-height: 1.6;
  color: var(--pietra-cupa);
  display: inline-block;
}
.dicitura--centrata{ display: block; text-align: center; }
.dicitura--gamma{ color: var(--gamma); }

.occhiello{
  display: block;
  text-align: center;
  margin-bottom: var(--s-3);
}

.corsivo{ font-family: var(--display); font-style: italic; font-weight: 400; }

.apertura-paragrafo{
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 300;
  line-height: 1.5;
  color: var(--inchiostro);
}

/* --------------------------------------------------------- 4. IMPIANTO */
.contenitore{
  width: 100%;
  max-width: var(--largo);
  margin-inline: auto;
  padding-inline: var(--margine);
}
.contenitore--medio{ max-width: var(--medio); }
.contenitore--stretto{ max-width: calc(var(--misura) + var(--margine) * 2); }

.colonna{ max-width: var(--misura); }
.colonna--centrata{ margin-inline: auto; }

.sezione{ padding-block: var(--s-8); }
.sezione--stretta{ padding-block: var(--s-7); }
.sezione--carta{ background: var(--carta); }
.sezione--scura{
  background: var(--inchiostro);
  color: var(--carta);
  --filo: color-mix(in srgb, var(--carta) 22%, transparent);
  --filo-forte: color-mix(in srgb, var(--carta) 40%, transparent);
  --pietra-cupa: color-mix(in srgb, var(--carta) 66%, transparent);
}

.centrato{ text-align: center; }

/* -------------------------------------------------- 5. SEGNI DI SEZIONE */
.rombo{
  display: inline-block;
  width: 9px; height: 15px;
  background: var(--gamma);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  flex: none;
}
.rombo--piccolo{ width: 7px; height: 11px; }

.segno{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  max-width: 22rem;
  margin: var(--s-4) auto;
}
.segno::before, .segno::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--filo);
}
.segno--corto{ max-width: 12rem; }
.segno--sinistra{ margin-inline: 0; justify-content: flex-start; max-width: 9rem; }
.segno--sinistra::before{ display: none; }

.filetto{ border: 0; height: 1px; background: var(--filo); margin: var(--s-5) 0; }

/* ----------------------------------------------------------- 6. TESTATA */
.testata{
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--fondo);
  border-bottom: 1px solid var(--filo);
  transition: background var(--medio-t), border-color var(--medio-t), color var(--medio-t);
}
.testata__interno{
  max-width: var(--largo);
  margin-inline: auto;
  padding: 0 var(--margine);
  height: var(--testata-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.marchio{
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 0;
  flex: none;
}
.marchio:hover{ color: inherit; }
.marchio img{
  width: 30px;
  transition: transform var(--lento);
}
.marchio:hover img{ transform: rotate(-4deg) scale(1.06); }
.marchio__nome{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.28rem;
  letter-spacing: .01em;
  white-space: nowrap;
}

.navigazione{ display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.navigazione a{
  border: 0;
  position: relative;
  font-weight: 500;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .24em;
  padding-block: .5rem;
  white-space: nowrap;
}
.navigazione a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .1rem;
  height: 1px;
  background: var(--bordeaux);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio-t);
}
.navigazione a:hover::after,
.navigazione a[aria-current="page"]::after{ transform: scaleX(1); }
.navigazione a[aria-current="page"]{ color: var(--bordeaux); }

.lingue{
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  flex: none;
}
.lingue a, .lingue span{ border: 0; font-weight: 500; }
.lingue .attiva{ color: var(--bordeaux); }
.lingue .divisore{ color: var(--filo-forte); }

/* menu del telefono */
.apri-menu{
  display: none;
  width: 2.4rem; height: 2.4rem;
  align-items: center; justify-content: center;
  flex: none;
}
.apri-menu span{
  display: block;
  width: 20px; height: 1px;
  background: currentColor;
  position: relative;
  transition: background .2s;
}
.apri-menu span::before, .apri-menu span::after{
  content: ""; position: absolute; left: 0;
  width: 20px; height: 1px; background: currentColor;
  transition: transform var(--medio-t);
}
.apri-menu span::before{ top: -6px; }
.apri-menu span::after{ top: 6px; }
.menu-aperto .apri-menu span{ background: transparent; }
.menu-aperto .apri-menu span::before{ transform: translateY(6px) rotate(45deg); }
.menu-aperto .apri-menu span::after{ transform: translateY(-6px) rotate(-45deg); }

/* la testata sopra la fotografia d'apertura, solo con JS attivo */
.js.ha-apertura .testata:not(.testata--compatta){
  background: transparent;
  border-bottom-color: transparent;
  color: var(--carta-alta);
}
.js.ha-apertura .testata:not(.testata--compatta) .navigazione a[aria-current="page"],
.js.ha-apertura .testata:not(.testata--compatta) .lingue .attiva{ color: var(--carta-alta); }
.js.ha-apertura .testata:not(.testata--compatta) .navigazione a::after{ background: var(--carta-alta); }
.js.ha-apertura .testata:not(.testata--compatta) .marchio img{ filter: invert(1) brightness(1.6); }

/* -------------------------------------------------------- 7. FOTOGRAFIE */
/* Il trattamento vive qui: vale in automatico anche sulle foto sostituite. */
.foto{
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--pietra) 40%, var(--fondo));
}
.foto img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.05) sepia(.1) brightness(1.01);
}
.foto::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fondo);
  mix-blend-mode: multiply;
  opacity: .16;
  pointer-events: none;
}
.foto--largo{ aspect-ratio: var(--r-largo); }
.foto--fascia{ aspect-ratio: var(--r-fascia); }
.foto--alto{ aspect-ratio: var(--r-alto); }
.foto--quadro{ aspect-ratio: 1; }

/* fascia a tutta pagina */
.fascia{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.fascia--piena{ aspect-ratio: var(--r-fascia); min-height: 22rem; max-height: 34rem; }
.fascia .foto{ position: absolute; inset: 0; aspect-ratio: auto; }
.fascia .foto img{ object-position: 50% 62%; }

/* fascia con testo sopra */
.fascia--parlante{ display: grid; place-items: center; }
.fascia--parlante .fascia__testo{
  position: relative;
  z-index: 2;
  color: var(--carta-alta);
  text-align: center;
  padding: var(--s-6) var(--margine);
  max-width: 44rem;
  text-shadow: 0 1px 24px rgba(20,16,14,.45);
}
.fascia--parlante .foto::after{
  background: linear-gradient(180deg,
              rgba(28,23,20,.5) 0%,
              rgba(28,23,20,.34) 45%,
              rgba(28,23,20,.6) 100%);
  mix-blend-mode: normal;
  opacity: 1;
}

/* didascalia */
.didascalia{
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-piccolo);
  color: var(--pietra-cupa);
  font-style: italic;
}

/* ------------------------------------------------------- 8. L'APERTURA */
.apertura{
  position: relative;
  min-height: min(92svh, 54rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: calc(var(--testata-h) * -1);
  padding-top: var(--testata-h);
}
.apertura__sfondo{ position: absolute; inset: 0; }
.apertura__sfondo img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.06) sepia(.14);
  transform: scale(1.06);
  animation: respiro 26s ease-in-out infinite alternate;
}
@keyframes respiro{
  from{ transform: scale(1.03) translate3d(0,0,0); }
  to  { transform: scale(1.11) translate3d(0,-1.4%,0); }
}
.apertura__sfondo::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(24,20,17,.62) 0%, rgba(24,20,17,.26) 30%,
                    rgba(24,20,17,.42) 58%, rgba(24,20,17,.78) 100%),
    radial-gradient(ellipse 70% 52% at 50% 52%, rgba(24,20,17,.4), transparent 70%);
}

.apertura__interno{
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--carta-alta);
  padding: var(--s-7) var(--margine) var(--s-6);
  width: 100%;
  max-width: 52rem;
}
.apertura__monogramma{
  width: clamp(64px, 9vw, 94px);
  margin: 0 auto var(--s-4);
  filter: invert(1) brightness(1.9) drop-shadow(0 2px 14px rgba(0,0,0,.4));
  opacity: .96;
}
.apertura__nome{
  font-size: var(--t-mega);
  font-weight: 300;
  line-height: 1.02;
  margin-bottom: var(--s-3);
  text-shadow: 0 2px 30px rgba(20,16,14,.5);
}
.apertura__nome .primo{
  display: block;
  font-style: italic;
  font-size: .42em;
  letter-spacing: .04em;
  margin-bottom: .1em;
  opacity: .94;
}
.apertura__dicitura{
  color: var(--carta-alta);
  opacity: 1;
  letter-spacing: .3em;
  font-size: clamp(.62rem, 1.4vw, var(--t-micro));
  text-shadow: 0 1px 10px rgba(20,16,14,.85), 0 0 26px rgba(20,16,14,.5);
}
.apertura__soffio{
  margin-top: var(--s-4);
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-m);
  font-weight: 300;
  color: var(--carta-alta);
  opacity: .92;
  max-width: 30rem;
  margin-inline: auto;
  text-shadow: 0 1px 20px rgba(20,16,14,.5);
}

.scendi{
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  z-index: 3;
  border: 0;
  color: var(--carta-alta);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  opacity: .92;
}
.scendi{ text-shadow: 0 1px 10px rgba(20,16,14,.8); }
.scendi:hover{ color: var(--carta-alta); opacity: 1; }
.scendi__filo{
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(180deg, transparent, var(--carta-alta));
  animation: cala 2.6s ease-in-out infinite;
}
@keyframes cala{
  0%, 100%{ transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50%     { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

/* apertura minore, per le pagine interne senza fotografia dominante */
.testatina{
  padding-top: calc(var(--s-7) + var(--s-3));
  padding-bottom: var(--s-6);
  text-align: center;
}
.testatina__titolo{ font-size: var(--t-xxl); margin-bottom: var(--s-3); }
.testatina__soffio{
  max-width: 32rem;
  margin: 0 auto;
  color: var(--pietra-cupa);
  font-family: var(--display);
  font-size: var(--t-m);
  font-style: italic;
  line-height: 1.5;
}

/* --------------------------------------------------------- 9. LE CIFRE */
.cifre{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border-top: 1px solid var(--filo);
  border-bottom: 1px solid var(--filo);
}
.cifra{
  padding: var(--s-4) var(--s-3);
  text-align: center;
  border-left: 1px solid var(--filo);
}
.cifra:first-child{ border-left: 0; }
.cifra__valore{
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--inchiostro);
}
.cifra__valore .unita{ font-size: .42em; letter-spacing: .1em; margin-left: .15em; }
.cifra__voce{
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--pietra-cupa);
  font-weight: 500;
}
.cifra--vuota .cifra__valore{ color: var(--filo-forte); }

/* --------------------------------------------------- 10. I VINI (schede) */
.gamma{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  align-items: end;
}
.vino-scheda{
  display: flex;
  flex-direction: column;
  text-align: center;
  border: 0;
  color: inherit;
}
.vino-scheda:hover{ color: inherit; }
.vino-scheda__etichetta{
  border: 1px solid var(--filo);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--medio-t), transform var(--lento);
}
.vino-scheda__etichetta img{ width: 100%; transition: transform var(--lento); }
.vino-scheda:hover .vino-scheda__etichetta{ border-color: var(--gamma); transform: translateY(-5px); }
.vino-scheda:hover .vino-scheda__etichetta img{ transform: scale(1.035); }
.vino-scheda__piede{ margin-top: var(--s-3); }
.vino-scheda .rombo{ margin: 0 auto var(--s-2); }
.vino-scheda__nome{
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-m);
  line-height: 1.25;
}
.vino-scheda__tipo{
  display: block;
  margin-top: .2rem;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--pietra-cupa);
  font-weight: 500;
}

/* indice a rombi della pagina dei vini */
.indice-gamma{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--filo);
  border-bottom: 1px solid var(--filo);
}
.indice-gamma a{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.18rem;
}

/* blocco di un vino */
.vino{
  padding-block: var(--s-7);
  border-top: 1px solid var(--filo);
  scroll-margin-top: calc(var(--testata-h) + 2rem);
}
.vino:first-of-type{ border-top: 0; }
.vino__griglia{
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.vino__etichetta{
  border: 1px solid var(--filo);
  background: #fff;
  position: sticky;
  top: calc(var(--testata-h) + 2rem);
}
/* variante: la fotografia della bottiglia intera, ritagliata su fondo
   trasparente, al posto della scansione dell'etichetta. Niente cornice e
   niente fondo bianco: la bottiglia sta sulla carta, e si misura in altezza
   perché il ritaglio è molto più alto che largo. */
.vino__etichetta--bottiglia{
  border: 0;
  background: none;
  display: flex;
  justify-content: center;
  padding-block: var(--s-2);
}
.vino__etichetta--bottiglia img{
  width: auto;
  max-width: 100%;
  height: min(36rem, calc(100vh - var(--testata-h) - 8rem));
}
/* variante: la fotografia della bottiglia in ambiente, con il suo sfondo.
   Tiene il filetto e lo stesso trattamento cromatico delle altre foto del
   sito, così sta nello stesso mondo invece di sembrare incollata. */
.vino__etichetta--scatto{
  background: color-mix(in srgb, var(--pietra) 40%, var(--fondo));
  overflow: hidden;
}
.vino__etichetta--scatto img{
  width: 100%;
  filter: saturate(.86) contrast(1.05) sepia(.1) brightness(1.01);
}
.vino__etichetta--scatto::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fondo);
  mix-blend-mode: multiply;
  opacity: .16;
  pointer-events: none;
}
.vino__intestazione{ margin-bottom: var(--s-4); }
.vino__nome{
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-xl);
  line-height: 1.1;
  margin-bottom: var(--s-2);
}
.vino__denominazione{
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--gamma);
}
.vino__corpo{ max-width: var(--misura); }

/* la scheda tecnica */
.tecnica{
  margin: var(--s-4) 0 0;
  border-top: 1px solid var(--filo);
}
.tecnica div{
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--s-3);
  padding: .72rem 0;
  border-bottom: 1px solid var(--filo);
}
.tecnica dt{
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--pietra-cupa);
  padding-top: .28em;
}
.tecnica dd{ margin: 0; font-variant-numeric: tabular-nums; }
.tecnica dd.da-riempire{ color: var(--pietra); font-style: italic; }

/* «All'assaggio» e «A tavola»: appaiate su desktop, una sotto l'altra sotto
   i 900px. Sono due note brevi e parallele, stanno bene affiancate. */
.vino__note{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) clamp(1.6rem, 3vw, 2.6rem);
  margin-top: var(--s-5);
}
.vino__note h3{
  margin: 0 0 .6rem;
  font-size: var(--t-m);
}
.vino__note p{ margin: 0; }

/* -------------------------------------------------- 11. BLOCCHI DI PROSA */
.racconto{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.racconto--rovescio > *:first-child{ order: 2; }
.racconto__testo{ max-width: var(--misura); }
.racconto__testo h2, .racconto__testo h3{ margin-bottom: var(--s-3); }

.pilastri{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--filo);
}
.pilastro{
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--filo);
}
.pilastro .rombo{ margin-bottom: var(--s-2); }
.pilastro h3{ font-size: var(--t-m); margin-bottom: var(--s-2); }
.pilastro p{ font-size: var(--t-piccolo); color: var(--pietra-cupa); }

/* la citazione dell'apostrofo */
.apostrofo{
  text-align: center;
  padding-block: var(--s-6);
}
.apostrofo__segno{
  font-family: var(--display);
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: .7;
  color: var(--bordeaux);
  display: block;
  margin-bottom: var(--s-3);
  font-style: italic;
}
.apostrofo__spiega{
  font-family: var(--display);
  font-size: var(--t-l);
  font-weight: 300;
  line-height: 1.45;
  max-width: 30rem;
  margin: 0 auto var(--s-3);
}
.apostrofo__spiega b{ font-weight: 500; font-style: italic; color: var(--bordeaux); }

/* IL FREGIO — l'incisione del vigneto come fascia autonoma.
   Non sta più dietro al testo: là rendeva i paragrafi illeggibili.
   Qui è un segno grafico a sé, sfumato ai lati, che divide la sezione. */
.fregio{
  position: relative;
  width: 100%;
  height: clamp(120px, 20vw, 240px);
  overflow: hidden;
  margin-block: var(--s-5);
  pointer-events: none;
}
.fregio img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(110rem, 170%);
  max-width: none;
  mix-blend-mode: multiply;
  opacity: .46;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-composite: intersect;
}

/* il paragrafo che apre una sezione: centrato, in tondo grande */
.guida{
  font-family: var(--display);
  font-size: var(--t-m);
  font-weight: 300;
  line-height: 1.5;
  max-width: 32rem;
  margin-inline: auto;
}

/* due colonne di prosa, per i paragrafi che seguono il fregio */
.due-colonne{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3.6rem);
  max-width: 52rem;
  margin-inline: auto;
}
.due-colonne > p{
  margin: 0;
  border-top: 1px solid var(--filo);
  padding-top: var(--s-3);
}

/* la fotografia delle quattro bottiglie, in home */
.ritratto-gamma{
  margin: var(--s-5) 0 var(--s-4);
}
.ritratto-gamma .foto{ border: 1px solid var(--filo); }
.ritratto-gamma figcaption{ margin-top: var(--s-2); }

/* in attesa della fotografia vera: un riquadro in stile, non un buco */
.segnaposto-foto{
  aspect-ratio: var(--r-largo);
  border: 1px solid var(--filo-forte);
  background:
    repeating-linear-gradient(-45deg,
      transparent 0 14px,
      color-mix(in srgb, var(--pietra) 7%, transparent) 14px 15px),
    var(--carta);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  text-align: center;
  padding: var(--s-4);
}
.segnaposto-foto__rombi{ display: flex; gap: 1.4rem; }
.segnaposto-foto__rombi .rombo{ width: 12px; height: 20px; opacity: .55; }
.segnaposto-foto__voce{
  margin: 0;
  font-family: var(--testo);
  font-weight: 600;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--pietra-cupa);
}

/* I NOMI DEI VINI — due e due, nella pagina del podere */
.nomi{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 6vw, 4.5rem);
  max-width: 56rem;
  margin-inline: auto;
}
.nome-vino{
  display: block;
  position: relative;
  border: 0;
  border-top: 1px solid var(--filo-forte);
  padding: var(--s-4) 0 var(--s-5);
  color: inherit;
}
/* il filetto di gamma in cima: quattro segni di colore allineati sulla griglia */
.nome-vino::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.6rem;
  height: 2px;
  background: var(--gamma);
}
.nome-vino:hover{ color: inherit; }
.nome-vino .rombo{ margin-bottom: var(--s-2); }
.nome-vino__nome{
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-l);
  line-height: 1.15;
  margin-bottom: .25rem;
}
.nome-vino__tipo{
  display: block;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--pietra-cupa);
  margin-bottom: var(--s-3);
}
.nome-vino p{ font-size: var(--t-piccolo); margin: 0; }
.nome-vino__vai{
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--gamma);
  border-bottom: 1px solid transparent;
  transition: border-color var(--medio-t);
}
.nome-vino__vai::after{ content: " \2192"; }
.nome-vino:hover .nome-vino__vai{ border-bottom-color: var(--gamma); }

/* riquadro d'invito */
.invito{
  border: 1px solid var(--filo-forte);
  padding: clamp(1.8rem, 4vw, 3.2rem);
  text-align: center;
  background: var(--carta);
}
.invito h2{ margin-bottom: var(--s-3); }
.invito__azioni{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-4);
}

.bottone{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--inchiostro);
  padding: .82rem 1.7rem .78rem;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--inchiostro);
  background: transparent;
  transition: background var(--medio-t), color var(--medio-t), border-color var(--medio-t);
}
.bottone:hover{ background: var(--inchiostro); color: var(--carta-alta); border-color: var(--inchiostro); }
.bottone--pieno{ background: var(--bordeaux); border-color: var(--bordeaux); color: var(--carta-alta); }
.bottone--pieno:hover{ background: var(--bordeaux-cupo); border-color: var(--bordeaux-cupo); color: var(--carta-alta); }
.bottone--chiaro{ border-color: var(--carta); color: var(--carta); }
.bottone--chiaro:hover{ background: var(--carta); color: var(--inchiostro); }

/* etichetta di stato: «in arrivo» */
.stato{
  display: inline-block;
  border: 1px solid currentColor;
  padding: .2rem .7rem .12rem;
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 600;
  color: var(--gamma);
  vertical-align: .2em;
}

/* ------------------------------------------------ 12. DOMANDE E RISPOSTE */
.qa{ border-top: 1px solid var(--filo); }
.qa__voce{ border-bottom: 1px solid var(--filo); }
.qa__voce summary{
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) 2.4rem var(--s-3) 0;
  position: relative;
  font-family: var(--display);
  font-size: var(--t-m);
  line-height: 1.35;
}
.qa__voce summary::-webkit-details-marker{ display: none; }
.qa__voce summary::after{
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  width: 9px; height: 15px;
  margin-top: -7px;
  background: var(--pietra);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transition: background var(--medio-t), transform var(--medio-t);
}
.qa__voce[open] summary::after{ background: var(--bordeaux); transform: rotate(90deg); }
.qa__voce summary:hover::after{ background: var(--bordeaux); }
.qa__risposta{ padding: 0 0 var(--s-4); max-width: var(--misura); }

/* --------------------------------------------------- 13. CONTATTI E MAPPA */
.contatti{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--filo);
}
.contatto{
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--filo);
}
.contatto h3{
  font-family: var(--testo);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--pietra-cupa);
  margin-bottom: var(--s-2);
}
.contatto p, .contatto address{
  font-style: normal;
  font-family: var(--display);
  font-size: var(--t-m);
  line-height: 1.45;
}
.contatto a{ border-bottom-color: var(--filo-forte); }

.mappa{
  border: 1px solid var(--filo-forte);
  aspect-ratio: 16 / 10;
  width: 100%;
  filter: sepia(.32) saturate(.72) contrast(1.04);
  background: var(--carta);
}

/* ------------------------------------------------------------ 14. PIEDE */
.piede{
  background: var(--inchiostro);
  color: var(--carta);
  padding-block: var(--s-7) var(--s-5);
  margin-top: 0;
  --filo: color-mix(in srgb, var(--carta) 20%, transparent);
  --filo-forte: color-mix(in srgb, var(--carta) 36%, transparent);
}
.piede__alto{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--s-5);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--filo);
}
.piede__marchio img{
  width: 46px;
  filter: invert(1) brightness(1.8);
  margin-bottom: var(--s-3);
  opacity: .9;
}
.piede__nome{
  font-family: var(--display);
  font-style: italic;
  font-size: 1.45rem;
  margin-bottom: var(--s-2);
}
.piede h3{
  font-family: var(--testo);
  font-size: var(--t-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: color-mix(in srgb, var(--carta) 62%, transparent);
  margin-bottom: var(--s-3);
}
.piede ul{ list-style: none; margin: 0; padding: 0; }
.piede li{ margin-bottom: .45rem; }
.piede a{ border-bottom-color: transparent; }
.piede a:hover{ color: var(--carta-alta); border-bottom-color: var(--filo-forte); }
.piede address{ font-style: normal; line-height: 1.75; }
.piede__basso{
  padding-top: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-piccolo);
  color: color-mix(in srgb, var(--carta) 56%, transparent);
}
.piede__legale{ max-width: 34rem; font-size: .84rem; line-height: 1.6; }

/* ------------------------------------------------------- 15. WHATSAPP */
/* Il bottone fisso in basso a destra. Non è il verde di WhatsApp: quello
   spaccherebbe la palette. C'è solo il glifo, che è la parte riconoscibile,
   nei colori del sito, e nessuna ombra come tutto il resto.
   Nessuna scritta: il nome sta nell'aria-label e nel title.
   Cerchio di 4rem (64px), ben sopra la soglia dei 44px del dito, e resta
   della stessa misura a ogni schermo: non rimpicciolisce e non si nasconde mai.

   ⚠️ ECCEZIONE VOLUTA, chiesta dal cliente il 5 settembre 2026.
   La direzione «Alberese» dice angoli sempre vivi, nessun border-radius da
   nessuna parte: questo è l'UNICO punto del sito che lo infrange, perché il
   bottone WhatsApp è un oggetto di sistema e si riconosce dalla forma tonda.
   Non è una svista: non raddrizzarlo. E non prenderlo a modello — il tondo
   resta confinato qui, ogni altro elemento tiene gli angoli vivi. */
.whatsapp{
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border-radius: 50%;
  background: var(--inchiostro);
  color: var(--carta);
  border: 1px solid var(--inchiostro);
  line-height: 0;
  text-decoration: none;
  transition: background var(--medio-t), border-color var(--medio-t);
}
.whatsapp:hover,
.whatsapp:focus-visible{
  background: var(--bordeaux);
  border-color: var(--bordeaux);
  color: var(--carta);
}
.whatsapp__glifo{ flex: none; display: block; width: 32px; height: 32px; }


/* --------------------------------------------------------- 16. MOVIMENTO */
/* Il contenuto è visibile di partenza: l'animazione si aggiunge solo con JS. */
.js .rivela{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lento), transform var(--lento);
}
.js .rivela.visibile{ opacity: 1; transform: none; }
.js .rivela--ritardo-1{ transition-delay: .1s; }
.js .rivela--ritardo-2{ transition-delay: .2s; }
.js .rivela--ritardo-3{ transition-delay: .3s; }

/* -------------------------------------------------------- 17. SCHERMI PICCOLI */
@media (max-width: 900px){
  :root{ --testata-h: 4.1rem; }

  .apri-menu{ display: flex; }

  .navigazione{
    position: fixed;
    inset: 0;
    background: var(--fondo);
    flex-direction: column;
    justify-content: center;
    gap: var(--s-4);
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--medio-t), visibility var(--medio-t);
  }
  .menu-aperto .navigazione{ opacity: 1; visibility: visible; }
  .navigazione a{
    font-family: var(--display);
    font-size: var(--t-l);
    text-transform: none;
    letter-spacing: .04em;
    font-weight: 300;
  }
  .navigazione a::after{ bottom: -.1rem; }
  .menu-aperto, .menu-aperto body{ overflow: hidden; }
  .menu-aperto .apri-menu{ position: relative; z-index: 96; color: var(--inchiostro); }

  .vino__griglia{ grid-template-columns: 1fr; gap: var(--s-4); }
  .vino__etichetta{ position: static; max-width: 17rem; }
  .vino__etichetta--bottiglia{ max-width: 100%; justify-content: flex-start; }
  .vino__etichetta--bottiglia img{ height: 26rem; }
  /* qui .vino__etichetta non è più sticky: senza questo il velo perde l'aggancio */
  .vino__etichetta--scatto{ position: relative; }
  .vino__note{ grid-template-columns: 1fr; }

  .racconto--rovescio > *:first-child{ order: 0; }

  .cifra{ border-left: 0; border-top: 1px solid var(--filo); }
  .cifra:first-child{ border-top: 0; }
  .cifre{ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
  .cifre .cifra{ border-left: 1px solid var(--filo); border-top: 0; }
  .cifre .cifra:nth-child(odd){ border-left: 0; }

  .tecnica div{ grid-template-columns: 1fr; gap: .1rem; }
  .tecnica dt{ padding-top: 0; }

  .pilastro, .contatto{ padding-right: 0; }
  .nomi{ grid-template-columns: 1fr; }
  .nome-vino{ padding-bottom: var(--s-4); }
}

@media (max-width: 560px){
  :root{ --s-8: 3.6rem; --s-7: 3rem; }
  .apertura{ min-height: min(88svh, 44rem); }

  /* Due colonne, e l'eventuale cifra dispari occupa tutta la riga invece
     di restare sola in un angolo. */
  .cifre{ grid-template-columns: 1fr 1fr; }
  .cifre .cifra:nth-child(n+3){ border-top: 1px solid var(--filo); }
  .cifre .cifra:last-child:nth-child(odd){ grid-column: 1 / -1; border-left: 0; }
  .fascia--piena{ min-height: 16rem; }
  /* si avvicina all'angolo, ma non rimpicciolisce: resta un bersaglio da dito */
  .whatsapp{ right: .6rem; bottom: .6rem; }
  .segno{ max-width: 14rem; }
}

/* -------------------------------------------------------- 18. RIGUARDO */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .rivela{ opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ 19. STAMPA */
@media print{
  .testata, .piede, .whatsapp, .scendi, .apertura__sfondo{ display: none !important; }
  body{ background: #fff; color: #000; font-size: 11pt; }
  .sezione{ padding-block: 1.5rem; }
  a{ border: 0; }
}