/* components.css — componenti di sezione di restaurant_gourmet. Il segno del verticale è il BLOCCO PIENO
   di tinta scavalcato dalla foto (.overlap); l'hero è una foto scura a piena larghezza dove il marchio del
   cliente — nato per fondo nero — vive nativo, senza targhe.
   ⚠ Contro WP-core la specificità si perde in silenzio: i colori dei componenti condivisi vanno RIDICHIARATI
   dentro le bande scure con la stessa specificità del selettore che li imposta (regola 23). */

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--brand); color: #fff; }              /* 7,19:1 */
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { border-color: var(--brand); color: var(--accent-ink); } /* su chiaro l'accento è il rosso */
.btn--ghost:hover { background: var(--brand); color: #fff; }
.btn--gold { background: var(--accent); color: var(--night); }        /* 5,38:1 — MAI testo bianco sull'oro */
.btn--gold:hover { background: var(--accent-lt); }
.btn--onDark { border-color: var(--accent); color: var(--accent-lt); }
.btn--onDark:hover { background: var(--accent); color: var(--night); }

/* ---------- header ----------
   Sopra l'hero scuro è trasparente e sovrapposto; su OGNI altra pagina (che l'hero non ce l'ha) diventa
   una banda grafite solida. ⚠ Senza questa distinzione le voci crema finiscono su fondo crema: sulle
   pagine interne il telefono misurava 1,1:1, cioè invisibile. Il discriminante è la presenza dell'hero,
   non un class-name di pagina, così vale anche per le pagine solo-progetto. */
.site-header { position: relative; background: var(--night); }
body:has(.hero) .site-header { position: absolute; background: transparent; }
.site-header { top: 0; left: 0; right: 0; z-index: 30; }
.site-header__row { display: flex; align-items: center; gap: var(--gutter); min-height: 92px; padding-block: var(--space-3); }
.site-header__row > * { align-self: center; margin-block: 0; }   /* WP dà un margine di blocco a nav e CTA */
.wordmark { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.wordmark__logo { width: clamp(132px, 12vw, 168px); height: auto; }
.wordmark__txt { font-family: var(--font-display); font-size: var(--text-lg); color: var(--on-dark); }
.site-header__tel { color: var(--on-dark); font-size: 0.86rem; font-weight: 500; white-space: nowrap; }
.site-header__tel:hover { color: var(--accent-lt); }
.site-header__cta { flex: none; }

/* nav: l'header è scuro, quindi le voci sono chiare. ⚠ i selettori WP dei blocchi navigation sono iniettati
   DOPO il tema: per vincere serve un livello in più (.site-header .site-nav …), non la sola classe. */
.site-nav { margin-left: auto; }
/* ⚠ WP inietta `.wp-block-navigation .wp-block-navigation-item__content` (0,2,0) DOPO il tema: a parità di
   specificità vince lui e le voci restano color ink (misurato 1,01:1 sul grafite). Serve un livello in più,
   e il colore va messo anche sullo __label, che è lo span che porta davvero il testo. */
.site-header .site-nav a,
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__label {
  color: var(--on-dark); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.site-header .site-nav .wp-block-navigation-item__content { padding-block: var(--space-1); }
.site-header .site-nav a:hover { color: var(--accent-lt); border-bottom-color: var(--accent); }
/* overlay mobile: con un header in position:absolute l'overlay resta pieno, ma il default WP lo tiene bianco
   con (0,4,0) → si vince ricopiando il suo schema di selettore. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Hamburger: WP lo lascia a `currentcolor`, che sull'header grafite eredita l'ink bruno-nero (#1E1A16)
   e sparisce. Va crema, con un bersaglio comodo al tocco.
   ⚠ SOLO sotto i 600px, cioè dove WP lo mostra davvero: senza il vincolo, il `display:flex` batte il
   `display:none` di WP e il bottone resta visibile ANCHE a desktop, occupando 44px dentro la nav e
   mandando le voci a capo (misurato: nav alta 97px, voci a metà 90 contro logo e CTA a 61). */
/* Fascia di confine 600–780px: WP mostra ancora la nav ESTESA (l'hamburger compare solo sotto i 600),
   ma le sei voci non entrano accanto al marchio e vanno a capo (misurato a 600px: nav alta 83px, voci a
   metà 27 contro il logo a 53). Si stringono voci e gap quel tanto che basta a tenerle in riga. */
@media (min-width: 600px) and (max-width: 780px) {
  .site-header .site-nav { gap: var(--space-3); }
  .site-header .site-nav .wp-block-navigation-item__content,
  .site-header .site-nav .wp-block-navigation-item__label { font-size: 0.68rem; letter-spacing: 0.1em; }
  .wordmark__logo { width: clamp(112px, 18vw, 132px); }
}

@media (max-width: 599.98px) {
  .wordmark__logo { width: clamp(150px, 42vw, 190px); }
  .site-header .wp-block-navigation__responsive-container-open {
    color: var(--on-dark); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .site-header .wp-block-navigation__responsive-container-open svg { width: 28px; height: 28px; fill: currentColor; }
  .site-header .wp-block-navigation__responsive-container-open:hover { color: var(--accent-lt); }
}

/* ⚠ Il fondo dell'overlay lo impone WP con
   `.wp-block-navigation:not(.has-background) .…__responsive-container.is-menu-open:not(.disable-default-overlay)`
   = (0,4,0), iniettato DOPO il tema: una regola a 3 classi PERDE e l'overlay resta BIANCO, con le voci
   crema sopra — cioè invisibili (misurato: bg #fff, testo #F6F4EC). Si vince solo ricopiando il suo schema. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background: var(--night); color: var(--on-dark);
}
/* la X di chiusura: staccata dall'angolo, in ottone e grande abbastanza da essere un bersaglio comodo */
.site-header .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--space-5); padding: var(--space-2);
  color: var(--accent-lt); width: 44px; height: 44px;
}
.site-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.site-header .wp-block-navigation__responsive-container-close:hover { color: var(--on-dark); }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--space-8); }
/* ⚠ Le voci finivano a DESTRA e tagliate al bordo: non serve correggere l'<a> (è shrink), il colpevole è
   il primo antenato largo quanto lo schermo con l'allineamento contrario — qui __responsive-container-content
   e __container, entrambi align-items:flex-end. Si risale la catena e si allinea il PADRE. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start; width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-inline: var(--space-6);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; font-size: var(--text-md);
  padding-block: var(--space-3); border-bottom: 1px solid rgba(174,154,100,.22);
}
/* ⚠ Il respiro sotto l'ultima voce serve SOLO a overlay APERTO (sennò finisce sotto la cta-bar fissa).
   Senza il vincolo .is-menu-open il padding vale anche a desktop e gonfia il nav: misurati 141px di
   altezza contro i 29px delle voci, con la riga dell'header sfondata in alto. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: var(--space-9); }

/* ---------- hero: foto scura full-bleed, wordmark fra due filetti ---------- */
.hero { position: relative; background: var(--night); isolation: isolate; }
/* ⚠ overflow:hidden OBBLIGATORIO: il Ken Burns scala le slide fino a 1.09 e senza contenimento sbordano
   dal viewport (misurati 33px a 1440 e 9px a 390). */
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Slideshow: le slide si alternano in crossfade con un Ken Burns lento. Stanno DIETRO lo scrim
   (l'hero è isolation:isolate e le slide a z-index -2), quindi il contrasto misurato non cambia.
   Con reduced-motion resta ferma la prima: l'informazione non dipende mai dal movimento. */
.hero__media .hero-slide { position: absolute; inset: 0; opacity: 0; animation: fp-hero-fade 32s var(--ease) infinite; }
.hero__media .hero-slide:nth-child(1) { animation-delay: 0s; }
.hero__media .hero-slide:nth-child(2) { animation-delay: 8s; }
.hero__media .hero-slide:nth-child(3) { animation-delay: 16s; }
.hero__media .hero-slide:nth-child(4) { animation-delay: 24s; }
@keyframes fp-hero-fade {
  0%   { opacity: 0; transform: scale(1.02); }
  4%   { opacity: 1; }
  25%  { opacity: 1; transform: scale(1.09); }
  30%  { opacity: 0; transform: scale(1.09); }
  100% { opacity: 0; transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media .hero-slide { animation: none; opacity: 0; }
  .hero__media .hero-slide:first-child { opacity: 1; }
}
/* ⚠ Lo scrim è MISURATO: axe non valuta il testo sopra una foto, il contrasto va preso dal pixel renderizzato.
   Con .72→.88 il peggior pixel di fondo tiene il lead sopra 8:1; alleggerirlo richiede una nuova misura. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--scrim), var(--scrim-deep)); }
.hero__inner { padding-block: clamp(9rem, 6rem + 12vw, 15rem) clamp(5rem, 3.5rem + 6vw, 9rem); text-align: center; }
.hero { min-height: min(100vh, 980px); display: flex; align-items: center; }
.hero > .container { width: min(100% - (var(--gutter) * 2), var(--container)); }
.hero h1 { color: var(--on-dark); }
.hero__sub { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-4); }
.hero__sub span { font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-lt); font-weight: 600; }
.hero__sub i { display: block; width: clamp(26px, 6vw, 70px); height: 0; border-top: 1px solid var(--accent); position: relative; }
.hero__sub i::after { content: ""; position: absolute; left: 0; top: 4px; width: 100%; border-top: 1px solid rgba(174,154,100,.5); }
.hero__lead { max-width: 56ch; margin: var(--space-5) auto 0; color: #E8E3D7; }  /* misurato 8,39:1 sul peggior pixel */
.hero__actions { margin-top: var(--space-6); display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
/* variante design-only: senza una foto hero-grade non si finge una foto, si tiene la banda piena */
.hero--design { background: var(--night); }
.hero--design::after { background: none; }

/* ---------- il segno del verticale: blocco pieno scavalcato dalla foto ---------- */
.overlap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.overlap__media { position: relative; padding: var(--overlap) 0 var(--overlap) var(--overlap); }
.overlap__media::before { content: ""; position: absolute; inset: 0 calc(var(--overlap) + 0.4rem) 0 0; background: var(--brand); }
.overlap--graphite .overlap__media::before { background: var(--brand-mid); }
.overlap__media img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.overlap--rev .overlap__media { order: -1; padding: var(--overlap) var(--overlap) var(--overlap) 0; }
.overlap--rev .overlap__media::before { inset: 0 0 0 calc(var(--overlap) + 0.4rem); }
.overlap__body h2 { font-size: var(--text-2xl); }
.overlap__body p { color: var(--ink-muted); margin-top: var(--space-4); }
.overlap__body .btn { margin-top: var(--space-5); }

/* ---------- testate di sezione ---------- */
.section__head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); }
.section__head h2 { font-size: var(--text-2xl); }
.section__head p { color: var(--ink-muted); margin-top: var(--space-3); max-width: 58ch; }
.section__head--center { text-align: center; }
.section__head--center h2, .section__head--center p { margin-inline: auto; }

/* ---------- griglia dei piatti ---------- */
.dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.dish img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dish h3 { margin-top: var(--space-4); }
.dish__rule { width: 36px; height: 0; border-top: 2px solid var(--brand); margin-top: var(--space-3); }
.dish p { color: var(--ink-muted); margin-top: var(--space-3); font-size: 0.96rem; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); }
.gallery a { display: block; overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .45s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .gallery a:hover img { transform: none; } }

/* ---------- schede informative (orari, dove siamo, servizi) ---------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.fact { background: var(--paper); border: var(--border); padding: var(--space-5) var(--space-5); }
.fact h3 { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink); font-weight: 600; }
.fact dl { margin-top: var(--space-4); display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-5); font-size: 0.97rem; }
.fact dt { color: var(--ink-muted); }
.fact dd { margin: 0; font-weight: 500; }
.fact a { color: var(--accent-ink); font-weight: 500; }

/* ---------- banda di chiusura scura: qui l'oro torna protagonista ---------- */
.cta-band { background: var(--brand-mid); color: var(--on-dark); padding-block: var(--section-y); text-align: center; }
.cta-band h2 { font-size: var(--text-2xl); color: var(--on-dark); }
.cta-band p { color: var(--on-dark-muted); max-width: 52ch; margin: var(--space-4) auto 0; }
.cta-band .btn { margin-top: var(--space-6); }
/* le testate condivise sono tarate sul fondo CHIARO: dentro la banda vanno riscritte alla stessa specificità */
.cta-band .section__head p { color: var(--on-dark-muted); }
.cta-band .eyebrow { color: var(--accent-lt); }

/* ---------- pagine interne ---------- */
.page-head { background: var(--surface); padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.page-head h1 { font-size: var(--text-2xl); }   /* una testata di pagina NON è un hero */
.page-head p { color: var(--ink-muted); margin-top: var(--space-3); max-width: 60ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-6); }

/* ---------- pagina contatti a due colonne ---------- */
.contact-cols { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.contact-form .field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.contact-form label { font-size: var(--text-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; }
.contact-form input, .contact-form textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
}
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.contact-form .consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 0.92rem; color: var(--ink-muted); margin-bottom: var(--space-4); }
.contact-info { background: var(--surface); border: var(--border); padding: var(--space-5); }
.contact-info dl { display: grid; gap: var(--space-1) var(--space-4); grid-template-columns: auto 1fr; }
.contact-info dt { font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { margin: 0; font-weight: 500; }

/* ---------- footer ---------- */
.site-footer { background: var(--night); color: var(--on-dark-muted); padding-block: clamp(3rem, 2rem + 3vw, 4rem) 0; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--gutter); }
.site-footer h2 { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-lt); font-weight: 600; }
.site-footer ul { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.site-footer a { font-size: 0.95rem; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer__logo { width: 180px; }
.site-footer p { margin-top: var(--space-4); font-size: 0.95rem; }
/* 3 celle (1fr auto 1fr): "space-between" NON centra l'elemento mediano */
.site-footer__legal {
  margin-top: clamp(2.5rem, 4vw, 3.5rem); border-top: 1px solid #3A342C; padding-block: var(--space-4);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); font-size: 0.86rem;
}
.site-footer__legal a { color: var(--on-dark-muted); }   /* il footer è scuro: l'`a` chiaro qui farebbe 2,57:1 */
.site-footer__end { text-align: right; }
.dgitaly { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: center; }
.dgitaly img { width: 20px; height: 20px; }

/* ---------- barra CTA mobile ---------- */
.cta-bar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .overlap { grid-template-columns: 1fr; }
  .overlap--rev .overlap__media { order: 0; }
  .dishes { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .facts { grid-template-columns: 1fr; }
  .contact-cols { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { grid-template-columns: 1fr; text-align: center; }
  .site-footer__end { text-align: center; }
  .site-header__tel { display: none; }
  /* Su mobile la barra fissa in basso porta già "Prenota" sempre a portata di pollice: in header è una
     ripetizione (tre volte con quella dell'hero). Tolta, lo spazio va al marchio.
     ⚠ Serve `.site-header .site-header__cta` (0,2,0): una media query NON aggiunge specificità e
     `.btn{display:inline-flex}` dichiarato dopo vincerebbe, lasciando il bottone visibile. */
  .site-header .site-header__cta { display: none; }
  /* ⚠ le media query NON aggiungono specificità: la barra fissa deve vincere su .btn dichiarato dopo */
  .cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--night); border-top: 1px solid #3A342C;
  }
  /* ⚠ i due tasti sono figli diretti del gruppo: senza azzerare il block-gap WP il secondo scende di 24px
     e non si stira (misurati top 768 vs 792, altezze 76 vs 52) — cioè appaiono sfalsati. */
  .cta-bar { align-items: stretch; }
  .cta-bar > * { margin-block: 0; }
  .cta-bar a {
    flex: 1; margin-block: 0; display: flex; align-items: center; justify-content: center;
    padding: var(--space-4); color: var(--on-dark); font-size: var(--text-sm);
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  }
  .cta-bar a + a { border-left: 1px solid #3A342C; color: var(--accent-lt); }
  body { padding-bottom: 62px; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* ---------- social: pulsazione d'ottone ----------
   Il pulse è un ALONE che si espande (box-shadow su ::after), non un cambio di opacità del bottone:
   così l'icona resta sempre a pieno contrasto e nessun testo attraversa la soglia AA durante il ciclo.
   Sfalsati fra loro perché il footer respiri invece di battere il tempo. */
.socials { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent-lt); background: transparent;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  animation: fp-social-pulse 2.8s var(--ease) infinite;
}
.social--ig::after { animation-delay: 1.4s; }
.social:hover { background: var(--accent); color: var(--night); transform: translateY(-2px); }
.social:hover::after { animation-play-state: paused; }
@keyframes fp-social-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(174,154,100,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(174,154,100,0); }
  100% { box-shadow: 0 0 0 0 rgba(174,154,100,0); }
}
@media (prefers-reduced-motion: reduce) { .social::after { animation: none; } }

/* ---------- nastro di foto in scorrimento continuo ----------
   Una banda a piena larghezza che scorre da sola: porta in home molte più foto del parco senza allungare
   la pagina, e dà movimento anche a chi non scrolla. Il track è duplicato e trasla di -50%, così il ciclo
   è senza salti. ⚠ È DECORATIVO: alt vuoto sulle immagini e una sola aria-label sul contenitore. */
.strip {
  background: var(--night); overflow: hidden;
  /* vive dentro una .section ma va a PIENA LARGHEZZA: si annulla il container del genitore */
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: var(--section-y);
}
.strip__rail { overflow: hidden; }
.strip__track {
  display: flex; gap: 4px; width: max-content;
  animation: fp-strip-scroll 64s linear infinite;
}
.strip__track img {
  height: clamp(180px, 12vw + 90px, 300px); width: auto; object-fit: cover; flex: none;
  filter: saturate(.92);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.strip__rail:hover .strip__track { animation-play-state: paused; }
.strip__track img:hover { filter: saturate(1.1); transform: scale(1.03); }
@keyframes fp-strip-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* ⚠ niente overflow-x:auto: creerebbe una regione scrollabile non raggiungibile da tastiera
     (axe scrollable-region-focusable). Il nastro si ferma e basta: le foto sono decorative e ripetute. */
  .strip__track { animation: none; }
}

/* ---------- tre pilastri numerati ----------
   Il device dei numerali (01·02·03) preso dal registro steakhouse, ma in chiave editoriale: numerale
   d'ottone in display, filetto, testo. Danno ritmo alla colonna di testo senza aggiungere una banda. */
.pillars { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.pillar { display: flex; align-items: baseline; gap: var(--space-4); }
.pillar__n {
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent-deep);
  flex: none; min-width: 2.4ch; position: relative;
}
.pillar__n::after { content: ""; position: absolute; left: 0; right: 30%; bottom: -6px; border-top: 1px solid var(--accent); }
.pillar__t { font-size: 1.02rem; color: var(--ink); }

/* ---------- citazione editoriale ----------
   Una frase del materiale portata a voce alta, in display, con il filetto d'ottone: dà respiro fra le
   bande e alza il registro senza aggiungere copy nuova. */
.quote {
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; color: var(--ink);
  position: relative; padding-left: var(--space-5);
}
.quote::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 2px; background: var(--accent); }
.facts { margin-top: var(--section-y); }

/* ---------- registri delle bande ----------
   La sequenza della home non è una fila di sezioni uguali: ognuna ha il suo fondo e il suo ritmo, così
   scorrendo si riconosce dove si è. Chiara → profonda (col nastro) → tint → alternata. */
.section--story { background: var(--paper); }
.section--place { background: var(--paper); padding-bottom: 0; }   /* il nastro chiude la banda a filo */
.section--dishes { background: var(--surface); }
.section--info { background: var(--paper); }
.section--info .facts { margin-top: var(--section-y); }

/* ---------- indicatore di scorrimento ----------
   Un filo d'ottone che scende e si ritrae: dice "c'è altro sotto" senza scrivere "scroll". Decorativo
   (aria-hidden) e fermo con reduced-motion. */
.hero__scroll {
  position: absolute; left: 50%; bottom: clamp(1.5rem, 3vh, 2.5rem); translate: -50% 0;
  width: 1px; height: 56px; overflow: hidden; background: rgba(174,154,100,.25);
}
.hero__scroll::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  transform-origin: top; animation: fp-scroll-hint 2.6s var(--ease) infinite;
}
@keyframes fp-scroll-hint {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; transform: scaleY(.5); } }

/* le foto delle card si avvicinano al passaggio del mouse: il piatto reagisce, la card resta ferma */
.dish a, .dish { overflow: hidden; }
.dish img { transition: transform .55s var(--ease); }
.dish:hover img { transform: scale(1.04); }
.overlap__media img { transition: transform .6s var(--ease); }
.overlap:hover .overlap__media img { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .dish:hover img, .overlap:hover .overlap__media img { transform: none; }
}

/* blocco d'ottone: la terza tinta dei blocchi pieni (rosso · grafite · ottone), così la sequenza degli
   scavalcamenti non si ripete mai identica scorrendo la pagina */
.overlap--gold .overlap__media::before { background: var(--brand-mid); }
/* la citazione accanto al blocco pieno respira: misura di lettura sul PARAGRAFO, non sul contenitore */
.overlap__body .quote { max-width: 26ch; }
.quote--sm { font-size: var(--text-lg); }
.section--dishes .overlap { margin-bottom: var(--section-y); }
/* la sezione della carta chiude con la griglia: il respiro sopra lo dà l'overlap */
.section--dishes .section__head { margin-bottom: var(--space-7); }

/* ============================ Lightbox della gallery ============================ */
/* Le foto marcate a.zoom si aprono in un overlay (reveal.js: lightbox()). Senza questo CSS il
   link porta al file e si torna indietro solo col tasto del browser. Chiusura: la X, Esc, o un
   click sul fondo — tutte già nel JS. */
.gallery a.zoom { cursor: zoom-in; position: relative; }
.fp-lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(16,14,12,.94); padding: clamp(var(--space-5), 5vw, var(--space-8)); }
.fp-lb.is-open { display: flex; }
.fp-lb__img { max-width: min(94vw, 1500px); max-height: 88vh; width: auto; height: auto;
  border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
/* La X è DISEGNATA (due barre incrociate) invece di affidarsi al glifo ×, che a questa misura
   risulta sottile e mal centrato. Il testo del bottone sparisce ma l'aria-label resta. */
.fp-lb__x { position: absolute; top: clamp(12px, 2.2vw, 28px); right: clamp(12px, 2.2vw, 28px);
  width: 48px; height: 48px; padding: 0; font-size: 0; line-height: 0; cursor: pointer;
  color: var(--on-dark); background: rgba(246,244,236,.10); border: 1px solid rgba(246,244,236,.28);
  border-radius: var(--radius-pill); transition: background var(--dur) var(--ease),
  border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fp-lb__x::before, .fp-lb__x::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 19px; height: 1.5px; background: currentColor; border-radius: 1px; }
.fp-lb__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.fp-lb__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.fp-lb__x:hover { background: var(--accent); border-color: var(--accent); color: var(--night); transform: rotate(90deg); }
.fp-lb__x:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fp-lb__x { transition: none; } .fp-lb__x:hover { transform: none; } }