/* Lo Fanno Qui — stile osteria: tenda a righe, tovaglia a quadretti, menu con i puntini, lavagna, timbro */
:root{
  --carta:#fff7e8;--carta2:#f7e9cf;--ink:#2b2118;--mut:#6b5a48;--line:#e3d2b3;
  --terra:#c2410c;--senape:#e0a92f;--salvia:#5b6b4f;--lav:#2d352b;--legno:#9c6a3c;--card:#fff;
  --f-d:'Fraunces',Georgia,serif;--f-b:'Inter',system-ui,sans-serif;--f-m:'DM Mono',ui-monospace,Menlo,monospace;--f-h:'Caveat','Bradley Hand',cursive;
  --s1:clamp(.95rem,.9rem + .2vw,1.05rem);--s2:clamp(1.08rem,1rem + .35vw,1.3rem);--gut:clamp(18px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--carta);color:var(--ink);font:var(--s1)/1.6 var(--f-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--senape);color:#2b2118}
a{color:inherit}
.w{max-width:1160px;margin:0 auto;padding:0 var(--gut)}
.hand{font-family:var(--f-h);font-weight:700}

/* TENDA A RIGHE (signature): fascia terracotta/crema con festone */
.tenda{height:46px;background:repeating-linear-gradient(90deg,var(--terra) 0 44px,#fff 44px 88px);position:relative;filter:drop-shadow(0 3px 0 rgba(43,33,24,.22))}
.tenda::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;
  background:radial-gradient(circle at 22px 0,var(--terra) 22px,#0000 22.6px) 0 0/88px 22px repeat-x,radial-gradient(circle at 66px 0,#fff 22px,#0000 22.6px) 0 0/88px 22px repeat-x}

/* insegna */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:44px 0 6px}
.logo{display:inline-block;white-space:nowrap;font:900 1.5rem/1 var(--f-d);letter-spacing:-.01em;text-decoration:none;padding:9px 16px 10px;background:var(--ink);color:var(--carta);border-radius:3px;transform:rotate(-1.5deg);font-variation-settings:"SOFT" 100,"WONK" 1}
.logo i{color:var(--senape)}
.top a.alt{font:700 1.6rem/1 var(--f-h);color:var(--terra);text-decoration:none;white-space:nowrap}
@media (hover:hover){.top a.alt:hover{text-decoration:underline wavy;text-underline-offset:5px}}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:start;padding:clamp(18px,3vw,36px) 0 clamp(48px,7vw,96px)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.over{display:inline-block;font:700 clamp(1.5rem,1.3rem + .8vw,2rem)/1 var(--f-h);color:var(--terra);transform:rotate(-1.5deg);margin-bottom:4px}
h1{font:900 clamp(2.5rem,1.5rem + 4.6vw,5.2rem)/.98 var(--f-d);letter-spacing:-.015em;word-spacing:.05em;margin:6px 0 20px;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
h1 em{font-style:italic;font-weight:800;color:var(--terra)}
mark{background:linear-gradient(transparent 58%,var(--senape) 58% 92%,transparent 92%);color:inherit;padding:0 .08em}
.sub{font-size:var(--s2);color:var(--mut);max-width:33em;margin:0 0 20px}
.sub b{color:var(--ink)}
.chk{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px}
.chk li{display:flex;gap:12px;align-items:baseline;font-weight:500}
.chk li::before{content:"";flex:none;width:.95em;height:.95em;margin-top:.12em;background:var(--salvia);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 70%)}

/* form: biglietto con bordo e ombra piena */
.fm{display:grid;gap:10px;max-width:480px;padding:22px;background:var(--card);border:2.5px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink)}
.fm label.l{font:700 1.55rem/1 var(--f-h);color:var(--ink)}
.fm input[type=text],.fm input[type=email],.fm input[type=url]{font:inherit;width:100%;padding:14px;border:2px solid var(--ink);border-radius:10px;background:var(--carta);color:var(--ink)}
.fm input:focus-visible{outline:4px solid var(--senape);outline-offset:0}
.fm .c{display:flex;gap:10px;align-items:flex-start;font-size:.8rem;color:var(--mut);line-height:1.4}
.fm .c input{margin-top:3px;accent-color:var(--terra)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 24px;background:var(--terra);color:#fff;font:800 1.08rem/1 var(--f-b);border:2.5px solid var(--ink);border-radius:999px;cursor:pointer;text-decoration:none;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
@media (hover:hover){.btn:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn:focus-visible{outline:4px solid var(--senape);outline-offset:3px}
.btn:disabled{opacity:.6;cursor:wait}
.fr{font:700 1.4rem/1.1 var(--f-h);color:var(--salvia);margin:2px 0 0;text-align:center}
.msg{font-weight:700;min-height:1.2em;text-align:center}.msg.ok{color:var(--salvia)}.msg.err{color:#b91c1c}

/* TAVOLO a quadretti con la comanda appuntata */
.tavolo{position:relative;padding:76px 22px 64px;border:2.5px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);
  background:linear-gradient(90deg,rgba(194,65,12,.42) 50%,#0000 50%),linear-gradient(rgba(194,65,12,.42) 50%,#0000 50%),#fff;background-size:44px 44px}
.slip{font-family:var(--f-m);background:#fffdf8;color:#2b2118;padding:22px 20px 34px;transform:rotate(-2deg);position:relative;
  filter:drop-shadow(0 14px 14px rgba(43,33,24,.35));
  -webkit-mask:radial-gradient(circle at 50% 100%,#0000 5px,#000 5.5px) bottom/20px 100% repeat-x;mask:radial-gradient(circle at 50% 100%,#0000 5px,#000 5.5px) bottom/20px 100% repeat-x;animation:print 1.1s steps(14,end) .3s both}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.spillo{position:absolute;top:66px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--terra);border:2.5px solid var(--ink);z-index:2;box-shadow:2px 3px 0 rgba(43,33,24,.35)}
.slip hr{border:0;border-top:2px dashed #cdb88f;margin:12px 0}
.slip .k{font-size:.68rem;letter-spacing:.14em;color:#8a7864;text-transform:uppercase}
.slip .big{font:800 1.5rem/1.15 var(--f-d);margin:4px 0 10px;font-variation-settings:"SOFT" 100}
.slip .rw{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;padding:3px 0}
.slip .acts{display:flex;gap:10px;margin-top:14px}
.slip .acts span{flex:1;text-align:center;padding:10px 0;font-weight:500;font-size:.85rem;border:2px solid #2b2118;border-radius:999px}
.slip .acts .y{background:var(--salvia);color:#fff;border-color:var(--salvia)}
.nota{position:absolute;right:16px;bottom:-20px;font:700 1.4rem/1 var(--f-h);color:var(--ink);background:var(--senape);padding:6px 12px;border-radius:6px;transform:rotate(2.5deg);border:2.5px solid var(--ink);z-index:3}
.doodle{position:absolute;pointer-events:none;z-index:3}
.d-zucca{width:104px;left:-30px;bottom:-34px;transform:rotate(-8deg)}
.d-piatto{width:112px;right:-26px;top:-46px;transform:rotate(6deg)}
.d-forchetta{width:34px;left:-16px;top:60px;transform:rotate(-14deg)}
@media (max-width:900px){.d-piatto{right:-10px}.d-zucca{left:-14px}}

/* TIMBRO */
.timbro{width:136px;height:136px;position:absolute;z-index:4;transform:rotate(-14deg)}
.timbro svg{width:100%;height:100%;display:block}
.tavolo .timbro{left:-26px;top:-44px}

/* sezioni */
section.s{padding:clamp(56px,8vw,104px) 0;position:relative}
h2{font:900 clamp(1.9rem,1.2rem + 3vw,3.5rem)/1.04 var(--f-d);letter-spacing:-.01em;word-spacing:.05em;margin:8px 0 16px;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1}
h2 em{font-style:italic;color:var(--terra);font-weight:800}
.lead{font-size:var(--s2);max-width:36em;color:var(--mut)}
.tt{text-align:center}.tt .lead{margin-inline:auto}

/* IL MENU: cornice doppia, voci con i puntini */
.menu{max-width:700px;width:100%;background:var(--card);padding:clamp(26px,4vw,44px);border:2.5px solid var(--ink);outline:2px solid var(--ink);outline-offset:-12px;border-radius:6px;box-shadow:8px 8px 0 var(--senape)}
.menu .mh{font:900 1.05rem/1 var(--f-d);letter-spacing:.24em;text-transform:uppercase;text-align:center;margin-bottom:24px;font-variation-settings:"SOFT" 100}
.voce{margin:0 0 22px}
.voce .r{display:flex;align-items:baseline;gap:10px;font:800 clamp(1.1rem,1rem + .7vw,1.45rem)/1.2 var(--f-d)}
.voce .r::after{content:"";order:1;flex:1;border-bottom:3px dotted var(--ink);opacity:.4;transform:translateY(-.25em)}
.voce .r span:first-child{order:0}.voce .r span:last-child{order:2;font:700 1.45rem/1 var(--f-h);color:var(--terra);white-space:nowrap}
.voce p{margin:4px 0 0;color:var(--mut);font-style:italic;font-family:var(--f-d);max-width:30em}
.voce:last-child{margin-bottom:0}

/* demo widget su finta pagina di blog */
.due{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.due{grid-template-columns:1fr}}
.blog{background:var(--card);border:2.5px solid var(--ink);border-radius:12px;box-shadow:8px 8px 0 var(--terra);position:relative}
.blog .bar{display:flex;gap:6px;padding:10px 14px;border-bottom:2.5px solid var(--ink);background:var(--carta2);border-radius:10px 10px 0 0}
.blog .bar i{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink)}
.blog .bd{padding:22px}
.blog .bd .t{font:800 1.7rem/1.1 var(--f-d);font-variation-settings:"SOFT" 100}
.blog .bd .g{height:9px;background:var(--line);margin:10px 0;border-radius:9px}
.blog .bd .g.s{width:60%}
.blog .tag{position:absolute;right:-8px;top:-18px;font:700 1.3rem/1 var(--f-h);background:var(--senape);color:var(--ink);padding:6px 12px;transform:rotate(4deg);border:2.5px solid var(--ink);z-index:2}

/* LAVAGNA: il conto */
.lav{background:var(--lav);color:#f4efe2;padding:clamp(26px,5vw,56px);border:14px solid var(--legno);border-radius:8px;box-shadow:inset 0 0 40px rgba(0,0,0,.45),8px 8px 0 var(--ink);position:relative;max-width:820px;margin:34px auto 0;font-family:var(--f-h)}
.lav .lt{font:700 clamp(2.1rem,1.4rem + 3vw,3.4rem)/1 var(--f-h);color:#fff;text-align:center;margin-bottom:18px;text-decoration:underline wavy rgba(255,255,255,.55);text-underline-offset:10px;text-decoration-thickness:2px}
.lav .rg{display:flex;align-items:baseline;gap:10px;font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);line-height:1.5}
.lav .rg::after{content:"";order:1;flex:1;border-bottom:3px dotted rgba(255,255,255,.4)}
.lav .rg span:first-child{order:0}.lav .rg span:last-child{order:2;color:var(--senape);font-weight:700}
.lav .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;padding-top:12px;border-top:3px double rgba(255,255,255,.6);font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);font-weight:700}
.lav .tot b{color:var(--senape);font-size:1.5em}
.lav .nb{margin:16px 0 0;font:500 1.05rem/1.5 var(--f-b);color:#d8cfb9}
.lav .timbro{right:-30px;top:-52px}

/* faq */
.faq{max-width:820px;margin:26px auto 0}
details{border:2.5px solid var(--ink);border-radius:12px;background:var(--card);margin:0 0 12px;padding:0 20px;box-shadow:4px 4px 0 var(--line)}
details[open]{box-shadow:4px 4px 0 var(--senape)}
summary{cursor:pointer;font:800 1.2rem/1.3 var(--f-d);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-variation-settings:"SOFT" 100}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:700 2rem/1 var(--f-h);color:var(--terra);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
summary:focus-visible{outline:4px solid var(--senape);outline-offset:2px}
details p{margin:0 0 18px;color:var(--mut);max-width:44em}

/* chiusura: fondo terracotta con bordo a quadretti */
.fine{background:var(--terra);color:#fff;padding-top:clamp(72px,9vw,120px)!important}
.fine::before{content:"";position:absolute;left:0;right:0;top:0;height:32px;background:linear-gradient(90deg,rgba(255,255,255,.4) 50%,#0000 50%),linear-gradient(rgba(255,255,255,.4) 50%,#0000 50%),rgba(255,255,255,.12);background-size:32px 32px}
.fine h2{color:#fff}.fine h2 em{color:var(--senape)}
.fine .ps{color:#ffe9d6}.fine .ps b{color:#fff}
.cta-end{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.cta-end{grid-template-columns:1fr}}
.ps{margin-top:22px;max-width:32em;font-size:var(--s1)}
.fine .fm{color:var(--ink)}
.fine .over{color:var(--senape)}

/* RICETTA (editori): scheda a righe */
.scheda{background:#fffdf4;border:2.5px solid var(--ink);border-radius:6px;padding:24px 24px 26px 34px;box-shadow:8px 8px 0 var(--senape);transform:rotate(1.2deg);position:relative;
  background-image:repeating-linear-gradient(transparent 0 30px,#cfe0e8 30px 31px);background-position:0 8px}
.scheda::before{content:"";position:absolute;left:20px;top:0;bottom:0;border-left:2px solid #e8a49a}
.scheda h3{font:900 1.5rem/1.1 var(--f-d);margin:0 0 8px;font-variation-settings:"SOFT" 100;background:#fffdf4;display:inline-block;padding-right:8px}
.scheda .hand{font-size:1.4rem;line-height:31px;margin:0}
pre.code{font:.72rem/1.55 var(--f-m);background:var(--ink);color:#f6eddd;padding:14px 16px;overflow:auto;border-radius:8px;margin:12px 0 10px}
pre.code .c1{color:var(--senape)}

footer{padding:34px 0 60px;font-size:.88rem;color:var(--mut);display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer .hand{font-size:1.4rem;color:var(--terra)}

@media (max-width:520px){.top a.alt{font-size:1.25rem}.logo{font-size:1.25rem}.tavolo{padding-top:70px}}