/* Moderno: pannello rosso pomodoro, foto cenitale, nome condensato a cavallo, barre da tovaglia.
   Token via :root iniettato in build da tokens.json. Qui solo layout. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin: 0;background:var(--bg);color:var(--ink);font-family: var(--b-font-body);font-size:1.0625rem;line-height:1.5}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin: 0 auto;padding: 0 clamp(1rem,3vw,2.5rem)}
h2{font-family: var(--b-font-display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.2rem);line-height:.9;margin: 0 0 2rem;letter-spacing:-.005em}
h2,.he-link,.tab,.day,.nav-cta{font-family: var(--b-font-display)}

.top{background:var(--ink);color:var(--b-bg)}
.top-in{display:flex;justify-content:flex-end;align-items:center;padding-top: .8rem;padding-bottom: .8rem}
/* Il nome sta una sola volta, grande nell'hero: in testata resta per CMS e screen reader ma non si vede. */
.brand{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.top nav{display:flex;gap: 1.6rem;font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.top nav a{text-decoration:none}
.nav-cta{border-bottom:2px solid var(--b-bg)}

.hero-ed{position:relative;display:grid;grid-template-columns:repeat(12,1fr);min-height:min(calc(100vh - 3.4rem),820px);overflow:hidden}
.he-pannello{grid-column:1/6;grid-row:1;background:var(--accent)}
.he-foto{grid-column:6/13;grid-row:1;margin: 0;position:relative}
.he-foto img{width:100%;height:100%;object-fit:cover;display:block}
.credit{position:absolute;right:.8rem;bottom:.6rem;margin: 0;font-size:.72rem;color:var(--b-bg);background:color-mix(in srgb,var(--b-scrim) 60%,transparent);padding: .1rem .5rem}
.he-barre{grid-column:5/6;grid-row:1;justify-self:end;width:2.4rem;margin-right: -1.2rem;z-index:2;background:repeating-linear-gradient(90deg,var(--accent) 0 .4rem,var(--b-bg) .4rem .8rem)}
.hero-ed h1{grid-column:1/9;grid-row:1;align-self:end;z-index:3;margin: 0 0 1.6rem clamp(1rem,3vw,2.5rem);font-family: var(--b-font-display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(4.5rem,8.4vw,9rem);line-height:.84;letter-spacing:-.01em;color:var(--b-bg);width:min-content;text-shadow: 0 0 0 var(--b-text);animation:slide .35s ease-out 1}
.he-testo{grid-column:1/5;grid-row:1;align-self:start;z-index:3;padding: 2.4rem clamp(1rem,3vw,2.5rem) 0;color:var(--b-bg)}
.payoff{margin: 0 0 .5rem;font-weight:600;font-size:1.15rem}
.lede{margin: 0 0 1rem;font-size:.98rem;max-width:28rem}
.he-link{display:inline-block;color:var(--accent);background:var(--b-bg);padding: .7rem 1.1rem;text-decoration:none;text-transform:uppercase;font-weight:700;letter-spacing:.06em;font-size:.9rem}
@keyframes slide{from{opacity:0;translate:-16px 0}to{opacity:1;translate:none}}

section{padding: var(--sec) 0}
section.hero{padding: 0}

.tabs{display:flex;flex-wrap:wrap;gap: 0 1.8rem;border-bottom:2px solid var(--ink);margin-bottom: 1.6rem}
.tab{background:none;border:0;border-bottom:4px solid transparent;margin-bottom: -2px;padding: .5rem 0;font-size:1.25rem;font-stretch:62%;font-weight:800;text-transform:uppercase;color:var(--muted);cursor:pointer}
.tab.on{color:var(--ink);border-bottom-color:var(--accent)}
#menu-list ol{list-style:none;margin: 0;padding: 0;display:grid;grid-template-columns:1fr 1fr;gap: 0 4rem}
.piatto{padding: 1rem 0;border-bottom:1px solid var(--line)}
.riga{display:flex;justify-content:space-between;gap: 1rem;align-items:baseline}
.fil{display:none}
.nome{font-weight:700;font-size:1.2rem}
.prezzo{font-family: var(--b-font-display);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}
.desc{margin: .2rem 0 0;color:var(--muted);font-size:.98rem}
.alg{margin: .2rem 0 0;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

.serate-miste{display:grid;grid-template-columns:1.4fr 1fr;grid-auto-flow:column;gap: 0 3rem}
.serata{padding: 1.2rem 0;border-top:2px solid var(--ink)}
.serata-prima{grid-row:1/4;background:var(--accent);color:var(--b-bg);border:0;padding: 2rem}
.giorno{margin: 0 0 .6rem;font-family: var(--b-font-display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.9}
.serata h3{margin: 0 0 .3rem;font-size:1.25rem}
.serata p:not(.giorno){margin: 0;max-width:34rem}

.gal-sec{padding-left: 0;padding-right: 0}
.gal-testa{margin-bottom: 0}
.gal-striscia{display:flex;gap: 1rem;align-items:flex-end;overflow-x:auto;padding: 0 clamp(1rem,3vw,2.5rem) 1rem;scroll-snap-type:x proximity}
.gal-striscia .ph{flex:none;margin: 0;position:relative;scroll-snap-align:start}
.ph img{display:block;height:100%;width:100%;object-fit:cover}
.gal-striscia .ph:nth-child(odd){width:min(46vw,560px);height:min(36vw,440px)}
.gal-striscia .ph:nth-child(even){width:min(30vw,380px);height:min(42vw,520px)}
.gal-striscia .ph:nth-child(3n){width:min(38vw,460px);height:min(28vw,340px)}
.ph figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--b-bg);padding: .3rem .7rem;font-size:.82rem;max-width:90%}
.ph small{display:block;font-size:.68rem;opacity:.75}

#orari .wrap{display:grid;grid-template-columns:1fr 1fr;gap: 0 4rem;align-items:start}
#orari h2{grid-column:1/-1}
#orari-list{margin: 0;display:grid;grid-template-columns:1fr auto}
#orari-list dt,#orari-list dd{margin: 0;padding: .8rem 0;border-bottom:2px solid var(--ink)}
#orari-list dd{text-align:right;font-family: var(--b-font-body);font-size:.95rem}
.addr{margin: 0;font-family: var(--b-font-display);font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);line-height:.95}

.prenota-banda{background:var(--accent);color:var(--b-bg);padding: var(--sec) 0}
.prenota-banda h2{margin-bottom: 1rem}
.prenota-banda .num{margin: 0;line-height:.85}
.prenota-banda .num a{font-family: var(--b-font-display);font-stretch:62%;font-weight:800;font-size:clamp(3.2rem,12vw,11rem);text-decoration:none;letter-spacing:-.01em}
.num-wa{margin: 1rem 0 0;font-size:1.2rem}
.num-wa a{text-decoration:underline;text-underline-offset:.25em}

footer{padding: 1.6rem 0 2.5rem;font-size:.95rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap: .5rem 2rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.credits{font-size:.75rem;color:var(--muted);margin-top: 1.2rem;line-height:1.5}
.credits a{text-decoration:underline}

@media (max-width:860px){
  .top nav{gap: .9rem;font-size:.78rem}
  .hero-ed{display:flex;flex-direction:column;min-height:0}
  .he-pannello{display:none}
  .he-foto{height:78vw;order:1}
  .he-barre{display:none}
  .hero-ed h1{order:0;background:var(--accent);margin: 0;padding: 5rem 1rem 1rem;width:auto;font-size:clamp(4.5rem,22vw,8rem);word-spacing:100vw}
  .he-testo{order:2;background:var(--accent);padding: 1.2rem 1rem 1.6rem}
  #menu-list ol{grid-template-columns:1fr}
  .serate-miste{display:block}
  .serata-prima{margin-bottom: 1rem}
  #orari .wrap{display:block}
  .addr{margin-top: 1.5rem}
  .gal-striscia .ph:nth-child(n){width:72vw;height:60vw}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}