/* Caratteri self-hostati da assets/fonts/, non dal CDN di Google: il CDN
   riceverebbe l'IP di ogni visitatore prima che compaia il banner cookie.

   Averia Sans Libre e Kaushan Script sono gli stessi del menu cartaceo, cosi'
   chi ha il menu in mano al tavolo ritrova la stessa voce sul telefono.
   Il terzo carattere della carta, Appleberry, NON e' qui: e' gratuito solo
   per uso personale e su un sito commerciale richiede licenza a pagamento.

   Inter e' variabile (asse wght 100-900): un file per sottoinsieme copre
   tutti i pesi. Averia e Kaushan sono statici, quindi un file per ogni peso:
   di Averia serve solo il 700, l'unico effettivamente usato.

   Averia non ha il sottoinsieme latin-ext, ma non serve: accenti italiani,
   la n di jalapeno e la a di Oberbrau stanno tutti nel latin.

   font-display: swap mostra subito il testo col font di sistema e sostituisce
   appena il webfont e' pronto, invece di lasciare la pagina muta. */

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Averia Sans Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/averia-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kaushan Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kaushan-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Kaushan Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/kaushan-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Palette presa dal biglietto da visita del locale.
   L'arancio del marchio (#c0522b) non raggiunge 4,5:1 su fondo chiaro, quindi
   non va usato per il testo piccolo: esistono due varianti calibrate,
   --color-accent-ink per il chiaro e --color-accent-bright per lo scuro.
   L'arancio pieno resta per bordi, icone, sfondi e testo grande. */
:root {
  --color-ink: #17100e;
  --color-paper: #f4f0e8;
  --color-surface: #fffdf8;
  --color-cream: #e6d9d2;
  --color-accent: #c0522b;
  --color-accent-ink: #b04a24;
  --color-accent-bright: #d06a3c;

  /* Fondo dei riquadri fotografici, visibile solo mentre l'immagine scarica.
     È la media delle nostre foto una volta velate: sono scattate tutte nello
     stesso locale, fra #211911 e #322315, quindi un valore solo basta per
     tutte. Non accorcia l'attesa, toglie il lampo chiaro che la annuncia —
     e se un'immagine non arrivasse resta un riquadro coerente invece di un
     buco bianco. */
  --color-photo-bg: #2a1f16;
  --color-line: rgb(23 16 14 / 18%);
  --container-narrow: 760px;
  --header-height: 90px;
  --section-space: clamp(4.5rem, 9vw, 8rem);

  /* Quattro ruoli, non quattro nomi di carattere: cambiare famiglia domani
     significa toccare solo queste righe.
     · display Averia, per i titoli grandi — voce del menù cartaceo
     · label   Averia, per nomi dei piatti, eyebrow, etichette, indice
     · body    Inter, per il testo corrente e le descrizioni del menù
     · accent  Kaushan, SOLO per frasi brevissime: è uno script, su testo
               corrente o in maiuscolo diventa illeggibile

     Il testo corrente resta Inter e non Averia, pur essendo Averia il font
     della carta: Averia ha tratti volutamente irregolari, che su un foglio
     stampato sono carattere e su un elenco di 77 voci letto al telefono
     sono attrito. La continuità di marca la portano titoli e nomi dei piatti,
     che sono ciò che l'occhio riconosce.

     display e label oggi coincidono, ma restano due token distinti: servono a
     ruoli diversi e uno dei due può cambiare senza trascinarsi l'altro. */
  --font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
  --font-display: "Averia Sans Libre", "Trebuchet MS", sans-serif;
  --font-label: "Averia Sans Libre", "Trebuchet MS", sans-serif;
  --font-accent: "Kaushan Script", "Segoe Script", cursive;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

@media (min-width: 992px) {
  html {
    scroll-padding-top: 68px;
  }
}

body {
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.65;
}

body,
h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;

  /* Averia ha ascendenti e discendenti generose e parecchia eccedenza sulle
     curve: con 1.08, tarato su un condensato, le righe si toccavano. */
  line-height: 1.12;
}

/* Ritarature legate al cambio di carattere. Averia è di larghezza normale e
   ha avvicinamenti larghi, quindi a corpo grande va stretta un po' — al
   contrario di un condensato, che è già stretto di suo.
   Le max-width sono in ch, cioè in larghezze del carattere "0": lo "0" di
   Averia è molto più largo di quello di Oswald, quindi a parità di numero il
   blocco si allargherebbe. I valori scendono di conseguenza.
   Sono stime: vanno guardate a occhio nello styleguide. */
h1 {
  font-size: clamp(3rem, 7.5vw, 6.8rem);
  letter-spacing: -0.02em;
  max-width: 11ch;
}

h2 {
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  letter-spacing: -0.01em;
  max-width: 14ch;
}

h3 {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

/* Unico uso di Kaushan in tutto il sito, su una frase di due parole.
   Uno script su testo corrente, o peggio in maiuscolo, diventa illeggibile.
   A parità di corpo Kaushan ha occhio più piccolo del resto e forte
   inclinazione: va ingrandito, e gli serve aria a destra perché l'ultima
   lettera non tocchi la parola che segue. */
.script-accent {
  font-family: var(--font-accent);
  font-size: 1.12em;
  font-weight: 400;
  letter-spacing: 0;
  padding-right: 0.08em;
}

a {
  color: inherit;
}

.skip-link {
  background: var(--color-ink);
  color: #fff;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -5rem;
  z-index: 1100;
}

.skip-link:focus {
  top: 1rem;
}

/* In Bootstrap il margine negativo di .row vale metà di --bs-gutter-x e deve
   combaciare col padding orizzontale del .container. Il container sta a
   1.5rem (12px per lato), ma le classi g-5 portano il gutter della riga a
   3rem, cioè -24px per lato: la riga sborda di 12px da entrambi i lati.
   Su desktop non si nota, perché il container ha un max-width e attorno c'è
   spazio; su mobile, dove il container è a piena larghezza, quei 12px
   diventano scroll orizzontale — e con lo scroll orizzontale l'header sticky
   scorre insieme alla pagina lasciando scoperta una striscia a destra.
   Allineando il container al gutter più largo usato nel progetto le righe
   g-4 e g-5 tornano entrambe a filo, senza sforare. */
.container {
  --bs-gutter-x: 3rem;
}

/* Su mobile 18px per lato danno più respiro al contenuto utile. Le righe
   g-5 usano lo stesso gutter orizzontale, così i margini negativi restano
   allineati al container e non generano nuovamente overflow. */
@media (max-width: 767.98px) {
  .container,
  .row.g-5 {
    --bs-gutter-x: 2.25rem;
  }
}

.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
  max-width: 100%;
  overflow-x: clip;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.navbar {
  min-height: 90px;
}

.nav-link {
  color: var(--color-ink);
  font-weight: 600;
  transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current] {
  color: var(--color-accent-ink);
}

.btn {
  align-items: center;
  border-radius: 999px;
  box-shadow: 0 0.7rem 1.8rem rgb(23 16 14 / 10%);
  display: inline-flex;
  font-size: 0.88rem;
  font-weight: 800;
  gap: 0.7rem;
  justify-content: center;
  letter-spacing: 0.025em;
  min-height: 48px;
  padding: 0.72rem 1.35rem;
  position: relative;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.btn-lg {
  font-size: 0.98rem;
  min-height: 56px;
  padding: 0.85rem 1.65rem;
}

.btn-dark {
  background: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: 0 0.85rem 2rem rgb(23 16 14 / 20%);
}

.btn-dark:hover,
.btn-dark:focus-visible {
  background: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  box-shadow: 0 1rem 2.25rem rgb(192 82 43 / 26%);
  transform: translateY(-2px);
}

.btn-outline-dark {
  /* Stesso colore del fondo della navbar: pieno e non semitrasparente, così
     sul paper della 404 il pulsante secondario si stacca invece di sparirci
     dentro. L'unico altro uso è nell'hero, che ha già un override suo. */
  background: var(--color-surface);

  /* 55% e non 38%: il bordo è l'unica cosa che rende riconoscibile questo
     pulsante, e WCAG 1.4.11 chiede 3:1 sugli elementi di interfaccia.
     A 38% stava a 2,46 su fondo chiaro e 2,43 su paper; ora è a 4,13 e 4,01. */
  border-color: rgb(23 16 14 / 55%);

  /* Senza questa riga il testo resta il #212529 di Bootstrap: era l'unico
     colore del sito fuori dalla palette. */
  color: var(--color-ink);
  box-shadow: none;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: 0 0.85rem 2rem rgb(23 16 14 / 18%);
  color: #fff;
  transform: translateY(-2px);
}

.btn:active {
  box-shadow: none;
  transform: translateY(0) scale(0.98);
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.hero {
  align-items: center;
  background: var(--color-photo-bg);
  color: #fff;
  display: flex;
  isolation: isolate;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 8rem);
  position: relative;
  scroll-margin-top: var(--header-height);
}

.hero::after {
  background:
    linear-gradient(90deg, rgb(12 8 7 / 86%) 0%, rgb(12 8 7 / 62%) 48%, rgb(12 8 7 / 18%) 100%),
    linear-gradient(0deg, rgb(12 8 7 / 34%), transparent 55%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.hero__media {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center 60%;
  position: absolute;
  width: 100%;
  z-index: -2;
}

.hero__content {
  max-width: 780px;
  padding-block: 2rem;
}

.hero h1 {
  color: #fff;
  margin-bottom: 1.1rem;
  max-width: none;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .hero {
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    min-height: 0;
    padding-block: clamp(1.75rem, 4vh, 3.5rem);
  }

  .hero__content {
    padding-block: 0;
  }

  .hero__media {
    object-position: center 40%;
  }

  .hero h1 {
    font-size: clamp(3.4rem, min(7.5vw, 11vh), 6.8rem);
  }
}

.hero__intro {
  color: rgb(255 255 255 / 86%);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin-bottom: 2rem;
  max-width: 580px;
  text-wrap: pretty;
}

.hero__intro-ending {
  white-space: nowrap;
}

.hero__intro-break-tablet {
  display: none;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero__intro-break-tablet {
    display: inline;
  }
}

.hero .eyebrow {
  color: var(--color-accent-bright);
}

.hero__eyebrow-line {
  display: block;
}

.hero .btn-dark {
  background: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 28%);
}

.hero .btn-dark:hover,
.hero .btn-dark:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--color-ink);
  transform: translateY(-3px);
}

.hero .btn-outline-dark {
  backdrop-filter: blur(10px);
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 48%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
  color: #fff;
}

.hero .btn-outline-dark:hover,
.hero .btn-outline-dark:focus-visible {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 24%);
  color: var(--color-ink);
  transform: translateY(-3px);
}

.eyebrow {
  font-family: var(--font-label);
  color: var(--color-accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

/* Sui fondi scuri l'arancio scuro scenderebbe a 3,45:1: serve la variante
   chiara, che risale a 5,20:1. */
.section--contrast .eyebrow,
.menu-notes .eyebrow {
  color: var(--color-accent-bright);
}

.section {
  padding-block: var(--section-space);
}

.section--contrast {
  background: var(--color-ink);
  color: var(--color-cream);
}

.section--gallery,
.section--info {
  background: var(--color-paper);
}

.section-heading {
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  max-width: var(--container-narrow);
}

.media-placeholder {
  align-items: center;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgb(192 82 43 / 12%), transparent),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 16px,
      rgb(23 16 14 / 4%) 16px,
      rgb(23 16 14 / 4%) 17px
    );
  border: 1px dashed rgb(23 16 14 / 36%);
  color: rgb(23 16 14 / 64%);
  display: flex;
  justify-content: center;
  min-height: 280px;
  padding: 2rem;
  text-align: center;
}

.media-placeholder:has(img) {
  background: var(--color-paper);
  border: 0;
  display: block;
  margin: 0;
  padding: 0;
}

.map-column {
  display: flex;
  min-width: 0;
}

.map-embed {
  border-radius: 1.5rem;
  box-shadow: 0 1.25rem 3.5rem rgb(23 16 14 / 14%);
  flex: 1 1 auto;
  max-width: 100%;
  min-height: 420px;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.map-embed iframe {
  border: 0;
  display: block;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

/* Segnaposto mostrato finché la mappa non ha il consenso. Occupa lo stesso
   ingombro dell'iframe, così l'attivazione non fa saltare il layout. */
.map-embed[data-consenso-blocco] {
  align-items: center;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  display: flex;
  justify-content: center;
  position: relative;
}

.map-embed__blocco {
  max-width: 34ch;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.map-embed__titolo {
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.map-embed__blocco > p {
  margin-bottom: 1.25rem;
}

.map-embed__alternativa {
  font-size: 0.9rem;
  margin-bottom: 0;
  margin-top: 1.25rem;
}

/* A consenso dato l'iframe prende il posto del segnaposto. */
.map-embed[data-consenso-blocco] iframe {
  display: none;
}

.map-embed.is-attivo {
  background: none;
  border: 0;
  display: block;
}

.map-embed.is-attivo iframe {
  display: block;
}

.map-embed.is-attivo .map-embed__blocco {
  display: none;
}

.map-embed__loading {
  align-items: center;
  background: var(--color-paper);
  color: var(--color-ink);
  display: none;
  flex-direction: column;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  gap: 0.9rem;
  inset: 0;
  justify-content: center;
  letter-spacing: 0.1em;
  position: absolute;
  text-transform: uppercase;
  z-index: 1;
}

.map-embed.is-loading .map-embed__loading {
  display: flex;
}

.map-embed__spinner {
  animation: map-loading-spin 0.8s linear infinite;
  border: 3px solid rgb(192 82 43 / 20%);
  border-radius: 50%;
  border-top-color: var(--color-accent);
  height: 2.5rem;
  width: 2.5rem;
}

@keyframes map-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.feature-card {
  border-top: 1px solid rgb(230 217 210 / 35%);
  padding-top: 1.5rem;
}

.feature-card__number,
.menu-card__label {
  font-family: var(--font-label);
  color: var(--color-accent-bright);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.feature-card p:last-child {
  color: rgb(230 217 210 / 78%);
}

.menu-card {
  border: 1px solid var(--color-line);
  min-height: 240px;
  padding: 1.75rem;
}

.menu-card__label {
  color: var(--color-accent-ink);
}

.menu-preview-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.menu-preview-card {
  background: var(--color-photo-bg);
  color: #fff;
  display: block;
  grid-column: span 6;
  min-height: clamp(340px, 36vw, 500px);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.menu-preview-card:nth-child(1),
.menu-preview-card:nth-child(4) {
  grid-column: span 7;
}

.menu-preview-card:nth-child(2),
.menu-preview-card:nth-child(3) {
  grid-column: span 5;
}

@media (min-width: 768px) {
  .menu-preview-card:nth-child(1) {
    grid-column: span 5;
  }

  .menu-preview-card:nth-child(2) {
    grid-column: span 7;
  }

  .menu-preview-card:nth-child(3) {
    grid-column: span 7;
  }

  .menu-preview-card:nth-child(4) {
    grid-column: span 5;
  }
}

.menu-preview-card::after {
  background: linear-gradient(0deg, rgb(12 8 7 / 88%) 0%, rgb(12 8 7 / 12%) 72%);
  content: "";
  inset: 0;
  position: absolute;
  transition: background-color 0.35s ease;
}

.menu-preview-card img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
}

.menu-preview-card__content {
  bottom: 0;
  display: grid;
  gap: 0.25rem;
  left: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  position: absolute;
  right: 4rem;
  z-index: 1;
}

/* Targhetta al posto del testo appoggiato sulla foto.
   Sull'immagine nuda l'arancione dipendeva da cosa c'era dietro e su una
   foto chiara scendeva sotto 2:1; qui il fondo se lo porta con sé, quindi
   il contrasto è lo stesso su tutte le card e con qualunque foto futura.
   Il marchio non si perde: passa dal testo al fondo.
   La sfumatura parte da --color-accent e non da --color-accent-bright
   perché una sfumatura vale quanto il suo estremo più chiaro, e sul
   chiaro il bianco farebbe solo 3,62:1. Da qui in giù è 4,68:1 e sale. */
/* Testo chiaro, arancione trasparente dietro.
   L'arancione qui non fa da fondo ma da velo colorato: al 30% scurisce
   appena la foto e ci posa sopra il colore del marchio, restando lontano
   dalla luminosità del testo. È il contrario di quello che avevamo provato
   prima — testo arancione su fondo chiaro — dove i due toni si rincorrevano
   e in qualche punto coincidevano.
   Uso --color-accent e non --color-accent-bright perché, essendo più
   profondo, abbassa il fondo invece di alzarlo: 8,5-11:1 contro 7,8-10:1. */
.menu-preview-card__label {
  background: rgb(192 82 43 / 30%);
  border-radius: 0.25rem;
  color: var(--color-paper);
  font-size: 0.72rem;
  font-weight: 800;
  justify-self: start;
  letter-spacing: 0.14em;
  padding: 0.2rem 0.45rem;
  text-transform: uppercase;
  width: fit-content;
}

.menu-preview-card__content strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
}

.menu-preview-card__content > span:last-child {
  color: rgb(255 255 255 / 78%);
  font-size: 0.95rem;
}

.menu-preview-card__arrow {
  align-items: center;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 50%;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  font-size: 1.35rem;
  height: 2.7rem;
  justify-content: center;
  position: absolute;
  right: clamp(1.5rem, 4vw, 2.5rem);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
  width: 2.7rem;
  z-index: 1;
}

.menu-preview-card:hover img,
.menu-preview-card:focus-visible img {
  transform: scale(1.055);
}

.menu-preview-card:hover .menu-preview-card__arrow,
.menu-preview-card:focus-visible .menu-preview-card__arrow {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: scale(1.06);
}

.menu-preview-card:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.diet-highlight {
  background: var(--color-ink);
  color: rgb(230 217 210 / 80%);
  overflow: hidden;
  position: relative;
}

.diet-highlight::before {
  border: clamp(5rem, 10vw, 9rem) solid rgb(192 82 43 / 7%);
  border-radius: 50%;
  content: "";
  height: clamp(18rem, 36vw, 34rem);
  position: absolute;
  right: clamp(-15rem, -12vw, -8rem);
  top: clamp(-15rem, -12vw, -8rem);
  width: clamp(18rem, 36vw, 34rem);
}

.diet-highlight .container {
  position: relative;
}

.diet-highlight .eyebrow,
.diet-highlight__label {
  color: var(--color-accent-bright);
}

.diet-highlight h2,
.diet-highlight h3 {
  color: var(--color-cream);
}

.diet-highlight__header {
  align-items: end;
  display: grid;
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.diet-highlight__header h2,
.diet-highlight__header p {
  margin-bottom: 0;
}

.diet-highlight__header > p {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  max-width: 48ch;
}

.diet-highlight__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diet-highlight__card {
  background: rgb(255 255 255 / 4%);
  border: 1px solid rgb(230 217 210 / 20%);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: auto minmax(0, 1fr);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.diet-highlight__card:hover {
  background: rgb(255 255 255 / 7%);
  border-color: rgb(192 82 43 / 70%);
  transform: translateY(-4px);
}

.diet-highlight__mark {
  align-items: center;
  border: 1px solid var(--color-accent-bright);
  border-radius: 50%;
  color: var(--color-cream);
  display: flex;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  height: 3.75rem;
  justify-content: center;
  letter-spacing: 0.08em;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
  width: 3.75rem;
}

.diet-highlight__card:hover .diet-highlight__mark,
.diet-highlight__card:focus-within .diet-highlight__mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: scale(1.05);
}

.diet-highlight__icon {
  color: currentcolor;
  display: block;
  height: 1.7rem;
  width: 1.7rem;
}

.diet-highlight__label {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 0.7rem;
  text-transform: uppercase;
}

.diet-highlight__card h3 {
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}

.diet-highlight__note {
  color: rgb(230 217 210 / 62%);
  font-size: 0.82rem;
  margin-top: -0.35rem;
}

.diet-highlight__link {
  align-items: center;
  color: var(--color-accent-bright);
  display: inline-flex;
  font-weight: 800;
  gap: 0.65rem;
  margin-top: 0.5rem;
  text-decoration: none;
}

.diet-highlight__link-arrow {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.diet-highlight__link:hover,
.diet-highlight__link:focus-visible {
  color: var(--color-cream);
}

.diet-highlight__link:hover .diet-highlight__link-label,
.diet-highlight__link:focus-visible .diet-highlight__link-label {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.diet-highlight__link:hover .diet-highlight__link-arrow,
.diet-highlight__link:focus-visible .diet-highlight__link-arrow {
  transform: translateX(0.25rem);
}

@media (min-width: 992px) {
  .diet-highlight__card > div {
    display: flex;
    flex-direction: column;
  }

  .diet-highlight__link {
    margin-top: auto;
    padding-top: 0.5rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .diet-highlight__header,
  .diet-highlight__grid {
    grid-template-columns: 1fr;
  }

  .diet-highlight__header {
    align-items: start;
    gap: 1rem;
  }

  .diet-highlight__header > p {
    max-width: 42rem;
  }

  .diet-highlight__card {
    align-items: start;
    grid-template-columns: 3.75rem minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .diet-highlight__header,
  .diet-highlight__grid {
    grid-template-columns: 1fr;
  }

  .diet-highlight__card {
    grid-template-columns: 1fr;
  }

  .diet-highlight__mark {
    height: 3.25rem;
    width: 3.25rem;
  }
}

.text-link {
  font-weight: 800;
  text-underline-offset: 0.35em;
}

.gallery-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-grid__trigger {
  appearance: none;
  background: var(--color-photo-bg);
  border: 0;
  cursor: zoom-in;
  display: block;
  height: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}

.gallery-grid__zoom-icon {
  align-items: center;
  background: rgb(23 16 14 / 72%);
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 2.75rem;
  justify-content: center;
  position: absolute;
  right: 1rem;
  top: 1rem;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
  width: 2.75rem;
}

.gallery-grid__zoom-icon svg {
  display: block;
}

.gallery-grid__trigger:hover .gallery-grid__zoom-icon,
.gallery-grid__trigger:focus-visible .gallery-grid__zoom-icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.06);
}

.gallery-grid__trigger:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: -3px;
}

html.has-lightbox-open,
html.has-lightbox-open body {
  overflow: hidden;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  backdrop-filter: blur(10px);
  background: rgb(12 8 7 / 94%);
  display: grid;
  inset: 0;
  padding: clamp(1rem, 3vw, 2rem);
  place-items: center;
  position: fixed;
  z-index: 2000;
}

.gallery-lightbox__dialog {
  align-items: center;
  column-gap: clamp(0.75rem, 2vw, 1.5rem);
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem;
  max-height: 100%;
  position: relative;
  width: min(100%, 94rem);
}

.gallery-lightbox__figure {
  display: grid;
  grid-column: 2;
  justify-items: center;
  margin: 0;
  min-width: 0;
  touch-action: pan-y;
}

/* Il <picture> sparisce come scatola: senza questo resterebbe largo quanto
   l'immagine a piena risoluzione, e quando il vincolo di altezza rimpicciolisce
   l'<img> quest'ultima si appoggerebbe a sinistra invece di restare centrata. */
.gallery-lightbox__figure picture {
  display: contents;
}

.gallery-lightbox__image {
  display: block;
  height: auto;
  max-height: calc(100dvh - 8rem);
  max-width: 100%;
  object-fit: contain;
  width: auto;
}

.gallery-lightbox__caption {
  align-items: baseline;
  color: rgb(255 255 255 / 78%);
  display: flex;
  font-size: 0.88rem;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 0.8rem;
  text-align: left;
  width: 100%;
}

.gallery-lightbox__counter {
  color: var(--color-accent-bright);
  flex: 0 0 auto;
  font-family: var(--font-label);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.gallery-lightbox__control {
  align-items: center;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 46%);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: var(--font-label);
  font-size: 1.45rem;
  height: 3.25rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  width: 3.25rem;
}

.gallery-lightbox__control:hover,
.gallery-lightbox__control:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  outline: 0;
  transform: scale(1.06);
}

.gallery-lightbox__control:focus-visible {
  box-shadow: 0 0 0 3px #fff;
}

.gallery-lightbox__previous {
  grid-column: 1;
}

.gallery-lightbox__next {
  grid-column: 3;
}

.gallery-lightbox__close {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery-grid {
    align-items: start;
    grid-auto-rows: auto;
  }

  .gallery-grid > .media-placeholder {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    width: 100%;
  }

  .gallery-grid > .media-placeholder img {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .gallery-lightbox {
    padding: 0.75rem;
  }

  .gallery-lightbox__dialog {
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .gallery-lightbox__figure {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .gallery-lightbox__image {
    max-height: calc(100dvh - 10rem);
  }

  .gallery-lightbox__previous,
  .gallery-lightbox__next {
    grid-row: 2;
  }

  .gallery-lightbox__previous {
    grid-column: 1;
    justify-self: end;
  }

  .gallery-lightbox__next {
    grid-column: 2;
    justify-self: start;
  }

  .gallery-lightbox__close {
    right: 0.25rem;
    top: 0.25rem;
  }
}

.contact-list {
  border-top: 1px solid var(--color-line);
  margin-top: 2.5rem;
}

.contact-list > div {
  border-bottom: 1px solid var(--color-line);
  padding-block: 1.25rem;
}

.contact-list h3 {
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.contact-list p {
  margin-bottom: 0;
}

/* ==========================================================================
   Banner cookie
   Fascia in basso, non finestra modale: non oscura la pagina e non blocca la
   lettura. Il Garante non impone di bloccare il sito, impone che nulla parta
   prima della scelta — ed è il JS a garantirlo, non un velo grigio.
   ========================================================================== */

.cookie-banner {
  background: var(--color-ink);
  bottom: 0;
  box-shadow: 0 -0.5rem 2.5rem rgb(23 16 14 / 32%);
  color: rgb(230 217 210 / 82%);
  left: 0;

  /* Solo padding verticale: quello orizzontale lo mette il .container
     interno, che è lo stesso del resto del sito. Sommarli disallineerebbe
     il banner dal contenuto della pagina. */
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  position: fixed;
  right: 0;
  z-index: 1200;
}

.cookie-banner__titolo {
  color: var(--color-cream);
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 0.6rem;
  max-width: none;
  text-transform: uppercase;
}

/* Il titolo riceve il focus all'apertura: senza questo comparirebbe il
   contorno del browser su un elemento che non è interattivo. */
.cookie-banner__titolo:focus {
  outline: none;
}

.cookie-banner__testo p {
  font-size: 0.92rem;
  margin-bottom: 0;
  max-width: 78ch;
}

.cookie-banner a {
  color: var(--color-cream);
  text-underline-offset: 0.25em;
}

.cookie-banner__azioni {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.25rem;
}

/* "Rifiuta" e "Accetta" hanno identico peso grafico: stesso colore, stessa
   dimensione, stesso spessore. Un rifiuto reso meno evidente
   dell'accettazione rende il consenso invalido. */
.cookie-banner__btn {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-ink);
  min-width: 9rem;
}

.cookie-banner__btn:hover,
.cookie-banner__btn:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.cookie-banner__link {
  background: none;
  border: 0;
  color: var(--color-cream);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cookie-banner__link:hover,
.cookie-banner__link:focus-visible {
  color: var(--color-accent-bright);
}

.cookie-banner__opzioni {
  border-top: 1px solid rgb(230 217 210 / 20%);
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.cookie-banner__switch {
  align-items: center;
  color: var(--color-cream);
  cursor: pointer;
  display: flex;
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.6rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.cookie-banner__switch input {
  accent-color: var(--color-accent);
  block-size: 1.15rem;
  inline-size: 1.15rem;
}

.cookie-banner__opzione p {
  font-size: 0.85rem;
  margin-bottom: 0;
}

/* Da 992px testo a sinistra e pulsanti a destra. Il paragrafo resta tagliato
   a 78 caratteri per leggibilità, ma senza qualcosa accanto quel limite
   lasciava scoperto un terzo della barra. Il pannello preferenze scende
   invece a tutta larghezza, perché lì le due categorie stanno affiancate. */
@media (min-width: 992px) {
  .cookie-banner__inner {
    align-items: center;
    display: grid;
    gap: 0 2.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cookie-banner__testo {
    grid-column: 1;
    grid-row: 1;
  }

  .cookie-banner__azioni {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .cookie-banner__opzioni {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 575.98px) {
  /* A schermo stretto i due pulsanti principali stanno affiancati e occupano
     metà riga ciascuno: restano equivalenti anche qui. */
  .cookie-banner__btn {
    flex: 1 1 0;
    min-width: 0;
  }

  .cookie-banner__link {
    flex: 1 0 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Pagine legali
   Testo lungo e denso: qui conta la misura di riga, non l'impatto. I titoli
   non riusano la scala della home, tarata su titoloni da hero.
   ========================================================================== */

.legal {
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* Stessa misura del testo, così il filo sotto al titolo è largo quanto la
   colonna che introduce invece di fermarsi prima. */
.legal__intro {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 2.5rem;
  margin-inline: auto;
  max-width: 68ch;
  padding-bottom: 2rem;
}

.legal__intro h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 1rem;
  max-width: 18ch;
}

.legal__aggiornamento {
  font-size: 0.85rem;
  margin-bottom: 0;
  opacity: 0.75;
}

/* 68 caratteri: sopra questa misura l'occhio fatica a ritrovare l'inizio
   della riga successiva, e un'informativa si legge già controvoglia.
   Il limite va però centrato nel container, non lasciato a sinistra: su
   schermo largo lo spazio avanzato è quasi 700px, e tutto da un lato solo
   sembra un errore di impaginazione invece di una scelta. */
.legal__testo {
  margin-inline: auto;
  max-width: 68ch;
}

.legal__testo h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: 0;
  margin-bottom: 0.85rem;
  margin-top: 2.75rem;
  max-width: none;
}

.legal__testo h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  margin-top: 1.75rem;
}

.legal__testo p,
.legal__testo ul,
.legal__testo ol {
  margin-bottom: 1.1rem;
}

.legal__testo ul,
.legal__testo ol {
  padding-left: 1.3rem;
}

.legal__testo li {
  margin-bottom: 0.45rem;
}

.legal__testo a {
  text-decoration: underline;
  text-decoration-color: rgb(23 16 14 / 30%);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.legal__testo a:hover,
.legal__testo a:focus-visible {
  color: var(--color-accent-ink);
  text-decoration-color: currentcolor;
}

/* Riapre il banner da dentro il testo. È un <button> perché non porta da
   nessuna parte, ma dev'essere indistinguibile dai link che gli stanno
   attorno, altrimenti in mezzo a un paragrafo non lo si riconosce. */
.legal__riapri {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: rgb(23 16 14 / 30%);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.legal__riapri:hover,
.legal__riapri:focus-visible {
  color: var(--color-accent-ink);
  text-decoration-color: currentcolor;
}

/* Tabella dei cookie: su schermo stretto scorre da sola invece di far
   scorrere tutta la pagina in orizzontale. */
.legal__tabella {
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.legal__tabella table {
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 34rem;
  width: 100%;
}

.legal__tabella th,
.legal__tabella td {
  border-bottom: 1px solid var(--color-line);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.legal__tabella th {
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.legal__tabella code {
  font-size: 0.85em;
}

@media (max-width: 767.98px) {
  .legal__tabella {
    overflow: visible;
  }

  .legal__tabella table,
  .legal__tabella tbody,
  .legal__tabella tr,
  .legal__tabella td {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .legal__tabella table {
    font-size: 0.9rem;
  }

  .legal__tabella thead {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .legal__tabella tbody {
    display: grid;
    gap: 1rem;
  }

  .legal__tabella tr {
    background: rgb(255 255 255 / 42%);
    border: 1px solid var(--color-line);
    border-radius: 1rem;
    box-shadow: 0 0.65rem 1.75rem rgb(23 16 14 / 6%);
    overflow: hidden;
  }

  .legal__tabella td {
    align-items: start;
    border-bottom: 1px solid var(--color-line);
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(5.6rem, 34%) minmax(0, 1fr);
    overflow-wrap: anywhere;
    padding: 0.8rem 1rem;
  }

  .legal__tabella td:last-child {
    border-bottom: 0;
  }

  .legal__tabella td::before {
    color: var(--color-accent-ink);
    content: attr(data-label);
    font-family: var(--font-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
  }
}

/* ==========================================================================
   Pagina 404
   ========================================================================== */

/* Una 404 non è una pagina di contenuto: c'è una frase e due azioni, niente
   da scandire. L'allineamento a sinistra serve dove l'occhio deve ritrovare
   un bordo costante riga dopo riga; qui lascerebbe solo mezzo schermo vuoto.
   Centrata, viene letta come stato eccezionale e non come pagina normale.
   Il display: flex serve alla centratura verticale nello spazio che resta
   sotto l'header, così il blocco non resta appeso in alto con il vuoto sotto. */
.error-page {
  align-items: center;

  /* Stesso fondo della sezione contatti in home: fra header chiaro e footer
     scuro, senza questo la pagina resta una campitura unica. */
  background: var(--color-paper);
  display: flex;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  padding-block: clamp(3.5rem, 9vw, 7rem);
  text-align: center;
}

/* Più stretto del container standard: centrato, un blocco largo costringe
   l'occhio a rincorrere l'inizio di ogni riga. */
.error-page > .container {
  max-width: 44rem;
}

.error-page h1,
.error-page__intro {
  margin-inline: auto;
}

.error-page__actions,
.error-page__contact {
  justify-content: center;
}

/* Il titolo qui è una frase, non un titolone di sezione: le 11ch della
   regola globale lo spezzerebbero in cinque righe. */
.error-page h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  margin-bottom: 1.5rem;
  max-width: 18ch;
}

.error-page__intro {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  margin-bottom: 2.5rem;
  max-width: 52ch;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.error-page__contact {
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  padding-top: 1.75rem;
}

.error-page__contact p {
  margin-bottom: 0;
}

/* Link di contenuto: telefono, WhatsApp, email. Erano gli unici collegamenti
   del sito senza risposta al passaggio del mouse — bottoni, navigazione e
   footer ce l'avevano già. Un link che non reagisce sembra disattivato, e
   qui sono proprio le azioni che vogliamo far compiere. */
.contact-list a,
.error-page__contact a {
  text-decoration: underline;
  text-decoration-color: rgb(23 16 14 / 30%);
  text-underline-offset: 0.25em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.contact-list a:hover,
.contact-list a:focus-visible,
.error-page__contact a:hover,
.error-page__contact a:focus-visible {
  color: var(--color-accent-ink);
  text-decoration-color: currentcolor;
}

.contact-list .icon,
.error-page__contact .icon {
  color: var(--color-accent-ink);
}

/* ==========================================================================
   Footer
   Quattro blocchi di contenuto più una barra bassa di servizio.
   La griglia è CSS Grid con auto-fit e non le colonne di Bootstrap: si
   riorganizza da sola in base allo spazio disponibile, senza dover dichiarare
   una classe di colonna per ogni breakpoint.
   ========================================================================== */

.site-footer {
  background: var(--color-ink);
  color: rgb(230 217 210 / 78%);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

/* --- Richiamo alle recensioni ---------------------------------------------
   Fascia a tutta larghezza in cima al footer, non una voce dentro una
   colonna: è la cosa a cui il cliente tiene di più, e in fondo a un elenco
   di contatti sarebbe passata inosservata. */

.site-footer__review {
  align-items: center;
  border-bottom: 1px solid rgb(230 217 210 / 16%);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 2.5rem);
}

.site-footer__review p {
  margin: 0;
  max-width: 48ch;
}

.site-footer__review strong {
  color: var(--color-cream);
  display: block;
  font-family: var(--font-label);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

/* Il selettore è annidato per forza, non per abitudine: `.site-footer a` vale
   (0,1,1) e batterebbe un semplice `.btn-review`, che vale (0,1,0). Il
   pulsante si ritroverebbe il testo color crema sul proprio fondo crema, cioè
   invisibile — e riapparirebbe solo in hover, dove la pseudo-classe fa salire
   la specificità a (0,2,0). Annidando si arriva a (0,2,0) già a riposo. */
.site-footer .btn-review {
  background: var(--color-cream);
  border: 1px solid var(--color-cream);
  color: var(--color-ink);
  flex: 0 0 auto;
}

/* text-decoration esplicito: .site-footer a:hover sottolinea tutti i link
   della fascia, e su un pulsante la sottolineatura è fuori posto. */
.site-footer .btn-review:hover,
.site-footer .btn-review:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

.site-footer__main {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.site-footer__brand {
  max-width: 34ch;
}

.site-footer__brand-copy {
  max-width: 34ch;
}

/* Niente placca chiara dietro: nel footer si usa la versione monocromatica
   crema del marchio, senza il bordo arancione, leggibile sul fondo scuro.
   Il file sorgente è 256px, quindi fino a 128px di resa il timbro resta
   nitido anche su schermi a doppia densità. */
.site-footer__logo {
  height: clamp(96px, 12vw, 128px);
  margin-bottom: 1.25rem;
  width: auto;
}

.site-footer__claim {
  margin-bottom: 1.5rem;
}

.site-footer__claim-break {
  display: none;
}

/* max-width: none annulla il 14ch che gli h2 ereditano dalla regola globale,
   pensata per i titoloni di sezione e fuori luogo su un'etichetta. */
.site-footer__title {
  color: var(--color-cream);
  font-family: var(--font-label);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
  max-width: none;
  text-transform: uppercase;
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__list li {
  margin-bottom: 0.6rem;
}

.site-footer__seasonal-hours {
  color: var(--color-accent-bright);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 1rem;
}

.site-footer__social {
  margin-top: 0;
}

.site-footer address {
  font-style: normal;
  margin-bottom: 0.6rem;
}

.site-footer a {
  color: var(--color-cream);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-accent-bright);
  text-decoration: none;
}

.site-footer a.active,
.site-footer a[aria-current] {
  color: var(--color-accent-bright);
  font-weight: 700;
}

/* --- Social ---------------------------------------------------------------
   Tondi grandi sotto il marchio, non voci di elenco in mezzo alle altre:
   così si vedono e non possono più andare a capo, perché occupano poco. */

.social-list {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-list a {
  align-items: center;

  /* 42% e non meno: il bordo è ciò che identifica il pulsante, e WCAG 1.4.11
     chiede 3:1 sugli elementi di interfaccia. A 32% stava a 2,40. */
  border: 1px solid rgb(230 217 210 / 42%);
  border-radius: 50%;
  display: flex;
  height: 46px;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
  width: 46px;
}

.social-list a:hover,
.social-list a:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

/* --- Barra bassa ---------------------------------------------------------- */

.site-footer__bottom {
  align-items: center;
  border-top: 1px solid rgb(230 217 210 / 16%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
}

.site-footer__bottom p {
  font-size: 0.85rem;
  margin: 0;
}

.site-footer__vat::before {
  content: "\00b7\00a0";
}

.site-footer__credit a {
  color: var(--color-accent-bright);
  font-weight: 700;
}

.site-footer__credit a:hover,
.site-footer__credit a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

/* È un <button> e non un link perché non porta da nessuna parte: riapre il
   banner. Viene però truccato da link per stare in fila con gli altri due —
   il Garante chiede che la scelta sia sempre revocabile con la stessa
   facilità con cui è stata data. */
.site-footer__preferenze {
  background: none;
  border: 0;
  color: var(--color-cream);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.site-footer__preferenze:hover,
.site-footer__preferenze:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

@media (min-width: 768px) {
  .site-footer__main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .site-footer__review {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .site-footer__bottom > p:first-child {
    flex: 0 0 100%;
    text-align: center;
  }

  .site-footer__main {
    column-gap: clamp(1.5rem, 4vw, 2.5rem);
    grid-template-areas:
      "brand brand brand"
      "contact hours nav";
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .site-footer__brand {
    grid-area: brand;
    max-width: none;
    text-align: center;
  }

  .site-footer__brand-copy {
    margin-inline: auto;
    max-width: 30ch;
  }

  .site-footer__claim-break {
    display: block;
  }

  .site-footer__brand .site-footer__logo {
    display: block;
    margin-inline: auto;
  }

  .site-footer__brand > .site-footer__social .social-list {
    justify-content: center;
  }

  .site-footer__contact {
    grid-area: contact;
  }

  .site-footer__hours {
    grid-area: hours;
  }

  .site-footer__nav {
    grid-area: nav;
  }
}

@media (min-width: 992px) {
  .site-footer__main {
    grid-template-areas: "brand contact hours nav";
  }

  /* Su desktop il contenitore del marchio si scioglie nella griglia: logo e
     claim restano nella prima colonna, mentre i social condividono la cella
     di Naviga. Il DOM resta invece invariato su mobile. */
  .site-footer__brand {
    display: contents;
  }

  .site-footer__brand-copy {
    grid-area: brand;
  }

  .site-footer__contact {
    grid-area: contact;
  }

  .site-footer__hours {
    grid-area: hours;
  }

  .site-footer__nav {
    /* Condivide la cella con i social, che stanno più in basso nella stessa
       area. Senza align-self la scatola del nav si allunga per riempire la
       cella e, venendo dopo nel DOM, si stende sopra le icone: restano
       visibili ma i clic finiscono nel div. Con start la scatola si ferma
       al suo contenuto e lascia libera la parte bassa. */
    align-self: start;
    grid-area: nav;
    padding-bottom: 0;
    padding-right: 0;
  }

  .site-footer__brand > .site-footer__social {
    align-self: start;
    grid-area: nav;
    justify-self: start;
    margin-top: 8.75rem;
  }

  .site-footer__brand > .site-footer__social .site-footer__title {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar {
    max-width: 100%;
    min-width: 0;
    padding-block: 0;
    width: 100%;
  }

  .navbar > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--header-height) auto;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-right: 0;
    min-width: 0;
  }

  .navbar-toggler {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .navbar-collapse {
    border: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    width: 100%;
  }

  .navbar-collapse::after {
    color: var(--color-accent-ink);
    content: "Steakhouse · Hamburgeria";
    display: block;
    font-family: var(--font-label);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0 1rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
  }

  .navbar-collapse.collapsing {
    transition: height 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .navbar-nav {
    align-items: stretch !important;
    border: 0;
    gap: 0.2rem;
    padding-block: 1.75rem 1.5rem;
  }

  .navbar-nav .nav-item,
  .navbar-nav .nav-link {
    text-align: center;
  }

  .navbar-nav > .nav-item:not(:last-child)::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgb(192 82 43 / 28%) 18%,
      rgb(192 82 43 / 28%) 82%,
      transparent
    );
    content: "";
    display: block;
    height: 1px;
    margin: 0.35rem auto;
    width: min(72%, 15rem);
  }

  .navbar-nav .nav-link {
    border-radius: 999px;
    margin-inline: auto;
    padding: 0.7rem 1.25rem;
    width: min(100%, 20rem);
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus-visible,
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link[aria-current] {
    background: rgb(192 82 43 / 9%);
  }

  .navbar-nav > .nav-item:last-child {
    margin-top: 1.25rem;
  }

}

@media (max-width: 767.98px) {
  .site-footer__brand {
    max-width: none;
    order: 1;
  }

  .site-footer__brand-copy {
    margin-inline: auto;
  }

  .site-footer__claim-break {
    display: block;
  }

  .site-footer__col {
    order: 3;
  }

  .site-footer__main,
  .site-footer__bottom {
    text-align: center;
  }

  .site-footer__vat {
    display: block;
    white-space: nowrap;
  }

  .site-footer__vat::before {
    content: none;
  }

  /* Un'immagine è inline: senza display block i margini automatici non la
     centrerebbero. */
  .site-footer__logo {
    display: block;
    margin-inline: auto;
  }

  .social-list,
  .site-footer__legal,
  .site-footer__bottom,
  .site-footer__review {
    justify-content: center;
  }

  .site-footer__review {
    text-align: center;
  }

  .hero {
    /* Su browser mobili dvh cambia quando la barra degli indirizzi si ritrae
       e forza il ricalcolo di hero e object-fit. svh resta stabile durante
       lo scroll, evitando lo scatto al passaggio alla sezione successiva. */
    height: calc(100vh - var(--header-height));
    height: calc(100svh - var(--header-height));
    min-height: 0;
  }

  .hero::after {
    background:
      linear-gradient(90deg, rgb(12 8 7 / 90%), rgb(12 8 7 / 56%)),
      linear-gradient(0deg, rgb(12 8 7 / 52%), transparent 60%);
  }

  .hero__media {
    object-position: 54% center;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .menu-preview-grid {
    grid-template-columns: 1fr;
  }

  .menu-preview-card,
  .menu-preview-card:nth-child(1),
  .menu-preview-card:nth-child(2),
  .menu-preview-card:nth-child(3),
  .menu-preview-card:nth-child(4) {
    grid-column: 1;
    min-height: 340px;
  }

  .media-placeholder {
    aspect-ratio: 4 / 3;
    min-height: 240px;
  }

  .map-embed {
    height: clamp(280px, 78vw, 380px);
    min-height: 0;
  }
}

@media (max-width: 374.98px) {
  .hero h1 {
    font-size: 2.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Menu page */

.menu-page {
  background: var(--color-surface);
}

.menu-hero {
  background: var(--color-paper);
  padding-block: clamp(4rem, 9vw, 7rem);
}

@media (min-width: 992px) {
  .menu-hero {
    padding-bottom: clamp(2.5rem, 3vw, 3.5rem);
    padding-top: clamp(3rem, 4vw, 4rem);
  }
}

.menu-hero h1 {
  margin-bottom: 1.5rem;
  max-width: none;
  white-space: nowrap;
}

.menu-hero__intro {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  margin-bottom: 1.5rem;
  max-width: 650px;
}

html:is([lang="fr"], [lang="es"]) .menu-hero__intro {
  max-width: 760px;
}

.menu-language {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.menu-language__label {
  color: rgb(23 16 14 / 68%);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-language__options {
  background: rgb(23 16 14 / 6%);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  display: inline-flex;
  padding: 0.3rem;
}

.menu-language__option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgb(23 16 14 / 68%);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-weight: 800;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.menu-language__option small {
  font-size: 0.78rem;
  font-weight: 700;
}

.menu-language__option:hover {
  color: var(--color-ink);
  transform: translateY(-1px);
}

.menu-language__option.is-active {
  background: var(--color-ink);
  box-shadow: 0 0.55rem 1.25rem rgb(23 16 14 / 16%);
  color: var(--color-cream);
}

.menu-language__option:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

.menu-hero-gallery {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.menu-hero-gallery__item {
  aspect-ratio: 4 / 5;
  background: var(--color-photo-bg);
  color: #fff;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.menu-hero-gallery__item::after {
  background: linear-gradient(0deg, rgb(12 8 7 / 86%), transparent 62%);
  content: "";
  inset: 0;
  position: absolute;
}

/* Il <picture> deve sparire dal layout: è inline e senza altezza propria, e
   diventando il contenitore dell'immagine ne farebbe collassare il 100%. */
.menu-hero-gallery__item picture {
  display: contents;
}

.menu-hero-gallery__item img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
}

.menu-hero-gallery__item--grilled img {
  object-position: center 64%;
}

.menu-hero-gallery__item span {
  bottom: 0;
  display: grid;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 2.2rem);
  left: 0;
  line-height: 1.05;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  position: absolute;
  right: 0;
  z-index: 1;
}

.menu-hero-gallery__item span > b {
  display: block;
  font: inherit;
}

@media (max-width: 575.98px) {
  .menu-language {
    align-items: stretch;
  }

  .menu-language__options {
    width: 100%;
  }

  .menu-language__option {
    flex: 1;
    justify-content: center;
    padding-inline: 0.6rem;
  }

  .menu-language__option small {
    display: none;
  }
}

/* Stessa targhetta delle card in homepage: le due sezioni fanno la stessa
   cosa e devono parlare la stessa lingua. Qui serviva ancora di più, perché
   il corpo è 10,4px e su mobile il velo dietro valeva solo il 47%. */
/* Stesso velo arancione delle card in homepage: vedi la nota lì sopra. */
.menu-hero-gallery__item small {
  background: rgb(192 82 43 / 30%);
  border-radius: 0.25rem;
  color: var(--color-paper);
  font-family: var(--font-label);
  font-size: 0.65rem;
  font-weight: 700;
  justify-self: start;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
  padding: 0.18rem 0.4rem;
  text-transform: uppercase;
  width: fit-content;
}

.menu-hero-gallery__item:hover img,
.menu-hero-gallery__item:focus-visible img {
  transform: scale(1.06);
}

.menu-hero-gallery__item:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.menu-index {
  background: var(--color-ink);
  color: var(--color-cream);
  position: sticky;
  top: var(--sticky-header-offset, var(--header-height));
  z-index: 900;
}

.menu-index__mobile {
  display: none;
}

.menu-index__scroll {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.18rem, 0.35vw, 0.4rem);
  justify-content: center;
  padding-block: 0.75rem;
}

.menu-index a {
  font-family: var(--font-label);

  /* 0.42 e non 0.25: sotto quella soglia il bordo scende a 1,93:1 e non
     raggiunge il 3,0:1 richiesto da WCAG per gli elementi non testuali. */
  background: rgb(230 217 210 / 4%);
  border: 1px solid rgb(230 217 210 / 30%);
  border-radius: 999px;
  color: var(--color-cream);
  flex: 0 0 auto;
  font-size: clamp(0.61rem, 0.68vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.52rem clamp(0.42rem, 0.55vw, 0.7rem);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease;
}

.menu-index a:hover,
.menu-index a:focus-visible {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-ink);
  transform: translateY(-1px);
}

@media (max-width: 991.98px) {
  .menu-index__mobile {
    display: block;
    padding-block: 0.65rem;
  }

  .menu-index__scroll {
    display: none;
  }

  .menu-index__select-wrap {
    position: relative;
  }

  .menu-index__select {
    appearance: none;
    background: var(--color-cream);
    border: 1px solid rgb(230 217 210 / 46%);
    border-radius: 999px;
    color: var(--color-ink);
    cursor: pointer;
    font-family: var(--font-label);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    min-height: 46px;
    padding: 0.7rem 3rem 0.7rem 1.15rem;
    text-transform: uppercase;
    width: 100%;
  }

  .menu-index__select:focus-visible {
    outline: 3px solid var(--color-accent-bright);
    outline-offset: 3px;
  }

  .menu-index__chevron {
    border-bottom: 2px solid var(--color-accent-ink);
    border-right: 2px solid var(--color-accent-ink);
    height: 0.65rem;
    pointer-events: none;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-70%) rotate(45deg);
    width: 0.65rem;
  }
}

.menu-diet-filter {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  scroll-margin-top: 150px;
}

.menu-diet-filter__inner {
  align-items: end;
  display: grid;
  gap: 1rem clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) auto;
}

.menu-diet-filter__heading .eyebrow {
  margin-bottom: 0.55rem;
}

.menu-diet-filter__heading h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: 0;
  max-width: none;
}

.menu-diet-filter__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-end;
}

.menu-diet-filter__button {
  background: transparent;
  border: 1px solid rgb(23 16 14 / 24%);
  border-radius: 999px;
  color: var(--color-ink);
  cursor: pointer;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.8rem 1.15rem;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.menu-diet-filter__button:hover,
.menu-diet-filter__button:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  outline: 0;
  transform: translateY(-2px);
}

.menu-diet-filter__button:focus-visible {
  box-shadow: 0 0 0 3px rgb(192 82 43 / 24%);
}

.menu-diet-filter__button.is-active {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-cream);
}

.menu-diet-filter__note,
.menu-diet-filter__status {
  grid-column: 1 / -1;
  margin: 0;
}

.menu-diet-filter__note {
  color: rgb(23 16 14 / 66%);
  font-size: 0.85rem;
  max-width: 76ch;
}

.menu-diet-filter__status {
  color: var(--color-accent-ink);
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  min-height: 1.3em;
}

/* Scheda orizzontale: testo a sinistra, foto a destra quando c'è.
   La foto è opzionale e appartiene a un filtro solo, quindi la colonna
   nasce da align-items e non da una griglia fissa: senza immagine il
   testo si prende tutta la riga e non resta un buco. */
.menu-filter-selection {
  align-items: center;
  border-top: 1px solid var(--color-line);
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}

.menu-filter-selection[hidden] {
  display: none;
}

.menu-filter-selection__body {
  flex: 1 1 auto;
  min-width: 0;
}

.menu-filter-selection__media {
  flex: 0 0 auto;
  margin: 0;
  width: clamp(6.5rem, 14vw, 10rem);
}

.menu-filter-selection__media[hidden] {
  display: none;
}

.menu-filter-selection__media img {
  border-radius: 0.6rem;
  display: block;
  height: auto;
  width: 100%;
}

.menu-filter-selection__note {
  color: rgb(23 16 14 / 72%);
  font-size: 0.92rem;
  margin-bottom: 0;
  margin-top: 0.6rem;
  max-width: 68ch;
}

.menu-filter-selection__note[hidden] {
  display: none;
}

.menu-filter-selection__eyebrow {
  margin-bottom: 0.45rem;
}

.menu-filter-selection__title {
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  margin-bottom: 0.55rem;
}

.menu-filter-selection__description {
  color: rgb(23 16 14 / 72%);
  margin-bottom: 0;
  max-width: 68ch;
}

.menu-content.is-filtered .menu-section__visual {
  display: none;
}

/* Banner legato a un filtro: nascosto quando non è il suo turno, e visibile
   solo mentre quel filtro è attivo. Vince sulla regola qui sopra perché ha
   un attributo in più su entrambi i lati del selettore (0,4,0 contro 0,3,0),
   quindi non serve alcun !important. */
.menu-section__visual[data-filter-visual] {
  display: none;
}

.menu-content[data-active-diet-filter="gluten-free"]
  .menu-section__visual[data-filter-visual="gluten-free"] {
  display: block;
}

.menu-content.is-filtered .menu-list {
  grid-template-columns: 1fr;
}

.menu-content.is-filtered .menu-item {
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Le sezioni compact azzerano il padding superiore perché nel menù completo
   sono accoppiate alla categoria precedente. Con un filtro quella categoria
   può sparire, quindi va ripristinata la normale separazione verticale. */
.menu-content.is-filtered .menu-section--compact {
  padding-top: var(--section-space);
}

@media (max-width: 767.98px) {
  .menu-diet-filter__inner {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .menu-diet-filter__options {
    justify-content: flex-start;
  }

  .menu-diet-filter__button {
    padding-inline: 1rem;
  }
}

/* Quattro pillole su una riga sola, tutte della stessa larghezza.
   Con le larghezze naturali "Tutto" veniva un cerchio e "Senza glutine"
   uno stadio: quattro forme diverse per quattro comandi identici.
   Con flex: 1 1 0 si spartiscono la riga in parti uguali e tornano a
   sembrare lo stesso comando.

   Il corpo scala con la larghezza perché è la stringa più lunga a
   decidere: in un quarto di riga "Senza glutine" ci sta a 11,7px su uno
   schermo da 390 e a 8,9px su uno da 320. Il clamp segue quella curva
   senza mai superare il corpo di partenza.

   Niente overflow qui: basta dichiarare overflow-x e il browser calcola
   overflow-y: auto anche se non lo chiedi, il contenitore inizia a
   tagliare in verticale e il translateY(-2px) dell'hover perde il bordo
   superiore della pillola. */
@media (max-width: 575.98px) {
  .menu-diet-filter__options {
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .menu-diet-filter__button {
    flex: 1 1 0;
    font-size: clamp(0.55rem, 2.7vw, 0.78rem);
    min-width: 0;
    padding-inline: 0.35rem;
    text-align: center;
    white-space: nowrap;
  }
}

.menu-section {
  padding-block: var(--section-space);
  scroll-margin-top: 76px;
}

.menu-section--tinted {
  background: var(--color-paper);
}

.menu-section--compact {
  padding-top: 0;
}

.menu-section__heading {
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1rem;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.menu-section__heading h2 {
  margin-bottom: 1rem;
}

.menu-section__heading > p:last-child {
  margin-bottom: 0;
  max-width: 650px;
}

.menu-section__intro {
  margin-bottom: 0;
  max-width: 650px;
}

.menu-section__options {
  margin-top: 1.5rem;
  max-width: 900px;
}

.menu-section__options > h3 {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.menu-section__options-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu-section__option {
  align-items: start;
  background: rgb(194 75 35 / 6%);
  border: 1px solid rgb(194 75 35 / 28%);
  display: grid;
  gap: 0.9rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 1rem;
}

.menu-section__option[hidden] {
  display: none;
}

.menu-content[data-active-diet-filter="vegetarian"] .menu-section__options-grid,
.menu-content[data-active-diet-filter="gluten-free"] .menu-section__options-grid {
  grid-template-columns: minmax(0, 650px);
}

.menu-section__option-mark {
  align-items: center;
  background: var(--color-ink);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  color: #fff;
  display: flex;
  height: 3rem;
  justify-content: center;
  width: 3rem;
}

.menu-section__option-icon {
  display: block;
  height: 1.4rem;
  width: 1.4rem;
}

.menu-section__option-title {
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.menu-section__option-text,
.menu-section__option-note {
  font-size: 0.86rem;
  margin-bottom: 0;
}

.menu-section__option-note {
  color: rgb(23 16 14 / 62%);
  font-size: 0.76rem;
  margin-top: 0.35rem;
}

@media (max-width: 767.98px) {
  .menu-section__options-grid {
    grid-template-columns: 1fr;
  }
}

.menu-section__visual {
  aspect-ratio: 16 / 6;
  background: var(--color-photo-bg);
  margin: 0 0 clamp(2.25rem, 5vw, 4rem);

  /* Attenzione al valore: con aspect-ratio il minimo di altezza si trasferisce
     in un minimo di larghezza (qui x 16/6) che batte quella del contenitore.
     La colonna piu' stretta fra 768 e 991px misura 672px, quindi oltre 252px
     il banner uscirebbe dalla griglia. */
  min-height: 240px;
  overflow: hidden;
  position: relative;
}

/* L'<img> riempie la figure: il <picture> in mezzo dev'essere trasparente
   al layout, altrimenti l'altezza al 100% si misurerebbe su di lui. */
.menu-section__visual picture {
  display: contents;
}

.menu-section__visual img {
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.menu-section__visual--portrait img {
  object-position: center 60%;
}

/* Vignettatura appena accennata: il legno dei tavoli è chiaro e caldo quanto
   i piatti, e ai bordi ruba attenzione al soggetto. Sta nel CSS e non nei
   file, così vale per tutte le sezioni e si regola con un numero solo. */
.menu-section__visual::after {
  background: radial-gradient(
    ellipse 72% 78% at 50% 50%,
    rgb(0 0 0 / 0%) 38%,
    rgb(0 0 0 / 30%) 100%
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Allineata alle targhette delle card, ma non identica: qui sotto non c'è
   il velo scuro, solo la vignettatura, che nell'angolo della didascalia vale
   appena il 14%. Con l'arancione al 30% delle card il fondo resterebbe la
   foto, e su grilled e burger si scenderebbe a 2,4:1. Tengo quindi un fondo
   quasi pieno, ma spostato dal nero neutro a un bruciato della famiglia
   dell'accento: stessa parentela cromatica, 9:1 di margine. */
.menu-section__visual figcaption {
  background: rgb(74 26 8 / 82%);
  border-radius: 0.25rem;
  bottom: 1rem;
  color: var(--color-paper);

  /* La didascalia va sopra la vignettatura, che essendo ::after è l'ultimo
     figlio e altrimenti la coprirebbe. */
  z-index: 1;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0.45rem 0.65rem;
  position: absolute;
  right: 1rem;
  text-transform: uppercase;
}

.menu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Colonna flessibile per poter spingere le pillole in fondo: essendo una
   cella di griglia il piatto è già alto quanto il suo vicino, ma senza
   questo il contenuto resta appeso in alto e le pillole di due piatti
   affiancati finiscono a quote diverse a seconda di quanto è lunga la
   descrizione. */
.menu-item {
  border-bottom: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.65rem 1.5rem 1.65rem 0;
}

.menu-item:nth-child(odd) {
  border-right: 1px solid var(--color-line);
}

.menu-item:nth-child(even) {
  padding-left: 1.5rem;
  padding-right: 0;
}

.menu-item__header {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.menu-item__header h3 {
  font-family: var(--font-label);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
}

.menu-item > p:not(.menu-item__price):not(.menu-item__tags) {
  color: rgb(23 16 14 / 72%);
  font-size: 0.95rem;
  margin-bottom: 0;
}

.menu-item__price {
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.menu-item__price::before,
.price-list strong::before,
.supplements strong::before,
.beer-table strong::before {
  content: "€ ";
}

.menu-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;

  /* auto mangia tutto lo spazio avanzato e appoggia le pillole in fondo;
     la distanza minima dalla descrizione la tiene il padding, perché un
     margine automatico non ha un valore minimo. */
  margin: auto 0 0;
  padding-top: 0.9rem;
}

.menu-item__tags span {
  border: 1px solid var(--color-line);
  color: var(--color-accent-ink);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.45rem;
  text-transform: uppercase;
}

/* "Su richiesta" non è la stessa cosa di una garanzia: una tagliata È senza
   glutine, un hamburger lo DIVENTA se chiedi il cambio del panino. Il bordo
   tratteggiato distingue le due a colpo d'occhio; a portare l'informazione
   resta comunque il testo, per chi la sfumatura grafica non la coglie. */
.menu-item__tags span.menu-item__tag--richiesta {
  border-style: dashed;
  color: var(--color-ink);
  font-weight: 700;
  opacity: 0.85;
}

.supplements {
  border: 1px solid var(--color-line);
  margin-top: 3rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.supplements h3 {
  font-family: var(--font-label);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.supplements ul,
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.supplements li,
.price-list li {
  align-items: baseline;
  border-bottom: 1px dotted var(--color-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 0.7rem;
}

.supplements li:last-child,
.price-list li:last-child {
  border-bottom: 0;
}

.supplements strong,
.price-list strong {
  white-space: nowrap;
}

.drink-groups {
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
}

.drink-group {
  scroll-margin-top: 76px;
}

.drink-group > h3 {
  border-bottom: 1px solid var(--color-line);
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.drink-group h4 {
  color: var(--color-accent-ink);
  font-family: var(--font-label);
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 2rem 0 0.35rem;
  text-transform: uppercase;
}

.price-list--descriptions small {
  color: rgb(23 16 14 / 68%);
  display: block;
  font-size: 0.86rem;
  margin-top: 0.35rem;
  max-width: 720px;
}

.beer-table {
  border-bottom: 1px solid var(--color-line);
}

.beer-table__head,
.beer-table__row {
  align-items: baseline;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 70px 70px;
  padding-block: 0.8rem;
}

.beer-table__head {
  font-family: var(--font-label);
  color: var(--color-accent-ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.beer-table strong {
  text-align: right;
}

.menu-notes {
  background: var(--color-ink);
  color: var(--color-cream);
  padding-block: var(--section-space);
  scroll-margin-top: 76px;
}

@media (min-width: 992px) {
  .menu-index > .container {
    --bs-gutter-x: 2rem;

    max-width: none;
  }

  .menu-section,
  .drink-group,
  .menu-notes {
    scroll-margin-top: 70px;
  }
}

.menu-notes h2 {
  color: var(--color-cream);
}

.menu-notes details {
  border-block: 1px solid rgb(230 217 210 / 30%);
}

.menu-notes summary {
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 800;
  padding-block: 1.25rem;
}

.allergen-list {
  columns: 2;
  column-gap: 3rem;
  padding: 0 0 1.5rem 1.25rem;
}

.allergen-list li {
  break-inside: avoid;
  color: rgb(230 217 210 / 82%);
  margin-bottom: 0.65rem;
  padding-left: 0.35rem;
}

.allergen-notice {
  color: rgb(230 217 210 / 82%);
  font-size: 0.9rem;
  margin-top: 1.5rem;
}

.allergen-notice p {
  margin-bottom: 0.75rem;
}

.allergen-notice__reference {
  color: var(--color-accent-bright);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

@media (max-width: 767.98px) {
  .menu-hero-gallery {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    margin-inline: 0;
    overflow: visible;
    padding: 0;
  }

  .menu-hero-gallery__item {
    aspect-ratio: 16 / 8;
  }

  .menu-index {
    top: 90px;
  }

  .menu-section__visual {
    aspect-ratio: 4 / 3;

    /* Stesso trasferimento di sopra, qui x 4/3: a 320px di schermo la colonna
       e' larga 284px, quindi il tetto e' 213px. */
    min-height: 200px;
  }

  .menu-list {
    grid-template-columns: 1fr;
  }

  .menu-item,
  .menu-item:nth-child(even) {
    border-left: 0;
    padding-inline: 0;
  }

  .menu-item:nth-child(odd) {
    border-right: 0;
  }

  .beer-table__head,
  .beer-table__row {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
  }

  .allergen-list {
    columns: 1;
  }
}

/* ==========================================================================
   Icone
   SVG inline da Bootstrap Icons (MIT) e Lucide (ISC). I sorgenti stanno in assets/icons/:
   per aggiungerne una, copia il <path> e incollalo nel markup.
   Le icone ereditano il colore del testo tramite fill="currentColor".
   ========================================================================== */

.icon {
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.15em;
}

.btn-icon {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}

.btn-icon .icon {
  background: rgb(255 255 255 / 12%);
  border-radius: 50%;
  box-sizing: content-box;
  overflow: visible;
  padding: 0.27rem;
}

.btn-outline-dark .icon {
  background: rgb(23 16 14 / 7%);
}

.hero .btn-outline-dark .icon {
  background: rgb(255 255 255 / 14%);
}

.hero .btn-outline-dark:hover .icon,
.hero .btn-outline-dark:focus-visible .icon {
  background: #25d366;
  color: #fff;
}

.contact-list h3 {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.contact-list h3 .icon {
  color: var(--color-accent-ink);
  vertical-align: 0;
}

.text-link {
  align-items: center;
  display: inline-flex;
  gap: 0.7rem;
  text-decoration: none;
}

.text-link .icon--arrow {
  background: var(--color-ink);
  border-radius: 50%;
  box-sizing: content-box;
  color: var(--color-cream);
  padding: 0.52rem;
}

.social-link {
  align-items: center;
  display: inline-flex;
  gap: 0.45rem;
}

/* Toggler mobile: sostituisce l'icona di default di Bootstrap, che è
   un'immagine di sfondo a colore fisso e non seguirebbe il tema. */
.navbar-toggler {
  --toggler-background: transparent;

  align-items: center;
  background: var(--toggler-background);
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  box-shadow: 0 0.35rem 0.9rem rgb(23 16 14 / 12%);
  color: var(--color-ink);
  display: flex;
  justify-content: center;
  height: 46px;
  padding: 0;
  width: 46px;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.navbar-toggler:hover,
.navbar-toggler[aria-expanded="true"] {
  --toggler-background: var(--color-accent);

  background: var(--toggler-background);
  border-color: var(--color-accent);
  box-shadow: 0 0.5rem 1.15rem rgb(192 82 43 / 28%);
  color: var(--color-cream);
}

.burger-menu-icon {
  display: grid;
  gap: 4px;
  grid-template-rows: 3px 4px 3px;
  height: 18px;
  place-content: center;
  width: 26px;
}

.burger-menu-icon::before,
.burger-menu-icon::after,
.burger-menu-icon__patty {
  background: currentColor;
  border-radius: 999px;
  content: "";
  display: block;
  justify-self: center;
  width: 20px;
}

.burger-menu-icon__patty {
  width: 26px;
}

.burger-menu-icon__patty::after {
  display: none;
}

.burger-menu-icon__lettuce {
  display: none;
}

.navbar-toggler .icon--close,
.navbar-toggler[aria-expanded="true"] .icon--open {
  display: none;
}

.navbar-toggler[aria-expanded="true"] .icon--close {
  display: block;
}

.navbar-toggler .icon--close path {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

/* Il logo è un PNG quadrato: fisso l'altezza e lascio la larghezza automatica,
   così il timbro resta circolare a prescindere dagli attributi width/height.
   La variante monocromatica è già pensata per il fondo chiaro della navbar,
   quindi non servono filtri o metodi di fusione CSS. */
.navbar-brand img {
  height: 66px;
  width: auto;
}

/* ==========================================================================
   Effetti
   Tutto CSS + IntersectionObserver, nessuna libreria di animazione.
   Ogni transizione è disattivata sotto prefers-reduced-motion, in fondo.
   ========================================================================== */

/* Su mobile l'altezza dell'header resta stabile: cambiarla mentre Chrome sta
   ancora completando uno scroll veloce sposterebbe l'inizio della hero. La
   condensazione resta solo su desktop, dove il viewport non cambia durante
   lo scroll e non introduce salti di layout. */
@media (min-width: 992px) {
  .navbar,
  .navbar-brand img {
    transition: min-height 0.3s ease, height 0.3s ease;
  }

  .is-scrolled .navbar {
    min-height: 68px;
  }

  /* Da tarare insieme a .is-scrolled .navbar: l'header condensato è alto
     68px, quindi il logo non può superare i ~52 senza toccare i bordi. */
  .is-scrolled .navbar-brand img {
    height: 52px;
  }

}

.is-scrolled .site-header {
  box-shadow: 0 1px 12px rgb(23 16 14 / 8%);
}

@media (min-width: 992px) {
  .is-scrolled .menu-page .site-header {
    box-shadow: none;
  }
}

/* Comparsa allo scroll.
   Lo stato nascosto si applica solo con JS attivo (classe .js su <html>,
   impostata da uno script inline nell'head): senza JS il contenuto resta
   visibile invece di sparire per sempre. */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js [data-reveal].is-in,
.js [data-reveal-group].is-in > * {
  opacity: 1;
  transform: none;
}

.js [data-reveal-group].is-in > *:nth-child(2) {
  transition-delay: 0.1s;
}

.js [data-reveal-group].is-in > *:nth-child(3) {
  transition-delay: 0.2s;
}

.js [data-reveal-group].is-in > *:nth-child(4) {
  transition-delay: 0.3s;
}

/* Hover */
.menu-card,
.feature-card {
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.menu-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
}

.feature-card:hover {
  transform: translateY(-4px);
}

.text-link {
  transition: color 0.25s ease;
}

.text-link .icon--arrow {
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

/* Sottolineatura e viraggio insieme: il colore da solo non basterebbe a
   segnalare lo stato a chi non lo distingue (WCAG 1.4.1), la sottolineatura
   sì. text-underline-offset era già dichiarato più su, in attesa di questa.
   L'arancione è --color-accent-ink e non --color-accent-bright: sul fondo
   chiaro della sezione il primo fa 5,36:1, il secondo 3,56:1. */
.text-link:hover,
.text-link:focus-visible {
  color: var(--color-accent-ink);
  text-decoration: underline;
}

.text-link:hover .icon--arrow,
.text-link:focus-visible .icon--arrow {
  /* Anche il pallino vira, altrimenti resterebbe una parola arancione
     attaccata a un cerchio nero. La freccia crema sopra fa 3,95:1: sotto la
     soglia del testo, ma è un elemento grafico e gli bastano 3:1. */
  background: var(--color-accent-ink);
  transform: translateX(0.3rem);
}

.social-link .icon,
.btn-icon .icon {
  transition: transform 0.25s ease;
}

.btn-icon:hover .icon,
.btn-icon:focus-visible .icon {
  transform: scale(1.08);
}

.btn-icon:hover .icon--arrow,
.btn-icon:focus-visible .icon--arrow {
  transform: translateX(0.18rem);
}

.hero .btn-dark:hover .icon--arrow,
.hero .btn-dark:focus-visible .icon--arrow {
  background: var(--color-accent-ink);
  color: #fff;
}

.social-link:hover .icon {
  transform: scale(1.15);
}

/* Le foto del cliente andranno dentro .media-placeholder / .gallery-grid:
   il crop resta fisso e a muoversi è solo l'immagine. */
.gallery-grid > *,
.media-placeholder {
  overflow: hidden;
}

.gallery-grid img,
.media-placeholder img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
}

.gallery-grid > *:hover img {
  transform: scale(1.05);
}

/* Categoria attiva nell'indice del menù, gestita da Bootstrap ScrollSpy */
.menu-index a {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.menu-index a.active {
  background: var(--color-cream);
  border-color: var(--color-cream);
  color: var(--color-ink);
}

.back-to-top {
  align-items: center;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  box-shadow: 0 0.75rem 2rem rgb(23 16 14 / 22%);
  color: var(--color-cream);
  cursor: pointer;
  display: flex;
  font-size: 1.45rem;
  height: 3.25rem;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  transform: translateY(1rem);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s;
  visibility: hidden;
  width: 3.25rem;
  z-index: 950;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  visibility: visible;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--color-ink);
  border-color: var(--color-accent);
  color: #fff;
}

.back-to-top:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

.back-to-top svg {
  display: block;
  flex: 0 0 auto;
  transform: scale(1.5);
}

@media (max-width: 767.98px) {
  .back-to-top {
    font-size: 1.25rem;
    height: 2.875rem;
    right: max(0.75rem, env(safe-area-inset-right));
    width: 2.875rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-group] > * {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}