:root {
  --cream: #F4ECD8;
  --paper: #EDE2C8;
  --ink: #2A1B10;
  --muted: #6E5A47;
  --rule: rgba(42,27,16,0.14);
  --senape: #C99746;
  --terra: #A14E2A;
  --rosa: #7A3A48;
  --cream-70: rgba(245,237,222,0.7);
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 14px; --space-4: 20px;
  --space-5: 28px; --space-6: 36px; --space-7: 56px; --space-8: 80px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.02; margin: 0 0 var(--space-4); letter-spacing: -0.015em; }
p { margin: 0 0 var(--space-3); }
a { color: var(--terra); }
a:hover { color: var(--rosa); }
img { max-width: 100%; }
::selection { background: var(--senape); color: var(--cream); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }
.hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.kicker { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--terra); text-transform: uppercase; }
.kicker::before { content: ''; display: inline-block; width: 36px; height: 1px; background: var(--terra); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 36px; }
/* Barra piena, dello stesso colore del body: la versione semitrasparente col blur
   lasciava trasparire le sezioni sottostanti e il testo diventava illeggibile. */
.nav--page { position: sticky; top: 0; z-index: 100; background: var(--cream); border-bottom: 1px solid var(--rule); }
.nav--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid rgba(245,237,222,0.18); transition: background .3s ease, border-color .3s ease; }
.nav--overlay.scrolled { background: var(--cream); border-bottom-color: var(--rule); }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 46px; width: auto; display: block; }
.nav--overlay .logo-light { display: none; }
.nav--overlay .logo-dark { display: block; }
.nav--overlay.scrolled .logo-light { display: block; }
.nav--overlay.scrolled .logo-dark { display: none; }
.nav--page .logo-dark { display: none; }
.nav-links { display: flex; gap: 30px; align-items: center; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-links a { text-decoration: none; color: var(--ink); }
.nav-links a:hover { color: var(--terra); }
.nav-links a.active { color: var(--terra); border-bottom: 1px solid currentColor; }
.nav--overlay .nav-links a { color: rgba(245,237,222,0.92); }
.nav--overlay .nav-links a:hover { color: #fff; }
.nav--overlay .nav-links a.active { color: #fff; border-bottom-color: var(--senape); }
.nav--overlay.scrolled .nav-links a { color: var(--ink); }
.nav--overlay.scrolled .nav-links a:hover { color: var(--terra); }
.nav--overlay.scrolled .nav-links a.active { color: var(--terra); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; background: var(--terra); color: var(--cream); border: 1px solid var(--terra); font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 2px; transition: background .2s, color .2s; }
.btn:hover { background: var(--rosa); border-color: var(--rosa); color: var(--cream); }
.btn-primary { background: var(--ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--terra); border-color: var(--terra); }
.btn-secondary { background: transparent; color: var(--ink); border: none; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 14px 4px; }
.btn-secondary:hover { background: transparent; color: var(--terra); border-bottom-color: var(--terra); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--terra); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { background: transparent; color: var(--rosa); }
.nav--overlay .btn { background: transparent; border: 1px solid rgba(245,237,222,0.7); color: #fff; }
.nav--overlay .btn:hover { background: rgba(245,237,222,0.14); }
.nav--overlay.scrolled .btn { background: var(--terra); border-color: var(--terra); color: var(--cream); }
.nav--overlay.scrolled .btn:hover { background: var(--rosa); border-color: var(--rosa); }

.mono-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--terra); text-transform: uppercase; }
.section-label { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.section-label h2 { font-size: clamp(44px, 5vw, 72px); margin: 0; line-height: 1; letter-spacing: -0.01em; }
.section-label .kick { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--muted); max-width: 480px; text-align: right; }

.card { display: flex; flex-direction: column; gap: 14px; padding: 32px 28px; background: var(--paper); border-top: 2px solid var(--terra); }
.card-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--terra); text-transform: uppercase; }
.card-title { font-family: var(--font-display); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.005em; }
.card-body { font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.card-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
a.card { text-decoration: none; color: var(--ink); }
a.card:hover { box-shadow: 0 18px 40px rgba(60,30,10,0.12); border-top-color: var(--rosa); }

.plate { background: var(--paper); border: 1px solid var(--rule); padding: 10px; }
.plate img { display: block; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table td, .table th { padding: 10px 4px; border-bottom: 1px solid var(--rule); text-align: left; }

.field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.input { font-family: var(--font-body); font-size: 15px; letter-spacing: normal; text-transform: none; padding: 12px; border: 1px solid var(--rule); background: #FBF5E6; color: var(--ink); border-radius: 2px; }
.input:focus { border-color: var(--terra); outline: none; }

.seg { display: inline-flex; border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; }
.seg-opt { position: relative; padding: 12px 28px; font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; color: var(--ink); transition: background .2s, color .2s; }
.seg-opt:hover { background: rgba(201,151,70,0.15); }
.seg-opt:has(input:checked) { background: var(--terra); color: var(--cream); }
.seg-opt + .seg-opt { border-left: 1px solid var(--rule); }

.ticker-wrap { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); overflow: hidden; }
.ticker { display: flex; gap: 48px; padding: 14px 0; white-space: nowrap; animation: tickerScroll 50s linear infinite; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink); text-transform: uppercase; }
.ticker span { display: flex; align-items: center; gap: 48px; }
.ticker .star { color: var(--terra); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ==========================================================================
   Livello responsive e rifiniture UX — aggiunto da noi, non fa parte del
   design originale di Claude Design.

   Le pagine .dc.html usano stili inline (è il formato che produce Claude
   Design): per non doverle riscrivere — e perderne le modifiche a ogni
   reimport — questo livello agisce per selettori d'attributo sugli stili
   inline stessi. Da qui l'uso di !important, che serve a battere l'inline.
   ========================================================================== */

/* La hero e i ticker escono di proposito dal viewport: `clip` evita lo scroll
   orizzontale senza rompere il position:sticky dell'header (hidden lo rompe). */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
/* Gli anchor (#prenota) altrimenti finiscono sotto l'header sticky. */
[id] { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* Il segmento pranzo/cena nasconde le radio: senza questo la selezione da
   tastiera è invisibile. */
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--terra); outline-offset: -2px; }

/* La foto della hero è chiara (parete gialla) e il gradiente inline non basta
   a reggere il testo crema: rinforziamo sopra e sotto, dove stanno occhiello,
   titolo e pulsanti. */
[data-screen-label="Hero"] { position: relative; }
[data-screen-label="Hero"]::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(26,18,11,0.58), rgba(26,18,11,0.28) 40%, rgba(26,18,11,0.80));
}
[data-screen-label="Hero"] > div { position: relative; z-index: 1; }

/* --- Navigazione mobile (il markup lo inietta assets/nav.js) ------------- */
.menu-toggle { display: none; }
.menu-mobile { display: none; }

@media (max-width: 900px) {
  .nav-links, .nav > .btn { display: none; }
  .nav { padding: 12px 22px; gap: 16px; }
  .nav-logo img { height: 40px; }

  .menu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 8px; right: 14px; z-index: 210;
    width: 48px; height: 48px; padding: 0;
    background: transparent; border: 0; cursor: pointer; color: var(--ink);
  }
  .menu-toggle.su-scuro { color: var(--cream); }
  .menu-toggle-barre, .menu-toggle-barre::before, .menu-toggle-barre::after {
    content: ''; display: block; width: 24px; height: 2px;
    background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
  }
  .menu-toggle-barre::before { transform: translateY(-7px); }
  .menu-toggle-barre::after  { transform: translateY(5px); }
  .menu-aperto .menu-toggle { color: var(--ink); }
  .menu-aperto .menu-toggle-barre { background: transparent; }
  .menu-aperto .menu-toggle-barre::before { transform: rotate(45deg); }
  .menu-aperto .menu-toggle-barre::after  { transform: rotate(-45deg) translateY(-1px); }

  .menu-mobile {
    display: flex; flex-direction: column; gap: 4px;
    position: fixed; inset: 0; z-index: 200;
    padding: 20px 28px 40px; background: var(--cream);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .menu-aperto { overflow: hidden; }
  .menu-aperto .menu-mobile { opacity: 1; visibility: visible; transform: none; }

  .menu-mobile-marchio { display: block; margin-bottom: 40px; }
  .menu-mobile-marchio img { height: 40px; width: auto; display: block; }
  .menu-mobile-voci { display: flex; flex-direction: column; }
  .menu-mobile-voci a {
    padding: 16px 0; border-bottom: 1px solid var(--rule);
    font-family: var(--font-display); font-size: 30px; line-height: 1.1;
    color: var(--ink); text-decoration: none;
  }
  .menu-mobile-voci a[aria-current="page"] { color: var(--terra); }
  .menu-mobile-cta { margin-top: 28px; align-self: flex-start; }
  .menu-mobile-recapiti {
    display: flex; gap: 24px; margin-top: auto; padding-top: 32px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  }
}

/* --- Griglie: il design le fissa a 2/3/4 colonne con stili inline --------- */
@media (max-width: 900px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Eccezioni (dopo la regola generica, così vincono per ordine): restano a
     più colonne le griglie che a una colonna diventerebbero solo più lunghe. */
  /* riga piatto ↔ prezzo del menù */
  [style*="1fr) auto"][style*="align-items: baseline"] { grid-template-columns: minmax(0, 1fr) auto !important; }
  /* i tre numeri 50 / 70 / 2 in home */
  [style*="repeat(3, minmax(0, 1fr)); border-top"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* mosaico foto "A tavola" */
  [style*="repeat(4, minmax(0, 1fr))"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* schede recapiti/orari in home e caratteristiche della squadra */
  [style*="minmax(0, 1fr) minmax(0, 1fr); gap: 24px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* i gap pensati per due colonne, in colonna singola diventano voragini */
  [style*="gap: 64px"] { gap: 36px !important; }
  [style*="gap: 80px"] { gap: 40px !important; }
  [style*="gap: 72px 80px"] { gap: 48px !important; }
  [style*="gap: 48px"] { gap: 32px !important; }
  [style*="gap: 40px"] { gap: 24px !important; }

  .section-label { gap: 12px; }
  .section-label .kick { text-align: left; font-size: 18px; }
}

/* --- Respiro verticale e margini laterali sui telefoni ------------------- */
@media (max-width: 640px) {
  [style*="padding: 100px 36px;"]      { padding: 64px 22px !important; }
  [style*="padding: 100px 36px 72px;"] { padding: 64px 22px 48px !important; }
  [style*="padding: 100px 36px 56px;"] { padding: 64px 22px 40px !important; }
  [style*="padding: 0 36px 100px;"]    { padding: 0 22px 64px !important; }
  [style*="padding: 0 36px 80px;"]     { padding: 0 22px 56px !important; }
  [style*="padding: 80px 36px;"]       { padding: 56px 22px !important; }
  [style*="padding: 64px 36px 40px;"]  { padding: 48px 22px 32px !important; }

  /* hero: 720px fissi lasciano il titolo schiacciato in alto e i pulsanti fuori */
  [data-screen-label="Hero"] { min-height: min(88svh, 620px) !important; }
  [data-screen-label="Hero"] > div { padding: 120px 22px 48px !important; }
  [data-screen-label="Hero"] .btn { width: 100%; }
  [data-screen-label="Hero"] > div > div:last-child { flex-direction: column; align-items: stretch !important; gap: 12px !important; }

  .card { padding: 26px 22px; }
  .plate { padding: 6px; }
  [style*="padding: 40px 36px;"] { padding: 28px 22px !important; }
  [style*="padding: 36px 32px;"] { padding: 26px 22px !important; }
  [style*="padding: 28px 32px;"] { padding: 22px 20px !important; }
}

/* Sui tablet una colonna sola sprecherebbe metà schermo: le griglie di schede
   restano a due. (Selettore su "; gap" per non toccare i tre numeri della home,
   che hanno "; border-top" e devono restare a tre.) */
@media (min-width: 641px) and (max-width: 900px) {
  [style*="repeat(3, minmax(0, 1fr)); gap"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}