@font-face{font-family:"Zilla Slab";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/zilla-slab-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/work-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/work-sans-latin-600-normal.woff2) format("woff2")}

:root{
  --kraft:#C8A26B;--kraft-scuro:#A8824C;--foglio:#F2F1EC;--inchiostro:#1C1A17;--grafite:#45464A;--limone:#F3C623;--timbro:#B3261E;
  --ease:cubic-bezier(.16,1,.3,1);
  --f-titolo:"Zilla Slab",Georgia,serif;--f-cond:"Barlow Condensed","Arial Narrow",sans-serif;--f-testo:"Work Sans",system-ui,sans-serif;
  --gutter:16px;--barra:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--inchiostro) var(--kraft)}
body{margin:0;background-color:var(--kraft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.10'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' stroke='%23A8824C' stroke-width='1' opacity='.25'%3E%3Cpath d='M10 40l60 3M120 90l45-2M260 20l70 4M30 160l50-3M200 200l80 2M300 120l40 3M60 300l70-2M220 320l60 3'/%3E%3C/svg%3E");
  color:var(--inchiostro);font-family:var(--f-testo);font-size:1.0625rem;line-height:1.55;overflow-x:clip;caret-color:var(--inchiostro)}
::selection{background:var(--limone);color:var(--inchiostro)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--inchiostro);outline-offset:3px;border-radius:2px}
.grafite :focus-visible,.barra-az :focus-visible,.foot :focus-visible{outline-color:var(--limone)}
h1,h2,h3{font-family:var(--f-titolo);font-weight:700;margin:0;text-wrap:balance;overflow-wrap:break-word}
h1{font-size:clamp(2rem,1.2rem + 3.6vw,3.6rem);line-height:1.05}
h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.5rem);line-height:1.1}
h3{font-size:1.5rem;line-height:1.15}
p{margin:0}
.etichetta{font-family:var(--f-cond);font-weight:600;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding-inline:var(--gutter)}
section{scroll-margin-top:calc(var(--barra) + 8px)}
.sec{padding-block:56px}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.4rem;font:600 1.0625rem/1.2 var(--f-testo);text-decoration:none;text-align:center;color:var(--inchiostro);border:2px solid var(--inchiostro);border-radius:4px;background:transparent;cursor:pointer;transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .2s}
.btn-pri{background:var(--limone);box-shadow:3px 3px 0 var(--inchiostro)}
.btn-pri:hover{box-shadow:4px 4px 0 var(--inchiostro);transform:translate(-1px,-1px)}
.btn-pri:active{box-shadow:0 0 0 var(--inchiostro);transform:translate(3px,3px)}
.btn-sec:hover{background:rgba(28,26,23,.1)}
.btn-sec:active{background:rgba(28,26,23,.18)}
.btn-nero{background:var(--inchiostro);color:var(--foglio);box-shadow:3px 3px 0 rgba(28,26,23,.35)}
.btn-nero:hover{background:#000}
.btn-nero:active{transform:translate(3px,3px);box-shadow:none}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* barra alta */
.top{position:sticky;top:0;z-index:50;height:var(--barra);background-color:var(--kraft);border-bottom:1px solid var(--kraft-scuro)}
.top .wrap{height:100%;display:flex;align-items:center;gap:8px}
.top .logo{display:flex;align-items:center;min-height:44px;margin-right:auto}
.top .logo img{height:32px;width:auto}
.top nav{display:none;gap:4px}
.top nav a{font-family:var(--f-cond);font-weight:600;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:0 12px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover{text-decoration:underline}
.ico{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--inchiostro);border-radius:50%;color:var(--inchiostro);text-decoration:none;transition:background-color .2s}
.ico:hover{background:var(--limone)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:720px){.top nav{display:flex}}

/* hero */
.hero{overflow-x:clip;padding-block:16px 40px}
.hero-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.h-a{display:grid;gap:10px;justify-items:start}
.hero-logo{width:min(520px,68vw);position:relative;transform:rotate(-1deg)}
.hero-logo img{width:100%;height:auto}
.hero-logo::before{content:"";position:absolute;inset:-18%;background:radial-gradient(closest-side,rgba(28,26,23,.09),transparent);z-index:-1;pointer-events:none;opacity:0}
.hero h1{max-width:20ch}
.sub{max-width:52ch}
.h-c{display:grid;gap:14px;justify-items:stretch}
.h-c .btn{width:100%}
.h-c .link{justify-self:start}
.mini{font-size:.95rem}
.h-d{margin:8px 6px 0}
.foto{position:relative;margin:0;background:var(--foglio);padding:10px;transform:rotate(-1deg);box-shadow:0 10px 22px rgba(60,40,10,.28),0 2px 4px rgba(60,40,10,.2);transition:transform .5s var(--ease);max-width:380px}
.foto:hover{transform:rotate(-.5deg)}
.foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.foto::before,.foto::after{content:"";position:absolute;width:84px;height:26px;background:rgba(243,241,230,.55);border:1px solid rgba(168,130,76,.35);box-shadow:0 1px 2px rgba(60,40,10,.15)}
.foto::before{top:-12px;left:-18px;transform:rotate(-38deg)}
.foto::after{top:-12px;right:-18px;transform:rotate(38deg)}
@media(min-width:960px){
  .hero{padding-block:44px 64px}
  .hero-grid{grid-template-columns:7fr 5fr;column-gap:48px;row-gap:24px;grid-template-areas:"a d" "c d";align-items:start;padding-bottom:30px}
  .h-a{grid-area:a}.h-c{grid-area:c;justify-items:start;grid-template-columns:auto auto;align-items:center;justify-content:start}.h-d{grid-area:d;margin:10px 0 0;justify-self:center}
  .h-c .btn{width:auto}
  .h-c .mini{grid-column:1/-1}
  .hero-logo{width:min(520px,90%)}
  .foto{transform:rotate(-2deg)}
  .h-b{grid-area:d;align-self:end;justify-self:start;width:300px;transform:translate(-56px,28px);z-index:3}
}

/* cartellino */
.cart{position:relative;background:var(--foglio);border:1px solid var(--inchiostro);padding:28px 18px 12px;width:100%;max-width:360px;box-shadow:0 6px 16px rgba(60,40,10,.25);font-family:var(--f-cond)}
.cart::before{content:"";position:absolute;top:9px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--kraft);border:1px solid var(--inchiostro)}
.cart .c-tit{font-weight:600;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--inchiostro)}
.cart ul{list-style:none;margin:0;padding:0}
.cart li{position:relative;display:flex;gap:14px;font-weight:500;font-size:1.25rem;line-height:1.4;font-variant-numeric:tabular-nums;padding:0 4px;text-transform:uppercase;letter-spacing:.03em;isolation:isolate}
.cart li b{font-weight:600;width:3ch}
.cart li::before{content:"";position:absolute;inset:3px 0 2px;background:var(--limone);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.cart li.oggi::before{transform:scaleX(1)}
.js .cart:not(.go) li.oggi::before{transform:scaleX(0)}
.cart .riapre{font-size:1.15rem;font-weight:500;color:var(--timbro);margin-top:8px}
.cart .riapre:empty{display:none}
.timbro-box{position:absolute;right:10px;top:46px;width:108px;height:108px;pointer-events:none}
.timbro{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:50%;border:4px double var(--inchiostro);font-family:var(--f-cond);font-weight:600;font-size:1.4rem;line-height:1;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-10deg);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 5.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 5.2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)'/%3E%3C/svg%3E")}
.timbro.aperto{background:var(--limone);color:var(--inchiostro)}
.timbro.chiuso{color:var(--timbro);border-color:var(--timbro);background:rgba(242,241,236,.92)}
.timbro span{display:block}
.js .cart:not(.go) .timbro{opacity:0}
.cart.go .timbro{animation:cade .26s var(--ease) both}
.cart.go{animation:scuoti .12s linear 1 both}
@keyframes cade{from{opacity:0;transform:rotate(-10deg) scale(1.6)}to{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes scuoti{0%,100%{translate:0 0}50%{translate:0 2px}}
.cart.go li.oggi::before{animation:steso .35s var(--ease) both}
@keyframes steso{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cart.grande{max-width:380px}
.cart.grande li{font-size:1.45rem}
.cart.grande .timbro-box{width:120px;height:120px}

/* menu */
.menu-head{display:grid;gap:12px;max-width:62ch;margin-bottom:32px}
.foglio{position:relative;background:var(--foglio);max-width:640px;margin:0 auto;padding:24px 20px 20px;box-shadow:0 18px 34px rgba(60,40,10,.3),0 2px 5px rgba(60,40,10,.2);transform:rotate(.6deg);font-family:var(--f-cond)}
.foglio .f-logo{width:200px;margin:0 auto 16px}
.riquadro{border:1px solid var(--inchiostro);padding:16px 14px;text-align:center}
.riquadro .completo{font-weight:600;font-size:1.5rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.riquadro .formula{font-weight:500;font-size:1.15rem;letter-spacing:.05em;text-transform:uppercase;color:#33322F}
.cols{display:grid;gap:20px;margin-top:22px}
.foglio h3{font-family:var(--f-cond);font-weight:600;font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;border-bottom:1px solid var(--inchiostro);padding-bottom:4px}
.foglio h3 small{font-size:inherit;font-weight:500;text-transform:none;letter-spacing:.04em;font-style:italic}
.foglio ul{list-style:none;margin:0;padding:0}
.foglio li{font-weight:500;font-size:1.15rem;line-height:1.35;letter-spacing:.04em;text-transform:uppercase;padding:3px 0}
.foglio .blocco{margin-top:20px}
.foglio .nota{font-family:var(--f-testo);font-size:.95rem;line-height:1.45;margin-top:22px;padding-top:12px;border-top:1px solid var(--kraft-scuro)}
.js .foglio:not(.in) li{opacity:0}
.foglio.in li{animation:voce .4s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms + 300ms)}
@keyframes voce{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(min-width:640px){.foglio{padding:30px 36px 26px}.cols{grid-template-columns:1fr 1fr;gap:28px}}

/* carta */
.carta-head{display:grid;gap:12px;max-width:62ch;margin-bottom:32px}
.blocchi{display:grid;gap:36px}
.blocco-c{display:grid;gap:14px;align-content:start}
.blocco-c .ph{margin:0}
.blocco-c img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--inchiostro)}
.blocco-c .rep{display:block;font-size:.95rem;margin-top:6px}
.blocco-c ul{list-style:none;margin:0;padding:0;font-family:var(--f-cond);font-weight:500;font-size:1.2rem;line-height:1.3;letter-spacing:.03em;text-transform:uppercase}
.blocco-c li{padding:6px 0;border-bottom:1px dashed var(--kraft-scuro)}
.blocco-c .i-t img{object-position:50% 50%}.blocco-c .i-r img{object-position:50% 52%}.blocco-c .i-d img{object-position:50% 80%}
.carta-fondo{margin-top:36px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
@media(min-width:960px){.blocchi{grid-template-columns:repeat(3,1fr);gap:32px}.blocco-c img{aspect-ratio:4/5}.blocco-c .i-d img{object-position:50% 50%}}

/* gruppi */
.gruppi{background-color:var(--limone);border-block:2px solid var(--inchiostro)}
.gruppi .wrap{display:grid;gap:28px}
.gruppi .txt{display:grid;gap:16px;justify-items:start;max-width:56ch}
.gruppi blockquote{margin:0;background:var(--foglio);border:1px solid var(--inchiostro);padding:24px 22px;position:relative;align-self:center;transform:rotate(.8deg);box-shadow:0 8px 18px rgba(60,40,10,.25)}
.gruppi blockquote p{font-family:var(--f-titolo);font-weight:700;font-size:1.35rem;line-height:1.3}
.gruppi cite{display:block;margin-top:12px;font:600 1.05rem var(--f-cond);letter-spacing:.08em;text-transform:uppercase;font-style:normal}
@media(min-width:960px){.gruppi .wrap{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}

/* recensioni */
.grafite{background-color:var(--grafite);color:var(--foglio)}
.grafite h2{max-width:24ch}
.grafite h2 .num{font-size:1.45em;color:var(--limone);line-height:1;display:inline-block;margin-right:.1em}
.scontrini{display:flex;flex-wrap:wrap;gap:22px;margin:32px 0;justify-content:center}
.sc-wrap{width:100%;max-width:320px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.scontrino{background:var(--foglio);color:var(--inchiostro);padding:20px 20px 30px;margin:0;--s:9px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--s)) 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--s)) 100%}
.scontrino p{font-size:1.0625rem}
.scontrino cite{display:block;margin-top:12px;font:600 1rem var(--f-cond);letter-spacing:.08em;text-transform:uppercase;font-style:normal}
.sc-wrap{transition:translate .3s var(--ease)}
.sc-wrap:nth-child(3n+1){transform:rotate(-1deg)}.sc-wrap:nth-child(3n+2){transform:rotate(.8deg)}.sc-wrap:nth-child(3n){transform:rotate(-.5deg)}
.sc-wrap:hover{translate:0 -4px}
.grafite .link{color:var(--limone)}
@media(min-width:960px){.sc-wrap:nth-child(3n+1){transform:rotate(-1.5deg)}.sc-wrap:nth-child(3n+2){transform:rotate(1deg)}}

/* dove */
.dove-grid{display:grid;gap:32px}
.dove-txt{display:grid;gap:16px;align-content:start;max-width:56ch}
.dove-btn{display:grid;gap:12px;margin-top:4px}
.dove-btn .btn{width:100%}
.mappa{margin-top:8px;border:2px solid var(--inchiostro);background:var(--kraft-scuro);aspect-ratio:4/3;display:grid;place-items:center;position:relative;overflow:hidden}
.mappa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.contatti{margin-top:8px;display:grid;gap:2px;font-size:1.0625rem}
.contatti a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.dove-cart{display:flex;justify-content:center;align-items:start}
@media(min-width:720px){.dove-btn{display:flex;flex-wrap:wrap}.dove-btn .btn{width:auto}}
@media(min-width:960px){.dove-grid{grid-template-columns:1.2fr 1fr;gap:64px}.dove-cart{justify-content:end}}

/* footer */
.foot{background-color:var(--grafite);color:var(--foglio);padding:36px 0 40px;border-top:4px solid var(--inchiostro)}
.foot .wrap{display:grid;gap:14px;justify-items:start}
.foot img{width:200px}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot p{font-size:1rem}

/* barra azioni mobile */
.barra-az{display:none}
@media(max-width:719.98px){
  .foot{padding-bottom:calc(40px + 64px + env(safe-area-inset-bottom))}
  .barra-az{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--inchiostro);padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));transition:transform .35s var(--ease)}
  .js .barra-az{transform:translateY(110%)}
  .js body.vedi-barra .barra-az{transform:none}
  .barra-az a{display:flex;align-items:center;justify-content:center;min-height:48px;border:2px solid var(--foglio);border-radius:4px;color:var(--foglio);font:600 1rem var(--f-testo);text-decoration:none}
  .barra-az a:first-child{background:var(--limone);color:var(--inchiostro);border-color:var(--limone)}
}

/* comparse */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .foglio.reveal{transform:translateY(40px) rotate(2deg)}
.js .foglio.reveal.in{transform:rotate(.6deg);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .hero-logo{animation:timbra-logo .42s cubic-bezier(.2,.9,.3,1.2) both}
.js .hero-logo::before{animation:alone .6s ease-out both}
.js .rise{animation:sale .6s var(--ease) both;animation-delay:calc(var(--d,0) * 1ms + 380ms)}
@keyframes timbra-logo{from{opacity:0;transform:scale(1.18) rotate(-3deg)}to{opacity:1;transform:scale(1) rotate(-1deg)}}
@keyframes alone{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
@keyframes sale{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .js .foglio.reveal{transform:rotate(.6deg)}
  .js .foglio:not(.in) li{opacity:1}
  .js .cart:not(.go) .timbro{opacity:1}
  .js .cart:not(.go) li.oggi::before{transform:scaleX(1)}
  .js .barra-az{transform:none}
}