/* ============================================================
   Trentotto v2 — Trattoria sotto il portico, Bologna (progetto concettuale)
   Il portico è l'ossatura, il cibo è il soggetto.
   Due servizi: Pranzo (carta, luce del giorno) / Cena (inchiostro, lampade) — cambiano menù e foto, non solo i colori.
   Due lingue nel DOM (IT default). Font: le famiglie "Vito …" vengono iniettate da build/fonts.mjs per rotta.
   ============================================================ */

:root{
  --paper:#F2EADB; --ink:#221C19; --rosso:#A33A25; --stone:#685D51; --rule:rgba(34,28,25,.22); --gold:#F2C86B;
  --paper-2:#E9DFCB;
  --tt-display:var(--display,"Vito Bodoni",serif);
  --tt-text:var(--font-text,"Vito Noto Serif SC",serif);
  --tt-mono:var(--mono,"Vito Plex Mono",monospace);
  --gut:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --night:0;
  color-scheme:light;
}
html[data-mode="cena"]{
  --paper:#1B1613; --ink:#F2EADB; --rosso:#E0A458; --stone:#A3937F; --rule:rgba(242,234,219,.2); --gold:#E0A458; --paper-2:#241D19;
  --night:1;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--tt-text);font-size:16px;line-height:1.55;
  font-feature-settings:"pwid";  /* Noto CJK 的 ’ 默认全宽，pwid 让意大利文的省音撇回到正常宽度 */
  transition:background-color .9s var(--ease),color .9s var(--ease)}
body.has-receipt{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--tt-display);font-weight:400;line-height:1;letter-spacing:-.01em}
.k{font-family:var(--tt-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rosso)}
.k.mute{color:var(--stone)}
.mute{color:var(--stone)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
/* 时段内容：CSS 就是真相（无闪烁、无 JS 也对），JS 只负责动画时的例外 */
html[data-mode="pranzo"] [data-service="cena"]:not(.leaving):not(.entering),
html[data-mode="cena"] [data-service="pranzo"]:not(.leaving):not(.entering){display:none}

/* 语言：两套文本都在 DOM 里，靠根节点属性切换（无 JS 也有意大利语） */
html:not([data-lang="en"]) body [lang="en"]{display:none!important}
html[data-lang="en"] body [lang="it"]{display:none!important}
html[data-lang="en"] .lang-btn span:first-child,html[data-lang="it"] .lang-btn span:last-child{opacity:.45}

/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:64px;
  padding-inline:var(--gut);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);transition:background-color .5s var(--ease),color .5s var(--ease),border-color .5s}
.top.on-photo{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;color:#fff}
.brand{font-family:var(--tt-display);font-size:19px;text-decoration:none;letter-spacing:.02em;white-space:nowrap}
.brand b{color:var(--rosso);font-weight:600;margin-right:9px}
.top.on-photo .brand b{color:var(--gold)}
.nav{display:flex;gap:clamp(16px,2.6vw,34px);font-family:var(--tt-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav a[aria-current="page"]{border-color:var(--rosso);color:var(--rosso)}
.tools{justify-self:end;display:flex;align-items:center;gap:14px}
/* 时钟滑杆（桌面）与双按钮（手机 / 减少动态）：两者都在 DOM，JS 只同步值，CSS 决定谁可见 */
.clock{display:flex;align-items:center;gap:10px;font-family:var(--tt-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);position:relative}
.top.on-photo .clock{color:rgba(255,255,255,.8)}
.clock__lab{transition:color .3s}
.clock[data-side="pranzo"] .clock__lab--p,.clock[data-side="cena"] .clock__lab--c{color:var(--ink)}
.top.on-photo .clock[data-side="pranzo"] .clock__lab--p,.top.on-photo .clock[data-side="cena"] .clock__lab--c{color:#fff}
.clock input{-webkit-appearance:none;appearance:none;width:150px;height:26px;background:transparent;cursor:pointer;margin:0}
.clock input::-webkit-slider-runnable-track{height:2px;background:currentColor;opacity:.55;border-radius:2px}
.clock input::-moz-range-track{height:2px;background:currentColor;opacity:.55}
.clock input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid var(--paper);margin-top:-8px;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.top.on-photo .clock input::-webkit-slider-thumb{background:#fff;border-color:#221C19}
.clock input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ink);border:2px solid var(--paper)}
.clock input:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.clock__out{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-2px;font-size:10px;letter-spacing:.12em;color:inherit;opacity:.8}
.toggle{display:none;border:1px solid var(--rule);border-radius:999px;padding:2px;font-family:var(--tt-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.top.on-photo .toggle{border-color:rgba(255,255,255,.55)}
.toggle button{all:unset;cursor:pointer;padding:10px 14px;min-height:24px;border-radius:999px;color:var(--stone);transition:background-color .4s,color .4s}
.top.on-photo .toggle button{color:rgba(255,255,255,.75)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.top.on-photo .toggle button[aria-pressed="true"]{background:#fff;color:#221C19}
html.no-clock .clock{display:none}
html.no-clock .toggle{display:flex}
@media (max-width:820px),(prefers-reduced-motion:reduce){.clock{display:none}.toggle{display:flex}}
.lang-btn{all:unset;cursor:pointer;font-family:var(--tt-mono);font-size:12px;letter-spacing:.14em;display:flex;gap:6px;padding:10px 0;min-width:44px;justify-content:center}
.lang-btn:focus-visible,.toggle button:focus-visible{outline:1px solid currentColor;outline-offset:3px}
@media (max-width:820px){
  .top{grid-template-columns:auto 1fr;grid-template-rows:auto auto;height:auto;padding-top:8px;row-gap:0}
  .top .brand{grid-row:1}.top .tools{grid-row:1;grid-column:2}
  .top .nav{grid-row:2;grid-column:1/-1;display:flex;gap:22px;overflow-x:auto;padding:6px 0 10px;scrollbar-width:none}
  .top .nav::-webkit-scrollbar{display:none}
  .top .nav a{padding:6px 0;white-space:nowrap}
  .toggle button{padding:11px 12px}
}

/* ---------- 页面标题 ---------- */
.page-head{padding:clamp(40px,8svh,84px) var(--gut) clamp(24px,4svh,40px);display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;border-bottom:1px solid var(--rule)}
.page-head h1{font-size:clamp(64px,10vw,150px);margin-left:-.04em;font-style:italic}
.page-head .lede{max-width:34em;text-wrap:pretty;font-size:17px}
.page-head .lede .k{display:block;margin-bottom:10px}
@media (max-width:820px){.page-head{grid-template-columns:1fr}}

/* ---------- 菜单行（全站统一）：缩略图 · 名字 · 价格 · + ---------- */
.rows{list-style:none;padding:0;margin:0}
.row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px 14px;padding:10px 0;border-bottom:1px solid var(--rule)}
.rows--plain .row{grid-template-columns:1fr auto auto}
.row .th{width:88px;height:66px;overflow:hidden;background:var(--paper-2);border-radius:6px}
.row .th img{width:100%;height:100%;object-fit:cover}
.row .th--none{background:transparent}
.row .name{font-size:16px;line-height:1.35}
.row .name small{display:block;color:var(--stone);font-size:13.5px;text-wrap:pretty}
.row .name .unit{display:inline;margin-left:8px}
.row .price{font-family:var(--tt-display);font-size:18px;white-space:nowrap}
.row .price::after{content:" €";font-size:13px;color:var(--stone)}
.veg{font-family:var(--tt-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rosso);margin-left:8px;vertical-align:2px}
.tag{font-family:var(--tt-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin-left:8px;border:1px solid var(--rule);padding:1px 6px;border-radius:999px;vertical-align:2px}
.add{all:unset;cursor:pointer;width:40px;height:40px;border:1px solid var(--ink);border-radius:50%;display:inline-grid;place-items:center;font-family:var(--tt-display);font-size:20px;line-height:1;transition:background-color .2s,color .2s,transform .2s}
.add:hover{background:var(--ink);color:var(--paper)}
.add:active{transform:scale(.92)}
.add:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.add[disabled]{opacity:.35;cursor:not-allowed}
.add[disabled]:hover{background:transparent;color:inherit}
.row--wine{grid-template-columns:auto 1fr auto auto}
.row--wine .sku{display:inline-flex;align-items:center;gap:8px}
.row--wine .sku small{font-family:var(--tt-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
@media (max-width:820px){.add{width:44px;height:44px}.row{gap:6px 10px}.row .th{width:72px;height:54px}.row--wine{grid-template-columns:auto 1fr;row-gap:4px}.row--wine .sku{grid-column:2;justify-content:flex-end}}

/* ---------- 黑板 ---------- */
.lavagna h3,.lavagna__head{margin-bottom:6px}
.lavagna__head{border-bottom:1px solid var(--ink);padding-bottom:10px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.lavagna__head .mute{font-size:14px}
.days{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.days button{all:unset;cursor:pointer;font-family:var(--tt-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;min-height:22px;border:1px solid var(--rule);border-radius:999px;color:var(--stone)}
.days button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.days button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.lavagna .closed{color:var(--stone);font-size:15px;padding:10px 0}

/* ---------- 通用 ---------- */
.more{display:inline-block;margin-top:18px;font-family:var(--tt-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:4px}
.more:hover{color:var(--rosso);border-color:var(--rosso)}
.arco{border-radius:999px 999px 0 0 / 46% 46% 0 0;overflow:hidden;aspect-ratio:4/5;position:relative;background:var(--paper-2)}
.arco img{width:100%;height:100%;object-fit:cover;transition:filter .9s var(--ease)}
html[data-mode="cena"] .arco img{filter:brightness(.85) saturate(.92)}
.arco figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-family:var(--tt-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:13px 20px;min-height:44px;border-radius:999px;font-family:var(--tt-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:background-color .3s,color .3s}
.btn:hover{background:var(--rosso);border-color:var(--rosso);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ---------- 小票 ---------- */
.receipt{position:fixed;left:0;right:0;bottom:0;z-index:30;font-family:var(--tt-mono);color:var(--ink)}
.receipt__bar{all:unset;cursor:pointer;display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;width:100%;box-sizing:border-box;
  padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom,0px));background:var(--paper-2);border-top:1px solid var(--ink);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.receipt__bar:focus-visible{outline:2px solid var(--rosso);outline-offset:-3px}
.receipt__total{font-family:var(--tt-display);font-size:22px;letter-spacing:0;text-transform:none}
.receipt__cta{border-bottom:1px solid var(--ink);padding-bottom:2px}
.receipt__panel{position:absolute;left:0;right:0;bottom:100%;max-height:70svh;overflow:auto;background:var(--paper);border-top:1px solid var(--ink);padding:18px var(--gut) 22px;box-shadow:0 -12px 40px rgba(0,0,0,.18)}
.receipt__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.receipt__close{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;font-size:20px;border:1px solid var(--rule);border-radius:50%}
.receipt__close:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.receipt__list{list-style:none;padding:0;margin:0;font-family:var(--tt-text);font-size:15px}
.receipt__list li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--rule)}
.receipt__list .qty{display:inline-flex;align-items:center;gap:4px;font-family:var(--tt-mono);font-size:13px}
.receipt__list .qty button{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--rule);border-radius:50%}
.receipt__list .qty button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.receipt__list .sum{font-family:var(--tt-display);font-size:17px;min-width:4.5em;text-align:right}
.receipt__list .flag{grid-column:1/-1;font-size:13px;color:var(--rosso)}
.receipt__note{font-family:var(--tt-text);font-size:13.5px;color:var(--stone);margin:12px 0 14px;text-wrap:pretty}
.receipt__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){.receipt__bar{gap:12px;padding-left:18px;padding-right:18px}.receipt__count{font-size:11px}}

/* ---------- 页脚（两组）---------- */
.foot{border-top:1px solid var(--rule);padding:clamp(28px,5svh,48px) var(--gut) 20px;display:grid;gap:18px;font-size:14px}
.foot__row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline}
.foot p{text-wrap:pretty}
.foot a{text-decoration:none;border-bottom:1px solid var(--rule)}
.foot a:hover{color:var(--rosso);border-color:var(--rosso)}
.credits{font-size:12.5px;color:var(--stone);max-width:44em}
.credits summary{cursor:pointer;font-family:var(--tt-mono);letter-spacing:.14em;text-transform:uppercase;font-size:11px;padding:6px 0}
.credits summary:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.credits ul{margin:8px 0 0;padding-left:18px;columns:2;column-gap:28px}
.credits li{break-inside:avoid;margin-bottom:3px}
.credits a{border:0;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
@media (max-width:820px){.foot__row{flex-direction:column;gap:12px}.credits ul{columns:1}}
.site-footer{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;padding:18px var(--gut) 8px;font-family:var(--tt-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.site-footer strong{font-weight:400;color:var(--ink)}
.site-footer .by a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}

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