@import url('./tokens.css');

/* ============================================================
   MANO+BOCCA · V2 — Editorial, scroll-driven, single page
   ============================================================ */

:root {
  --bone: #EFE7D8;       /* between bianco and crema, slightly warmer */
  --giallo-soft: #F2C45A; /* yellow card for contact, softer zafferano */
  --giallo-warm: #E6A12C; /* = zafferano (canonical) */
  --tartufo-deep: #3E2F22;
  --tartufo-mid:  #5B4632; /* = canonical */
  --ink-dim: rgba(11,11,10,0.62);
  --paper-line: rgba(11,11,10,0.10);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bianco);
  background-image: var(--noise);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--pomodoro); color: var(--bianco); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* ===== TYPE PRIMITIVES ===== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.92;
  margin: 0;
}
p { margin: 0 0 1em; max-width: 64ch; }
em { font-style: italic; }

.kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin: 0;
}
.kicker__sep { color: var(--pomodoro); font-weight: 500; }

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

/* ===== LAYOUT PRIMITIVES ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }

section { position: relative; padding: var(--sp-section) 0; }

/* ============================================================
   NAVBAR — floating bottom on hero, sticky top on scroll
   ============================================================ */
.navbar {
  --nav-p: 0;
  --nav-bottom-offset: var(--sp-5);
  position: fixed;
  left: 0; right: 0;
  top: 0;
  bottom: auto;
  z-index: 100;
  pointer-events: none;
  /* Glide from "hovering above the bottom" to "stuck at top" via transform.
     translateY(0) = stuck top. translateY(viewport - own height - 24px) = floating bottom. */
  transform: translateY(round(calc((1 - var(--nav-p)) * (100svh - 100% - var(--nav-bottom-offset))), 1px));
  transition: transform 90ms linear;
  will-change: transform;
}
.navbar__inner {
  pointer-events: auto;
  position: relative;
  /* Width grows from container width to full viewport */
  max-width: calc(var(--container) + (100vw - var(--container)) * var(--nav-p));
  margin: 0 auto;
  /* Padding shifts from pill padding to header padding */
  padding:
    calc(var(--sp-3) - 2px * var(--nav-p))
    calc(var(--sp-4) + (var(--gutter) - var(--sp-4)) * var(--nav-p));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  /* Border radius collapses from pill (999px) to flat (0) */
  border-radius: calc(999px * (1 - var(--nav-p)));
  /* Text color crossfades white → ink */
  color: color-mix(in srgb, var(--ink) calc(var(--nav-p) * 100%), var(--bianco));
  transition: padding 120ms linear, border-radius 120ms linear, max-width 120ms linear, color 160ms linear;
}
.navbar__inner::before,
.navbar__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  transition: opacity 160ms linear;
}
.navbar__inner::before {
  /* Dark pill state */
  background: rgba(11, 11, 10, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(251, 250, 246, 0.16);
  opacity: calc(1 - var(--nav-p));
}
.navbar__inner::after {
  /* Cream sticky-bar state */
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
  opacity: var(--nav-p);
}
.navbar.is-stuck { /* preserved class for legacy hooks */ }

.navbar__brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: calc(28px - 4px * var(--nav-p));
  transition: height 200ms;
}
.navbar__logo {
  display: block;
  height: 100%;
  width: auto;
  transition: opacity 120ms linear;
}
.navbar__logo--black {
  position: absolute;
  top: 0; left: 0;
  opacity: var(--nav-p);
}
.navbar__logo--white {
  opacity: calc(1 - var(--nav-p));
}

.navbar__nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.navbar__nav a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms, color 180ms;
  color: inherit;
}
.navbar__nav a:hover { border-bottom-color: var(--zafferano); }
.navbar.is-stuck .navbar__nav a:hover { border-bottom-color: var(--pomodoro); }

.navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pomodoro);
  color: var(--bianco) !important;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 180ms, transform 180ms;
}
.navbar__cta:hover { background: var(--pomodoro-scuro); transform: translateY(-1px); }
.navbar__cta--reserve { background: var(--zafferano); color: var(--nero) !important; }
.navbar__cta--reserve:hover { background: #d2901f; }

.navbar__toggle { display: none; padding: 10px; }
.navbar__toggle-bar {
  display: block; width: 22px; height: 2px;
  background: currentColor;
  margin: 5px 0;
  transition: transform 220ms, opacity 200ms;
}

/* Mobile/tablet navbar+actions+order styles live AFTER the order component (see end of order block) so they win the cascade. */

/* ============================================================
   HERO — full-bleed image, centered wordmark, bottom ticker
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--nero);
  color: var(--bianco);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  filter: contrast(1.05) saturate(0.95);
  transform: scale(1.04);
  transition: transform 1600ms var(--ease-out);
}
.hero.is-loaded .hero__media img { transform: scale(1); }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(11,11,10,0.62) 0%,
      rgba(11,11,10,0.28) 14%,
      rgba(11,11,10,0.08) 32%,
      rgba(11,11,10,0.08) 52%,
      rgba(11,11,10,0.55) 78%,
      rgba(11,11,10,0.82) 100%);
}

.hero__corners {
  position: absolute; inset: 0; z-index: 3;
  padding: clamp(1.5rem, 2vw, 2.5rem) var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.hero__corner {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bianco);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  text-shadow: 0 1px 8px rgba(11,11,10,0.5);
}
.hero__corner strong { color: var(--zafferano); font-weight: 500; }
.hero__corner-dot {
  width: 8px; height: 8px;
  background: var(--pomodoro);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200, 52, 31, 0.25);
  animation: dot 2.4s ease-in-out infinite;
}
@keyframes dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200, 52, 31, 0.25); }
  50% { box-shadow: 0 0 0 8px rgba(200, 52, 31, 0.08); }
}
.hero__sep { color: var(--zafferano); margin: 0 2px; }

.hero__center {
  position: absolute; z-index: 2;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  /* top padding clears the corner badges; bottom padding clears the ticker strip + navbar */
  padding: clamp(3.5rem, 2.5rem + 1.5vw, 5rem) var(--gutter) clamp(11rem, 9rem + 4vw, 14rem);
  pointer-events: none;
}
.hero__center > * { pointer-events: auto; }
.hero__benvenuti {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 0.95rem + 0.9vw, 2rem);
  line-height: 1;
  color: var(--zafferano);
  margin: 0;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 6px rgba(11,11,10,0.65);
}

.hero__spacer {
  display: none;
}

.hero__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  max-width: 100%;
}

.hero__sotto {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bianco);
  margin: 0;
  opacity: 1;
  text-shadow: 0 2px 10px rgba(11,11,10,0.7);
}
.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  line-height: 1.4;
  color: var(--bianco);
  margin: var(--sp-2) 0 0;
  max-width: 32ch;
  text-shadow: 0 2px 14px rgba(11,11,10,0.65);
}
.hero__tagline em { color: var(--zafferano); }
.hero__cta-row {
  margin-top: var(--sp-3);
  display: flex; gap: var(--sp-3); flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 600px) {
  .hero__spacer { min-height: 9rem; }
}

.ticker {
  overflow: hidden;
  background: var(--nero);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.ticker__track {
  display: flex; align-items: center; gap: var(--sp-5);
  white-space: nowrap;
  padding: 16px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bianco);
  animation: marquee 38s linear infinite;
  width: max-content;
}
.ticker__track span { display: inline-block; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .hero__corner { font-size: 0.62rem; letter-spacing: 0.18em; }
  .ticker__track { font-size: 0.68rem; letter-spacing: 0.18em; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 16px 22px;
  background: var(--bianco);
  color: var(--ink);
  border: 1px solid var(--bianco);
  border-radius: 999px;
  transition: background 220ms var(--ease-out), color 220ms, border-color 220ms, transform 220ms;
}
.btn:hover { background: var(--pomodoro); color: var(--bianco); border-color: var(--pomodoro); transform: translateY(-2px); }
.btn--accent { background: var(--pomodoro); color: var(--bianco); border-color: var(--pomodoro); }
.btn--accent:hover { background: var(--pomodoro-scuro); border-color: var(--pomodoro-scuro); }
.btn--ghost { background: transparent; color: var(--bianco); }
.btn--ghost:hover { background: var(--bianco); color: var(--ink); border-color: var(--bianco); }
.btn--dark { background: var(--ink); color: var(--bianco); border-color: var(--ink); }
.btn--dark:hover { background: var(--pomodoro); border-color: var(--pomodoro); }
.btn__arrow { display: inline-block; transition: transform 220ms; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Navbar actions cluster: order widget + reserve + phone */
.navbar__actions { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* Order — "Comandă" white pill; brand chips drop away from the navbar edge */
.order { position: relative; display: inline-flex; align-items: center; }
.order__icon { display: none; }            /* car icon — mobile only */
.order__icon svg { display: block; }
.order__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bianco); color: var(--nero);
  border: 1px solid rgba(11,11,10,0.12);
  padding: 10px 16px; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.18em; text-transform: uppercase; line-height: 1;
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms, transform 180ms;
}
.order__trigger:hover { background: var(--nero); color: var(--bianco); border-color: var(--nero); transform: translateY(-1px); }
.order__trigger .btn__arrow { display: inline-block; transition: transform 240ms var(--ease-out); }
.order.is-open .order__trigger .btn__arrow { transform: rotate(90deg); }

.order__panel {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(100% + var(--sp-4));        /* default: opens DOWN (navbar stuck at top) */
  display: flex; align-items: center; gap: var(--sp-2);
  pointer-events: none;
}
/* Navbar floating at the bottom of the viewport → open UP, centered on the button */
.navbar:not(.is-stuck) .order__panel { top: auto; bottom: calc(100% + var(--sp-4)); }

.order__opt {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.32);
  opacity: 0; transform: translateY(10px) scale(0.4);
  transition: opacity 0.3s var(--ease-out), transform 0.42s var(--ease-out);
  will-change: transform, opacity;
}
.navbar:not(.is-stuck) .order__opt { transform: translateY(-10px) scale(0.4); }
.order__opt img { width: 100%; height: 100%; display: block; }
.order__opt:hover { transform: translateY(0) scale(1.1) !important; }
.order.is-open .order__panel { pointer-events: auto; }
.order.is-open .order__opt { opacity: 1; transform: translateY(0) scale(1); }
.order.is-open .order__opt:nth-child(1) { transition-delay: 0.05s; }
.order.is-open .order__opt:nth-child(2) { transition-delay: 0.11s; }
.order.is-open .order__opt:nth-child(3) { transition-delay: 0.17s; }
.order__opt--soon { cursor: default; filter: saturate(0.85); }

/* ===== MOBILE + TABLET (≤920px): top bar = logo + hamburger; actions = bottom bar that rises to top on scroll ===== */
@media (max-width: 920px) {
  /* Top bar stays at the top; drop the desktop glide transform so fixed children are viewport-anchored */
  .navbar { transform: none !important; will-change: auto; top: 0; bottom: auto; }
  .navbar__inner {
    max-width: none; margin: 0; border-radius: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px var(--gutter);
  }
  /* Bigger, clearly-visible logo + a darker top bar over the bright hero */
  .navbar__brand { height: 32px; }
  .navbar:not(.is-stuck) .navbar__inner::before { background: rgba(11,11,10,0.86); }

  /* Nav links: fullscreen drawer via hamburger */
  .navbar__nav {
    position: fixed; inset: 0;
    flex-direction: column; justify-content: center; align-items: center;
    background: var(--nero); color: var(--bianco);
    gap: var(--sp-5);
    transform: translateY(-100%);
    transition: transform 320ms var(--ease-in-out);
    font-size: 1.1rem; letter-spacing: 0.18em;
    z-index: 105;
  }
  .navbar__nav.is-open { transform: translateY(0); }
  .navbar__nav a { color: var(--bianco); padding: var(--sp-3) 0; }
  .navbar__toggle { display: block; position: relative; z-index: 110; color: inherit; }
  .navbar__toggle.is-active .navbar__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navbar__toggle.is-active .navbar__toggle-bar:nth-child(2) { opacity: 0; }
  .navbar__toggle.is-active .navbar__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Action bar (Comandă · Rezervare · Sună): fixed at the BOTTOM by default */
  .navbar__actions {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    display: flex; justify-content: center; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: rgba(11,11,10,0.82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(251,250,246,0.14);
    z-index: 101;
    transition: padding 240ms var(--ease-out), background 240ms;
  }
  /* On scroll (stuck): rise to a compact icon cluster centered at the TOP */
  .navbar.is-stuck .navbar__actions {
    left: 0; right: 0; bottom: auto; top: 8px;
    margin: 0 auto; width: max-content; transform: none;
    gap: var(--sp-3);
    padding: 0; background: transparent; border-top: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  /* Hide the action bar while the fullscreen nav drawer is open */
  .navbar:has(.navbar__nav.is-open) .navbar__actions { opacity: 0; pointer-events: none; }

  /* Rezervare + Sună → perfectly framed icon-only circles */
  .navbar__cta { width: 46px; height: 46px; padding: 0; display: grid; place-items: center; gap: 0; }
  .navbar__cta svg { width: 18px; height: 18px; }
  .navbar__cta span:not(.visually-hidden) { display: none; }
  .navbar__cta:not(.navbar__cta--reserve)::after { content: none; }

  /* Comandă → car icon (+ label until scrolled, then a framed icon circle) */
  .order__icon { display: inline-flex; }
  .order__icon svg { width: 18px; height: 18px; }
  .order__trigger { height: 46px; padding: 0 18px; gap: 8px; }
  .order__trigger .btn__arrow { display: none; }
  .navbar.is-stuck .order__label { display: none; }
  .navbar.is-stuck .order__trigger { width: 46px; padding: 0; justify-content: center; }

  /* Comandă DRAWER (navbar only): full-width black bar, chips centered, slides from the menu's side */
  .navbar .order__panel {
    position: fixed; left: 0; right: 0; width: 100%;
    display: flex; justify-content: center; align-items: center; gap: var(--sp-4);
    background: var(--nero); border-radius: 0;
    padding: var(--sp-4) var(--gutter);
    box-shadow: 0 18px 50px rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: transform 340ms var(--ease-out), opacity 220ms var(--ease-out);
    z-index: 100;
  }
  /* button at TOP (stuck) → drawer docks just under the menu bar and slides down */
  .navbar.is-stuck .order__panel { top: 58px; bottom: auto; transform: translateY(-14px); }
  /* button at BOTTOM → drawer docks just above the bottom action bar and slides up */
  .navbar:not(.is-stuck) .order__panel { bottom: 78px; top: auto; transform: translateY(14px); }
  .navbar .order.is-open .order__panel { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .navbar .order__opt { opacity: 1 !important; transform: none !important; box-shadow: none; transition: transform 180ms var(--ease-out); }
  .navbar .order__opt:hover, .navbar .order__opt:active { transform: scale(1.08) !important; }

  /* In-page CTA Comandă keeps the simple inline chip row (not the navbar drawer) */
  .order--cta .order__panel { background: transparent; box-shadow: none; padding: 0; }
  .order--cta .order__opt { box-shadow: 0 10px 26px rgba(0,0,0,0.32); }

  /* Hero: clear the bottom action bar + drop the top corners (they'd clash with the top bar) */
  .hero__corners { display: none; }
  .hero__center { padding-bottom: 88px; }
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { background: var(--crema); }
.manifesto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 980px) { .manifesto__grid { grid-template-columns: 1fr; gap: var(--sp-7); } }

.manifesto__text { display: grid; gap: var(--sp-5); }
.manifesto__hed {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.manifesto__hed em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  color: var(--tartufo-mid);
  font-weight: 500;
}
.manifesto__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 42ch;
  display: grid; gap: var(--sp-4);
}
.manifesto__body p { margin: 0; max-width: none; }
.manifesto__signature {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.manifesto__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.manifesto__media img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__stamp {
  position: absolute;
  bottom: var(--sp-5); right: var(--sp-5);
  width: 138px; height: 138px;
  border-radius: 50%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  background: var(--pomodoro);
  color: var(--bianco);
  font-family: var(--font-mono);
  text-transform: uppercase;
  text-align: center;
  transform: rotate(-9deg);
  padding: 0 14px;
}
.manifesto__stamp::before {
  content: ''; position: absolute; inset: 8px;
  border: 1px dashed rgba(251,250,246,0.55);
  border-radius: 50%;
  pointer-events: none;
}
.manifesto__stamp span {
  font-size: 0.6rem; letter-spacing: 0.12em; line-height: 1;
}
.manifesto__stamp strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 4px 0 2px;
  font-weight: 400;
}

/* ============================================================
   GUSTI — food slider (stil locale)
   ============================================================ */
.gusti { background: var(--crema); padding-block: var(--sp-section); }
.gusti .container { margin-bottom: var(--sp-6); }
.gusti__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 0.95; margin: var(--sp-2) 0 0; }
.gusti__title em { font-style: italic; color: var(--pomodoro); }
.gusti__rail {
  display: flex; gap: var(--sp-4); overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) var(--sp-4);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.gusti__rail::-webkit-scrollbar { display: none; }
.gusti__slide {
  flex: 0 0 clamp(260px, 32vw, 420px); aspect-ratio: 4 / 5;
  scroll-snap-align: start; position: relative; margin: 0; overflow: hidden;
}
.gusti__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.gusti__slide:hover img { transform: scale(1.05); }
.gusti__slide figcaption {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3); color: var(--bianco);
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead);
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

/* ============================================================
   MENU — v1 grid (12-col cards, badges, numbers, categories)
   ============================================================ */
.section-head {
  margin-bottom: var(--sp-8);
  display: grid; gap: var(--sp-4);
  max-width: 60ch;
}
.section-head__title {
  font-size: var(--fs-h2);
}
.section-head__title em { font-family: var(--font-serif); font-style: italic; text-transform: none; color: var(--ink-soft); }
.dark .section-head__title em { color: var(--zafferano); }
.section-head__title .plus { color: var(--pomodoro); }
.section-head__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 50ch;
}
.dark .section-head__lede { color: var(--cenere); }

.eyebrow-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.dark .eyebrow-pill { border-color: var(--bianco); color: var(--bianco); }
.eyebrow-pill--accent { background: var(--pomodoro); color: var(--bianco); border-color: var(--pomodoro); }

.menu__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  align-items: end;
  margin-bottom: var(--sp-8);
}
@media (max-width: 768px) { .menu__head { grid-template-columns: 1fr; } }

.menu__tabs {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.menu__tab {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
}
.menu__tab:hover { color: var(--ink); border-color: var(--ink); }
.menu__tab.is-active { background: var(--ink); color: var(--bianco); border-color: var(--ink); }

.menu__panel { display: none; }
.menu__panel.is-active { display: block; animation: fadeIn 280ms var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.menu__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-6);
}
@media (max-width: 980px) { .menu__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (max-width: 560px) { .menu__grid { grid-template-columns: 1fr; } }

.menu__item {
  grid-column: span 3;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.menu__item--wide { grid-column: span 6; }
.menu__item--hero { grid-column: span 8; }
@media (max-width: 980px) { .menu__item, .menu__item--wide, .menu__item--hero { grid-column: span 1; } }

.menu__item__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.menu__item--noimg { border: 1px solid var(--line); padding: var(--sp-4); background: var(--crema); }

.menu__item__media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--crema);
}
.menu__item--hero .menu__item__media { aspect-ratio: 16 / 10; }
.menu__item--wide .menu__item__media { aspect-ratio: 3 / 2; }
.menu__item__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 55%;
  transition: transform 800ms var(--ease-out), filter 600ms;
}
.menu__item:hover .menu__item__media img { transform: scale(1.04); filter: contrast(1.05) saturate(1.05); }
.menu__item__badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  padding: 5px 10px;
  background: var(--pomodoro);
  color: var(--bianco);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.menu__item__num {
  position: absolute;
  bottom: var(--sp-3); right: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--bianco);
  background: rgba(11,11,10,0.4);
  padding: 4px 10px;
  backdrop-filter: blur(8px);
}

.menu__item__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.05rem + 0.5vw, 1.55rem);
  line-height: 1.08;
  color: var(--ink);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.menu__item__desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
}
.menu__item__meta {
  display: flex; justify-content: flex-start; align-items: baseline;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.menu__item__price {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--ink);
}

/* Contorni / side lists inside a card panel */
.menu__list { margin-top: var(--sp-7); max-width: 760px; }
.menu__list__head {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); margin: 0 0 var(--sp-4);
}
.menu__list__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--sp-3); padding-block: 6px; }
.menu__list__name { font-family: var(--font-serif); font-size: var(--fs-h4); }
.menu__list__note { font-family: var(--font-sans); font-style: normal; font-size: var(--fs-xs); color: var(--ink-muted); }
.menu__list__dots { border-bottom: 1px dotted var(--line); transform: translateY(-5px); }
.menu__list__price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--pomodoro); white-space: nowrap; }

.menu__cta {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-top: 2px solid var(--ink);
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--sp-5); align-items: center;
}
@media (max-width: 760px) { .menu__cta { grid-template-columns: 1fr; } }
.menu__cta--note { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.menu__cta--note .menu__cta__text { max-width: 56ch; }

/* Bevande / Cocktails / Vini — grouped price lists */
.menu__drinks { display: block; }
.menu__drinks-group { margin-bottom: var(--sp-8); break-inside: avoid; }
.menu__drinks-head {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--pomodoro);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); margin: 0 0 var(--sp-4);
}
.menu__drinks-group .menu__drink + .menu__drink { margin-top: 6px; }
.menu__drink { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--sp-3); max-width: 620px; }
.menu__drink-name { font-family: var(--font-serif); font-size: var(--fs-h4); }
.menu__drink-dots { border-bottom: 1px dotted var(--line); transform: translateY(-5px); }
.menu__drink-price { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--pomodoro); white-space: nowrap; }
/* multi-column flow on wide screens to keep long bar lists tight */
@media (min-width: 900px) {
  .menu__drinks { column-count: 2; column-gap: var(--sp-9); }
  .menu__drink { max-width: none; }
}

.menu__cta__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   VOCI / Testimonials (tartufo background, brand-palette)
   ============================================================ */
.voci {
  background: var(--tartufo-mid);
  color: var(--bianco);
  position: relative;
  overflow: hidden;
}
.voci::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(230, 161, 44, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(200, 52, 31, 0.16) 0%, transparent 50%);
  pointer-events: none;
}
.voci > * { position: relative; z-index: 1; }

.voci .kicker { color: rgba(251, 250, 246, 0.62); }
.voci .kicker__sep { color: var(--zafferano); }

.voci__head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.voci__title {
  font-size: var(--fs-h2);
  color: var(--bianco);
}
.voci__title em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  color: var(--zafferano);
  font-weight: 500;
}

.voci__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 980px) { .voci__grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

.voce {
  position: relative;
  background: rgba(251, 250, 246, 0.05);
  border: 1px solid rgba(251, 250, 246, 0.14);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  color: var(--bianco);
  text-decoration: none;
  transition: transform 320ms var(--ease-out), background 320ms, border-color 320ms;
}
.voce:hover {
  transform: translateY(-4px);
  background: rgba(251, 250, 246, 0.08);
  border-color: rgba(230, 161, 44, 0.45);
}

.voce__source {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--zafferano);
}

.voce__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--bianco);
  margin: var(--sp-2) 0 0;
  text-transform: none;
}

.voce__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(251, 250, 246, 0.78);
  margin: 0;
  max-width: 36ch;
}

.voce__cta {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(251, 250, 246, 0.14);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zafferano);
  display: inline-flex; gap: 6px; align-items: center;
}

.voce__star {
  position: absolute;
  top: 16px; right: 20px;
  color: var(--zafferano);
  font-size: 1.4rem;
  line-height: 1;
}

.voce--award {
  background: rgba(230, 161, 44, 0.08);
  border-color: rgba(230, 161, 44, 0.32);
}

/* ============================================================
   ATMOSFERA — dark gallery
   ============================================================ */
.atmosfera { background: var(--nero); color: var(--bianco); }
.atmosfera .kicker { color: var(--cenere); }
.atmosfera .kicker__sep { color: var(--zafferano); }

.atmosfera__head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: end;
  margin-bottom: var(--sp-7);
}
@media (max-width: 880px) { .atmosfera__head { grid-template-columns: 1fr; gap: var(--sp-4); } }

.atmosfera__title {
  font-size: var(--fs-h2);
  color: var(--bianco);
  margin-top: var(--sp-3);
}
.atmosfera__title em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  color: var(--zafferano);
  font-weight: 500;
}
.atmosfera__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: var(--cenere);
  max-width: 42ch;
  margin: 0;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: var(--sp-3);
  grid-auto-rows: minmax(220px, 22vw);
}
.gallery__item {
  overflow: hidden; position: relative; display: block;
  min-height: 0; min-width: 0;
}
.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.06) saturate(0.95);
  transition: transform 900ms var(--ease-out), filter 500ms;
}
.gallery__item:hover img { transform: scale(1.06); filter: contrast(1.1) saturate(1.05); }
.gallery__cap {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bianco);
  background: rgba(11,11,10,0.62);
  padding: 4px 10px;
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(4px);
  transition: opacity 280ms, transform 280ms;
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: translateY(0); }

.g1 { grid-column: span 2; grid-row: span 2; }
.g2 { grid-column: span 2; grid-row: span 1; }
.g6 { grid-column: span 2; grid-row: span 1; }

@media (max-width: 980px) {
  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, 26vw); }
  .g1 { grid-column: span 2; grid-row: span 2; }
  .g2 { grid-column: span 1; }
  .g6 { grid-column: span 3; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; gap: var(--sp-2); }
  .gallery > * { grid-column: span 1 !important; grid-row: span 1 !important; }
}

.atmosfera__rdw {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(251,250,246,0.16);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
}
.rdw-stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bianco);
  display: inline-flex; align-items: center; gap: var(--sp-3);
}
.rdw-stamp strong { color: var(--zafferano); font-weight: 500; }
.rdw-stamp__star { color: var(--zafferano); font-size: 1rem; }

.rdw-link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--zafferano);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 180ms;
}
.rdw-link:hover { color: var(--bianco); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--bone); }

.faq__head {
  display: grid; gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.faq__title {
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  margin-top: var(--sp-2);
}
.faq__title em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  font-weight: 500;
  color: var(--tartufo-mid);
}

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-7);
}
@media (max-width: 800px) { .faq__grid { grid-template-columns: 1fr; } }

.faq__item {
  border-bottom: 1px solid var(--ink);
  padding: var(--sp-5) 0;
}
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary > span:first-child {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink);
}
.faq__plus {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--pomodoro);
  line-height: 1;
  width: 1.5em;
  text-align: center;
  transition: transform 240ms var(--ease-out);
  flex-shrink: 0;
}
.faq__item[open] .faq__plus { transform: rotate(45deg); }
.faq__body {
  padding-top: var(--sp-4);
  max-width: 50ch;
}
.faq__body p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink-soft);
  margin: 0;
}
.faq__body a { color: var(--pomodoro); border-bottom: 1px solid currentColor; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--nero);
  color: var(--bianco);
  padding: var(--sp-9) 0 var(--sp-5);
}
.site-footer__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(251,250,246,0.16);
}
@media (max-width: 1180px) { .site-footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .site-footer__top { grid-template-columns: 1fr; } }

.site-footer__brand img { width: clamp(180px, 18vw, 260px); height: auto; margin-bottom: var(--sp-4); }
.site-footer__brand p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  color: var(--cenere);
  max-width: 30ch;
}

.site-footer__col h5 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--zafferano);
  margin: 0 0 var(--sp-3);
}
.site-footer__col a,
.site-footer__col p {
  display: block;
  padding: 4px 0;
  font-size: var(--fs-sm);
  color: var(--cenere);
  margin: 0;
  transition: color 180ms;
}
.site-footer__col a:hover { color: var(--bianco); }

.site-footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fumo);
}
.site-footer__credit { color: var(--cenere); }
.site-footer__credit a { color: var(--zafferano); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
}
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* ── Inner pages (presa.html etc.) — navbar has no hero to float over ── */
/* No hero means site.js never drives --nav-p, so the navbar would stay in its
   floating-pill state (translated down, white-on-transparent). Force the
   "stuck / solid" state: --nav-p:1, no transform, sticky at top. */
.page-inner { background: var(--bone); }
.page-inner main { padding-top: var(--sp-6); }
.page-inner .navbar {
  --nav-p: 1;
  position: sticky;
  top: 0;
  transform: none;
}

.subnav .container { display: flex; align-items: center; gap: var(--sp-3); }
.subnav {
  padding: var(--sp-4) 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-6);
}
.subnav__home { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); transition: color 180ms, gap 180ms; }
.subnav__home:hover { color: var(--pomodoro); gap: 12px; }
.subnav__sep { color: var(--zafferano); }
.subnav__current { color: var(--ink-muted); }

/* Menu page: breadcrumb already labels the page, so the menu starts right under it */
#menu { padding-top: var(--sp-2); }

/* ===== Contact page ===== */
/* Contact — black & white, matching the footer */
.contact { background: var(--nero); color: var(--bianco); padding-block: var(--sp-9) var(--sp-section); }
.contact__head { max-width: 760px; margin-bottom: var(--sp-8); }
.contact .kicker { color: var(--cenere); }
.contact .kicker__sep { color: var(--zafferano); }
.contact__title { font-family: var(--font-serif); font-weight: 400; text-transform: none; font-size: var(--fs-h2); line-height: 1.0; letter-spacing: -0.01em; margin: var(--sp-3) 0 var(--sp-4); color: var(--bianco); }
.contact__title em { font-style: italic; color: var(--bianco); }
.contact__lede { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--cenere); margin: 0; }
.contact__board { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--sp-6); align-items: stretch; }
.contact__card { background: var(--nero-soft); color: var(--bianco); padding: var(--sp-7); border-radius: 4px; border: 1px solid rgba(251,250,246,0.16); display: grid; gap: var(--sp-6); align-content: start; }
.contact__block { display: grid; gap: var(--sp-2); }
.contact__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.2em; color: var(--zafferano); }
.contact__addr { font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.25; margin: 0; color: var(--bianco); }
.contact__maplink { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; border-bottom: 1px solid currentColor; align-self: start; color: var(--cenere); transition: color 180ms; }
.contact__maplink:hover { color: var(--bianco); }
.contact__hours { font-family: var(--font-serif); font-size: var(--fs-h4); margin: 0; color: var(--bianco); }
.contact__hours strong { font-family: var(--font-display); font-weight: 400; }
.contact__phone { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--bianco); line-height: 1; transition: color 180ms; }
.contact__phone:hover { color: var(--zafferano); }
.contact__inline { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--cenere); }
.contact__inline a { color: var(--cenere); border-bottom: 1px solid rgba(251,250,246,0.4); transition: color 180ms; }
.contact__inline a:hover { color: var(--bianco); }
.contact__reserve { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: start; background: var(--bianco); color: var(--nero); padding: 14px 22px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.18em; transition: background 180ms, transform 180ms; }
.contact__reserve:hover { background: var(--zafferano); transform: translateY(-1px); }
.contact__map { position: relative; min-height: 420px; border-radius: 4px; overflow: hidden; border: 1px solid rgba(251,250,246,0.16); }
.contact__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9) brightness(1.05); }
.contact__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid rgba(251,250,246,0.16); }
.contact__foot-col { display: grid; gap: var(--sp-4); align-content: start; }
.contact__chips { display: flex; gap: var(--sp-3); }
.contact__chip { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.4); transition: transform 200ms var(--ease-out); }
.contact__chip:hover { transform: translateY(-3px) scale(1.05); }
.contact__chip img { width: 100%; height: 100%; display: block; }
.contact__chip--soon { filter: saturate(0.85); position: relative; cursor: default; }
.contact__social { display: flex; flex-direction: column; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cenere); }
.contact__social a:hover { color: var(--bianco); }
@media (max-width: 860px) {
  .contact__board { grid-template-columns: 1fr; }
  .contact__map { min-height: 320px; }
  .contact__foot { grid-template-columns: 1fr; gap: var(--sp-7); }
}

/* Contact form — same dark palette as the card */
.contact__form { margin-top: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid rgba(251,250,246,0.16); display: grid; gap: var(--sp-6); }
.contact__form-head { display: grid; gap: var(--sp-2); max-width: 56ch; }
.contact__form-title { font-family: var(--font-serif); font-weight: 400; text-transform: none; font-size: var(--fs-h3); line-height: 1.05; margin: var(--sp-1) 0 0; color: var(--bianco); }
.contact__form-title em { font-style: italic; color: var(--zafferano); }
.contact__form-lede { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--cenere); margin: var(--sp-2) 0 0; }
.contact__field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.contact__field { display: grid; gap: var(--sp-2); }
.contact__field > span { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--zafferano); }
.contact__field > span em { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: var(--cenere); }
.contact__field input, .contact__field textarea {
  width: 100%; background: var(--nero-soft); color: var(--bianco);
  border: 1px solid rgba(251,250,246,0.16); border-radius: 4px;
  padding: 13px 15px; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.5;
  transition: border-color 180ms, background 180ms;
}
.contact__field input::placeholder, .contact__field textarea::placeholder { color: rgba(251,250,246,0.34); }
.contact__field input:focus, .contact__field textarea:focus { outline: none; border-color: var(--zafferano); background: rgba(251,250,246,0.04); }
.contact__field textarea { resize: vertical; min-height: 130px; }
.contact__form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.contact__submit { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--bianco); color: var(--nero); border: 0; cursor: pointer; padding: 15px 26px; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.18em; transition: background 180ms, transform 180ms; }
.contact__submit:hover { background: var(--zafferano); transform: translateY(-1px); }
.contact__form-note { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; color: var(--cenere); margin: 0; }
@media (max-width: 860px) { .contact__field-grid { grid-template-columns: 1fr; } }