/* ==========================================================================
   SCENE — ogni sezione è un'inquadratura, non un blocco.
   L'ordine dei climi (notte → giorno → notte → legno → carta → notte) è il
   color script del sito: la pagina si accende, esce alla luce, rientra.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pulviscolo — la firma di movimento.
   Sono le particelle di polvere che si vedono soltanto controluce, vicino a
   una lampada accesa. Il blend "screen" fa sì che spariscano da sole sulle
   scene chiare: come nella realtà, esistono solo dove c'è buio e una luce.
   -------------------------------------------------------------------------- */
.pulviscolo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 2s var(--e-soft) 600ms;
}
.pulviscolo.is-acceso { opacity: 1; }

/* L'alone della lampada: respira, non pulsa. 14 secondi per un respiro. */
.alone {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 202, 132, .22), rgba(237, 202, 132, .07) 42%, transparent 70%);
  filter: blur(12px);
  animation: respiro 14s var(--e-both) infinite;
}
@keyframes respiro {
  0%, 100% { opacity: .72; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* --------------------------------------------------------------------------
   NAVIGAZIONE
   -------------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s4) var(--gutter);
  color: var(--carta);
  transition: background-color var(--d-mid) var(--e-soft),
              backdrop-filter var(--d-mid) var(--e-soft),
              box-shadow var(--d-mid) var(--e-soft),
              padding var(--d-mid) var(--e-soft);
}
.nav.is-staccata {
  background: rgba(13, 8, 6, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(237, 202, 132, .12);
  padding-block: var(--s3);
}

.marchio {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.marchio__gatto { width: 2rem; height: 2rem; flex: none; color: var(--luce); }
.marchio__testo {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 18, "SOFT" 10, "WONK" 0;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
}
.marchio__testo small {
  display: block;
  font-family: var(--font-testo);
  font-size: .5625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: .62;
  margin-top: .15em;
}

.nav__voci { display: flex; align-items: center; gap: var(--s5); }
.nav__voci a {
  font-size: var(--t-small);
  text-decoration: none;
  color: rgba(244, 237, 224, .78);
  transition: color var(--d-fast) linear;
  position: relative;
  padding-block: .25rem;
}
.nav__voci a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-mid) var(--e-out);
}
.nav__voci a:hover { color: var(--luce); }
.nav__voci a:hover::after { transform: scaleX(1); }

.nav__tel {
  --btn-bg: transparent;
  --btn-fg: var(--carta);
  border-color: rgba(244, 237, 224, .3);
  min-height: 2.5rem;
  padding: .45rem 1.1rem;
}
.nav__tel:hover { --btn-bg: var(--luce); --btn-fg: var(--ombra); border-color: var(--luce); }

/* Apertura del menù mobile: una porta che si apre, non un pannello. */
/* Il bersaglio del dito deve arrivare a 44 px anche se il segno è più piccolo. */
.nav__apri {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding-inline: .25rem;
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.nav__apri span { display: block; width: 1.35rem; height: var(--hair); background: currentColor; transition: transform var(--d-mid) var(--e-out), opacity var(--d-fast) linear; }
.nav__apri i { display: grid; gap: 5px; font-style: normal; }
body.menu-aperto .nav__apri i span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-aperto .nav__apri i span:nth-child(2) { opacity: 0; }
body.menu-aperto .nav__apri i span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.porta {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: linear-gradient(180deg, #140C08, #0D0806);
  display: grid;
  align-content: center;
  gap: var(--s5);
  padding: var(--s10) var(--gutter) var(--s8);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-slow) var(--e-out), visibility 0s linear var(--d-slow);
  visibility: hidden;
}
body.menu-aperto .porta {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path var(--d-slow) var(--e-out), visibility 0s;
}
.porta a {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 1;
  font-size: clamp(2rem, 9vw, 3rem);
  text-decoration: none;
  line-height: 1.14;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-mid) var(--e-out), transform var(--d-mid) var(--e-out);
}
body.menu-aperto .porta a { opacity: 1; transform: none; transition-delay: calc(160ms + var(--i, 0) * 55ms); }
.porta__piede { margin-top: var(--s5); display: grid; gap: var(--s3); }

/* --------------------------------------------------------------------------
   HERO — "si accende"
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--ombra);
}
.hero__scena { position: absolute; inset: 0; z-index: -2; }
.hero__scena img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
  transform: scale(1.06);
  animation: heroZoom 3.4s var(--e-out) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

/* Il buio che si ritira: è l'unica animazione "grande" del sito. */
.hero__buio {
  position: absolute; inset: 0; z-index: -1;
  background: #0A0605;
  animation: accendi 2.6s var(--e-soft) 120ms forwards;
}
@keyframes accendi { from { opacity: 1; } to { opacity: 0; } }

.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 6, 5, .93) 0%, rgba(10, 6, 5, .62) 34%, rgba(10, 6, 5, .12) 62%, rgba(10, 6, 5, .45) 100%),
    linear-gradient(to right, rgba(10, 6, 5, .74), transparent 58%);
}
.hero .alone {
  z-index: -1;
  inset: -18% 26% 34% -14%;
  opacity: 0;
  animation: respiro 14s var(--e-both) 2.4s infinite, sfuma 2.2s var(--e-soft) 900ms forwards;
}
@keyframes sfuma { to { opacity: 1; } }

.hero__wrap {
  position: relative;
  padding-block: var(--s9) calc(var(--s8) + env(safe-area-inset-bottom));
  display: grid;
  gap: var(--s6);
}
.hero__quota {
  font-size: var(--t-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(237, 202, 132, .82);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s5);
}
.hero__quota > span { display: inline-flex; gap: var(--s3); white-space: nowrap; }
.hero__quota b { font-weight: 500; }
.hero__quota i { font-style: normal; opacity: .4; }

.hero h1 {
  font-size: var(--t-display);
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 1;
  line-height: var(--lh-display);
  letter-spacing: -0.035em;
  max-width: 15ch;
  text-wrap: initial;
}
.hero h1 .marchio-riga {
  display: block;
  font-family: var(--font-testo);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, .6);
  margin-bottom: var(--s5);
  line-height: 1.4;
}
.hero h1 em {
  font-style: normal;
  color: var(--luce);
}

/* L'ingresso del titolo è affidato a un'animazione CSS, non allo script:
   è la prima cosa che si legge e non deve dipendere da nulla.
   I ritardi sono dichiarati riga per riga nell'HTML, così la sequenza si
   legge dove si legge il testo.                                             */
.hero h1 .sipario > span {
  animation: alzati 1.5s var(--e-out) var(--ritardo, 0s) both;
}
@keyframes alzati {
  from { transform: translate3d(0, 105%, 0); }
  to   { transform: none; }
}
.hero__quota,
.hero h1 .marchio-riga,
.hero__coda {
  animation: sali 1.1s var(--e-out) var(--ritardo, 0s) both;
}
@keyframes sali {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}
.hero__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s5) var(--s6);
  justify-content: space-between;
}
.hero__coda p { max-width: 34ch; color: rgba(244, 237, 224, .74); font-size: var(--t-lead); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Invito allo scroll: una goccia di luce che scende, lentissima. */
.entra {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--s8) + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: var(--s3);
  font-size: var(--t-label);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(244, 237, 224, .5);
  opacity: 0;
  animation: sfuma 1.2s var(--e-soft) 2.6s forwards;
}
.entra__filo { width: var(--hair); height: 3.5rem; background: rgba(244, 237, 224, .22); position: relative; overflow: hidden; }
.entra__filo::after {
  content: "";
  position: absolute; inset-inline: 0; top: -60%;
  height: 60%;
  background: linear-gradient(to bottom, transparent, var(--luce));
  animation: goccia 3.2s var(--e-both) infinite;
}
@keyframes goccia { 0% { top: -60%; } 70%, 100% { top: 100%; } }

/* Parallasse: solo dove il browser sa farla senza costare nulla. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__scena { animation: derivaSu linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes derivaSu { to { transform: translate3d(0, 14%, 0); } }
    .hero__wrap { animation: sbiadisci linear both; animation-timeline: view(); animation-range: exit 0% exit 62%; }
    @keyframes sbiadisci { to { opacity: 0; transform: translate3d(0, -22px, 0); } }
  }
}

/* --------------------------------------------------------------------------
   BANDA DEI NUMERI — la carta d'identità del posto, in quattro cifre
   -------------------------------------------------------------------------- */
.numeri { background: #120B07; border-block: var(--hair) solid rgba(237, 202, 132, .14); }
.numeri__griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--s7);
}
.numeri__voce { padding-inline: var(--s5); border-left: var(--hair) solid rgba(237, 202, 132, .14); }
.numeri__voce:first-child { border-left: 0; padding-left: 0; }
.numeri__cifra {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 100, "SOFT" 18, "WONK" 0;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1;
  color: var(--luce);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.03em;
}
.numeri__cifra sup { font-size: .42em; vertical-align: .95em; margin-left: .12em; letter-spacing: 0; }
.numeri__voce p { margin-top: var(--s3); font-size: var(--t-small); color: var(--testo-soft); max-width: 22ch; }
.numeri__sigillo {
  border-top: var(--hair) solid rgba(237, 202, 132, .14);
  padding-block: var(--s4);
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--testo-soft);
}
.numeri__sigillo svg { flex: none; }
.numeri__sigillo b { color: var(--luce); font-weight: 500; }

/* --------------------------------------------------------------------------
   IL BORGO — prima uscita alla luce. Il contrasto col nero è voluto.
   -------------------------------------------------------------------------- */
.borgo__testa { display: grid; gap: var(--s5); max-width: 46rem; }
.borgo__griglia {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s6) var(--s5);
  align-items: start;
}
.borgo__foto-grande { grid-column: 1 / 9; }
.borgo__foto-piccola { grid-column: 9 / 13; align-self: end; margin-bottom: calc(var(--s8) * -1); }
.borgo__nota { grid-column: 1 / 6; }
.borgo__nota p + p { margin-top: var(--s4); }

.citazione {
  margin-top: var(--s8);
  display: grid;
  gap: var(--s4);
  max-width: 34rem;
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--bordo);
}
.citazione q {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 26, "WONK" 1;
  font-size: clamp(1.4rem, 3vw, 2.05rem);
  line-height: 1.24;
  quotes: "«" "»";
  letter-spacing: -0.015em;
}
.citazione footer { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--testo-soft); }

.striscia-rio { margin-top: var(--s9); }

/* --------------------------------------------------------------------------
   IL PIATTO — il momento firma. Buio, un solo oggetto illuminato.
   -------------------------------------------------------------------------- */
.piatto { overflow: hidden; }
.piatto__griglia {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(var(--s6), 6vw, var(--s10));
  align-items: center;
}
.piatto__scena { position: relative; isolation: isolate; }
/* Qui l'alone è il faretto della scena: più intenso che altrove. */
.piatto__scena .alone {
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle, rgba(237, 202, 132, .30), rgba(237, 202, 132, .10) 40%, transparent 68%);
}
.piatto__scena .foto { box-shadow: var(--sh-2); }
.piatto__testo { display: grid; gap: var(--s5); }
.piatto h2 {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-variation-settings: "opsz" 120, "SOFT" 28, "WONK" 1;
  letter-spacing: -0.03em;
}
.piatto h2 em { font-style: normal; color: var(--luce); display: block; }

/* I quattro gesti: una linea di luce che si riempie mentre scorri. */
.gesti { margin-top: var(--s3); display: grid; gap: var(--s5); position: relative; padding-left: var(--s6); }
.gesti::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem; bottom: .5rem;
  width: var(--hair);
  background: rgba(237, 202, 132, .18);
}
.gesti::after {
  content: "";
  position: absolute;
  left: 0; top: .5rem;
  width: var(--hair);
  height: 0;
  background: linear-gradient(to bottom, var(--luce), rgba(237, 202, 132, .35));
  transition: height var(--d-cine) var(--e-soft);
}
.gesti.is-visibile::after { height: calc(100% - 1rem); }
.gesto { display: grid; grid-template-columns: 2.1rem 1fr; gap: var(--s4); align-items: baseline; }
.gesto b {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 20, "SOFT" 12, "WONK" 0;
  font-size: .9rem;
  color: var(--luce);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.gesto p { color: var(--testo-soft); }
.gesto p strong { color: var(--testo); font-weight: 500; }

/* --------------------------------------------------------------------------
   LA TAVOLA — il menù. Legno, due colonne, niente cornici.
   -------------------------------------------------------------------------- */
.tavola { background-image: linear-gradient(180deg, #1C1109, #150D07); }
.tavola__testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5); }
.tavola__testa h2 { max-width: 16ch; }

.carta-menu {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8) clamp(var(--s6), 6vw, var(--s10));
}
.portata h3 {
  font-variation-settings: "opsz" 40, "SOFT" 22, "WONK" 1;
  color: var(--luce);
  padding-bottom: var(--s3);
  border-bottom: var(--hair) solid var(--bordo);
}
.portata ul { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s4); }
.portata li { display: grid; gap: .2rem; }
.portata li b { font-weight: 500; font-size: 1.0625rem; }
.portata li span { font-size: var(--t-small); color: var(--testo-soft); }
.portata li.spicca b { color: var(--luce); }
.portata li.spicca b::after {
  content: "la nostra firma";
  display: inline-block;
  margin-left: .6rem;
  font-family: var(--font-testo);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-soft);
  vertical-align: .18em;
  border: var(--hair) solid var(--bordo);
  border-radius: var(--r-pill);
  padding: .18em .6em;
}

.tavola__nota {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--bordo);
  display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between;
}
.tavola__nota p { max-width: 46ch; font-size: var(--t-small); color: var(--testo-soft); }

.vetrina {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
}
.vetrina figure { margin: 0; }
.vetrina figcaption { margin-top: var(--s3); font-size: var(--t-label); letter-spacing: .08em; color: var(--testo-soft); }

/* --------------------------------------------------------------------------
   NEVE — la prova. A tutta pagina, una riga sola.
   -------------------------------------------------------------------------- */
.neve {
  position: relative;
  min-height: min(84svh, 40rem);
  display: grid;
  align-items: end;
  isolation: isolate;
  background: #0D0806;
}
.neve img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.neve::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(10, 6, 5, .92), rgba(10, 6, 5, .28) 52%, rgba(10, 6, 5, .5));
}
.neve__testo { padding-block: var(--s8); display: grid; gap: var(--s4); max-width: 32rem; }
.neve__testo p {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72, "SOFT" 24, "WONK" 1;
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.28;
  color: var(--carta);
  letter-spacing: -0.015em;
}
.neve__testo small { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: rgba(244, 237, 224, .6); }

/* --------------------------------------------------------------------------
   1904 — la carta. Un archivio, non una timeline decorativa.
   -------------------------------------------------------------------------- */
.storia__griglia {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(var(--s6), 6vw, var(--s10));
  align-items: start;
}
.storia__testo { display: grid; gap: var(--s5); }
.storia__testo p + p { margin-top: 0; }

.anni { list-style: none; padding: 0; margin: 0; display: grid; }
.anni li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s5);
  padding-block: var(--s5);
  border-top: var(--hair) solid var(--bordo);
  align-items: baseline;
}
.anni li:last-child { border-bottom: var(--hair) solid var(--bordo); }
.anni b {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, "SOFT" 18, "WONK" 0;
  font-size: 1.35rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--legno);
  letter-spacing: -0.02em;
}
.anni p { font-size: var(--t-small); }
.anni li.oggi b { color: var(--vino); }

.sigillo-storico {
  margin-top: var(--s6);
  display: inline-flex;
  justify-self: start;   /* dentro una griglia resterebbe stirato a colonna piena */
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: var(--hair) solid var(--bordo);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sigillo-storico svg { width: 1.1rem; height: 1.1rem; color: var(--vino); flex: none; }

/* --------------------------------------------------------------------------
   CAMERE
   -------------------------------------------------------------------------- */
.camere__griglia {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(var(--s6), 6vw, var(--s9));
  align-items: center;
}
.camere__testo { display: grid; gap: var(--s5); }
.dotazioni { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.dotazioni li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: var(--hair) solid var(--bordo);
  font-size: var(--t-small);
}
.dotazioni li span:last-child { color: var(--testo-soft); text-align: right; }

/* --------------------------------------------------------------------------
   LE VOCI — le recensioni come tipografia, non come schede
   -------------------------------------------------------------------------- */
.voci__testa { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5); }
.voto { display: flex; align-items: baseline; gap: var(--s3); }
.voto b {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "SOFT" 18, "WONK" 0;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--luce);
  letter-spacing: -0.03em;
}
.voto span { font-size: var(--t-small); color: var(--testo-soft); max-width: 16ch; }

.voci__lista {
  margin-top: var(--s8);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5) clamp(var(--s5), 4vw, var(--s8));
}
.voce { display: grid; gap: var(--s4); align-content: start; padding-top: var(--s5); border-top: var(--hair) solid var(--bordo); }
.voce q {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40, "SOFT" 24, "WONK" 1;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.34;
  quotes: "«" "»";
}
.voce footer { font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--testo-soft); }
/* La seconda voce sfalsata: il ritmo non deve essere una griglia perfetta. */
.voci__lista .voce:nth-child(2) { margin-top: var(--s7); }
.voci__lista .voce:nth-child(3) { margin-top: calc(var(--s7) * 2); }

/* --------------------------------------------------------------------------
   INTORNO — un indice, non una vetrina di foto che non abbiamo
   -------------------------------------------------------------------------- */
.intorno__lista { list-style: none; padding: 0; margin: var(--s8) 0 0; display: grid; }
.intorno__lista li {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
  gap: var(--s4) var(--s6);
  align-items: baseline;
  padding-block: var(--s5);
  border-top: var(--hair) solid var(--bordo);
}
.intorno__lista li:last-child { border-bottom: var(--hair) solid var(--bordo); }
.intorno__lista h3 { font-size: 1.35rem; }
.intorno__lista p { font-size: var(--t-small); color: var(--testo-soft); }
.intorno__lista .quota {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30, "SOFT" 14, "WONK" 0;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  color: var(--testo-soft);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   TROVARCI
   -------------------------------------------------------------------------- */
.trovarci { position: relative; overflow: hidden; }
.trovarci .alone { inset: 30% -20% -40% 40%; z-index: 0; }
.trovarci > * { position: relative; z-index: 1; }
.trovarci__griglia {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(var(--s6), 6vw, var(--s9));
  align-items: start;
  margin-top: var(--s7);
}
.indirizzo {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 100, "SOFT" 24, "WONK" 1;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.indirizzo span { display: block; color: var(--testo-soft); font-size: .5em; letter-spacing: -0.01em; margin-top: var(--s3); }

.contatti { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s4); }
.contatti li { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s4); align-items: baseline; }
.contatti dt, .contatti li > span:first-child {
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--testo-soft);
}
/* La sottolineatura deve seguire la parola, non la colonna della griglia. */
.contatti a { text-decoration: none; justify-self: start; }
.contatti .grande { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }

.servizi { list-style: none; padding: 0; margin: var(--s5) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.servizi li {
  font-size: var(--t-small);
  padding: .35rem .85rem;
  border: var(--hair) solid var(--bordo);
  border-radius: var(--r-pill);
  color: var(--testo-soft);
}

.orari { margin-top: var(--s6); }
.orari__nota {
  margin-top: var(--s4);
  padding: var(--s4);
  border: var(--hair) dashed rgba(237, 202, 132, .3);
  border-radius: var(--r-m);
  font-size: var(--t-small);
  color: var(--testo-soft);
  display: grid;
  gap: var(--s2);
}
.orari__nota b { color: var(--luce); font-weight: 500; }

/* --------------------------------------------------------------------------
   TESTATA DELLE PAGINE INTERNE
   Non una hero in miniatura: una soglia. Si entra e si è già dentro l'argomento.
   -------------------------------------------------------------------------- */
.testata {
  position: relative;
  min-height: min(72svh, 34rem);
  display: grid;
  align-items: end;
  isolation: isolate;
  background: var(--ombra);
  overflow: hidden;
}
.testata img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.testata::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 6, 5, .94) 4%, rgba(10, 6, 5, .58) 42%, rgba(10, 6, 5, .18) 78%, rgba(10, 6, 5, .45)),
    linear-gradient(to right, rgba(10, 6, 5, .62), transparent 58%);
}
/* La larghezza massima va sui testi, non sul contenitore: se la mettessimo
   sul .wrap il blocco si centrerebbe, uscendo dalla colonna della pagina. */
.testata__testo {
  padding-block: var(--s9) var(--s8);
  display: grid;
  gap: var(--s4);
  justify-items: start;
}
.testata h1 {
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-variation-settings: "opsz" 144, "SOFT" 28, "WONK" 1;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 14ch;
}
.testata p { color: rgba(244, 237, 224, .82); font-size: var(--t-lead); max-width: 44ch; }

.briciole {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244, 237, 224, .55);
}
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--luce); }

/* Blocco di chiusura ricorrente: la stessa domanda alla fine di ogni pagina. */
.chiusura { display: grid; gap: var(--s5); justify-items: start; max-width: 40rem; }
.chiusura h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.chiusura__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* --------------------------------------------------------------------------
   PIEDE
   -------------------------------------------------------------------------- */
.piede { background: #0A0605; padding-block: var(--s8) calc(var(--s7) + env(safe-area-inset-bottom)); border-top: var(--hair) solid rgba(237, 202, 132, .1); }
.piede__alto { display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: space-between; align-items: start; }
.piede__gatto { width: 5rem; height: 5rem; color: rgba(237, 202, 132, .3); }
.piede__voci { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); font-size: var(--t-small); }
.piede__voci a { text-decoration: none; color: var(--testo-soft); }
.piede__voci a:hover { color: var(--luce); }
.piede__basso {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid rgba(237, 202, 132, .1);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: space-between;
  font-size: var(--t-label); color: var(--testo-soft); letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   BARRA MOBILE — il pollice pigro. Sempre a portata, mai d'ingombro.
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-dock);
  display: none;
  gap: var(--s2);
  padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
  background: rgba(13, 8, 6, .9);
  backdrop-filter: blur(14px);
  border-top: var(--hair) solid rgba(237, 202, 132, .16);
  transform: translateY(110%);
  transition: transform var(--d-mid) var(--e-out);
}
.dock.is-visibile { transform: none; }
.dock .btn { flex: 1; min-height: 2.9rem; padding-inline: var(--s3); font-size: var(--t-small); }

/* ==========================================================================
   ADATTAMENTI — il mobile non è il desktop rimpicciolito: cambia il ritmo,
   l'ordine e il peso di ogni scena.
   ========================================================================== */

@media (max-width: 1080px) {
  .voci__lista { grid-template-columns: repeat(2, 1fr); }
  .voci__lista .voce:nth-child(3) { margin-top: var(--s5); }
  .vetrina { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .nav__voci, .nav__tel { display: none; }
  .nav__apri { display: flex; }
  .dock { display: flex; }
  body { padding-bottom: 0; }

  .hero { min-height: 92svh; }
  .hero__scena img { object-position: 62% 50%; }
  .hero h1 { max-width: 12ch; }
  .entra { display: none; }
  .hero__coda { flex-direction: column; align-items: stretch; }
  .hero__azioni .btn { flex: 1; }

  .numeri__griglia { grid-template-columns: repeat(2, 1fr); gap: var(--s6) 0; padding-block: var(--s6); }
  .numeri__voce:nth-child(odd) { border-left: 0; padding-left: 0; }

  .borgo__griglia { display: grid; grid-template-columns: 1fr; }
  .borgo__foto-grande, .borgo__foto-piccola, .borgo__nota { grid-column: 1 / -1; }
  .borgo__foto-piccola { margin-bottom: 0; max-width: 20rem; }

  .piatto__griglia,
  .storia__griglia,
  .camere__griglia,
  .trovarci__griglia { grid-template-columns: 1fr; }
  .piatto__scena { max-width: 24rem; }
  .camere__griglia > .foto { order: -1; }

  .carta-menu { grid-template-columns: 1fr; gap: var(--s7); }

  .voci__lista { grid-template-columns: 1fr; gap: var(--s6); }
  .voci__lista .voce:nth-child(n) { margin-top: 0; }

  .intorno__lista li { grid-template-columns: 1fr; gap: var(--s2); }
  .intorno__lista .quota { grid-row: 1; justify-self: start; }

  .anni li { grid-template-columns: 4.5rem 1fr; gap: var(--s4); }
  .contatti li { grid-template-columns: 1fr; gap: var(--s1); }
}

@media (max-width: 520px) {
  .hero h1 { letter-spacing: -0.03em; }
  .vetrina { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .voto b { font-size: 2.1rem; }
  .dock .btn:nth-child(3) { display: none; }

  /* Due colonne su 375 px lascerebbero quattordici caratteri per riga: i
     numeri passano in colonna unica, cifra a sinistra e frase a fianco. */
  .numeri__griglia { grid-template-columns: 1fr; gap: 0; }
  .numeri__voce {
    display: grid;
    grid-template-columns: 4.75rem 1fr;
    gap: var(--s4);
    align-items: baseline;
    padding: var(--s4) 0;
    border-left: 0;
    border-top: var(--hair) solid rgba(237, 202, 132, .14);
  }
  .numeri__voce:first-child { border-top: 0; padding-top: 0; }
  .numeri__cifra { font-size: 1.9rem; }
  .numeri__voce p { margin-top: 0; max-width: none; }
}

/* Schermi molto larghi: la pagina non deve diventare un poster illeggibile */
@media (min-width: 1600px) {
  .hero h1 { max-width: 16ch; }
}

@media print {
  .nav, .dock, .porta, .pulviscolo, .entra, .alone { display: none !important; }
  body { background: #fff; color: #000; }
  .scena { padding-block: 1.5rem; }
}