/* ============================================================
   Caterina Riva · foglio di stile
   Registro gioielleria: nero caldo, un respiro perla, filo d'oro.

   Tre cose tengono in piedi il registro, e vanno difese insieme:
   la scala tipografica esagerata, la luce dentro il nero, il vuoto.
   Se una delle tre si abbassa, la pagina torna a sembrare uno schema.

   Da questa versione se ne aggiunge una quarta: il dettaglio.
   Un marchio di gioielli non fotografa il prodotto intero su fondo
   neutro, fotografa da vicino e addosso a qualcuno. Sul sito questo
   doveva diventare anche una banda dedicata al gesto, tolta il 17
   agosto perche' senza una fotografia vera restava solo un vuoto fra
   due sezioni piene. Il dettaglio resta nelle cornicette d'angolo,
   che sono il filo del marchio interrotto invece che una cornice.
   ============================================================ */

/* ---------- 1. Colori e misure ---------- */

:root {
  /* Palette. Nessuno di questi valori e' campionato da un esecutivo:
     sono decisi, e vanno riverificati quando salta fuori il vettoriale
     delle etichette. Contrasti ricalcolati sul nero nuovo. */

  /* Il nero e' passato da #0B0B0C a un carbone appena caldo. Il vecchio
     virava impercettibilmente al blu, che accanto a un oro caldo raffredda
     tutta la pagina. Lo scarto di luminanza e' irrilevante: i rapporti di
     contrasto restano quelli calcolati sul nero precedente. */
  --nero:        #0C0B0A;
  --superficie:  #15130F;

  --oro:         #A6A6A6;   /* prova argento, stessa luminanza dell'oro: 8,1:1 sul nero */
  --chiaro:      #F2ECE4;   /* 16,8:1, bianco caldo, non bianco puro */
  --grigio:      #8A8078;   /* 5,1:1, solo testo secondario */

  /* Il respiro chiaro. Non e' bianco e non e' beige: e' la carta di una
     scatola di gioielleria. Vive in una sezione sola di tutta la home,
     perche' Riva resta nera dominante: il bianco dominante e' di Fazan. */
  --perla:       #EAE2D6;
  --inchiostro:  #14120E;   /* 14,7:1 sulla perla */
  --grigio-perla:#6B635A;   /* 4,6:1 sulla perla, solo secondario */

  /* L'oro di marca sulla perla fa 3,8:1, cioe' non passa per il testo
     piccolo, ed e' proprio a corpo minimo che l'oro serve. Anche l'oro
     "su bianco" del design system, #8A6E2F, si ferma a 3,8 su questo
     fondo: e' calcolato sul bianco puro, e la perla e' piu' scura.
     Quindi la sezione chiara ha il suo, piu' scuro di due passi. */
  --oro-perla:   #595959;   /* prova argento, stessa luminanza: 5,4:1 sulla perla */

  /* Ritmo verticale. Il nero vuoto e' meta' del progetto. */
  --respiro:       clamp(6rem, 16vh, 13rem);
  --respiro-mezzo: clamp(3rem, 7vh, 5rem);

  --colonna: 1180px;
  --bordo:   clamp(1.5rem, 5vw, 4rem);

  --sparso:      0.24em;
  --sparsissimo: 0.5em;

  /* Cornicette d'angolo. Il lato lungo e quanto sporgono dal contenuto. */
  --angolo:       clamp(22px, 3.4vw, 42px);
  --angolo-fuori: clamp(9px, 1.4vw, 18px);

  /* Una sola curva per tutto il sito. Parte decisa e si posa piano:
     e' la differenza fra un movimento che ha una massa e una tendina. */
  --curva: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 2. Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nero);
  color: var(--chiaro);
  font-family: var(--testo);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.contenitore {
  width: 100%;
  max-width: var(--colonna);
  margin-inline: auto;
  padding-inline: var(--bordo);
}

.salta {
  position: absolute; left: -9999px;
  background: var(--chiaro); color: var(--nero);
  padding: .75rem 1.25rem; z-index: 90;
}
.salta:focus { left: var(--bordo); top: .75rem; }

:focus-visible { outline: 1px solid var(--oro); outline-offset: 4px; }

/* ---------- 3. La grana ---------- */

/* Il nero pieno senza niente dentro non sembra velluto, sembra un
   rettangolo. Questa e' una grana fine sopra tutto, fissa e non
   cliccabile, al 4%. Non si deve vedere: si deve smettere di vedere il
   vuoto. Turbolenza SVG inline, quindi zero richieste di rete. */
.grana {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .042;
  filter: saturate(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Tipografia ---------- */

/* Divisione dei ruoli, decisa con la direzione gioielleria:
   Bodoni resta dove il femminile del marchio deve sentirsi, cioe' il
   wordmark, le frasi del manifesto e le occasioni dei vini. Tutto il
   resto, occhielli, titoli di sezione, navigazione, dati, passa a Jost
   maiuscolo spaziato larghissimo. E' la formula delle maison di
   gioielli, e tiene la Didone come accento invece che come rumore. */

/* Occhiello. Minuscolo e larghissimo: e' il contrappeso alla scala
   enorme dei titoli, e senza quel salto la pagina resta media ovunque. */
.occhiello {
  font-family: var(--testo);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: var(--sparsissimo);
  text-indent: var(--sparsissimo);
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 var(--respiro-mezzo);
}

/* Titolo di sezione. Jost leggerissimo, maiuscolo, spaziato: e' la voce
   larga e calma delle vetrine. A questo corpo il peso 200 tiene, sotto i
   2 rem no e va portato a 300. */
.titolo-sezione {
  font-family: var(--testo);
  font-weight: 200;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  letter-spacing: clamp(.06em, .22vw, .14em);
  text-indent: clamp(.06em, .22vw, .14em);
  text-transform: uppercase;
  line-height: 1.14;
  margin: 0;
}

.secondario { color: var(--grigio); }

/* ---------- 5. Il filo e le cornicette ---------- */

/* Il filo deriva dalla riga sotto RIVA nel marchio. Si allinea alla
   larghezza del testo che chiude, non alla colonna. Sempre un pixel: a
   due diventa un bordo qualsiasi. */
.filo {
  display: block; width: 100%; height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--oro), rgba(166,166,166,.25));
}

/* Le cornicette d'angolo sono lo stesso filo, interrotto. Due angoli
   opposti e mai quattro: quattro chiudono una cornice, e le cornici sono
   nella colonna dei no del design system. Due segnano un'inquadratura,
   che e' quello che fa una gioielleria quando incastona.
   Stanno FUORI dal contenuto, quindi il contenitore non deve tagliarle:
   niente overflow hidden su .cornice. */
.cornice { position: relative; }
.cornice::before,
.cornice::after {
  content: "";
  position: absolute;
  width: var(--angolo); height: var(--angolo);
  border: 0 solid rgba(166, 166, 166, .5);
  pointer-events: none;
  z-index: 2;
}
.cornice::before {
  top: calc(var(--angolo-fuori) * -1); left: calc(var(--angolo-fuori) * -1);
  border-top-width: 1px; border-left-width: 1px;
}
.cornice::after {
  bottom: calc(var(--angolo-fuori) * -1); right: calc(var(--angolo-fuori) * -1);
  border-bottom-width: 1px; border-right-width: 1px;
}
/* Sulla perla l'oro chiaro sparisce, quindi le cornicette prendono
   l'oro scuro della sezione. */
.perla .cornice::before,
.perla .cornice::after { border-color: rgba(89, 89, 89, .45); }

/* ---------- 6. Bottone a filetto ---------- */

/* Un rettangolo di un pixel e niente dentro. Al passaggio non cambia
   colore: si riempie da sinistra, cioe' fa lo stesso gesto del filo che
   cresce sotto le voci di menu. */
.bottone {
  position: relative;
  display: inline-block;
  overflow: hidden;
  /* Il velo sta a z-index -1, quindi il bottone deve fare contesto suo:
     senza isolation finirebbe dietro al fondo della sezione invece che
     dietro alla sola scritta. */
  isolation: isolate;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding: 1.05rem 2.4rem;
  border: 1px solid rgba(166, 166, 166, .45);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: var(--sparsissimo);
  text-indent: var(--sparsissimo);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chiaro);
  transition: color .55s var(--curva), border-color .55s var(--curva);
}
.bottone::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--curva);
}
.bottone:hover { color: var(--nero); border-color: var(--oro); }
.bottone:hover::before { transform: scaleX(1); }

/* ---------- 7. Barra ---------- */

/* Trasparente in cima, prende fondo e filo solo quando si scorre.
   Una barra che sta li' col suo bordo fin dal primo istante taglia
   l'apertura in due e le toglie l'unica cosa che ha, cioe' l'ampiezza. */
.barra {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .6s var(--curva), border-color .6s var(--curva);
}
.barra.staccata {
  background: rgba(12, 11, 10, .72);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(166, 166, 166, .16);
}

.barra .contenitore {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 84px; flex-wrap: nowrap;
}

/* Il marchio non si restringe mai. Su Fazan era un elemento flessibile
   senza freno e a 320px si schiacciava da 84 a 45 px, perche' assorbiva
   lui tutto lo spazio che la navigazione chiedeva in piu'. */
.barra-marchio { flex: 0 0 auto; }

.barra nav {
  margin-left: auto; display: flex; align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem); flex-wrap: nowrap;
}

.barra nav a {
  position: relative;
  font-size: .625rem; font-weight: 400;
  letter-spacing: var(--sparso); text-transform: uppercase;
  text-decoration: none; color: var(--chiaro);
  white-space: nowrap; padding-block: .5rem;
}
/* Il filo cresce da sinistra invece di accendersi: e' lo stesso gesto
   del marchio, ripetuto in piccolo. */
.barra nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--oro);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--curva);
}
.barra nav a:hover { color: var(--oro); }
.barra nav a:hover::after { transform: scaleX(1); }

.lingua { color: var(--grigio) !important; }
.lingua[aria-current="true"] { color: var(--oro) !important; }

/* La voce del vino sulla cui pagina ci si trova resta accesa come al
   passaggio del mouse, invece di comportarsi come le altre due. */
.barra nav a[aria-current="page"] { color: var(--oro); }
.barra nav a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 760px) {
  .barra nav .voce-vino { display: none; }
  .barra .contenitore { min-height: 68px; }
}

/* Il marchio della barra non si restringe mai, quindi sotto una certa
   larghezza a sbordare e' tutta la barra. Col segnaposto tipografico
   serviva togliere "CATERINA" a 620px; con la forma ridotta del marchio
   vero il problema e' meno grave, perche' quella e' gia' il solo RIVA e
   pesa 68px al minimo. Resta la stretta sulle voci. */
@media (max-width: 620px) {
  .barra nav { gap: 1.1rem; }
}

/* ---------- 8. Il marchio ---------- */

/* Dal 12 agosto qui c'e' l'esecutivo vettoriale e non piu' un segnaposto
   composto con un font. Il corsivo di "proprieta'" e' arte: nessuna
   tipografia libera lo riproduce, e infatti il segnaposto lo faceva con
   un corsivo Bodoni che era un'altra cosa.

   Il disegno sta una volta sola in cima alla pagina come <g id="segno">,
   e le tre comparse lo richiamano con <use>. Il fill e' currentColor,
   quindi il colore arriva dal CSS: chiaro sul nero, e domani inchiostro
   se il marchio finisce su una sezione perla. */
.marchio {
  display: inline-block; margin: 0;
  text-decoration: none; line-height: 0;
  color: var(--chiaro);
}

/* La sorgente non deve occupare spazio ne' essere letta. Non si nasconde
   con display:none: in quel caso alcuni browser smettono di risolvere i
   <use> che puntano dentro. */
.marchio-sorgente {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.marchio-arte { display: block; width: 100%; height: auto; }

/* Forma ridotta per la barra: RIVA piu' il filo, ritagliati dal viewBox.
   Proporzione 2,6:1 contro l'1,35:1 del marchio intero. Il ritaglio e'
   misurato sul disegno, non a occhio: CATERINA finisce a quota 18,5,
   RIVA sta fra 36,3 e 109,4, il filo fra 127,6 e 130,6. Il viewBox parte
   da 34 e alto 98 li prende tutti e due e lascia fuori il resto. */
.barra-marchio .marchio-arte { width: clamp(68px, 7vw, 92px); }

/* Versione da apertura. La scala qui e' il progetto: il marchio a corpo
   enorme assottiglia i suoi filetti da solo, ed e' quello il registro.
   La misura e' in vw e non in percentuale della colonna, perche' la
   colonna dell'apertura cambia proporzione al primo punto di rottura. */
.marchio--apertura { display: block; }
.marchio--apertura .marchio-arte { width: clamp(230px, 36vw, 500px); }

.marchio--piede .marchio-arte { width: clamp(150px, 20vw, 200px); }

/* ---------- 9. Apertura ---------- */

.apertura {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: center;
  margin-top: -84px; padding-top: 84px;   /* passa sotto la barra trasparente */
  overflow: hidden;
}

/* La luce dentro il nero. Un alone caldo largo e bassissimo, dietro al
   marchio: e' quello che toglie l'effetto rettangolo. Su Fazan la prima
   versione era troppo ampia e leggeva come una velatura marrone su tutta
   la pagina, quindi qui e' stretto e tenuto sotto il 10%. */
.apertura::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 44% at 26% 44%, rgba(166,166,166,.15), transparent 68%),
    radial-gradient(90% 70% at 78% 8%,  rgba(242,236,228,.05), transparent 62%);
  pointer-events: none;
}
/* Vignettatura: chiude i bordi e fa cadere l'occhio al centro sinistra. */
.apertura::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 45%, transparent 42%, rgba(0,0,0,.55));
  pointer-events: none;
}

.apertura .contenitore {
  position: relative; z-index: 1;
  /* Prima una griglia a due colonne, testo e fotografia. Senza fotografia
     resta una colonna sola: il vuoto a destra fa il lavoro che faceva la
     seconda colonna, non c'e' bisogno di riempirlo. */
  /* Respiro suo, piu' corto di quello delle sezioni: con il respiro pieno
     l'apertura usciva alta 1127px su una finestra da 900 e il marchio e la
     riga non stavano insieme sullo schermo. Un'apertura che non si vede
     tutta non e' ampia, e' solo lunga. */
  padding-block: clamp(4rem, 10vh, 7rem);
  max-width: none;
  /* Rientro calcolato a mano invece che dalla colonna centrata, cosi' il
     testo resta allineato al resto della pagina. Il 100% e non 100vw
     apposta: 100vw comprende la barra di scorrimento e sborderebbe di
     quindici pixel su Windows. */
  padding-left: max(var(--bordo), calc((100% - var(--colonna)) / 2 + var(--bordo)));
  padding-right: var(--bordo);
}

.apertura-riga {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.25;
  max-width: 20ch;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
}

/* I due micro testi in fondo all'apertura, uno per angolo. Servono a
   riempire la fascia bassa senza aggiungere contenuto vero: sono la
   riga di colophon delle pagine editoriali. */
.apertura-piede {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 2rem;
  /* Stesso rientro del contenuto a sinistra, bordo pieno a destra: la
     riga corre per tutta l'apertura come il colophon di una pagina. */
  padding-left: max(var(--bordo), calc((100% - var(--colonna)) / 2 + var(--bordo)));
  padding-right: var(--bordo);
  font-size: .5625rem;
  letter-spacing: var(--sparso);
  text-transform: uppercase;
  color: rgba(138,128,120,.85);
}
.apertura-piede p { margin: 0; }
/* Lo "scorri" porta un filo verticale corto, che e' il filo del marchio
   girato di novanta gradi. */
.apertura-scorri { display: flex; align-items: center; gap: .75rem; }
.apertura-scorri::after {
  content: ""; width: 1px; height: clamp(28px, 5vh, 44px);
  background: linear-gradient(180deg, rgba(166,166,166,.7), rgba(166,166,166,0));
}

@media (max-width: 980px) {
  /* .apertura e' un flex, e la riga in fondo e' il suo secondo figlio:
     togliendole solo il position:absolute si mette DI FIANCO al contenuto
     invece che sotto, e i tre nomi dei vini vanno a capo in colonna.
     Visto a 780px il 12 agosto. Serve mandarla a capo per intero. */
  .apertura { min-height: auto; flex-wrap: wrap; }
  .apertura-piede {
    position: static;
    flex: 0 0 100%;
    margin-top: var(--respiro-mezzo);
  }
}
@media (max-width: 560px) {
  .apertura-piede { flex-direction: column; gap: 1.25rem; }
}

/* ---------- 10. Le fotografie vere ---------- */

/* Il fondo resta nero: le bottiglie hanno il canale alfa e ci galleggiano
   sopra. Niente piu' segnaposto nel sito: Eliana non ha altre fotografie
   da fornire oltre alle tre bottiglie, quindi ogni punto che le
   aspettava (l'apertura, Il gesto) e' stato tolto invece di lasciarci un
   riquadro vuoto. Se un domani arrivano fotografie nuove, si aggiungono
   qui come nuove classi .foto, sul modello di .foto--bottiglia. */
.foto { position: relative; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: contain; }
.foto--bottiglia { height: clamp(340px, 46vh, 540px); }

/* Due cose sotto la bottiglia, e nessuna delle due e' un effetto.
   L'alone e' lo stesso "luce dentro il nero" del resto del sito, tenuto
   basso: due delle tre bottiglie sono vetro quasi nero su fondo nero e
   senza un fiato dietro il profilo si perde. Il filo alla base la appoggia
   invece di lasciarla sospesa, ed e' il filo del marchio. */
.foto--bottiglia::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(52% 42% at 50% 62%, rgba(166,166,166,.10), transparent 72%);
}
.foto--bottiglia::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(166,166,166,.5), transparent 70%);
}
.foto--bottiglia img { position: relative; z-index: 1; }

/* ---------- 11. Sezioni e filigrana ---------- */

.sezione { padding-block: var(--respiro); }

/* La filigrana: il wordmark a corpo gigantesco dietro al contenuto, quasi
   spento. E' il mestiere delle maison, e qui ha una ragione in piu': il
   marchio compare grande due volte senza mai ripetersi uguale.
   Sta al 3,5%, che su nero e' il punto in cui si sente ma non si legge.
   Se si alza anche solo al 6% diventa una scritta e ruba la scena. */
.con-filigrana { position: relative; overflow: hidden; }
.filigrana {
  position: absolute; left: 50%; bottom: -2%;
  transform: translateX(-50%);
  width: min(96%, 1400px);
  height: auto;
  color: var(--chiaro);
  opacity: .035;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.con-filigrana .contenitore { position: relative; z-index: 1; }

/* ---------- 12. La sezione perla ---------- */

/* L'unico momento chiaro della home. Serve a due cose: dare alla pagina
   un respiro che il nero da solo non da', e mettere il manifesto dove si
   legge davvero. Resta decentrato, quindi non diventa Fazan: la
   differenza fra i due marchi non e' il colore della sezione, e' che
   Fazan e' chiaro dominante e centrato e Riva e' nera e spostata. */
.perla {
  background: var(--perla);
  color: var(--inchiostro);
  /* Due fili d'oro scuro a chiudere sopra e sotto, cosi' il blocco chiaro
     e' incastonato e non incollato. */
  border-block: 1px solid rgba(89, 89, 89, .35);
}
.perla .occhiello { color: var(--oro-perla); }

/* Manifesto. Decentrato, e in Bodoni: e' il punto in cui la Didone deve
   farsi leggere, perche' e' li' che il registro si decide. Nel primo giro
   tutto il testo leggibile era in Jost e il femminile spariva. */
/* La misura NON si scrive in ch qui dentro. Il ch si calcola sul font
   dell'elemento, e .manifesto e' in Jost mentre a essere grandi sono i
   suoi <p> in Bodoni: 26ch valevano 26 caratteri di Jost a 18px, cioe'
   una colonna da 230 px, e "Caterina Riva non racconta una collina"
   usciva su cinque righe. Misurato a schermo il 12 agosto. */
.manifesto { max-width: clamp(20rem, 44vw, 38rem); margin-left: clamp(0px, 20vw, 330px); }

.manifesto p {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.24;
  margin: 0 0 .7em;
}
.manifesto p:last-child { margin-bottom: 0; }
.manifesto em { font-style: italic; color: var(--oro-perla); }

/* ---------- 13. I tre vini ---------- */

/* Scalati, non allineati. Tre riquadri identici in fila sono la cosa piu'
   templata che esista, ed e' quello che avevo costruito dopo aver scritto
   nel design system che Riva e' asimmetrica dove Fazan e' centrato. */
.vini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
/* Diagonale discendente, non zigzag. Con 0 / 120 / 48 lo scarto sembrava
   un errore di allineamento invece di una scelta: tre elementi hanno
   bisogno di una direzione per leggersi come intenzionali. */
.vino:nth-child(1) { margin-top: 0; }
.vino:nth-child(2) { margin-top: clamp(2.5rem, 6vw, 5.5rem); }
.vino:nth-child(3) { margin-top: clamp(5rem, 12vw, 11rem); }

.vino { display: flex; flex-direction: column; text-decoration: none; }

.vino-nome {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.04;
  margin: var(--respiro-mezzo) 0 0;
  display: inline-block;
  transition: color .55s var(--curva);
}
.vino-nome::after {
  content: ""; display: block; height: 1px; margin-top: .55rem;
  background: linear-gradient(90deg, var(--oro), rgba(166,166,166,.2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--curva);
}
.vino:hover .vino-nome, .vino:focus-visible .vino-nome { color: var(--oro); }
.vino:hover .vino-nome::after, .vino:focus-visible .vino-nome::after { transform: scaleX(1); }

/* Le cornicette si accendono al passaggio: da mezzo tono a pieno. E' il
   gesto piu' piccolo del sito ed e' quello che fa sembrare la scheda un
   oggetto invece di un riquadro. */
.vino .cornice::before, .vino .cornice::after {
  transition: border-color .6s var(--curva);
}
.vino:hover .cornice::before, .vino:hover .cornice::after,
.vino:focus-visible .cornice::before, .vino:focus-visible .cornice::after {
  border-color: var(--oro);
}

.vino .foto img { transition: transform 1s var(--curva); }
.vino:hover .foto img { transform: translateY(-8px); }

.vino-denominazione {
  font-size: .625rem; font-weight: 500;
  letter-spacing: var(--sparsissimo); text-indent: var(--sparsissimo);
  text-transform: uppercase; color: var(--oro);
  margin: 1.2rem 0 0;
}

.vino-occasione {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--grigio);
  margin: 1.1rem 0 0;
}

@media (max-width: 900px) {
  .manifesto { margin-left: 0; max-width: 20ch; }
  .vini { grid-template-columns: 1fr; gap: var(--respiro); }
  .vino:nth-child(n) { margin-top: 0; }
}

/* ---------- 14. Movimento ---------- */

/* Niente compare di colpo: sale con un velo che si toglie. La curva e'
   la stessa di tutto il sito, e la durata e' lunga apposta. */
/* Lo stato nascosto e' condizionato a .js, messo dalla prima riga di
   script nella pagina. Senza quel guardiano, se il JavaScript non parte
   per qualsiasi motivo tutto resta a opacita' zero e la pagina e' bianca:
   un difetto invisibile finche' funziona e totale quando non funziona. */
.js [data-rivela] {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(6px);
  transition: opacity 1.1s var(--curva), transform 1.1s var(--curva), filter 1.1s var(--curva);
}
.js [data-rivela].dentro { opacity: 1; transform: none; filter: none; }
.js [data-rivela][data-ritardo="1"] { transition-delay: .12s; }
.js [data-rivela][data-ritardo="2"] { transition-delay: .24s; }
.js [data-rivela][data-ritardo="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .js [data-rivela] { opacity: 1; transform: none; filter: none; }
}

/* ---------- 15. Piede ---------- */

.piede {
  position: relative;
  padding-block: var(--respiro) var(--respiro-mezzo);
  font-size: .8125rem;
  color: var(--grigio);
}
.piede::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 100% at 50% 100%, rgba(166,166,166,.07), transparent 70%);
}
.piede .contenitore { position: relative; }

.piede-alto {
  display: flex; flex-wrap: wrap;
  gap: var(--respiro-mezzo);
  justify-content: space-between; align-items: flex-end;
  margin-bottom: var(--respiro-mezzo);
}

.piede a {
  text-decoration: none;
  border-bottom: 1px solid rgba(166,166,166,.28);
  padding-bottom: .15em;
  transition: color .5s var(--curva), border-color .5s var(--curva);
}
.piede a:hover { color: var(--oro); border-bottom-color: var(--oro); }

.piede-recapito p { margin: 0 0 .4rem; }
.piede-recapito p:last-child { margin: 0; }

.piede-legale {
  font-size: .625rem; letter-spacing: .14em; line-height: 2.2;
  text-transform: uppercase; margin: 1.6rem 0 0;
  color: rgba(138,128,120,.8);
}

.piede-avviso {
  margin: var(--respiro-mezzo) 0 0; padding-top: 1.25rem;
  border-top: 1px solid rgba(138, 128, 120, .16);
  font-size: .5625rem; letter-spacing: var(--sparso);
  text-transform: uppercase; color: rgba(138,128,120,.7);
}

/* ---------- 16. Pagina prodotto ---------- */

/* L'apertura qui non e' quella della home: niente marchio enorme, e'
   il vino stesso ad avere lo spazio grande. Griglia a due colonne, testo
   e fotografia: la fotografia sta a destra sul desktop e sopra il testo
   su mobile, perche' su un file di prodotto la prima cosa che risponde
   e' l'etichetta. Qui la fotografia c'e' davvero (le tre bottiglie),
   quindi la griglia resta: e' il caso opposto della home, dove le
   colonne pensate per una foto che non arrivava sono state tolte. */
.apertura-prodotto { padding-block: clamp(6.5rem, 16vh, 10rem) var(--respiro); }

.torna-ai-vini {
  display: inline-block;
  font-size: .625rem; font-weight: 500;
  letter-spacing: var(--sparsissimo); text-indent: var(--sparsissimo);
  text-transform: uppercase; text-decoration: none;
  color: var(--grigio);
  margin-bottom: var(--respiro);
  transition: color .5s var(--curva);
}
.torna-ai-vini::before { content: "← "; }
.torna-ai-vini:hover { color: var(--oro); }

.prodotto-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.prodotto-testo { max-width: 36ch; }

.prodotto-occasione {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-style: italic;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  line-height: 1.6;
  color: var(--grigio);
  margin: var(--respiro-mezzo) 0 0;
}

.prodotto-grid .foto--bottiglia { height: clamp(380px, 58vh, 640px); }

@media (max-width: 900px) {
  .prodotto-grid { grid-template-columns: 1fr; gap: var(--respiro-mezzo); }
  .prodotto-grid .cornice { order: -1; }
}

/* Scheda tecnica: il registro qui e' l'opposto della pagina, di proposito.
   E' l'unico punto del sito dove il dato sta senza aggettivo, in griglia,
   come un certificato invece che come un testo. Vive sulla perla perche'
   un certificato si legge su carta, non sul velluto nero. */
.scheda-tecnica { margin: 0; max-width: 46rem; }
.scheda-riga {
  display: grid;
  grid-template-columns: minmax(140px, 24ch) 1fr;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: 1.5rem;
  border-top: 1px solid rgba(89,89,89,.22);
}
.scheda-riga:last-child { border-bottom: 1px solid rgba(89,89,89,.22); }
.scheda-riga dt {
  font-size: .625rem; font-weight: 500;
  letter-spacing: var(--sparsissimo); text-indent: var(--sparsissimo);
  text-transform: uppercase; color: var(--oro-perla);
  margin: 0;
}
.scheda-riga dd {
  font-size: 1rem; line-height: 1.75;
  color: var(--inchiostro);
  margin: 0;
}
@media (max-width: 620px) {
  .scheda-riga { grid-template-columns: 1fr; gap: .4rem; }
}