/* =========================================================
   SITI ALIUS — sito pubblico del locale
   Idea: l'insegna e la carta del menu. Il nome del locale
   è una targa sopra la foto; il menu si legge come una carta
   stampata, con i puntini fino al prezzo.
   Due stili: Carta (bianco, inchiostro blu) e Notte (caffè e ottone).
   ========================================================= */
@font-face{font-family:'Big Shoulders Display';font-weight:800;font-display:swap;src:url('fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Young Serif';font-weight:400;font-display:swap;src:url('fonts/young-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Federo';font-weight:400;font-display:swap;src:url('fonts/federo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-weight:700;font-display:swap;src:url('fonts/playfair-display-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:400;font-display:swap;src:url('fonts/figtree-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:500;font-display:swap;src:url('fonts/figtree-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:600;font-display:swap;src:url('fonts/figtree-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-weight:700;font-display:swap;src:url('fonts/figtree-latin-700-normal.woff2') format('woff2')}

/* ---------- stili ---------- */
:root,.t-carta{
  --bg:#ffffff; --panel:#f3f4f6; --ink:#1b2233; --muted:#5e6472; --line:#e1e3e8; --soft:#c9ccd4;
  --accent:#1f4fa3; --on-accent:#ffffff;
  --f-d:'Big Shoulders Display',sans-serif; --d-w:800; --d-track:.005em; --d-lh:.92;
  --f-t:'Figtree',system-ui,sans-serif;
  --wrap:1120px; --head:68px;
}
.t-notte{--bg:#1c1714; --panel:#251f1b; --ink:#f3eee6; --muted:#b3a899; --line:#3a322c; --soft:#5a4f46}
.f-trattoria{--f-d:'Young Serif',serif; --d-w:400; --d-track:-.01em; --d-lh:1.02}
.f-federo{--f-d:'Federo',serif; --d-w:400; --d-track:0; --d-lh:1}
.f-classico{--f-d:'Playfair Display',serif; --d-w:700; --d-track:-.01em; --d-lh:1.02}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-t);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.loading{min-height:100vh;display:grid;place-items:center;color:var(--muted);font-size:15px}
.d{font-family:var(--f-d);font-weight:var(--d-w);letter-spacing:var(--d-track);line-height:var(--d-lh)}

/* ---------- testata ---------- */
.s-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.s-head .wrap{height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:20px}
.s-logo{display:flex;align-items:center;text-decoration:none;min-width:0}
.s-logo img{height:42px;width:auto;max-width:180px;object-fit:contain}
.s-logo b{font-family:var(--f-d);font-weight:var(--d-w);font-size:26px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-links{display:flex;align-items:center;gap:28px;font-size:15.5px;font-weight:600}
.s-links a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.s-links a:hover{border-color:var(--accent)}
.s-links .cta{background:var(--accent);color:var(--on-accent);padding:10px 18px;border-radius:6px;border:0}
.s-links .cta:hover{filter:brightness(1.08)}
.burger{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);background:transparent;display:none;place-items:center}
.burger svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
.drawer{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;flex-direction:column;padding:12px 20px 36px;overflow:auto}
.drawer.on{display:flex}
.drawer-top{display:flex;justify-content:space-between;align-items:center;height:56px;margin-bottom:22px}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-family:var(--f-d);font-weight:var(--d-w);font-size:44px;line-height:1.05;text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
.drawer .social{margin-top:24px}

/* ---------- pulsanti ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:6px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;transition:filter .15s}
.b svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-acc{background:var(--accent);color:var(--on-accent)}
.b-acc:hover{filter:brightness(1.08)}
.b-ink{background:var(--ink);color:var(--bg)}
.b-line{background:transparent;border-color:var(--ink);color:var(--ink)}
.b-line:hover{background:var(--ink);color:var(--bg)}

/* ---------- copertina: foto e targa con il nome ---------- */
.hero{position:relative;padding-bottom:8px}
.hero-ph{height:min(62vh,600px);background:var(--accent);position:relative;overflow:hidden}
.hero-ph img{width:100%;height:100%;object-fit:cover}
.hero-ph .logo-big{position:absolute;inset:0;margin:auto;max-height:46%;max-width:56%;object-fit:contain}
.targa{position:relative;margin-top:-132px;background:var(--bg);max-width:760px;padding:30px 34px 32px;border-top:6px solid var(--accent)}
.targa h1{margin:0;font-size:clamp(52px,9.4vw,112px);overflow-wrap:anywhere}
.targa .sub{margin:14px 0 0;font-size:19px;line-height:1.45;max-width:46ch}
.targa .sub span{display:block;color:var(--muted);font-size:16px;margin-top:4px}
.open{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-weight:600;font-size:15.5px}
.open i{width:10px;height:10px;border-radius:50%;background:#2e9d5b;flex:none;box-shadow:0 0 0 4px color-mix(in srgb,#2e9d5b 22%,transparent)}
.open.closed i{background:var(--soft);box-shadow:none}
.acts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:10px;margin-top:22px}

/* ---------- sezioni ---------- */
.sec{padding:84px 0 0}
.sec-h{margin:0 0 26px;font-size:clamp(38px,6vw,64px)}
.prose{font-size:19px;line-height:1.6;max-width:60ch;margin:0;white-space:pre-line}

.evento{background:var(--accent);color:var(--on-accent);display:grid;grid-template-columns:1fr minmax(0,420px)}
.evento-t{padding:44px 44px 46px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.evento-t small{font-weight:600;font-size:15px;opacity:.85}
.evento-t h2{margin:0;font-size:clamp(36px,5vw,58px)}
.evento-t p{margin:0;max-width:52ch;white-space:pre-line;font-size:17.5px}
.evento-t .b{background:var(--on-accent);color:var(--accent);margin-top:8px}
.evento img{width:100%;height:100%;object-fit:cover;min-height:280px}
.evento.solo{grid-template-columns:1fr}

/* righe della carta: nome ........ prezzo */
.carta{list-style:none;margin:0;padding:0}
.voce{display:grid;grid-template-columns:1fr auto;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.voce:last-child{border-bottom:0}
.voce-r{display:flex;align-items:baseline;gap:10px}
.voce-r h3{margin:0;font-size:19.5px;font-weight:700;line-height:1.3}
.voce-r .dots{flex:1;min-width:24px;border-bottom:2px dotted var(--soft);transform:translateY(-5px)}
.voce-r .pr{font-weight:700;font-size:19.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.voce p{margin:5px 0 0;color:var(--muted);font-size:16px;max-width:60ch}
.voce .nota{color:var(--accent);font-weight:600;font-size:15.5px}
.t-notte .voce .nota{color:color-mix(in srgb,var(--accent) 80%,#fff)}
.voce .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.all{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;border:1.5px solid var(--soft);font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.sg{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:12px;font-weight:700}
.t-notte .sg{color:color-mix(in srgb,var(--accent) 75%,#fff)}
.voce img{width:104px;height:104px;object-fit:cover;border-radius:6px}
.more{margin-top:26px}

.galleria{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,32%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.galleria button{border:0;padding:0;background:var(--panel);scroll-snap-align:start;aspect-ratio:4/5;overflow:hidden;border-radius:4px}
.galleria img{width:100%;height:100%;object-fit:cover}
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,8,6,.94);display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.on{display:flex}
.lightbox img{max-height:90vh;max-width:100%}
.lightbox .x{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1}

.info{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.info h3{margin:0 0 14px;font-size:30px}
.orari{width:100%;border-collapse:collapse;font-size:17px}
.orari th,.orari td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500;vertical-align:top}
.orari td{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.orari tr.oggi th,.orari tr.oggi td{color:var(--ink);font-weight:700}
.orari tr.oggi th::after{content:"oggi";margin-left:8px;font-size:12px;font-weight:700;color:var(--accent);vertical-align:2px}
.orari .nota{color:var(--muted);font-size:15px;margin:12px 0 0}
.dove p{margin:0 0 16px;font-size:19px;line-height:1.45}
.dove .btns{display:flex;flex-wrap:wrap;gap:10px}
.map{margin-top:20px;aspect-ratio:16/10;background:var(--panel);display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-size:14px}
.map iframe{border:0;width:100%;height:100%}
.map.on{padding:0;display:block}
.social{display:flex;gap:8px}
.social a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center}
.social a:hover{border-color:var(--ink)}
.social svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- menu ---------- */
.m-head{padding:56px 0 18px}
.m-head h1{margin:0;font-size:clamp(64px,13vw,150px)}
.m-head p{margin:6px 0 0;color:var(--muted);font-size:17px}
.m-nav{position:sticky;top:var(--head);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.m-tabs{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.m-tabs::-webkit-scrollbar{display:none}
.m-tabs button{flex:none;border:0;background:none;padding:16px 0 13px;font-size:16px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.m-tabs button.on{color:var(--ink);border-color:var(--accent)}
.cat{padding:52px 0 0;scroll-margin-top:calc(var(--head) + 60px)}
.cat h2{margin:0;font-size:clamp(40px,6.4vw,68px)}
.cat .cat-sub{margin:6px 0 0;color:var(--muted);font-size:16px}
.cat .carta{margin-top:14px;border-top:2px solid var(--ink)}
.m-foot{padding:56px 0 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.m-nota{font-size:17px;padding:20px 22px;background:var(--panel);margin:0}
.legenda h3{margin:0 0 10px;font-size:15px;font-weight:700}
.legenda ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px;font-size:14.5px;color:var(--muted)}
.legenda li{display:flex;align-items:center;gap:8px}
.legenda p{font-size:13.5px;color:var(--muted);margin:12px 0 0}
.m-cta{padding:30px 0 0}

/* ---------- privacy ---------- */
.legal{padding:52px 0 40px;max-width:720px}
.legal h1{margin:0 0 20px;font-size:clamp(48px,8vw,80px)}
.legal h2{font-size:19px;margin:28px 0 6px}
.legal p{color:var(--muted);margin:0}

/* ---------- fondo pagina ---------- */
.s-foot{margin-top:96px;border-top:1px solid var(--line);padding:44px 0 120px}
.s-foot .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}
.s-foot .nm{font-size:clamp(40px,7vw,72px);margin:0}
.s-foot p{margin:8px 0 0;color:var(--muted);font-size:15px}
.s-foot small{display:block;margin-top:18px;color:var(--muted);font-size:13.5px}
.s-foot small a{color:var(--muted)}

/* barra in basso su telefono */
.mbar-s{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.mbar-s a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:6px;font-weight:600;font-size:13px;text-decoration:none}
.mbar-s a.acc{background:var(--accent);color:var(--on-accent)}
.mbar-s svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.off-msg{min-height:80vh;display:grid;place-items:center;text-align:center;padding:40px}
.off-msg h1{margin:0 0 10px;font-family:var(--f-d);font-weight:var(--d-w);font-size:clamp(48px,9vw,90px);line-height:1}
.off-msg p{margin:0;color:var(--muted)}

/* ---------- pagina prenota: la scheda dentro il sito ---------- */
body[data-page=prenota]{--arkana:var(--accent);--arc:var(--accent);--notte:#1b2233}
body[data-page=prenota] main{background:var(--panel)}
body[data-page=prenota] .p-title{padding:44px 0 6px}
body[data-page=prenota] .p-title h1{margin:0;font-size:clamp(52px,10vw,104px)}
body[data-page=prenota] .p-title p{margin:6px 0 0;color:var(--muted)}
body[data-page=prenota] .pub{min-height:auto;background:transparent;padding:22px 0 72px;justify-content:flex-start;width:min(var(--wrap),100% - 40px);margin-inline:auto}
body[data-page=prenota] .pub-card{width:min(520px,100%);color:#1b2233;border:1px solid #e1e3e8;border-radius:10px;box-shadow:none;font-family:var(--f-t)}
body[data-page=prenota] .pub-top{display:none}
body[data-page=prenota] .pub-card .muted{color:#5e6472}
body[data-page=prenota] .pub-body{padding-top:24px}
body[data-page=prenota] .ok-ico+h1,body[data-page=prenota] .pub-top:has(.ok-ico){display:block}
body[data-page=prenota] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);border-radius:6px}
body[data-page=prenota] .chip.on,body[data-page=prenota] .day.on{background:#1b2233;border-color:#1b2233;color:#fff}
body[data-page=prenota] .chip,body[data-page=prenota] .day,body[data-page=prenota] .input{border-radius:6px}
body[data-page=prenota] .s-foot{margin-top:0}

@media (max-width:900px){
  :root{--head:60px}
  .s-links{display:none}
  .burger{display:grid}
  .s-logo img{height:36px}
  .hero-ph{height:46vh;min-height:280px}
  .targa{margin:-64px 0 0;padding:22px 20px 24px;width:auto}
  .hero .wrap{width:auto;margin:0 12px}
  .acts{grid-template-columns:1fr 1fr}
  .acts .b{padding:0 12px}
  .sec{padding-top:64px}
  .evento{grid-template-columns:1fr}
  .evento img{min-height:220px;order:-1}
  .evento-t{padding:30px 22px 32px}
  .evento-wrap{width:100%}
  .galleria{grid-auto-columns:78%}
  .info{grid-template-columns:1fr;gap:44px}
  .voce img{width:84px;height:84px}
  .m-head{padding-top:36px}
  .m-foot{grid-template-columns:1fr}
  .s-foot{padding-bottom:110px}
  .s-foot .wrap{grid-template-columns:1fr}
  .mbar-s{display:flex}
  body[data-page=prenota] .pub{width:auto;padding:14px 10px 48px}
}
@media print{.s-head,.mbar-s,.s-foot,.m-nav{display:none}}
/* rifiniture */
.s-foot .nm{color:var(--ink)}
.sec .carta,.cat .carta{max-width:820px}
.cat .cat-sub,.cat h2{max-width:820px}
.hero-ph:not(:has(img)){height:min(36vh,340px)}
@media (max-width:900px){.hero-ph:not(:has(img)){height:30vh;min-height:200px}}