/* ==========================================================================
   Caffetteria Villa Bousquet — foglio di stile unico
   --------------------------------------------------------------------------
   Ordine del file:
     1. Token (colori, tipografia, spazi, raggi, ombre, transizioni)
     2. Reset e basi
     3. Utility e componenti trasversali (container, bottoni, avvisi)
     4. Header e menu mobile
     5. Hero e fascia dati
     6. Sezioni: foto, dove siamo, contatti
     7. Footer e barra azioni mobile
     8. Pagine secondarie (privacy, 404)
     9. Componenti delle pagine interne (testata, split, schede, fasce)

   La palette non è decorativa: è presa dal locale. La volta in mattoni a vista
   (terracotta), l'intonaco chiaro delle pareti (crema), il legno del bancone,
   il legno dell'insegna ovale all'ingresso e l'oro del suo filo.
   ========================================================================== */

/* ==========================================================================
   1. Token
   ========================================================================== */

:root {
  /* --- Colori -------------------------------------------------------------- */
  --c-cream: #f7f1e6;
  --c-paper: #eee0c9;
  --c-sand: #dccbae;
  --c-ink: #22180e;
  --c-ink-soft: #574835;
  /* Le fasce. Prima erano blocchi scuri, ora sono due tinte di bianco
     sporco tirate verso il legno dell'insegna (#7f5022): appena piu' calde e
     piu' basse della carta, quel tanto che basta a distinguersi senza fare
     un salto di tono. Il testo sopra e' scuro, non piu' chiaro. */
  --c-band: #e3d3b8;
  --c-band-deep: #d5c19f;
  --c-terracotta: #a8481f;
  /* La stessa terra, scura: e' questa che si usa per il testo.
     Il terracotta pieno resta ai fondi dei bottoni, dove sopra ci va il
     bianco. Come colore di testo non regge: sulla carta delle sezioni
     alternate da' 4,47:1 e sulla fascia 3,95:1, tutti e due sotto soglia.
     Questo sta fra 6,2 e 8,1 a seconda del fondo. */
  --c-terracotta-deep: #7d300f;
  /* Il filo dorato dell'insegna, portato al buio quel tanto che serve per
     essere leggibile su fondo chiaro: l'oro vero (#c9973f) su crema da'
     2,4:1, sotto qualunque soglia. Questo sta a 7,6:1 sul crema e regge
     anche sulla fascia piu' scura, dove va a finire negli stati premuti. */
  --c-bronze: #614009;
  /* L'oro per i fondi scuri. E' volutamente pallido: sul velo bruno delle
     testate un oro pieno (#c9973f) si ferma a 2,6:1, questo arriva a 4,8.
     Sul crema non va usato — li' serve --c-bronze, che e' il suo opposto. */
  --c-gold: #edcf9c;
  --c-peach: #f6dfca;
  --c-white: #fffdfa;
  --c-focus: #0b6bcb;

  /* Filetto di contorno per schede e liste.
     `--c-sand` sul fondo pagina dà 1.26:1, sotto la soglia in cui l'occhio
     distingue due superfici: un bordo che di fatto non c'è. Questo è nero
     trasparente, quindi funziona su crema, su carta e sul bianco delle
     schede senza dover toccare i colori di fondo.
     Il bruno rende meno del nero a parita' di trasparenza: al 26% dava
     1,63:1 invece di 1,77:1, per questo la percentuale sale al 32% —
     stessa forza di prima, temperatura del legno. */
  --c-edge: rgb(74 45 20 / 32%);
  --c-edge-strong: rgb(74 45 20 / 44%);

  /* Corsi di mattoni sfalsati: la tessitura della volta che copre la sala,
     l'unica cosa che si vede appena entrati. Non è una texture qualsiasi
     presa a caso, viene dal posto.
     Piastrella 120x60 px: due corsi da mattoni di 60x30, con i giunti
     verticali spostati di mezzo mattone fra un corso e l'altro. Nessun
     giunto cade sul bordo della piastrella, così non si vedono le cuciture.
     Per calibrarlo si cambia solo `stroke-opacity` qui dentro. */
  /* Cerchio: la fascia di ferro che tiene insieme le doghe. Nastro alto 4px
     con la luce sul filo superiore e un ribattino ogni 36px. Si usa come
     bordo di una fascia, non come sfondo: va posato con background-position
     top o bottom e background-repeat repeat-x. */
  --hoop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='4'%3E%3Crect width='36' height='4' fill='%234a3a2c'/%3E%3Crect width='36' height='1' fill='%23ffffff' fill-opacity='.18'/%3E%3Ccircle cx='18' cy='2' r='1' fill='%23ffffff' fill-opacity='.24'/%3E%3C/svg%3E");

  --brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg fill='none' stroke='%2317140f' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 .5h120M0 30.5h120'/%3E%3Cpath d='M15.5 0v30M75.5 0v30'/%3E%3Cpath d='M45.5 30v30M105.5 30v30'/%3E%3C/g%3E%3C/svg%3E");

  /* --- Tipografia ---------------------------------------------------------- */
  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Scala fluida: valore minimo a 360px di viewport, massimo a 1440px. */
  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --t-lg: clamp(1.125rem, 1.05rem + 0.32vw, 1.3125rem);
  --t-xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --t-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --t-3xl: clamp(2.125rem, 1.65rem + 2.1vw, 3.5rem);
  --t-4xl: clamp(2.125rem, 1.55rem + 2.6vw, 4.375rem);

  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --ls-tight: -0.02em;
  --ls-wide: 0.14em;

  /* --- Spazi --------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-section: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout -------------------------------------------------------------- */
  --w-page: 78rem;
  --w-text: 36rem;
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 2.5rem);
  --h-header: 4rem;
  /* Altezza reale della barra: 3.5rem di bottone + 1rem di padding + bordo. */
  --h-actionbar: 4.5625rem;

  /* --- Raggi, ombre, movimento --------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgb(23 19 15 / 6%), 0 2px 6px rgb(23 19 15 / 5%);
  --sh-md: 0 2px 6px rgb(23 19 15 / 7%), 0 10px 26px rgb(23 19 15 / 9%);
  --sh-lg: 0 6px 14px rgb(23 19 15 / 9%), 0 24px 56px rgb(23 19 15 / 14%);

  --e-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --d-fast: 150ms;
  --d-base: 240ms;
  --d-slow: 380ms;
}

/* ==========================================================================
   2. Reset e basi
   ========================================================================== */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Le ancore non devono finire nascoste sotto l'header sticky. */
  scroll-padding-top: calc(var(--h-header) + var(--s-4));
}

body {
  background-color: var(--c-cream);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  font-weight: 450;
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Spazio per la barra azioni fissa: senza, l'ultima riga del footer
     finirebbe sotto i pulsanti. */
  padding-bottom: calc(var(--h-actionbar) + env(safe-area-inset-bottom));
}

/* Grana di carta.
   I fondi in tinta piatta, su schermate lunghe, si leggono come vuoto. Un
   rumore finissimo dà materia alla superficie: gli elementi appoggiano su
   qualcosa invece di galleggiare.
   È un SVG inline in un data URI — nessuna richiesta di rete, circa 1 kB —
   fisso rispetto alla finestra, così non scorre insieme al contenuto.
   `pointer-events: none` lo rende del tutto trasparente ai clic.
   Per calibrarlo basta cambiare l'opacità qui sotto. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    /* Nessun movimento coinvolto, ma su alcune configurazioni ad alto
       contrasto la grana disturba: qui la togliamo. */
    opacity: 0.02;
  }
}

/* Da telefono niente grana. Il velo è fixed, a tutto schermo e sopra la barra
   azioni: Safari su iOS 26 guarda l'elemento fisso più in alto sul bordo
   inferiore per decidere che colore stendere sotto i suoi tasti, trovava
   questo velo trasparente invece della barra crema e lasciava vedere la
   pagina. In più era un livello con un filtro SVG da ricomporre a ogni
   scroll. Su uno schermo piccolo al 3,5% non si vede comunque. */
@media (max-width: 61.999rem) {
  body::before {
    display: none;
  }
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* <picture> sparisce dal layout e lascia l'<img> figlio diretto del suo
   contenitore. Senza questo, `height: 100%` sull'immagine dell'hero e delle
   miniature si calcolerebbe rispetto al <picture>, che è inline e non ha
   altezza: la foto resterebbe una fascia alta quanto le sue proporzioni
   naturali invece di riempire il riquadro. */
picture {
  display: contents;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
}

address {
  font-style: normal;
}

/* Azzera pallini e rientri solo sulle liste che hanno una classe, cioè quelle
   costruite come componente. `:where()` porta la specificità a zero: senza,
   `dl[class]` (0,1,1) batterebbe `.facts__grid` (0,1,0) e ne cancellerebbe il
   padding verticale — è esattamente il bug che schiacciava la fascia dati
   contro l'hero. */
:where(ul[class], ol[class], dl[class]) {
  list-style: none;
  padding: 0;
}

/* --- Accessibilità --------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Su fondo scuro l'anello blu non stacca abbastanza: serve chiaro. */
.on-dark :focus-visible {
  outline-color: var(--c-peach);
}

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

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 300;
  padding: var(--s-3) var(--s-4);
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform var(--d-fast) var(--e-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

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

/* ==========================================================================
   3. Utility e componenti trasversali
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Una sezione sì e una no.
   Il motivo va solo sulle fasce "carta", che nel sito si alternano sempre a
   quelle color crema: così la ripetizione non diventa tappezzeria e le due
   fasce si distinguono per due cose invece che per una sola — il colore, che
   fra crema e carta cambia pochissimo, e la trama.
   Sulle fasce scure non ci va comunque: si impasterebbe con la grana. */
/* Le fasce chiare sono doghe di botte: i mattoni della volta dentro, un
   cerchio di ferro a chiuderle. I nastri stanno nello stesso
   `background-image` della trama — livelli, non elementi — cosi' i bordi
   restano attaccati alla fascia anche quando cambia altezza, e non serve
   toccare l'HTML.
   La trama passa da `--texture` invece che diretta: e' l'unica leva che
   serve poi spegnere per chi chiede piu' contrasto. */
.section--alt,
.cta-band {
  --texture: var(--brick);
  background-image: var(--hoop), var(--texture);
  background-repeat: repeat-x, repeat;
  background-position: left top, left top;
  background-size: 36px 4px, auto;
}

/* La sezione chiara e' cerchiata sopra e sotto; la fascia di richiamo solo
   sopra, perche' subito sotto comincia il footer con il suo. */
.section--alt {
  background-color: var(--c-paper);
  background-image: var(--hoop), var(--hoop), var(--texture);
  background-repeat: repeat-x, repeat-x, repeat;
  background-position: left top, left bottom, left top;
  background-size: 36px 4px, 36px 4px, auto;
}

/* Chi ha chiesto più contrasto al sistema non vuole trame dietro al testo.
   I cerchi restano: sono il bordo della fascia, non una trama. */
@media (prefers-contrast: more) {
  .section--alt,
  .cta-band {
    --texture: none;
  }
}

.section--band {
  background-color: var(--c-band);
  color: var(--c-ink);
}

/* --- Entrata in scena ------------------------------------------------------ */
/* Attivata da assets/js/main.js. La classe `.reveal` viene messa dal JS solo
   dopo l'avvio: senza JavaScript il contenuto resta visibile. */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Bottoni --------------------------------------------------------------- */

.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-cream);
  --btn-bd: var(--c-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: 0.8rem 1.4rem;
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out),
    box-shadow var(--d-fast) var(--e-out);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.btn:active {
  transform: translateY(0);
}

.btn svg {
  flex: 0 0 auto;
}

.btn--primary {
  --btn-bg: var(--c-terracotta);
  --btn-bd: var(--c-terracotta);
  --btn-fg: var(--c-white);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: currentColor;
}

.btn--ghost:hover {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-cream);
}




/* --- Etichette ------------------------------------------------------------- */

.eyebrow {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-terracotta-deep);
}


/* --- Intestazione di sezione ----------------------------------------------- */

.heading {
  display: grid;
  gap: var(--s-3);
  max-width: 44rem;
  margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
}

.heading__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Il numero della sezione dentro un cerchio: il bollo che il bottaio batte
   sul fondo della botte. La spaziatura scende da 0.18em a 0.04em perche' in
   un cerchio la coda della crenatura spinge le cifre fuori asse; `text-indent`
   restituisce la meta' che serve per rimetterle in mezzo. */
.heading__index {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 1.75rem;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-indent: 0.04em;
  color: var(--c-terracotta-deep);
}


.heading__rule {
  flex: 1;
  max-width: 5rem;
  height: 1px;
  background: var(--c-sand);
}


.heading__title {
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.028em;
  text-shadow: 0 2px 24px rgb(22 12 6 / 40%);
}

/* Una parola in corsivo dentro al titolo: carattere senza cambiare font. */
.heading__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--c-terracotta-deep);
}


.heading__lead {
  max-width: 38rem;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--c-ink-soft);
}


/* --- Avviso per i dati non confermati -------------------------------------- */

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px dashed var(--c-terracotta);
  border-radius: var(--r-md);
  background: rgb(168 72 31 / 6%);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.notice svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
}


/* ==========================================================================
   4. Header e menu mobile
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out);
}

/* Sopra l'hero: fondo scuro translucido, così il testo chiaro resta leggibile
   senza coprire la foto. */
/* Stesso colore della fascia dati sotto l'hero: header e fascia fanno da
   cornice chiara alla fotografia, sopra e sotto. E' pieno, non translucido —
   con un velo il colore cambierebbe a seconda della foto e non sarebbe piu'
   lo stesso. Niente backdrop-filter: senza trasparenza non serve, e su
   telefono e' lavoro in meno per il compositore. */
.site-header {
  background-color: var(--c-band);
  color: var(--c-ink);
}

.site-header.is-scrolled {
  border-bottom-color: var(--c-edge);
  box-shadow: var(--sh-sm);
  color: var(--c-ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--h-header);
}

/* Nell'header c'e' l'insegna, non piu' il nome scritto. Il collegamento
   resta e prende la misura dall'immagine. */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* 44px di altezza: l'header ne misura 64, e questo lascia 10px sopra e sotto.
   Piu' in la' non si puo' andare senza alzare --h-header. */
.brand__logo {
  display: block;
  width: auto;
  height: 44px;
}


/* "Caffetteria" in piccolo accanto al nome, come sull'insegna del locale. */

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0.15rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current='true']::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* Su telefono la CTA nell'header è ridondante: c'è già la barra fissa in
   basso, e ripeterla a 8 cm di distanza è solo rumore. */
.site-header__cta {
  display: none;
}

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.65rem;
  border: 1.5px solid currentColor;
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out);
}

.burger:hover {
  background-color: rgb(255 255 255 / 12%);
}

/* --- Drawer mobile --------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: var(--s-4) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  background: var(--c-band);
  color: var(--c-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    visibility var(--d-base);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.mobile-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--h-header);
}

.mobile-menu__brand {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 600;
}

.mobile-menu__kind {
  font-family: var(--f-body);
  font-style: normal;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
}

.mobile-menu__list {
  margin: var(--s-7) 0 auto;
  padding: 0;
  list-style: none;
}

.mobile-menu__item {
  border-top: 1px solid rgb(74 44 22 / 20%);
}

.mobile-menu__item:last-child {
  border-bottom: 1px solid rgb(74 44 22 / 20%);
}

.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: clamp(0.9rem, 0.5rem + 1.4vw, 1.35rem);
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  text-decoration: none;
  transition:
    color var(--d-fast) var(--e-out),
    padding-left var(--d-base) var(--e-out);
}

.mobile-menu__link:hover {
  color: var(--c-bronze);
  padding-left: var(--s-2);
}


.mobile-menu__foot {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-7);
}

.mobile-menu__address {
  font-size: var(--t-sm);
  line-height: 1.5;
  opacity: 0.85;
}

.mobile-menu__ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

/* ==========================================================================
   5. Hero e fascia dati
   ========================================================================== */

/* Hero e fascia dati sono un blocco solo, alto esattamente un primo schermo.
   Prima l'hero si prendeva il 92% dell'altezza e alla fascia restava l'8%:
   su un monitor da 916 px sono 73 px contro i ~136 che le servono, quindi
   veniva tagliata. Ora la fascia sta in fondo a un contenitore alto 100svh,
   e il suo bordo inferiore coincide con quello del viewport; l'hero si prende
   quello che avanza.
   `svh` e non `vh`: su telefono è l'altezza con la barra del browser aperta,
   quindi niente salti quando si ritrae. */
.hero-block {
  display: flex;
  flex-direction: column;
  /* Su telefono in fondo c'è la barra azioni fissa: se il blocco fosse alto
     100svh la fascia dati le finirebbe sotto. Da desktop la barra non c'è e
     si torna a 100svh (vedi breakpoint 62rem). */
  min-height: calc(100svh - var(--h-actionbar) - env(safe-area-inset-bottom));
  margin-top: calc(var(--h-header) * -1);
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Prende tutto lo spazio lasciato libero dalla fascia dati. Il minimo serve
     agli schermi molto bassi, tipo un telefono in orizzontale: sotto quella
     misura il blocco sfora il viewport e si scorre, che è meglio di un hero
     schiacciato. */
  flex: 1 1 auto;
  justify-content: center;
  min-height: 22rem;
  padding-top: calc(var(--h-header) + clamp(1rem, 0.5rem + 2.5vw, 2rem));
  padding-bottom: clamp(1.5rem, 0.75rem + 3.5vw, 3.5rem);
  color: var(--c-peach);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #9f8879; /* colore medio della foto: niente lampo bianco */
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Il centro d'interesse è il bancone, leggermente a sinistra. */
  object-position: 42% 55%;
}

/* Due veli sovrapposti: il primo scurisce in basso per il testo, il secondo dà
   alla foto la stessa temperatura calda della palette. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Velo di crema, non piu' di scuro: il testo sopra e' marrone scuro, quindi
     la fotografia va scurita. Il velo e' quasi nero e in un solo strato:
     una tinta colorata a questa densita' non scurisce la foto, la ricolora,
     e i colori veri del locale spariscono sotto una patina uniforme. Il
     secondo strato dorato che c'era qui faceva esattamente quello. */
  background:
    linear-gradient(
      to top,
      rgb(16 12 9 / 82%) 0%,
      rgb(16 12 9 / 78%) 35%,
      rgb(16 12 9 / 72%) 70%,
      rgb(16 12 9 / 78%) 100%
    );
}

/* Niente riquadro sotto le scritte: il testo sta direttamente sulla
   fotografia, che viene scurita. Tutto centrato — la colonna nell'hero, e le
   righe dentro la colonna: occhiello, titolo, paragrafo e bottoni. */
.hero__content {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.75rem, 0.5rem + 1vw, 1rem);
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.hero__content .hero__eyebrow,
.hero__content .hero__ctas {
  justify-content: center;
}

.hero__title {
  justify-items: center;
}

/* Le due testate sono l'unica parte scura del sito: tutto il resto e' crema
   con testo bruno. I colori tarati per il chiaro qui non tengono — il
   terracotta scuro dell'occhiello sul velo bruno da' 1,4:1 — quindi vanno
   sostituiti uno a uno invece che ereditati. */
.hero .eyebrow,
.page-hero .eyebrow {
  color: var(--c-gold);
}

.hero .btn--ghost,
.page-hero .btn--ghost {
  --btn-fg: var(--c-peach);
  --btn-bd: rgb(246 223 202 / 55%);
}

.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover {
  --btn-bg: rgb(246 223 202 / 12%);
  --btn-bd: var(--c-peach);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Nell'HTML il filetto e' uno solo, prima del testo: andava bene quando la
   riga era allineata a sinistra, ma centrata restava spaiata. Il secondo lo
   fa la pseudo-classe, cosi' non serve toccare sei pagine. */
.hero__eyebrow::after {
  content: '';
  flex: 0 0 2.5rem;
  height: 1.5px;
  background: var(--c-gold);
}

.hero__rule {
  flex: 0 0 2.5rem;
  height: 1.5px;
  background: var(--c-gold);
}

/* Da telefono i filetti non stanno sulla riga del testo e andavano a capo,
   sprecando una o due righe dell'hero. */
@media (max-width: 29.999rem) {
  .hero .hero__rule,
  .hero .hero__eyebrow::after {
    display: none;
  }
}

.hero__title {
  display: grid;
  gap: 0.08em;
  font-size: var(--t-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.032em;
  text-shadow: 0 2px 24px rgb(22 12 6 / 40%);
}

.hero__place {
  font-size: 0.4em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-gold);
}

.hero__lead {
  max-width: 34rem;
  margin-inline: auto;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: rgb(255 253 250 / 94%);
  text-shadow: 0 1px 14px rgb(22 12 6 / 45%);
}

/* Da telefono i due bottoni stanno affiancati: impilati si mangiavano quasi
   130 px di schermo e spingevano la fascia dati sotto la barra azioni. */
.hero__ctas {
  display: flex;
  gap: var(--s-2);
  width: 100%;
  margin-top: var(--s-2);
}

.hero__ctas .btn {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Sotto i 360 px "Come arrivare" con l'icona non ci sta più: via le icone. */
@media (max-width: 22.4rem) {
  .hero__ctas .btn svg {
    display: none;
  }
}

/* --- Fascia dati rapidi ---------------------------------------------------- */

.facts {
  /* Non si comprime: è lei a dettare quanto spazio resta all'hero. */
  flex: 0 0 auto;
  background: var(--c-band);
  color: var(--c-ink);
  border-bottom: 1px solid rgb(74 44 22 / 16%);
}

/* Da telefono: indirizzo e telefono affiancati, orari su tutta la riga sotto.
   Tre righe impilate occupavano il doppio dell'altezza. Da 48rem tre colonne. */
.facts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-4);
  padding-block: var(--s-4);
  margin: 0;
}

.fact:last-child {
  grid-column: 1 / -1;
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.fact svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.1rem;
  color: var(--c-bronze);
}

.fact__label {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
}

.fact__value {
  font-weight: 700;
  text-decoration-color: rgb(74 44 22 / 40%);
  text-underline-offset: 3px;
}

a.fact__value:hover {
  color: var(--c-bronze);
}

/* ==========================================================================
   6. Sezioni: foto, dove siamo, contatti
   ========================================================================== */

/* --- Galleria -------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 0.2rem + 1.2vw, 1rem);
}

.gallery__tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-sand);
  aspect-ratio: 3 / 4;
  cursor: zoom-in;
  transition: box-shadow var(--d-base) var(--e-out);
}

.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.gallery__tile:hover {
  box-shadow: var(--sh-md);
}

.gallery__tile:hover img {
  transform: scale(1.045);
}

.gallery__tile--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}

.gallery__social {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
  min-height: 11rem;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-band);
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color var(--d-base) var(--e-out);
}

.gallery__social:hover {
  background: var(--c-band-deep);
}

.gallery__social-title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.gallery__social-text {
  font-size: var(--t-sm);
  line-height: 1.5;
  opacity: 0.86;
}

.gallery__social-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 800;
  color: var(--c-bronze);
}

/* --- Lightbox -------------------------------------------------------------- */

/* Nessuna dichiarazione `display` fuori da [open]: il foglio di stile del
   browser tiene i <dialog> chiusi a display:none, e sovrascriverlo qui li
   farebbe comparire sempre. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  border: 0;
  background: rgb(22 12 6 / 95%);
  color: var(--c-peach);
}

.lightbox::backdrop {
  background: rgb(22 12 6 / 80%);
}

.lightbox[open] {
  display: grid;
  /* `minmax(0, 1fr)` e non `1fr`: una traccia `1fr` ha come minimo automatico
     il min-content del suo contenuto, cioè l'altezza della fotografia. Con una
     foto verticale la riga centrale cresceva oltre lo schermo e spingeva le
     frecce fuori dalla vista. Lo zero come minimo le permette di rimpicciolirsi. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-3);
  animation: fade-in var(--d-base) var(--e-out);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 3rem;
}

.lightbox__counter {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Flex e non grid, di proposito.
   In una griglia senza colonne dichiarate la traccia è `auto`: viene
   dimensionata sul contenuto, e durante quel calcolo un `max-width: 100%`
   percentuale non è risolvibile, quindi viene ignorato. Risultato: la colonna
   prendeva la larghezza naturale della foto (fino a 2400 px) e l'immagine
   usciva dallo schermo. In un contenitore flex le percentuali si calcolano
   sulla misura del contenitore, che qui è definita. */
.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Un elemento flex non scende sotto la propria misura minima automatica:
     senza questi due zeri la foto non potrebbe rimpicciolirsi. */
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--r-sm);
}

/* Rimaste le sole frecce: si allineano a destra invece di distribuirsi. */
.lightbox__bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-4);
}

.lightbox__nav {
  display: flex;
  gap: var(--s-2);
  flex: 0 0 auto;
}

.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 0.8rem;
  border: 1.5px solid rgb(246 223 202 / 45%);
  border-radius: var(--r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out);
}

.lightbox__btn:hover {
  background: rgb(246 223 202 / 16%);
}

.lightbox__btn--prev svg {
  transform: rotate(180deg);
}

/* --- Dove siamo ------------------------------------------------------------ */

.location {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  align-items: start;
}

.location__panel {
  display: grid;
  gap: var(--s-5);
}

.location__address {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
}

.location__city {
  display: block;
  color: var(--c-terracotta-deep);
}

.location__hint {
  display: grid;
  gap: var(--s-3);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-edge);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.location__ctas {
  display: grid;
  gap: var(--s-3);
}

/* --- Mappa ------------------------------------------------------------------ */
/* Riquadro di attesa: tiene lo spazio della mappa e ne dichiara il contenuto,
   cosi il caricamento non fa saltare il layout. */

.map {
  display: grid;
  place-items: center;
  aspect-ratio: 8 / 5;
  padding: var(--s-5);
  overflow: hidden;
  border: 1px solid var(--c-edge);
  border-radius: var(--r-lg);
  background: var(--c-white);
  text-align: center;
}

.map__intro {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  max-width: 26rem;
}

.map__address {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.map__note {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-ink-soft);
}

/* A mappa caricata il riquadro sparisce e resta solo l'iframe. */
.map.is-loaded {
  display: block;
  padding: 0;
  background: var(--c-sand);
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Riferimenti di zona ---------------------------------------------------- */
/* Due colonne di coppie etichetta/valore, sotto le indicazioni stradali. */

.landmarks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.landmark {
  display: grid;
  gap: 0.1rem;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-edge);
}

.landmark__label {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-terracotta-deep);
}

.landmark__value {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

/* --- Domande frequenti ------------------------------------------------------ */
/* <details> nativi: nessun JavaScript, apertura da tastiera inclusa, e il testo
   delle risposte resta nel DOM anche da chiuso — quindi Google lo legge. */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--c-edge);
}

.faq__item {
  border-bottom: 1px solid var(--c-edge);
}

.faq__q {
  position: relative;
  display: flex;
  align-items: center;
  /* 60px di altezza e spazio a destra per il segno +/−: il bersaglio deve
     essere comodo col pollice. */
  min-height: 3.75rem;
  padding-block: var(--s-4);
  padding-right: 2.75rem;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: color var(--d-fast) var(--e-out);
}

/* Via il triangolino di sistema: al suo posto due barre disegnate qui, che
   formano un "+" da chiuso e un "−" da aperto. */
.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::before,
.faq__q::after {
  content: '';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 1.1rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-terracotta);
  transition: transform var(--d-base) var(--e-out);
}

/* La barra orizzontale resta ferma; la verticale ruota fino a sovrapporsi. */
.faq__q::before {
  transform: translateY(-50%);
}

.faq__q::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq__item[open] .faq__q::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq__q:hover {
  color: var(--c-terracotta-deep);
}

.faq__a {
  padding-bottom: var(--s-5);
  max-width: 44rem;
  color: var(--c-ink-soft);
}

.faq__a a {
  color: var(--c-terracotta-deep);
  text-underline-offset: 3px;
}

.faq__item[open] .faq__a {
  animation: faq-open var(--d-base) var(--e-out);
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* --- Invito alla recensione ------------------------------------------------- */

.review-cta {
  display: grid;
  gap: var(--s-4);
  align-items: center;
  margin-top: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--c-edge);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
}


.review-cta__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 600;
  margin-bottom: var(--s-2);
}

.review-cta__text {
  max-width: 42rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-soft);
}


/* --- Contatti e orari ------------------------------------------------------ */

.contact {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: start;
}

.block-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-terracotta-deep);
}


.contact__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--c-edge);
}

.contact__item {
  border-bottom: 1px solid var(--c-edge);
}


.contact__link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  /* Bersaglio ampio: qui si tocca col pollice, spesso camminando. */
  min-height: 3.75rem;
  padding-block: var(--s-3);
  text-decoration: none;
  transition:
    color var(--d-fast) var(--e-out),
    padding-left var(--d-base) var(--e-out);
}

.contact__link:hover {
  color: var(--c-terracotta-deep);
  padding-left: var(--s-2);
}


.contact__link svg {
  flex: 0 0 auto;
  color: var(--c-terracotta-deep);
}


.contact__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.contact__value {
  display: block;
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.contact__note {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-xs);
  font-weight: 450;
  opacity: 0.7;
}

.hours {
  margin: 0 0 var(--s-5);
}

.hours__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-edge);
}


.hours__day {
  margin: 0;
  font-weight: 600;
}

.hours__time {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.hours__time--closed {
  opacity: 0.62;
}

.hours__source {
  margin-top: var(--s-4);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--c-ink-soft);
}


.pending {
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
  padding: var(--s-5);
  border: 1px dashed rgb(201 151 63 / 55%);
  border-radius: var(--r-lg);
  background: rgb(201 151 63 / 8%);
}.pending__text {
  max-width: 44rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  opacity: 0.88;
}

.pending__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.pending__list li {
  padding: 0.3rem 0.7rem;
  border: 1px solid rgb(74 44 22 / 26%);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
}

/* ==========================================================================
   7. Footer e barra azioni mobile
   ========================================================================== */

.site-footer {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--s-6);
  background-color: var(--c-band-deep);
  background-image: var(--hoop);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 36px 4px;
  color: var(--c-ink);
}

.site-footer__top {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3rem);
  padding-bottom: clamp(1.75rem, 1rem + 3vw, 2.5rem);
  border-bottom: 1px solid rgb(74 44 22 / 18%);
}

.site-footer__identity {
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

/* L'insegna e' ovale e si porta dietro la sua cornice grigia e oro: niente
   ritaglio tondo e niente fondo pesca, che prima serviva a dare un contorno a
   un logo che non ne aveva. Le misure sono quelle vere dell'immagine, cosi'
   il footer non si sposta mentre carica. */
.site-footer__logo {
  width: 140px;
  height: 99px;
  object-fit: contain;
}

.site-footer__name {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-footer__address {
  font-size: var(--t-sm);
  line-height: 1.6;
  opacity: 0.85;
}

.site-footer__columns {
  display: grid;
  gap: var(--s-6);
}

.site-footer__col-title {
  margin-bottom: var(--s-3);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bronze);
}

.site-footer__list {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2rem;
  text-decoration: none;
  opacity: 0.88;
  overflow-wrap: anywhere;
  transition:
    color var(--d-fast) var(--e-out),
    opacity var(--d-fast) var(--e-out);
}

.site-footer__link:hover {
  color: var(--c-bronze);
  opacity: 1;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-top: var(--s-5);
  font-size: var(--t-xs);
  line-height: 1.6;
  opacity: 0.72;
}

.site-footer__legal {
  display: grid;
  gap: 0.15rem;
}

.site-footer__bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.site-footer__bottom-links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Barra azioni ---------------------------------------------------------- */
/* È il pezzo più importante del sito su telefono: da Google al tap su
   "Chiama" devono bastare due gesti. */

.action-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 120;
  padding: 0.5rem var(--s-3) calc(0.5rem + env(safe-area-inset-bottom));
  /* Safari su iOS 26 prende il colore della barra fissa in fondo e lo stende
     sotto i propri tasti: la teniamo semplice, fondo pieno e bordo, come la
     dock di New Circus. Perché funzioni non deve esserci nessun altro
     elemento fixed sopra di lei sul bordo inferiore (vedi body::before). */
  background-color: var(--c-cream);
  border-top: 1px solid var(--c-edge);
}

.action-bar__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--s-2);
  max-width: 32rem;
  margin-inline: auto;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  /* 56px: molto sopra il minimo WCAG e comodo col pollice. */
  min-height: 3.5rem;
  padding: 0.4rem 0.35rem;
  border-radius: var(--r-md);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--d-fast) var(--e-out);
}

.action:active {
  transform: scale(0.97);
}

.action--primary {
  background: var(--c-terracotta);
  color: var(--c-white);
}

.action--secondary {
  background: var(--c-band);
  color: var(--c-ink);
}

/* ==========================================================================
   8. Pagine secondarie
   ========================================================================== */

.subpage-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(247 241 230 / 94%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-edge);
}

.subpage-bar__inner {
  display: flex;
  align-items: center;
  min-height: var(--h-header);
}

.subpage-bar__back {
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
}

.subpage-bar__back:hover {
  color: var(--c-terracotta-deep);
}

.doc {
  max-width: 44rem;
}

.doc__title {
  margin-top: var(--s-3);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.028em;
}.doc h2 {
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
  font-size: var(--t-xl);
}

.doc p {
  margin-bottom: var(--s-4);
  color: var(--c-ink-soft);
}

.doc a {
  color: var(--c-terracotta-deep);
  text-underline-offset: 3px;
}

.doc em {
  font-weight: 700;
  font-style: italic;
  color: var(--c-terracotta-deep);
}

.doc__meta {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-edge);
  font-size: var(--t-xs);
}

.error-page {
  display: grid;
  place-items: center;
  min-height: 70svh;
  text-align: center;
}

.error-page__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
}

/* ==========================================================================
   Breakpoint
   ========================================================================== */

@media (min-width: 40rem) {
  .hero__ctas .btn {
    flex: 0 0 auto;
    padding-inline: 1.75rem;
    font-size: var(--t-sm);
    letter-spacing: 0.06em;
  }
}

@media (min-width: 46rem) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48rem) {
  .facts__grid {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--s-6);
    padding-block: var(--s-5);
  }

  .fact:last-child {
    grid-column: auto;
  }

  .fact {
    gap: var(--s-3);
    font-size: var(--t-sm);
    line-height: 1.45;
  }

  .fact svg {
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
  }

  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }

  .gallery__tile--wide {
    aspect-ratio: 16 / 11;
  }
}

@media (min-width: 52rem) {
  .contact {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  }

  .review-cta {
    grid-template-columns: 1fr auto;
    gap: var(--s-6);
    padding: var(--s-6);
  }
}

@media (min-width: 56rem) {  .location {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .location__ctas {
    grid-auto-flow: column;
    justify-content: start;
  }
}

@media (min-width: 58rem) {}

@media (min-width: 62rem) {
  body {
    padding-bottom: 0;
  }

  .hero-block {
    min-height: 100svh;
  }

  /* Da desktop l'insegna puo' respirare. L'altezza dell'header sale con lei:
     e' una variabile, quindi si aggiustano da sole anche le cose che ci si
     appoggiano — lo stacco dell'hero, l'offset delle ancore, la posizione
     delle testate interne. Il logo a 60px lascia 12px sopra e sotto. */
  :root {
    --h-header: 5.25rem;
  }

  .brand__logo {
    height: 60px;
  }

  .site-nav,
  .site-header__cta {
    display: block;
  }

  .site-header__cta {
    display: inline-flex;
  }

  .burger,
  .mobile-menu,
  .action-bar {
    display: none;
  }


  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer__top {
    grid-template-columns: 1.1fr 1.4fr;
  }
}

/* ==========================================================================
   9. Componenti delle pagine interne
   --------------------------------------------------------------------------
   Homepage a più sezioni + quattro pagine (locale, cucina, vini, contatti).
   Tutto quello che segue è condiviso fra le pagine.
   ========================================================================== */

/* --- Testata delle pagine interne ------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(58svh, 30rem);
  margin-top: calc(var(--h-header) * -1);
  padding-top: calc(var(--h-header) + var(--s-7));
  padding-bottom: clamp(1.75rem, 1rem + 3vw, 3rem);
  color: var(--c-peach);
  overflow: hidden;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--c-band-deep);
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

.page-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Stesso velo quasi nero dell'hero: scurisce senza colorare. */
  background:
    linear-gradient(
      to top,
      rgb(16 12 9 / 81%) 0%,
      rgb(16 12 9 / 77%) 45%,
      rgb(16 12 9 / 72%) 80%,
      rgb(16 12 9 / 78%) 100%
    );
}

/* Come nell'hero: nessun riquadro, testo direttamente sulla foto. */
.page-hero__content {
  position: relative;
  display: grid;
  gap: var(--s-3);
  max-width: 38rem;
  margin-top: auto;
  margin-inline: auto;
}

.page-hero__title {
  font-size: var(--t-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.028em;
}

.page-hero__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--c-gold);
}

.page-hero__lead {
  max-width: 36rem;
  font-size: var(--t-lg);
  line-height: 1.5;
  color: rgb(255 253 250 / 94%);
  text-shadow: 0 1px 14px rgb(22 12 6 / 45%);
}

/* Briciole di pane: orientano il lettore e danno a Google la gerarchia. */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.82;
}

.crumbs a {
  text-decoration: none;
  text-underline-offset: 3px;
}

.crumbs a:hover {
  text-decoration: underline;
}

.crumbs span[aria-hidden] {
  opacity: 0.5;
}

/* --- Link con freccia ------------------------------------------------------- */

.linkout {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-bottom: 0.15rem;
  border-bottom: 1.5px solid var(--c-terracotta);
  color: var(--c-terracotta-deep);
  font-size: var(--t-sm);
  font-weight: 800;
  text-decoration: none;
  transition: gap var(--d-base) var(--e-out);
}

.linkout:hover {
  gap: var(--s-3);
}


.section__more {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.section__more .linkout {
  margin-top: 0;
}

/* --- Testo accanto a immagine ----------------------------------------------- */

.split {
  display: grid;
  gap: clamp(1.75rem, 1rem + 4vw, 3.5rem);
  /* Allineate in alto, non centrate: la colonna di testo è quasi sempre più
     corta di quella con la foto, e centrandola resterebbe a galleggiare con
     un vuoto sopra e uno sotto. Così partono dalla stessa linea e lo spazio
     libero si raccoglie tutto in fondo. */
  align-items: start;
}

.split__text p {
  color: var(--c-ink-soft);
}

.split__text p + p {
  margin-top: var(--s-4);
}


.split__text strong {
  color: var(--c-ink);
  font-weight: 800;
}

.split__figure {
  margin: 0;
}

.split__figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  /* Tetto all'altezza: senza, una foto verticale in una colonna larga diventa
     più alta del testo che le sta accanto e lascia un buco sotto la colonna
     corta. Il ritaglio lo fa `object-fit: cover`. */
  max-height: 30rem;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--c-sand);
}

/* Per le foto verticali si allunga il riquadro invece di tagliarle, ma senza
   esagerare: oltre queste proporzioni la colonna accanto resta troppo corta. */
.split__figure--tall img {
  aspect-ratio: 3 / 4;
  /* Tetto più basso di quello generale: una verticale in colonna affiancata
     non ha bisogno di arrivare a 30rem, e sopra quella misura il testo di
     fianco resta indietro di troppo. */
  max-height: 26rem;
}

/* --- Terzetto di immagini --------------------------------------------------- */

.strip {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.strip__item {
  margin: 0;
}

.strip__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--c-sand);
}

/* --- Schede ----------------------------------------------------------------- */

.cards {
  display: grid;
  gap: clamp(1.25rem, 0.75rem + 2vw, 2rem);
}

.card {
  display: flex;
  flex-direction: column;
  padding: var(--s-4) var(--s-4) var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--c-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition:
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

.card:hover {
  border-color: var(--c-edge-strong);
  box-shadow: var(--sh-md);
}

.card__media {
  overflow: hidden;
  /* Raggio più stretto di quello della scheda: un angolo interno con lo
     stesso raggio di quello esterno sembra sempre sbagliato. */
  border-radius: var(--r-md);
  background: var(--c-sand);
  margin-bottom: var(--s-4);
}

.card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__title {
  font-size: var(--t-xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}

.card__text {
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* Schede che portano a una pagina: il link sta sul titolo, e il suo ::after
   copre tutta la scheda. Così si tocca ovunque, ma chi usa uno screen reader
   sente un solo collegamento con un nome sensato. */
.card--link {
  position: relative;
}

.card--link .card__title a {
  text-decoration: none;
}

.card--link .card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card--link:focus-within {
  outline: 2px solid var(--c-terracotta-deep);
  outline-offset: 3px;
}

.card--link .card__title a:focus-visible {
  outline: none;
}

/* Blocco di solo testo, senza foto accanto: stessa misura e stesso colore dei
   paragrafi negli split. */
.text-block {
  max-width: 44rem;
}

.text-block p {
  color: var(--c-ink-soft);
}

.text-block p + p {
  margin-top: var(--s-4);
}

.text-block strong {
  color: var(--c-ink);
}

.text-block a:not(.linkout):not(.btn) {
  color: var(--c-terracotta-deep);
  text-underline-offset: 3px;
}

/* Pagine collegate in fondo a una sezione. */
.linkouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-6);
}

.text-block .landmarks {
  margin-top: var(--s-5);
}

.text-block .location__ctas {
  margin-top: var(--s-5);
}

/* --- Fascia in evidenza (porchetta, bottiglie rare) ------------------------- */

.feature {
  background: var(--c-band);
  color: var(--c-ink);
  padding-block: var(--s-section);
}

.feature__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
}

.feature__figure {
  margin: 0;
}

.feature__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 32rem;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  background: var(--c-band-deep);
}

.feature__title {
  margin-block: var(--s-3) var(--s-5);
  font-size: var(--t-3xl);
  font-weight: 700;
  letter-spacing: -0.028em;
}

.feature__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--c-bronze);
}

.feature__text p + p {
  margin-top: var(--s-4);
}

.feature__note {
  font-size: var(--t-sm);
  line-height: 1.55;
  opacity: 0.78;
}

.feature__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

/* --- Etichette --------------------------------------------------------------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding: 0;
  list-style: none;
}

.tags li {
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--c-edge);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--c-ink-soft);
}


.note-small {
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-edge-strong);
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--c-ink-soft);
}

/* --- Contatti in fascia ------------------------------------------------------ */

.contact-strip {
  display: grid;
  gap: 1px;
  background: rgb(74 44 22 / 6%);
  border: 1px solid rgb(74 44 22 / 18%);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.contact-strip__item {
  display: grid;
  gap: 0.2rem;
  padding: var(--s-5);
  background: var(--c-band);
  text-decoration: none;
  transition: background-color var(--d-base) var(--e-out);
}

.contact-strip__item:hover {
  background: var(--c-band-deep);
}

.contact-strip__item svg {
  color: var(--c-bronze);
  margin-bottom: var(--s-2);
}

.contact-strip__label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.contact-strip__value {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* --- Fascia di chiusura ------------------------------------------------------ */

.cta-band {
  /* `background` in forma breve azzerava il `background-image` impostato piu'
     su: i mattoni su questa fascia non si sono mai visti. Solo il colore. */
  background-color: var(--c-paper);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

.cta-band__inner {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.cta-band__title {
  margin-bottom: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.cta-band__text {
  max-width: 34rem;
  color: var(--c-ink-soft);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --- Avviso nel corpo della pagina ------------------------------------------ */

.notice--inline {
  margin-top: clamp(2rem, 1rem + 3vw, 3rem);
}

/* --- Griglia foto uniforme --------------------------------------------------- */

.gallery--four .gallery__tile {
  aspect-ratio: 3 / 4;
}

/* ==========================================================================
   Breakpoint dei componenti delle pagine interne
   ========================================================================== */

@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48rem) {
  .strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .strip--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sotto i 56rem la griglia collassa in una colonna e l'ordine del markup
   diventa l'ordine a schermo. In cinque blocchi la foto sta prima del testo
   — voluto da desktop, dove va a sinistra — ma da telefono farebbe comparire
   il titolo della sezione sotto l'immagine. Qui il testo torna in testa. */
@media (max-width: 55.999rem) {
  .split--anchored .split__text {
    order: -1;
  }
}

@media (min-width: 56rem) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  /* Blocchi con l'intestazione dentro la colonna di testo: la foto parte
     dall'alto, alla stessa altezza del titolo, e si allunga fino in fondo
     alla colonna. Senza, il titolo occupava solo metà riga e tutto l'angolo
     in alto dalla parte della foto restava vuoto. */
  .split--anchored {
    align-items: stretch;
  }

  .split--anchored .split__figure {
    display: flex;
    flex-direction: column;
  }

  .split--anchored .split__figure img {
    flex: 1 1 auto;
    /* L'altezza la decide la colonna accanto, non le proporzioni della foto:
       ci pensa `object-fit: cover` a ritagliare. I due limiti servono a non
       farla diventare né una striscia né una torre quando il testo di fianco
       è molto corto o molto lungo. */
    aspect-ratio: auto;
    min-height: 22rem;
    max-height: 40rem;
  }

  /* In `--reverse` l'immagine passa a sinistra senza toccare l'HTML: l'ordine
     dei contenuti resta quello giusto per chi legge con lo screen reader. */
  .split--reverse .split__figure {
    order: -1;
  }

  .feature__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .cta-band__inner {
    grid-template-columns: 1fr auto;
    gap: var(--s-7);
  }

  .page-hero {
    min-height: min(62svh, 34rem);
  }
}

@media (min-width: 58rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Testata senza foto (privacy): stesso ritmo delle altre, fondo pieno. */
.page-hero--plain {
  min-height: 0;
  padding-top: calc(var(--h-header) + var(--s-7));
  padding-bottom: var(--s-7);
  /* Qui sotto non c'è una fotografia ma verde pieno, e l'header translucido lo
     schiariva quel tanto che bastava a lasciare una fascia visibile in cima.
     Ora che l'header è crema il verso è opposto: la striscia iniziale è
     scurita esattamente di quanto l'header schiarisce — 0,58 di velo su
     0,42 di fondo — così sotto
     l'header il colore torna a essere --c-band e la giunzione sparisce.
     Il ritorno al verde finisce qualche pixel più in basso del bordo
     dell'header: un gradino netto proprio sul confine si vedrebbe. */
  background: linear-gradient(
    to bottom,
    rgb(219 198 163) 0,
    rgb(219 198 163) calc(var(--h-header) - 0.375rem),
    var(--c-band) calc(var(--h-header) + 0.625rem)
  );
  background-color: var(--c-band);
}

.page-hero--plain .page-hero__title,
.page-hero--plain .page-hero__lead {
  text-shadow: none;
}

.error-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  font-weight: 700;
}

.error-page__links a {
  color: var(--c-terracotta-deep);
  text-underline-offset: 4px;
}