/* Classico: carta bianca, inchiostro, una famiglia serif. Gerarchia con maiuscoletto, filetti e peso, non con colore.
   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.125rem;line-height:1.55;font-feature-settings:"onum" 1,"kern" 1}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin: 0 auto;padding: 0 clamp(1rem,3vw,2.5rem)}
.top nav a,.strip,.hp-contatti,.ancore a,h2,.cat,.giorno,cite,footer,.alg,.credit{font-variant-caps:all-small-caps;letter-spacing:.09em}

.strip{background:var(--ink);color:var(--b-bg);font-size:.95rem}
.strip-in,.strip.wrap{display:flex;justify-content:space-between;gap: 1rem;padding-top: .45rem;padding-bottom: .45rem}
.top-in{display:flex;justify-content:space-between;align-items:flex-end;gap: 2rem;padding-top: 1.4rem;padding-bottom: 1.1rem}
.brand{font-weight:700;font-size:clamp(1.9rem,4vw,3rem);line-height:1;text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap: 1.6rem;font-size:1.1rem;padding-bottom: .25rem}
.top nav a{text-decoration:none;border-bottom:1px solid transparent}
.top nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.testata{border-bottom:1px solid var(--ink)}

.hero-piatto{padding: 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:min(76vh,700px);margin-bottom: var(--sec);border-top:3px solid var(--ink)}
.hp-testo{align-self:center;padding: 2.5rem clamp(1rem,4vw,4rem);min-width:0}
.hp-testo h1{font-size:clamp(2rem,3.6vw,3.4rem);line-height:1.05;font-weight:700;margin: 0 0 1rem;letter-spacing:-.015em;animation:rise .3s ease-out 1;max-width:16ch}
.hp-foto{margin: 0;position:relative;min-height:340px}
.hp-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block}
.hp-foto::after{content:"";position:absolute;inset:14px;border:1px solid color-mix(in srgb,var(--b-on-photo) 75%,transparent);pointer-events:none}
.credit{position:absolute;left:14px;bottom:14px;margin: 0;font-size:.8rem;color:var(--b-bg);background:color-mix(in srgb,var(--b-text) 72%,transparent);padding: .1rem .55rem;z-index:1}
.lede{color:var(--muted);max-width:30rem;margin: 0 0 1.3rem}
.hp-contatti{display:flex;flex-wrap:wrap;gap: .4rem 1.6rem;margin: 0 0 1.2rem;font-size:1.15rem;align-items:baseline}
.hp-contatti a{text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}
.hp-prenota{font-weight:700;color:var(--accent)}
@keyframes rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:none}}

section{padding: var(--sec) 0}
section.hero{padding-bottom: 0}
h2{font-size:1.05rem;font-weight:700;margin: 0 0 2.4rem;padding-top: .7rem;border-top:3px solid var(--ink)}

.menu-ancore .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap: var(--gap)}
.mn-indice{grid-column:1/4;align-self:start;position:sticky;top:1.5rem}
#menu-ancore{display:flex;flex-direction:column;font-size:1.1rem}
#menu-ancore a{text-decoration:none;padding: .5rem 0;border-bottom:1px solid var(--line);font-variant-caps:all-small-caps;letter-spacing:.09em}
#menu-ancore a:hover{color:var(--accent)}
.mn-carta{grid-column:4/13;column-count:2;column-gap: 4rem;column-rule:1px solid var(--line)}
.carta-cat{break-inside:avoid;margin: 0 0 2.4rem;padding: 0}
.cat{font-size:1rem;font-weight:700;margin: 0 0 1.1rem;padding-top: .5rem;border-top:1px solid var(--ink)}
ol{list-style:none;margin: 0;padding: 0}
.piatto{margin: 0 0 1.15rem}
.riga{display:flex;align-items:baseline;gap: .5rem}
.nome{font-weight:700}
.fil{flex:1;border-bottom:1px dotted var(--ink);transform:translateY(-.28em);min-width:1rem}
.prezzo{font-variant-numeric:lining-nums tabular-nums;font-weight:700}
.desc{margin: .1rem 0 0;font-style:italic;color:var(--muted);font-size:1rem;line-height:1.4}
.alg{margin: .15rem 0 0;font-size:.85rem;color:var(--muted)}

.serate-righe{border-bottom:1px solid var(--ink)}
.serata{display:grid;grid-template-columns:minmax(9rem,16rem) 1fr;gap: .2rem 2rem;padding: 1.5rem 0;border-top:1px solid var(--ink);align-items:baseline}
.giorno{font-style:italic;font-variant-caps:normal;letter-spacing:0;font-size:2rem;margin: 0;line-height:1;grid-row:1/3}
.serata h3{margin: 0 0 .3rem;font-size:1.35rem}
.serata p:not(.giorno){margin: 0;color:var(--muted);max-width:44rem}

.gal-mosaico{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(150px,19vw,250px);gap: .9rem}
.ph{margin: 0;position:relative;overflow:hidden;background:var(--ink)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph figcaption{position:absolute;left:0;bottom:0;background:var(--bg);padding: .35rem .8rem .3rem;font-size:.9rem;line-height:1.25;max-width:85%}
.ph small{display:block;font-size:.72rem;color:var(--muted)}
.gal-mosaico .ph:nth-child(1){grid-column:1/8;grid-row:1/3}
.gal-mosaico .ph:nth-child(2){grid-column:8/13}
.gal-mosaico .ph:nth-child(3){grid-column:8/11}
.gal-mosaico .ph:nth-child(4){grid-column:11/13}
.gal-mosaico .ph:nth-child(5){grid-column:1/6;grid-row:3}
.gal-mosaico .ph:nth-child(6){grid-column:6/13;grid-row:3}

#recensioni-list{display:grid;grid-template-columns:repeat(12,1fr);column-gap: var(--gap);align-items:start}
.reci-feat{grid-column:1/8;margin: 0}
.reci-feat p{font-style:italic;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.22;margin: 0 0 1rem}
blockquote{margin: 0}
cite{font-style:normal;color:var(--muted);font-size:1rem}
.reci{grid-column:9/13;display:grid;gap: 1.4rem}
.reci blockquote{border-top:1px solid var(--ink);padding-top: .9rem}
.reci p{margin: 0 0 .5rem}

#orari .wrap{display:grid;grid-template-columns:repeat(12,1fr);column-gap: var(--gap)}
#orari h2{grid-column:1/-1}
#orari-list{grid-column:1/8;display:grid;grid-template-columns:1fr auto;margin: 0}
#orari-list dt,#orari-list dd{margin: 0;padding: .7rem 0;border-bottom:1px dotted var(--ink)}
#orari-list dd{text-align:right;font-variant-numeric:lining-nums tabular-nums}
.addr{grid-column:9/13;font-style:italic;font-size:1.6rem;line-height:1.2;margin: 0}

.prenota-split{display:grid;grid-template-columns:repeat(12,1fr);column-gap: var(--gap);align-items:end}
.prenota-split>div{grid-column:1/6}
.prenota-split h2{margin: 0 0 .8rem}
.prenota-split p{margin: 0;color:var(--muted)}
.num{grid-column:6/13;margin: 0;display:flex;flex-direction:column;gap: .5rem}
.num a:first-child{font-size:clamp(2.2rem,6vw,5rem);font-weight:700;text-decoration:none;line-height:1;font-variant-numeric:lining-nums;color:var(--accent)}
.num .wa{font-size:1.1rem;text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:1px}

footer{border-top:1px solid var(--ink);padding: 1.6rem 0 2.5rem;font-size:1rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap: .5rem 2rem}
.credits{font-variant-caps:normal;letter-spacing:0;font-size:.78rem;color:var(--muted);margin-top: 1.2rem;line-height:1.5}
.credits a{text-decoration:underline;text-underline-offset:2px}

@media (max-width:860px){
  .strip-in,.strip.wrap{flex-direction:column;gap: 0}
  .top-in{flex-direction:column;align-items:flex-start;gap: .9rem}
  .top nav{gap: 1.1rem;flex-wrap:wrap}
  .hero-piatto{display:block;min-height:0;border-top:0}
  .hp-testo{padding: 1.4rem 1rem 1.2rem;border-top:3px solid var(--ink)}
  .hp-foto{height:72vw;min-height:260px}
  .menu-ancore .wrap,#recensioni-list,#orari .wrap,.prenota-split{display:block}
  .mn-indice{position:static;margin-bottom: 1.5rem}
  #menu-ancore{flex-direction:row;flex-wrap:wrap;gap: 0 1.2rem}
  .mn-carta{column-count:1}
  .serata{grid-template-columns:1fr}
  .giorno{grid-row:auto}
  .gal-mosaico{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}
  .gal-mosaico .ph:nth-child(n){grid-column:auto;grid-row:auto}
  .gal-mosaico .ph:nth-child(1){grid-column:1/3}
  .reci{margin-top: 1.6rem}
  #orari-list{margin-bottom: 1.5rem}
  .prenota-split>div{margin-bottom: 1.2rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}