/* =====================================================================
   LETARGO · buio e silenzio
   Direzione "la stanza buia" (tasteskill, seme 2070894730), con il
   colori scelti da Eliana: un solo fondo scuro dall'alto in fondo, e
   dentro poche cose accese, ognuna con il suo spazio intorno. Titoli in
   Bodoni Moda, testo in Jost sottile; il nome è il logo vettoriale.
   L'oro della lamina solo sull'azione e sul marchio.
   ===================================================================== */

@font-face {
  font-family: 'Bodoni Moda';
  src: url(../font/bodoni-moda-var.woff2) format('woff2');
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url(../font/jost-var.woff2) format('woff2');
  font-weight: 300 500;
  font-display: swap;
}

:root {
  --buio:    #0b0a09;  /* il fondo, da cima a fondo */
  --pietra:  #151311;  /* l'unica superficie: la stanza degli orsi */
  --carta:   #eae8e3;  /* l'inchiostro, mai bianco puro */
  --tenue:   #a9a196;  /* solo per le note secondarie (8:1 sul buio) */
  --oro:     #c9a75a;  /* la lamina: l'azione e il marchio, nient'altro */
  --argento: #c3c9cc;
  --rosa:    #e0a0a8;
  --roccia-accesa: #7a6a55;

  --f-titoli: 'Bodoni Moda', 'Bodoni 72', Georgia, serif;
  --f: 'Jost', 'Century Gothic', 'Helvetica Neue', system-ui, sans-serif;

  /* Cinque corpi, nessun altro */
  --t-piccolo: clamp(.8125rem, .79rem + .1vw, .875rem);
  --t-testo:   clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-lead:    clamp(1.375rem, 1rem + 1.4vw, 2.125rem);
  --t-titolo:  clamp(2.25rem, 1.3rem + 3.2vw, 4rem);

  --margine: clamp(16px, 5vw, 80px);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--buio); color: var(--carta);
  font-family: var(--f); font-size: var(--t-testo); font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.65; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

.titolo {
  font-family: var(--f-titoli); font-weight: 400; font-size: var(--t-titolo); line-height: 1.02; letter-spacing: -.01em;
  text-wrap: balance; margin: 0 0 .6em;
}

.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 32px;
  background: var(--oro); color: var(--buio);
  font: 400 var(--t-testo) / 1 var(--f); letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .25s ease, transform .25s var(--curva);
}
.bottone:hover { background: #d8b86c; transform: translateY(-2px); }
.bottone:active { transform: none; }

/* --- Marchio: scritta e graffio dai vettoriali dell'esecutivo -------- */
/* Stesso viewBox per i due SVG: sovrapposti restano centrati come in
   etichetta, e non si spostano con margini. */
.marchio { position: relative; display: block; aspect-ratio: 118.48 / 113.85; }
.marchio__graffio, .marchio__scritta {
  position: absolute; inset: 0; display: block;
  background: currentColor;
  -webkit-mask: var(--forma) no-repeat center / contain;
          mask: var(--forma) no-repeat center / contain;
}
.marchio__graffio { --forma: url(../SVG/marchio-graffio.svg); color: var(--graffio, #3a352f); }
.marchio__scritta { --forma: url(../SVG/marchio-scritta.svg); }

/* --- Testata ---------------------------------------------------------- */
.testata {
  position: absolute; inset: 0 0 auto; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--margine);
}
.testata__marchio { color: var(--oro); }
.testata__marchio .marchio { width: 64px; }
.testata__menu { display: flex; gap: 32px; }
.testata__menu a { text-decoration: none; font-size: var(--t-testo); }
.testata__menu a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
/* IT · EN: la lingua attiva in carta, l'altra in tenue */
.lingue { color: var(--tenue); white-space: nowrap; }
.lingue [aria-current] { color: var(--carta); }
.lingue a { color: var(--tenue); }
.lingue a:hover { color: var(--carta); }

/* --- Apertura --------------------------------------------------------- */
/* A sinistra il logotipo grande e sotto la frase col bottone; a destra la
   spuma a tutta altezza sul bordo dello schermo, dove finisce anche la
   foto: lo spruzzo esce dalla pagina invece di sembrare tagliato. */
.apertura {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto;
  overflow: hidden;
}
.apertura__foto { grid-column: 2; grid-row: 1 / span 2; height: 100svh; padding-top: 96px; }
/* spuma-buio.jpg ha il nero pieno della foto originale portato al nero
   della pagina (#0b0a09): niente rettangolo, la spuma resta l'unica
   cosa accesa. */
.apertura__foto img { height: 100%; width: auto; max-width: none; }
.apertura__lato {
  grid-column: 1; grid-row: 2;
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 24px 48px;
  padding: 0 32px clamp(40px, 8svh, 80px) var(--margine);
}
.apertura__frase { font-family: var(--f-titoli); font-size: var(--t-lead); line-height: 1.3; max-width: 28ch; margin: 0; }
/* Il logotipo, senza graffio: la cosa più grande dello schermo */
.apertura__nome {
  grid-column: 1; grid-row: 1; align-self: end;
  margin: 96px 32px clamp(28px, 5svh, 48px) var(--margine);
  width: min(100% - var(--margine) - 32px, 900px, (100svh - 340px) * 1.85);
}
.apertura__nome img { width: 100%; height: auto; }

/* --- Sottoterra: la scala --------------------------------------------- */
.sottoterra {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: 24px;
  align-items: start;
  padding: clamp(120px, 16vw, 240px) var(--margine);
}
.sottoterra .titolo { grid-column: 1 / span 8; }
.scala {
  grid-column: 1 / span 8; grid-row: 2;
  font-family: var(--f-titoli); font-size: var(--t-lead); font-weight: 400; line-height: 1.45; margin: 0;
}
/* Ogni riga parte più a destra della precedente: la frase scende */
.scala span { display: block; }
.scala span:nth-child(2) { padding-left: 10%; }
.scala span:nth-child(3) { padding-left: 20%; }
.sottoterra__foto { grid-column: 9 / -1; grid-row: 1 / span 4; position: sticky; top: 48px; }
.racconto { grid-column: 1 / span 6; grid-row: 3; margin-top: 72px; max-width: 62ch; }
.racconto p:last-child { margin-bottom: 0; }
.sottoterra__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sottoterra__nota {
  grid-column: 1 / span 6; grid-row: 4; align-self: end;
  margin: 72px 0 0; font-size: var(--t-piccolo); color: var(--tenue);
}

/* --- Gli orsi: la stanza della torcia --------------------------------- */
.orsi {
  position: relative; overflow: hidden;
  margin: 0 20px;
  min-height: 110svh;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px;
  padding: 72px clamp(24px, 4vw, 64px) 0;
  background: var(--pietra);
}
.orsi__parete { position: absolute; inset: 0; width: 100%; height: 100%; }
.orsi__sinistra, .orsi__destra { position: relative; }
.orsi__sinistra { display: flex; flex-direction: column; justify-content: space-between; }
.orsi__sinistra .titolo { max-width: 9em; }
/* L'arco: la bocca della grotta, tagliato dal fondo della stanza */
.orsi__arco {
  width: min(38vw, 520px); aspect-ratio: 3 / 4; margin-top: 64px;
  border-radius: 999px 999px 0 0; overflow: hidden;
}
.orsi__arco img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.orsi__destra { padding-top: 12px; max-width: 420px; justify-self: end; padding-bottom: 72px; }
.orsi__blocco { margin-bottom: 56px; }
.orsi__blocco h3 { font-family: var(--f-titoli); font-weight: 400; font-size: var(--t-lead); line-height: 1.25; margin: 0 0 12px; }
.orsi__blocco p { margin: 0; }
.orsi__aiuto { font-size: var(--t-piccolo); color: var(--tenue); margin: 0; }
html:not(.js) .orsi__aiuto { display: none; }

/* --- I tre vini ------------------------------------------------------- */
.vini { position: relative; }
.vini__intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  padding: clamp(120px, 16vw, 240px) var(--margine) 56px;
}
.vini__intro .titolo { grid-column: 1 / span 6; margin: 0; }
.vini__intro p { grid-column: 8 / span 5; margin: 0; }
.vini__finestra { position: relative; overflow: hidden; }
.vini__binario { position: relative; display: grid; gap: 24px; padding: 64px var(--margine); }
/* La bottiglia sulla roccia apre la fila: l'unica foto di Letargo in grotta */
.vini__roccia { display: flex; flex-direction: column; gap: 12px; }
.vini__roccia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 60%; }
.vini__roccia figcaption { font-size: var(--t-piccolo); color: var(--tenue); }
.vino { display: grid; grid-template-rows: 1fr auto; background: #050506; }
.vino__foto { overflow: hidden; }
.vino__foto img { height: 100%; width: auto; max-height: 440px; margin: 0 auto; }
.vino__scheda { padding: 24px 28px 28px; background: var(--pietra); }
.vino__nome { font-family: var(--f-titoli); font-weight: 400; font-size: var(--t-titolo); line-height: 1; letter-spacing: -.02em; margin: 0 0 6px; color: var(--lamina); }
.vino--argento { --lamina: var(--argento); }
.vino--oro     { --lamina: var(--oro); }
.vino--rosa    { --lamina: var(--rosa); }
.vino__tipo { color: var(--tenue); margin: 0 0 12px; }
.vino__testo { margin: 0; }

@supports (animation-timeline: view()) {
  @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .vini { height: 220svh; view-timeline: --vini block; }
    .vini__palco { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; }
    .vini__intro { padding-top: 56px; padding-bottom: 32px; }
    .vini__finestra { flex: 1; min-height: 0; }
    .vini__binario {
      height: 100%; display: flex; align-items: center; gap: 48px; width: max-content;
      padding: 0 var(--margine);
      animation: binario linear both; animation-timeline: --vini;
      animation-range: contain 0% contain 100%;
    }
    .vino { width: 640px; height: min(600px, calc(100svh - 260px)); flex: none; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .vini__roccia { flex: none; height: min(600px, calc(100svh - 260px)); }
    .vini__roccia img { flex: 1; min-height: 0; width: auto; height: 100%; aspect-ratio: 665 / 1180; }
    .vino__foto img { max-height: none; }
    .vino__scheda { display: flex; flex-direction: column; justify-content: flex-end; }
  }
}
@keyframes binario {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + 100vw)); }
}

/* --- Domande -------------------------------------------------------- */
.domande {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px;
  padding: clamp(120px, 16vw, 240px) var(--margine) clamp(120px, 14vw, 200px);
}
.domande .titolo { grid-column: 1 / span 4; }
.domande__elenco { grid-column: 6 / -1; display: grid; gap: 56px; }
.domanda h3 {
  font-family: var(--f-titoli); font-weight: 500; font-size: var(--t-lead); line-height: 1.25;
  font-optical-sizing: none; font-variation-settings: 'opsz' 11;
  margin: 0 0 12px;
}
.domanda p { margin: 0; max-width: 60ch; }

/* --- Assaggialo ------------------------------------------------------- */
.contatti { position: relative; min-height: 100svh; padding: 60px 0; }
.contatti__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%;
  filter: brightness(.7);
}
.biglietto {
  position: relative;
  margin: 0 var(--margine) 0 auto;
  width: min(420px, calc(100% - 2 * var(--margine)));
  display: flex; flex-direction: column;
  padding: 36px 36px 0;
  background: var(--pietra);
}
.biglietto__titolo { font-family: var(--f-titoli); font-weight: 400; font-size: var(--t-titolo); line-height: 1; letter-spacing: -.02em; margin: 0 0 16px; }
.biglietto__frase { margin-bottom: 24px; }
.biglietto address { font-style: normal; margin-bottom: 24px; }
.biglietto__righe { margin: 0 0 32px; }
.biglietto__righe div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.biglietto__righe dt { color: var(--tenue); }
.biglietto__righe dd { margin: 0; font-variant-numeric: tabular-nums lining-nums; }
.biglietto__righe a { text-decoration: none; }
.biglietto__righe a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.biglietto .bottone { margin: 0 -36px; }

/* --- Chiusura --------------------------------------------------------- */
.chiusura { padding: 64px var(--margine) 28px; }
.chiusura__colonne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.chiusura__colonne > * { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.chiusura__colonne p { margin: 0; color: var(--tenue); }
.chiusura__colonne a { color: var(--tenue); text-decoration: none; }
.chiusura__colonne a:hover { color: var(--carta); }
.chiusura__colonne .chiusura__voce { color: var(--carta); margin-bottom: 8px; }
.chiusura__riserva img { width: 96px; margin-top: 4px; }
/* Graffio e scritta come immagini con lo stesso viewBox, sovrapposte */
.chiusura__firma { position: relative; width: min(340px, 60vw); aspect-ratio: 118.48 / 113.85; margin: 48px auto 0; }
.chiusura__firma img { position: absolute; inset: 0; width: 100%; height: 100%; }
.chiusura__legale { text-align: center; font-size: var(--t-piccolo); color: var(--tenue); margin: 24px 0 0; }

/* --- Entrate ---------------------------------------------------------- */
/* Legate allo scorrimento dove il browser lo sa fare; altrove tutto è già
   al suo posto. Si parte da un'opacità bassa, mai da zero. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra { animation: entra linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .entra-2 { animation-range: entry 10% entry 80%; }
    .entra-3 { animation-range: entry 20% entry 90%; }
    /* La spuma si avvicina piano mentre si scende */
    .apertura__foto img { animation: avvicina linear both; animation-timeline: scroll(root); animation-range: 0 100svh; }
  }
}
@keyframes entra { from { opacity: .15; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes avvicina { to { transform: scale(1.08); opacity: .6; } }
@media (prefers-reduced-motion: no-preference) {
  .apertura__frase, .apertura__nome, .apertura__foto { animation: sale 1.1s var(--curva) both; }
  .apertura__frase { animation-delay: .15s; }
  .apertura__nome { animation-delay: .05s; }
}
@keyframes sale { from { opacity: 0; transform: translateY(16px); } }

/* --- Privacy: testo lungo, una colonna sola --------------------------- */
.legale { max-width: 68ch; margin: 0 auto; padding: 160px var(--margine) 96px; box-sizing: content-box; }
.legale .titolo { margin-bottom: .3em; }
.legale__data { color: var(--tenue); font-size: var(--t-piccolo); margin-bottom: 64px; }
.legale h2 {
  font-family: var(--f-titoli); font-weight: 500; font-size: var(--t-lead); line-height: 1.25;
  font-optical-sizing: none; font-variation-settings: 'opsz' 11;
  margin: 56px 0 16px;
}
.legale a { text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legale code { font-family: inherit; color: var(--oro); }
.chiusura--corta { padding-top: 0; }
.chiusura__legale a { color: inherit; text-underline-offset: 3px; }

/* --- 404 -------------------------------------------------------------- */
/* Come l'apertura: il testo a sinistra, a destra le bottiglie ancora in
   grotta a tutta altezza, fino al bordo dello schermo. */
.errore {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
}
.errore__foto { grid-column: 2; grid-row: 1; height: 100svh; margin: 0; }
.errore__foto img { height: 100%; width: auto; max-width: 46vw; object-fit: cover; }
.errore__testo { grid-column: 1; grid-row: 1; padding: 64px clamp(24px, 4vw, 64px) 64px var(--margine); }
.errore__logotipo { display: block; width: min(520px, 100%); margin-bottom: 48px; }
.errore__logotipo img { width: 100%; height: auto; }
.errore__titolo {
  font-family: var(--f-titoli); font-weight: 500; font-size: var(--t-titolo); line-height: 1.02;
  font-optical-sizing: none; font-variation-settings: 'opsz' 11;
  margin: 0 0 24px; max-width: 16ch;
}
.errore__link { display: flex; align-items: center; gap: 32px; margin: 32px 0 64px; }
.errore .chiusura__legale { text-align: left; margin: 0; }
@media (max-width: 900px) {
  .errore { grid-template-columns: 1fr; }
  .errore__foto { grid-column: 1; grid-row: 1; height: 30svh; justify-self: end; }
  .errore__logotipo { width: min(260px, 70vw); margin-bottom: 24px; }
  .errore__link { margin: 24px 0 40px; }
  .errore__foto img { max-width: none; }
  .errore__testo { grid-row: 2; padding: 16px var(--margine) 40px; }
}

/* --- Filtro d'età ----------------------------------------------------- */
html.eta-chiedi { overflow: hidden; }
.eta {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--margine);
  background: var(--buio); text-align: center;
}
.eta__marchio { width: min(200px, 54vw); margin: 0 auto 32px; color: var(--oro); }
.eta__domanda { font-family: var(--f-titoli); font-size: var(--t-lead); font-weight: 400; line-height: 1.35; max-width: 22em; margin: 0 auto 36px; }
.eta__scelte { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
.eta__scelte button {
  font: 400 var(--t-testo) / 1 var(--f); letter-spacing: .04em; min-height: 52px; padding: 0 32px; cursor: pointer; border: 0;
  background: var(--oro); color: var(--buio);
}
.eta__scelte .eta__no { background: var(--pietra); color: var(--carta); }
.eta__nota { font-size: var(--t-piccolo); color: var(--tenue); max-width: 30em; margin: 0 auto; }

/* --- Tablet e telefono ------------------------------------------------ */
@media (max-width: 900px) {
  .sottoterra .titolo, .scala, .sottoterra__nota { grid-column: 1 / -1; }
  .sottoterra__foto { grid-column: 1 / -1; grid-row: 3; margin-top: 56px; }
  .sottoterra__foto img { aspect-ratio: 4 / 3; }
  .apertura { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .apertura__foto { grid-column: 1; grid-row: 1; height: 54svh; justify-self: end; padding-top: 72px; }
  .apertura__nome { grid-column: 1; grid-row: 2; width: min(100% - 2 * var(--margine), 720px); margin: -6svh 0 0 var(--margine); }
  .apertura__lato { grid-column: 1; grid-row: 3; padding: 16px var(--margine) 56px; }
  .racconto { grid-column: 1 / -1; grid-row: 4; margin-top: 48px; }
  .sottoterra__foto { position: static; }
  .sottoterra__nota { grid-row: 5; margin-top: 32px; }
  .domande .titolo, .domande__elenco { grid-column: 1 / -1; }
  .scala span:nth-child(2) { padding-left: 6%; }
  .scala span:nth-child(3) { padding-left: 12%; }
  .orsi { margin: 0 10px; grid-template-columns: 1fr; padding: 48px 20px 0; }
  .orsi__destra { justify-self: start; max-width: none; padding: 48px 0 0; }
  .orsi__sinistra { display: contents; }
  .orsi__arco { order: 3; width: 86%; margin: 0 auto; }
  .vini__intro .titolo, .vini__intro p { grid-column: 1 / -1; }
  .vini__intro p { margin-top: 20px; }
  .contatti { min-height: 0; padding-bottom: 0; }
  .contatti__foto { position: relative; height: 70svh; }
  .contatti { padding: 0; }
  .biglietto { margin: -80px 16px 0; width: auto; }
  .chiusura__colonne { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

/* Il Bodoni Moda si usa nel taglio per i corpi piccoli (opsz 11) anche
   in grande: i filetti restano spessi abbastanza da leggersi bene sul
   nero, invece di sparire come nel taglio da titolo. */
.titolo, .apertura__frase, .scala, .orsi__blocco h3, .vino__nome, .biglietto__titolo, .eta__domanda {
  font-optical-sizing: none; font-variation-settings: 'opsz' 11; font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}