/* ==========================================================================
   Bivio Bistrot — sito del locale
   Font, colori del marchio e reset stanno in assets/base.css (caricato prima).
   Idea: i materiali veri del locale. Notte a lume di candela in apertura, carta e crema
   per i testi, bordeaux per la prenotazione: le sezioni si distinguono solo per il colore.
   ========================================================================== */

/* ---------- Colori e misure del sito ---------- */
:root {
  --carta: #FBF4E8;      /* fondo delle sezioni di testo */
  --notte: #1C1411;      /* sala la sera, a lume di candela */
  --menta: #A7C9B8;      /* il tavolino verde del locale: solo per "aperto" e per il giorno di oggi */
  --crema-testo: #F5E6CC;
  --sezione-py: clamp(72px, 10vw, 136px);
}

html { scroll-padding-top: 16px; }
body { background: var(--carta); }
/* Con un modale aperto la pagina non scorre. Su pc sparisce la barra di scorrimento: il body recupera
   la sua larghezza (--barra, misurata da locale.js), così la pagina non si allarga e la foto d'apertura resta ferma */
html.is-modal-open { overflow: hidden; }
html.is-modal-open body { padding-right: var(--barra, 0px); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .875rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Pulsanti ---------- */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bottone[hidden] { display: none; }
.bottone--pieno { background: var(--brand-cream); color: var(--brand); }
.bottone--pieno:hover { background: #fff3dc; }
/* Prenota nell'apertura: pieno come "Vedi il menu", ma bordeaux con il testo crema */
.bottone--prenota { background: var(--brand); border-color: rgba(254, 226, 179, .35); color: var(--brand-cream); }
.bottone--prenota:hover { background: #8A1A2D; }
.bottone--bordeaux { background: var(--btn-bg); color: var(--btn-ink); }
.bottone--bordeaux:hover { background: var(--brand); }
.bottone--crema { background: var(--brand-cream); color: var(--brand); font-variant-numeric: lining-nums tabular-nums; }
.bottone--crema:hover { background: #fff3dc; }
.bottone--chiaro { border-color: rgba(254, 226, 179, .6); color: var(--brand-cream); }
.bottone--chiaro:hover { background: rgba(254, 226, 179, .12); }
/* Contorno bordeaux, per i fondi chiari (modale Prenota) */
.bottone--contorno { border-color: rgba(115, 18, 35, .45); color: var(--brand); }
.bottone--contorno:hover { background: rgba(115, 18, 35, .06); border-color: var(--brand); }
.bottone[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------- Apertura ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px var(--gutter) 80px;
  overflow: hidden;
  background: var(--notte);
  color: var(--crema-testo);
  text-align: center;
}
.hero__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Velo: scuro ai bordi, più chiaro al centro dove stanno le candele, perché logo e testo si leggano */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(28, 20, 17, .7) 0%, rgba(28, 20, 17, .2) 26%, rgba(28, 20, 17, .25) 62%, rgba(28, 20, 17, .85) 88%, var(--notte) 100%),
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(28, 20, 17, .45), rgba(28, 20, 17, .1) 70%);
}
.hero__barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top, 0px)) var(--gutter) 0;
}
/* Larghezza piena (fino a 40rem): senza, il blocco si stringe sulla frase e in inglese, più corta, i pulsanti vanno a capo */
.hero__centro { width: 100%; max-width: 40rem; }
.hero__titolo { line-height: 0; }
.hero__logo {
  width: clamp(230px, 62vw, 440px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .35));
}
.hero__frase {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.2rem);
  line-height: 1.25;
  text-wrap: balance;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .5);
}
.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
/* I due pulsanti dell'apertura hanno la stessa larghezza e un testo un po' più grande */
.hero__azioni .bottone { flex: 0 1 11rem; font-size: 1.0625rem; }
.hero :focus-visible { outline-color: var(--brand-cream); }

/* Un solo momento in movimento: logo e frase si accendono come una candela, all'apertura della pagina */
@media (prefers-reduced-motion: no-preference) {
  .hero__titolo, .hero__frase, .hero__azioni { animation: accendi 1.1s var(--ease) both; }
  .hero__frase { animation-delay: .25s; }
  .hero__azioni { animation-delay: .45s; }
}
@keyframes accendi {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Invito a scorrere ---------- */
/* In fondo alla foto: una parola piccola, una linea sottile in cui scende lentamente una goccia di luce (come cera da
   una candela) e in fondo una punta di freccia che si abbassa quando la goccia arriva: «si scende di qui».
   Compare dopo l'apertura (e dopo il sipario, se c'è). Su pc è più grande e piena. */
.hero__scorri {
  --scorri-op: .8;
  --linea-h: 44px;  /* lunghezza della linea */
  --goccia-h: 18px; /* lunghezza della goccia di luce */
  position: absolute;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--crema-testo);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  white-space: nowrap;
  opacity: var(--scorri-op);
  transition: opacity .2s var(--ease);
}
.hero__scorri span:first-child { padding-left: .28em; } /* compensa il letter-spacing per centrare otticamente */
.hero__scorri:hover { opacity: 1; }
.hero__goccia {
  position: relative;
  width: 1px;
  height: var(--linea-h);
  overflow: hidden;
  background: rgba(245, 230, 204, .45);
}
.hero__goccia::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--goccia-h);
  background: linear-gradient(to bottom, transparent, #fff);
  transform: translateY(calc(-1 * var(--goccia-h)));
}
/* Punta di freccia in fondo alla linea: un quadratino con due bordi, ruotato; la punta tocca la fine della linea */
.hero__scorri::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: -20px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
@media (min-width: 900px) {
  .hero__scorri { --scorri-op: 1; --linea-h: 56px; --goccia-h: 22px; bottom: 28px; gap: 12px; font-size: .8125rem; font-weight: 600; }
  .hero__goccia, .hero__goccia::after { width: 1.5px; }
  .hero__scorri::after { width: 11px; height: 11px; margin-top: -24px; border-width: 2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scorri { animation: scorri-compare .8s var(--ease) 1s both; }
  html:not(.senza-intro) .hero__scorri { animation-delay: 2.1s; }
  /* Stessa durata e stesso ritardo: goccia e punta restano sincronizzate a ogni giro */
  .hero__goccia::after { animation: goccia 2.4s linear 1.6s infinite; }
  .hero__scorri::after { animation: punta 2.4s linear 1.6s infinite; }
}
@keyframes scorri-compare { from { opacity: 0; } to { opacity: var(--scorri-op); } }
/* Al 60% la punta luminosa della goccia tocca la fine della linea: in quell'istante la freccia scatta in giù */
@keyframes goccia {
  0%   { transform: translateY(calc(-1 * var(--goccia-h))); animation-timing-function: cubic-bezier(.55, 0, .9, .6); }
  60%  { transform: translateY(calc(var(--linea-h) - var(--goccia-h))); animation-timing-function: ease-out; }
  75%, 100% { transform: translateY(var(--linea-h)); }
}
@keyframes punta {
  0%, 60% { transform: rotate(45deg) translate(0, 0); animation-timing-function: ease-out; }
  68%  { transform: rotate(45deg) translate(3px, 3px); animation-timing-function: ease-in-out; }
  88%, 100% { transform: rotate(45deg) translate(0, 0); }
}

/* ---------- Sipario d'apertura ---------- */
/* Gemello di quello del menu (menu/style.css), nella versione notte: stessi tempi, stessa curva, stesso giro del logo,
   stessa scopertura dal basso. Un velo color notte copre l'apertura; il logo vero parte dal centro dello schermo
   (--intro-dy, misurata da uno script subito dopo l'apertura in index.html), resta fermo un attimo, poi sale al suo
   posto girando mentre il velo si ritira dal basso con un bordo sfumato; quando il logo è arrivato si accendono la
   frase e i pulsanti. Sta dentro .hero (che isola i livelli): copre lo schermo intero perché l'apertura è alta
   almeno quanto lo schermo e la pagina parte dall'inizio. Tutto in CSS: alla fine il velo resta nascosto. */
.sipario { display: none; }
.hero__logo { --intro-dy: 0px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.senza-intro) .sipario {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--notte);
    -webkit-mask: linear-gradient(to bottom, #000 43.5%, transparent 56.5%) 0 0 / 100% 230% no-repeat;
    mask: linear-gradient(to bottom, #000 43.5%, transparent 56.5%) 0 0 / 100% 230% no-repeat;
    animation: sipario-svanisce 1.2s cubic-bezier(.6, 0, .2, 1) .5s forwards;
  }
  html:not(.senza-intro) .hero__titolo { animation: none; }
  html:not(.senza-intro) .hero__logo {
    position: relative;
    z-index: 1; /* sopra il velo */
    animation: sipario-logo 1.6s linear .1s both;
  }
  html:not(.senza-intro) .hero__frase { animation-delay: 1.45s; }
  html:not(.senza-intro) .hero__azioni { animation-delay: 1.65s; }
}
/* Fino al 25% il logo resta fermo al centro (compare in dissolvenza), poi sale e gira */
@keyframes sipario-logo {
  from { opacity: 0; transform: translateY(var(--intro-dy)) perspective(900px) rotateY(-360deg) scale(1.1); }
  12%  { opacity: 1; }
  25%  { opacity: 1; transform: translateY(var(--intro-dy)) perspective(900px) rotateY(-360deg) scale(1.1); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  to   { opacity: 1; transform: translateY(0) perspective(900px) rotateY(0deg) scale(1); }
}
@keyframes sipario-svanisce { to { -webkit-mask-position: 0 100%; mask-position: 0 100%; visibility: hidden; } }

/* ---------- Stato aperto/chiuso ---------- */
.stato {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--sans);
  font-size: .8125rem;
  letter-spacing: .01em;
}
.stato[hidden] { display: none; }
.stato::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.stato.is-aperto::before { background: var(--menta); opacity: 1; box-shadow: 0 0 0 3px rgba(167, 201, 184, .25); }
/* Nell'apertura lo stato è una pillola sopra la foto, come nel menu */
.hero .stato {
  min-height: 40px;
  padding: .45rem 1rem;
  border: 1px solid rgba(254, 226, 179, .35);
  border-radius: 999px;
  background: rgba(28, 20, 17, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: .9375rem;
}
.hero .stato::before { width: 8px; height: 8px; }
/* La pillola è un link: porta a Orari e dove siamo, in fondo alla pagina */
.hero a.stato { color: inherit; text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.hero a.stato:hover { background: rgba(28, 20, 17, .65); border-color: rgba(254, 226, 179, .6); }
.hero .stato { white-space: nowrap; }
/* Telefoni: pillola e lingua stanno sulla stessa riga, quindi tutto un po' più compatto */
@media (max-width: 479.98px) {
  .hero .stato { padding: .4rem .8rem; font-size: .875rem; }
  .lingua__voce { min-width: 40px; padding: 0 .4rem; }
}
@media (max-width: 379.98px) {
  .hero__barra { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .hero .stato { padding: .35rem .7rem; font-size: .8125rem; gap: .4em; }
  .lingua__voce { min-width: 36px; padding: 0 .3rem; }
}
@media (max-width: 339.98px) {
  .hero .stato { padding: .3rem .55rem; font-size: .75rem; }
  .lingua__voce { min-width: 32px; padding: 0 .2rem; font-size: .875rem; }
}
.stato--chiaro { margin: 1rem 0 0; color: var(--muted); font-size: .9375rem; }
.stato--chiaro.is-aperto::before { background: #5E8F78; box-shadow: 0 0 0 3px rgba(94, 143, 120, .18); }

/* ---------- Lingua ---------- */
/* Sempre a destra: la pillola dello stato compare dopo (la mostra lo script) e non deve spostarla */
.lingua { display: flex; gap: 2px; margin-left: auto; }
.lingua__voce {
  min-width: 44px;
  min-height: 44px;
  padding: 0 .5rem;
  border: 0;
  background: none;
  color: rgba(245, 230, 204, .62);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.lingua__voce:hover { color: var(--crema-testo); }
.lingua__voce[aria-pressed="true"] {
  color: var(--crema-testo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ---------- Sezioni ---------- */
/* Ogni sezione parte dal colore di quella sopra (--prima) e sfuma nel suo (--fondo) entro il padding in alto,
   così il cambio di colore non ha uno stacco netto e il titolo resta sempre sul colore pieno. */
.sezione {
  --sfuma: var(--sezione-py);
  padding: var(--sezione-py) var(--gutter);
  background-color: var(--fondo);
  background-image: linear-gradient(to bottom,
    var(--prima, var(--fondo)) 0,
    color-mix(in srgb, var(--prima, var(--fondo)) 50%, var(--fondo)) calc(var(--sfuma) * .45),
    var(--fondo) var(--sfuma));
}
.sezione__dentro { max-width: var(--maxw); margin: 0 auto; }
.sezione--carta { --fondo: var(--carta); }
.sezione--crema { --fondo: var(--accent-soft); }
.sezione--notte { --fondo: var(--notte); color: var(--crema-testo); }
.sezione--bordeaux { --fondo: var(--brand); color: var(--crema-testo); }
/* Colore di partenza: quello della sezione precedente (la prima parte dal fondo scuro dell'apertura) */
.sezione:first-child { --prima: var(--notte); }
.sezione--carta:first-child, .sezione--crema:first-child { --sfuma: 12px; } /* dal fondo scuro dell'apertura: sfumatura corta */
.sezione--carta + .sezione { --prima: var(--carta); }
.sezione--crema + .sezione { --prima: var(--accent-soft); }
.sezione--notte + .sezione { --prima: var(--notte); }
.sezione--bordeaux + .sezione { --prima: var(--brand); }
/* Tra scuro (anche bordeaux) e chiaro la sfumatura è cortissima: quella lunga passa da una fascia grigia */
.sezione--notte + .sezione--carta, .sezione--notte + .sezione--crema,
.sezione--carta + .sezione--notte, .sezione--crema + .sezione--notte,
.sezione--bordeaux + .sezione--carta, .sezione--bordeaux + .sezione--crema { --sfuma: 12px; }

.titolo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.7rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--brand);
  text-wrap: balance;
}
.sezione--notte .titolo,
.sezione--bordeaux .titolo { color: var(--brand-cream); }
.titolo__seguito {
  display: block;
  margin-top: .35em;
  font-style: italic;
  font-size: .5em;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink);
}

/* Testi lunghi: serif, come una carta stampata */
.testo p {
  max-width: 34em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.08rem + .45vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
  hanging-punctuation: first;
}
.testo p + p { margin-top: .9em; }
.testo--stretto p { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); }

/* Cornice delle foto: angoli appena smussati, come le tovagliette */
.cornice {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(28, 20, 17, .08);
}
.cornice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.cornice:hover img { transform: scale(1.025); }
.cornice:focus-visible { outline-offset: 4px; }

/* ---------- La storia ---------- */
/* Su pc foto a sinistra, titolo e testo accanto, centrati in altezza rispetto alla foto. Aperto il «Leggi tutto»,
   il testo si allunga e la foto resta ferma (sticky) mentre si legge. */
.storia__griglia { display: grid; gap: clamp(1.75rem, 5vw, 2.5rem); }
.storia__foto { aspect-ratio: 3 / 4; max-width: 360px; }
.testo .storia__finale {
  margin-top: 1.5em;
  font-style: italic;
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.3;
  color: var(--brand);
}
@media (min-width: 900px) {
  .storia__griglia {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "foto ." "foto titolo" "foto testo" "foto .";
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(3rem, 7vw, 6rem);
    row-gap: 0;
  }
  .storia__griglia .titolo { grid-area: titolo; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
  .storia__foto { grid-area: foto; max-width: none; align-self: start; position: sticky; top: 40px; }
  .storia__testo { grid-area: testo; }
}

/* ---------- La cucina ---------- */
.cucina__griglia { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.cucina__testo .testo { margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.cucina__foto { position: relative; padding-bottom: 18%; }
.cucina__foto-grande { width: 78%; aspect-ratio: 3 / 4; }
.cucina__foto-piccola {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  aspect-ratio: 3 / 4;
  border: clamp(5px, 1vw, 8px) solid var(--accent-soft);
  border-radius: 4px;
}
@media (min-width: 900px) {
  /* Su pc le foto prendono più spazio del testo */
  .cucina__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 5vw, 4.5rem); align-items: center; }
  .cucina__foto-grande { width: 82%; }
}


/* ---------- Le persone ---------- */
.persone__griglia { display: grid; gap: clamp(2.75rem, 6vw, 3.5rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 960px) {
  .persone__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
}
.persona { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.persona__nome {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 1.35rem + .9vw, 2rem);
  line-height: 1.12;
  color: var(--brand);
  text-wrap: balance;
}
.persona .testo { margin-top: 1rem; }
.persona__resto { margin-top: .9em; }
.persona__resto[hidden] { display: none; }
.persona__altro {
  margin-top: 1rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.persona__altro[hidden] { display: none; }
.persona[hidden] { display: none; }
/* Scheda aperta da sola («Leggi tutto»): su pc occupa tutta la riga e il testo va su due colonne */
@media (min-width: 960px) {
  .persona.is-sola { grid-column: 1 / -1; }
  .persona.is-sola .testo { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .persona.is-sola .testo p { break-inside: avoid; }
}
.persona__altro:hover { text-decoration-thickness: 2px; }

/* ---------- Il locale (foto) ---------- */
.locale__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.5vw, 28px);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.locale__voce { margin: 0; }
.locale__voce .cornice { aspect-ratio: 3 / 4; }
.locale__voce--larga { grid-column: 1 / -1; }
.locale__voce--larga .cornice { aspect-ratio: 4 / 3; }
.locale__voce figcaption {
  margin-top: .6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: rgba(245, 230, 204, .78);
}
.locale__tutte { margin-top: clamp(2rem, 5vw, 3rem); text-align: center; }
.locale__tutte[hidden] { display: none; }
.locale__tutte .bottone { background: none; cursor: pointer; }
.locale__tutte .bottone:hover { background: rgba(254, 226, 179, .12); }
/* Su schermi larghi le tre foto stanno in una riga, alla stessa altezza: la cucina a vista occupa due colonne */
@media (min-width: 900px) {
  .locale__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .locale__voce--larga { grid-column: span 2; }
  .locale__voce .cornice, .locale__voce--larga .cornice { aspect-ratio: auto; height: clamp(320px, 36vw, 520px); }
}
.sezione--notte :focus-visible { outline-color: var(--brand-cream); }

/* ---------- Orari e dove siamo ---------- */
.dove__griglia { display: grid; gap: clamp(3rem, 7vw, 4rem); }
@media (min-width: 900px) {
  .dove__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 8vw, 7rem); }
}
.orari { margin-top: 1.5rem; max-width: 26rem; }
.orari__riga {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
  font-size: 1rem;
}
.orari__riga + .orari__riga { border-top: 1px solid var(--line); }
.orari__riga dt { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.orari__riga dd {
  margin: 0 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.orari__riga.is-oggi dt { color: var(--brand); }
.orari__riga.is-oggi dd { color: var(--brand); font-weight: 600; }
/* Sul fondo bordeaux: righe, giorno di oggi e stato in crema */
.sezione--bordeaux .orari__riga + .orari__riga { border-top-color: rgba(245, 230, 204, .2); }
.sezione--bordeaux .orari__riga.is-oggi dt,
.sezione--bordeaux .orari__riga.is-oggi dd { color: var(--brand-cream); }
.sezione--bordeaux .stato--chiaro { color: rgba(245, 230, 204, .8); }
.sezione--bordeaux :focus-visible { outline-color: var(--brand-cream); }
.dove__indirizzo {
  margin: 1.5rem 0 1.75rem;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.25;
  max-width: 16em;
}

/* Il pulsante Maps sta centrato sotto l'indirizzo: il blocco è largo quanto il testo */
.dove__luogo { display: inline-flex; flex-direction: column; align-items: center; }
.dove__luogo .dove__indirizzo { align-self: stretch; }

/* ---------- Prenota (modale) ---------- */
/* Pannello bordeaux al centro: entra salendo e comparendo, esce al contrario (classe is-aperto, locale.js) */
.modale-prenota {
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid rgba(115, 18, 35, .12);
  border-radius: 16px;
  background: var(--brand-cream);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(28, 20, 17, .45);
  text-align: center;
  opacity: 0;
  transform: translateY(40px) scale(.92);
  transition: opacity .34s var(--ease), transform .46s var(--ease);
}
.modale-prenota::backdrop { background: rgba(28, 20, 17, 0); transition: background-color .4s var(--ease); }
.modale-prenota.is-aperto { opacity: 1; transform: none; }
.modale-prenota.is-aperto::backdrop { background: rgba(28, 20, 17, .6); }
.modale-prenota__pannello { position: relative; padding: clamp(2.5rem, 7vw, 3.25rem) clamp(1.5rem, 6vw, 2.5rem) clamp(1.75rem, 6vw, 2.5rem); }
.modale-prenota__chiudi {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--brand);
}
.modale-prenota__chiudi:hover { background: rgba(115, 18, 35, .08); }
.modale-prenota__titolo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 2.75rem);
  line-height: 1.05;
  color: var(--brand);
}
/* Nel modale i pulsanti stanno uno sotto l'altro, larghi uguali */
.prenota__azioni {
  display: grid;
  gap: 12px;
  margin-top: clamp(1.5rem, 5vw, 2rem);
}
.modale-prenota :focus-visible { outline-color: var(--brand); }

/* ---------- Torna su (come nel menu) ---------- */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.to-top.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.to-top[hidden] { display: none; }
.hero:focus { outline: none; }

/* ---------- Footer ---------- */
.piede {
  padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(32px, 5vw, 48px);
  /* Sfuma dal bordeaux di Orari e dove siamo, ultima sezione: cortissima, come tra le sezioni scure e chiare */
  background: linear-gradient(to bottom, var(--brand) 0, color-mix(in srgb, var(--brand) 50%, var(--carta)) 5px, var(--carta) 12px) var(--carta);
  color: var(--muted);
  font-size: .9375rem;
  text-align: center;
}
.piede__griglia { display: grid; justify-items: center; gap: 1rem; }
.piede__logo { width: 150px; height: auto; }
.piede a { color: var(--ink); text-underline-offset: 3px; }
.piede__menu a { color: var(--brand); font-weight: 500; }
.piede__legale { font-size: .8125rem; }
.piede__legale[hidden] { display: none; }
.piede__privacy {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.piede__anno { font-size: .8125rem; }

/* ---------- Informativa privacy ---------- */
.privacy {
  width: min(640px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(28, 20, 17, .35);
}
.privacy::backdrop { background: rgba(28, 20, 17, .6); }
.privacy__pannello {
  position: relative;
  max-height: min(84vh, 760px);
  overflow-y: auto;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  outline: none;
}
.privacy__chiudi {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
}
.privacy__chiudi:hover { background: var(--accent-soft); }
.privacy__titolo {
  padding-right: 44px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--brand);
}
.privacy__h { margin-top: 1.5rem; font-size: 1rem; font-weight: 600; }
.privacy__pannello p { margin-top: .5rem; font-size: .9375rem; line-height: 1.6; }
.privacy__data { color: var(--muted); font-size: .8125rem !important; margin-top: 1.5rem !important; }

/* ---------- Telefoni piccoli ---------- */
@media (max-width: 420px) {
  .hero__azioni .bottone, .prenota__azioni .bottone { flex: 1 1 100%; }
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cornice img, .bottone, .skip-link, .modale-prenota, .modale-prenota::backdrop { transition: none; }
  .modale-prenota { transform: none; }
  .cornice:hover img { transform: none; }
}

/* ---------- Stampa ---------- */
@media print {
  .sipario, .hero__scorri, .hero__foto, .hero::before, .hero__barra, .hero__azioni, .skip-link, .locale, .prenota__azioni,
  .persona__altro, .privacy, .modale-prenota, .to-top, .piede__privacy, .storia__foto, .cucina__foto { display: none !important; }
  .hero { min-height: 0; padding: 24px 0; background: none; color: var(--ink); }
  .hero__logo { filter: none; content: url("assets/brand/logo.png"); } /* il logo crema sul foglio bianco non si vedrebbe */
  .sezione { padding: 24px 0; background: none !important; color: var(--ink) !important; }
  .titolo, .sezione--bordeaux .titolo { color: var(--brand) !important; }
  .persona__resto[hidden] { display: block !important; }
}