/* Trattoria delle Grazie — anteprima non ufficiale. L'idea: il menu' si scrive
   col gesso, e lo fanno i clienti che tornano. La sfoglia in cima, la lavagna
   di oggi, le recensioni che contano, tre lavagnette sulla mensola, i ravioli
   in tre tempi, la via, le tessere degli orari, le targhe di marmo con le
   distanze vere, il quaderno. Caveat Brush e DM Sans; lavagna, gesso, grano,
   legno. */
@font-face{font-family:"Caveat Brush";src:url(../../font/caveat-brush-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../../font/dm-sans-100-1000.woff2) format("woff2");font-weight:100 1000;font-display:swap}

:root{
  --lavagna:#22302A;        /* il gesso sopra: 12,1:1 */
  --gesso:#F2F2EE;
  --grano:#C99A3B;          /* sulla lavagna 5,9:1; sul chiaro solo per i segni */
  --grano-scuro:#8A6420;    /* testo d'accento sul chiaro: 4,9:1 */
  --legno:#6B4A2B;
  --muro:#ECE8DF;
  --f:#F5F5F1;--t:#1E2420;--m:#59605A;--l:#DCDCD3;--carta:#EAEAE2;
  --a:var(--grano-scuro);--a-btn:var(--lavagna);--a-su:var(--gesso);
  --font-t:"DM Sans",system-ui,sans-serif;--font-b:"DM Sans",system-ui,sans-serif;
  --gessetto:"Caveat Brush","Comic Sans MS",cursive;
  --bordo:clamp(1rem,4.5vw,4rem);--r:6px;--r-btn:99px;
  --polvere: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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3{font-family:var(--font-t);font-weight:800;letter-spacing:-.03em;line-height:1}
h2{font-size:clamp(2.1rem,1.4rem + 2.6vw,3.6rem);margin-bottom:1rem}
section{padding:clamp(3.5rem,8vw,7rem) var(--bordo)}

.testata{background:var(--f);border-bottom:1px solid var(--l)}
.t-marchio{font:400 1.7rem/1 var(--gessetto);color:var(--lavagna)}
#nav a{font-weight:600;font-size:.95rem}

/* ── 1. la sfoglia, e le parole al centro ─────────────────────────────────── */
.grazie .clip{--clip-h:calc(100svh - 5.8rem);place-items:center;text-align:center}
.grazie .clip::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 52%,rgba(20,28,24,.78),rgba(20,28,24,.35) 75%)}
.grazie .clip-parole{padding:4rem var(--bordo) 6rem;color:var(--gesso);display:flex;flex-direction:column;align-items:center}
/* il velo sotto le parole (base.css): sul telefono la frase a gessetto cadeva
   sulla farina, ai bordi del velo ovale */
.grazie .clip{--velo-parole:rgba(20,28,24,.45)}
.clip-nome{font:800 clamp(3rem,1.2rem + 6.6vw,8rem)/.92 var(--font-t);letter-spacing:-.045em;max-width:12ch}
/* la frase e' un blocco piu' stretto del titolo: senza margini automatici
   restava a sinistra, col testo centrato dentro (voce Cowork 26/10 (1)) */
.clip-frase{font:400 clamp(1.6rem,1.2rem + 1.5vw,2.5rem)/1.15 var(--gessetto);color:#E7C27A;margin-top:1rem;max-width:26ch;margin-inline:auto}
.clip-btn{margin-top:1.8rem;display:inline-block;background:var(--gesso);color:var(--lavagna);font:700 1.05rem var(--font-b);padding:1rem 1.8rem;
  border-radius:var(--r-btn);text-decoration:none}
.clip-btn:hover{background:#fff}

/* ── 2. la lavagna di oggi ────────────────────────────────────────────────── */
.apertura{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:1.2rem clamp(2rem,5vw,5rem);align-items:center}
.apertura h2{font-size:clamp(2.6rem,1.2rem + 3.6vw,4.6rem);line-height:.98;margin-bottom:1.4rem;max-width:13ch}
.riga{display:block}
.ap-sotto{font-size:1.12rem;max-width:40ch}
.lavagna{position:relative;color:var(--gesso);border-radius:4px;padding:clamp(1.6rem,4vw,3rem) clamp(1.4rem,4vw,3.2rem);
  background:radial-gradient(ellipse 60% 40% at 30% 20%,rgba(255,255,255,.06),transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 85%,rgba(255,255,255,.045),transparent 70%),var(--polvere),var(--lavagna);
  border:clamp(10px,1.4vw,16px) solid var(--legno);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),inset 0 6px 24px rgba(0,0,0,.35),0 30px 50px -30px rgba(30,36,32,.7)}
.lv-titolo{font:400 clamp(2.4rem,1.6rem + 3vw,4rem)/1 var(--gessetto);text-align:center}
.lv-data{font:400 1.3rem/1 var(--gessetto);text-align:center;color:var(--grano);margin:.5rem 0 1.6rem}
.lv-piatti{list-style:none;padding:0;display:grid;gap:.55rem}
.lv-riga{display:flex;align-items:baseline;gap:.7rem;font:400 clamp(1.35rem,1.05rem + 1vw,1.9rem)/1.15 var(--gessetto);
  text-shadow:0 0 1px rgba(255,255,255,.35);clip-path:inset(0 100% 0 0);animation:scrivi .75s cubic-bezier(.55,.1,.45,.9) both}
.lv-riga:nth-child(odd){transform:rotate(-.4deg)}
.lv-riga:nth-child(even){transform:rotate(.3deg)}
.lv-riga i{flex:1;border-bottom:2px dotted rgba(242,242,238,.45);transform:translateY(-.3em)}
.lv-riga:nth-child(1){animation-delay:.35s}.lv-riga:nth-child(2){animation-delay:.85s}.lv-riga:nth-child(3){animation-delay:1.35s}
.lv-riga:nth-child(4){animation-delay:1.85s}.lv-riga:nth-child(5){animation-delay:2.35s}.lv-riga:nth-child(6){animation-delay:2.85s}
.lv-firma{font:400 1.25rem/1.2 var(--gessetto);color:var(--grano);text-align:center;margin-top:1.6rem;
  clip-path:inset(0 100% 0 0);animation:scrivi .9s ease both 3.4s}
@keyframes scrivi{to{clip-path:inset(0 0 0 0)}}
.lv-nota{grid-column:2;font-size:.82rem;color:var(--m);text-align:right}
/* la lavagna si scrive quando arriva, non prima: e' sotto il video */
.mosso .apertura:not(.dentro) .lv-riga,.mosso .apertura:not(.dentro) .lv-firma{animation-play-state:paused}

/* ── 3. le recensioni che contano ─────────────────────────────────────────── */
.conta{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,6vw,6rem);align-items:end;
  background:var(--grano);color:var(--lavagna)}
.ct-n{font:800 clamp(5rem,2rem + 11vw,13rem)/.85 var(--font-t);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.ct-voto .ct-n{font-size:clamp(4rem,2rem + 7vw,9rem)}
.ct-l{font:400 clamp(1.5rem,1.1rem + 1.2vw,2.2rem)/1.1 var(--gessetto);margin-top:.8rem}
.ct-stelle{position:relative;display:inline-block;font-size:clamp(1.8rem,1.2rem + 1.6vw,2.8rem);letter-spacing:.12em;line-height:1;margin-top:.8rem}
.ct-vuote{color:var(--lavagna)}                 /* le stelle vuote sono ☆, a pieno colore: 5,5:1 */
.ct-piene{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--lavagna);width:92%}  /* 4,6 su 5 */
.mosso .ct-stelle:not(.dentro) .ct-piene{width:0}
.mosso .ct-piene{transition:width 1.8s cubic-bezier(.3,.6,.3,1) .3s}
.ct-fonte{grid-column:1/-1;font-size:.85rem}

/* ── 4. il menu': tre lavagnette sulla mensola ────────────────────────────── */
.menu{background:var(--muro)}
.mn-testa{max-width:40rem;margin-bottom:2.4rem}
.mn-testa p{color:var(--m)}
.mn-mensola{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,3vw,2.5rem);align-items:end;position:relative;padding-bottom:1.6rem}
.mn-mensola::after{content:"";position:absolute;left:-1rem;right:-1rem;bottom:0;height:1.6rem;border-radius:2px;
  background:linear-gradient(180deg,#8a6440,#6B4A2B 40%,#4f361f);box-shadow:0 14px 20px -12px rgba(0,0,0,.5)}
.lt{color:var(--gesso);padding:1.6rem 1.5rem 1.8rem;border:10px solid var(--legno);border-radius:3px;
  background:var(--polvere),var(--lavagna);box-shadow:inset 0 4px 18px rgba(0,0,0,.4),0 18px 26px -18px rgba(0,0,0,.6)}
.lt-0{transform:rotate(-1.5deg)}.lt-1{transform:rotate(.8deg);min-height:100%}.lt-2{transform:rotate(-.6deg)}
.lt h3{font:400 2.6rem/1 var(--gessetto);color:var(--grano);text-align:center;margin-bottom:1.1rem}
.lt ul{list-style:none;padding:0;display:grid;gap:.9rem}
.lt li{display:grid;grid-template-columns:1fr auto;column-gap:.6rem}
.lt-n{font:400 1.55rem/1.1 var(--gessetto)}
.lt-p{font:400 1.55rem/1.1 var(--gessetto);color:var(--grano)}
.lt-d{grid-column:1/-1;font-size:.88rem;color:#C5CCC6}
.mosso .lt li{clip-path:inset(0 100% 0 0);transition:clip-path .7s cubic-bezier(.55,.1,.45,.9)}
.mosso .lt.dentro li{clip-path:inset(0 0 0 0)}
.mosso .lt li:nth-child(2){transition-delay:.35s}.mosso .lt li:nth-child(3){transition-delay:.7s}
.mosso .lt li:nth-child(4){transition-delay:1.05s}.mosso .lt li:nth-child(5){transition-delay:1.4s}
.mosso .lt-1 li{transition-delay:.4s}.mosso .lt-2 li{transition-delay:.8s}
.menu .nota{margin-top:2rem}

/* ── 5. i ravioli in tre tempi ────────────────────────────────────────────── */
.rv-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:2.2rem}
.rv-testa p{font:400 1.8rem/1.1 var(--gessetto);color:var(--grano-scuro)}
.rv-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.tt{position:relative}
.tt-1{margin-top:4rem}.tt-2{margin-top:8rem}
.tt img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.tt figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;margin-top:1rem;max-width:34ch}
.tt-n{grid-row:span 2;font:800 3.2rem/.8 var(--font-t);color:var(--grano-scuro)}
.tt b{font-size:1.3rem;letter-spacing:-.02em}
.mosso .tt picture{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(.6,0,.2,1)}
.mosso .tt.dentro picture{clip-path:inset(0 0 0 0)}
.mosso .tt-1 picture{transition-delay:.2s}.mosso .tt-2 picture{transition-delay:.4s}

/* ── 6. la via, a tutta larghezza, il titolo al centro ────────────────────── */
.via{padding:0;background:var(--lavagna);color:var(--gesso)}
.vi-foto{position:relative;height:78svh;overflow:hidden}
.vi-foto picture{position:absolute;inset:-12% 0;transform:translateY(calc((var(--p,.5) - .5) * 16%))}
.vi-foto img{width:100%;height:100%;object-fit:cover}
.vi-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(34,48,42,0) 40%,var(--lavagna))}
.vi-testo{position:relative;z-index:1;margin-top:-14rem;padding:0 var(--bordo) clamp(3.5rem,8vw,6rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 3rem;max-width:72rem;margin-inline:auto}
.via h2{grid-column:1/-1;text-align:center;font-size:clamp(2.6rem,1.4rem + 4vw,5.4rem);margin-bottom:1.6rem}
.via p{font-size:1.08rem}
.via .nota{grid-column:1/-1;color:#C5CCC6}

/* ── 7. gli orari: sette tessere che si girano ────────────────────────────── */
.tessere h2{margin-bottom:1.8rem}
.ts-fila{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.8rem;perspective:900px;margin-bottom:1.4rem}
.ts{position:relative;aspect-ratio:3/4;min-height:9rem}
.ts-dorso,.ts-fronte{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;transition:transform .9s cubic-bezier(.3,.7,.3,1)}
.ts-fronte{display:flex;flex-direction:column;justify-content:space-between;padding:1rem .9rem;background:var(--lavagna);color:var(--gesso);
  background-image:var(--polvere)}
.ts-fronte b{font:400 clamp(1.4rem,1rem + 1vw,2rem)/1 var(--gessetto)}
.ts-fronte span{font-size:.88rem;color:#D8DDD8}
.ts-dorso{background:repeating-linear-gradient(90deg,#76522f 0 4px,#6B4A2B 4px 11px,#5f4126 11px 13px);transform:rotateY(180deg)}
.mosso .ts:not(.dentro) .ts-fronte{transform:rotateY(-180deg)}
.mosso .ts:not(.dentro) .ts-dorso{transform:rotateY(0)}
.mosso .ts:nth-child(2) *{transition-delay:.12s}.mosso .ts:nth-child(3) *{transition-delay:.24s}.mosso .ts:nth-child(4) *{transition-delay:.36s}
.mosso .ts:nth-child(5) *{transition-delay:.48s}.mosso .ts:nth-child(6) *{transition-delay:.6s}.mosso .ts:nth-child(7) *{transition-delay:.72s}

/* ── 8. dove: le targhe di marmo, con le distanze vere ────────────────────── */
.dove{background:var(--carta)}
.dv-testa{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 3rem;margin-bottom:2rem}
.dv-testa p{font-size:1.1rem;color:var(--m)}
.dv-vicino{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.dv-vicino li{display:grid;gap:.5rem;padding:1.8rem 1.5rem 1.5rem;border-radius:3px;text-align:center;
  background:linear-gradient(135deg,#fbfaf7,#e9e6df 60%,#f4f2ed);border:1px solid #cfcac0;
  box-shadow:inset 0 0 0 6px #fbfaf7,inset 0 0 0 7px #bdb7ab,0 10px 18px -12px rgba(0,0,0,.4)}
.vc-via{order:-1;font:700 1.15rem/1.2 var(--font-b);letter-spacing:.08em;text-transform:uppercase;color:#2a2f2b;
  text-shadow:0 1px 0 #fff}
.vc-cosa{color:var(--m)}
.vc-m{font:400 2.6rem/1 var(--gessetto);color:var(--grano-scuro)}
.mosso .dv-vicino li{opacity:0;transform:translateY(1.5rem) rotate(-1deg);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1)}
.mosso .dv-vicino li.dentro{opacity:1;transform:none}
.mosso .dv-vicino li:nth-child(2){transition-delay:.15s}.mosso .dv-vicino li:nth-child(3){transition-delay:.3s}
.dv-maps{margin-top:1.6rem}
.dv-maps .maps{display:inline-block;padding:.4rem 0;color:var(--lavagna)}
.gdpr{font-size:.85rem;color:var(--m);max-width:52ch}

/* ── 9. prenota: il quaderno a righe ──────────────────────────────────────── */
.prenota{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start;
  background:var(--lavagna);color:var(--gesso);background-image:var(--polvere)}
.prenota h2{font:400 clamp(2.6rem,1.8rem + 3vw,4.4rem)/1 var(--gessetto);letter-spacing:0}
.pr-testo p{max-width:38ch;color:#D8DDD8}
.pr-tel{margin-top:1.2rem;font-weight:700}
.prenota a{color:var(--gesso)}
.quaderno{position:relative;background:#FCFBF6;color:#1f2a44;padding:2.6rem clamp(1.2rem,4vw,2.6rem) 2rem clamp(3.2rem,7vw,4.6rem);
  border-radius:4px;transform:rotate(1deg);box-shadow:0 30px 40px -24px rgba(0,0,0,.7);gap:.2rem;
  background-image:linear-gradient(90deg,transparent calc(clamp(2.4rem,5.5vw,3.6rem)),#e58a8a calc(clamp(2.4rem,5.5vw,3.6rem)),#e58a8a calc(clamp(2.4rem,5.5vw,3.6rem) + 2px),transparent 0),
    repeating-linear-gradient(180deg,transparent 0 2.9rem,#b8c8e3 2.9rem calc(2.9rem + 1px));
  --a:#1f2a44;--a-btn:var(--lavagna);--a-su:var(--gesso);--m:#4a5470}
.qd-spirale{position:absolute;left:1rem;right:1rem;top:-.7rem;height:1.4rem;
  background:radial-gradient(circle at 50% 50%,#3a3f44 0 .32rem,transparent .36rem) 0 0/1.6rem 100% repeat-x}
.quaderno label{display:grid;grid-template-columns:9rem minmax(0,1fr);align-items:end;gap:.8rem;font:400 1.45rem/1 var(--gessetto);color:#1f2a44}
.quaderno input,.quaderno select{border:0;border-bottom:1.5px solid #8ea3c7;border-radius:0;background:transparent;color:#1f2a44;
  font:500 1.05rem var(--font-b);min-height:2.7rem;padding:.4rem .2rem}
.quaderno .bk-ok{display:flex;font:400 .92rem/1.45 var(--font-b);margin-top:1rem}
.quaderno .bk-ok a{color:#1f2a44}
.quaderno button{margin-top:.6rem}
.quaderno .bk-esito{color:#4a5470}

/* ── il piede: il nome col gesso su una striscia di lavagna ───────────────── */
.piede-grazie{background:var(--lavagna);color:#D8DDD8;padding:clamp(3rem,7vw,5rem) var(--bordo) 2rem;border-top:14px solid var(--legno);
  background-image:var(--polvere);--m:#B9C1BB}
.pg-gesso{font:400 clamp(3.2rem,1.4rem + 7vw,8.5rem)/.95 var(--gessetto);color:var(--gesso);text-shadow:0 0 2px rgba(255,255,255,.4),2px 1px 0 rgba(255,255,255,.08);
  transform:rotate(-1.5deg);transform-origin:left;margin-bottom:1.6rem}
.pg-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin-bottom:1.6rem}
.pg-voci a{text-decoration:none;font-weight:600;color:var(--gesso);padding:.35rem 0}
.piede-grazie .legale a{color:var(--gesso)}

@media(max-width:900px){
  .apertura,.prenota,.conta{grid-template-columns:1fr}
  .lv-nota{grid-column:1;text-align:left}
  .mn-mensola{grid-template-columns:1fr;gap:1.6rem}
  .mn-mensola::after{display:none}
  .lt-1{min-height:0}
  .rv-tre{grid-template-columns:1fr}
  .tt-1,.tt-2{margin-top:0}
  .tt img{aspect-ratio:4/3}
  .vi-testo{grid-template-columns:1fr;margin-top:-8rem}
  .vi-foto{height:56svh}
  .ts-fila{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dv-vicino{grid-template-columns:1fr}
  .quaderno label{grid-template-columns:1fr;gap:.2rem}
}
@media(max-width:520px){
  .ts-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts{aspect-ratio:auto;min-height:7rem}
}