/* Le Piastre di Emma — anteprima non ufficiale. L'idea: tre piastre, tre
   capitoli. La carne che sfrigola in cima, le tre parole e la piastra che
   trema, i capitoli carne, pesce, verdure che arrivano uno sopra l'altro, la
   tagliata sulla brace, il calore, le barre delle 24 ore, la cartolina, tre
   domande, «Emma» in filo. Archivo Black e Manrope; brace, carbone, ferro. */
@font-face{font-family:"Archivo Black";src:url(../../font/archivo-black-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(../../font/manrope-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --brace:#D97A24;          /* carbone sopra 6,3:1; sul carbone 6,4:1 */
  --carbone:#121110;
  --ferro:#45413C;
  --bianco:#FFFFFF;
  --cartolina:#F3EBDD;
  --f:var(--carbone);--t:#F4F1EC;--m:#B8B1A8;--l:#33302C;--carta:#1D1B19;
  --a:var(--brace);--a-btn:var(--brace);--a-su:var(--carbone);--campo:#1D1B19;--t-campo:#F4F1EC;--l-campo:#5A554F;
  --font-t:"Archivo Black",Impact,sans-serif;--font-b:Manrope,system-ui,sans-serif;
  --bordo:clamp(1rem,4.5vw,4rem);--r:8px;--r-btn:99px;--alto-testata:4.1rem;
}
h1,h2,h3{font-family:var(--font-t);font-weight:400;line-height:.95;letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,1.4rem + 3vw,4rem);margin-bottom:1rem}
section{padding:clamp(3.5rem,8vw,7rem) var(--bordo)}

.testata{background:var(--carbone);border-bottom:1px solid var(--l)}
.t-marchio{font:400 1.25rem/1 var(--font-t);color:var(--brace);letter-spacing:-.01em}
#nav a{font-weight:600;font-size:.95rem}

/* ── 1. la carne sulla piastra: il nome in alto, la frase in basso ────────── */
.emma .clip{--clip-h:calc(100svh - 5.2rem)}
.emma .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,17,16,.82),rgba(18,17,16,.1) 40%,rgba(18,17,16,.15) 60%,rgba(18,17,16,.88))}
.emma .clip-parole{display:grid;grid-template-rows:1fr auto;align-self:stretch;padding:clamp(1.5rem,4vw,3rem) var(--bordo) 5.4rem;color:var(--bianco)}
.emma .clip h1{display:grid;grid-template-rows:1fr auto;height:100%}
/* il velo sotto le parole (voce Cowork 26/10 (1)): qui il blocco delle parole
   e' tutta la sezione, titolo in alto a sinistra e frase in basso a destra,
   quindi il velo sta dietro a ciascuno dei due (la crosta chiara della carne
   sotto «di Emma», la piastra sotto la frase sul telefono) */
.emma .clip-nome,.emma .clip-frase{position:relative}
.emma .clip-nome::before,.emma .clip-frase::before{content:"";position:absolute;z-index:-1;inset:-3rem;pointer-events:none;background:rgba(18,17,16,.4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3rem calc(100% - 3rem),transparent),linear-gradient(180deg,transparent,#000 3rem calc(100% - 3rem),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 3rem calc(100% - 3rem),transparent),linear-gradient(180deg,transparent,#000 3rem calc(100% - 3rem),transparent);mask-composite:intersect}
.clip-nome{font:400 clamp(3.2rem,1rem + 8.6vw,10rem)/.86 var(--font-t);letter-spacing:-.045em;max-width:9ch}
.clip-frase{justify-self:end;align-self:end;text-align:right;font:700 clamp(1.15rem,1rem + .6vw,1.6rem)/1.3 var(--font-b);max-width:24ch}
.clip-btn{justify-self:end;margin-top:1.2rem;background:var(--brace);color:var(--carbone);font:700 1rem var(--font-b);text-decoration:none;
  padding:1rem 1.6rem;border-radius:var(--r-btn)}
.clip-btn:hover{background:#ea8c37}

/* ── 2. le tre parole e la piastra che trema ──────────────────────────────── */
.apertura{padding-bottom:0}
.apertura h2{margin-bottom:1.6rem}
.parole{display:block;font-size:clamp(3.6rem,1rem + 10.5vw,12.5rem);line-height:.86;letter-spacing:-.04em}
.parola{display:inline-block;opacity:0;transform:translateY(.35em) scale(.96);animation:batti .55s cubic-bezier(.2,1.4,.4,1) both}
.parola:nth-child(1){animation-delay:.2s}
.parola:nth-child(2){animation-delay:.75s;color:var(--brace)}
.parola:nth-child(3){animation-delay:1.3s}
@keyframes batti{to{opacity:1;transform:none}}
.ap-motto{display:block;font:800 clamp(1.4rem,1rem + 1.4vw,2.2rem)/1.15 var(--font-b);letter-spacing:-.02em;margin-top:1.2rem;
  opacity:0;animation:batti .6s ease both 1.9s}
.mosso .apertura:not(.dentro) .parola,.mosso .apertura:not(.dentro) .ap-motto{animation-play-state:paused}
.ap-sotto{max-width:44ch;font-size:1.1rem;color:#DDD7CF;margin-bottom:2.4rem}

/* ── 3-5. i tre capitoli, uno sopra l'altro ───────────────────────────────── */
.capitolo{position:sticky;top:var(--alto-testata);min-height:calc(100svh - var(--alto-testata));display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto auto 1fr;column-gap:clamp(2rem,5vw,5rem);align-content:center;
  box-shadow:0 -24px 40px -20px rgba(0,0,0,.7)}
.cp-pesce{background:#121E26}.cp-pasta{background:#2A1611}.cp-fritti{background:#2B200C}
.cp-num{grid-column:1;font-weight:800;color:var(--m);letter-spacing:.08em}
.capitolo h2{grid-column:1;font-size:clamp(3.6rem,.5rem + 8.4vw,10rem);line-height:.85;letter-spacing:-.05em;color:var(--brace);margin:.2rem 0 1.4rem}
.cp-foto{grid-column:2;grid-row:1/span 3;align-self:center}
.cp-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.cp-foto figcaption{font-size:.78rem;color:var(--m);margin-top:.4rem}
.cp-piatti{grid-column:1;list-style:none;padding:0;display:grid;gap:.9rem;align-content:start;max-width:34rem}
.cp-piatti li{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.14)}
.cp-n{font:400 1.45rem/1.05 var(--font-t);letter-spacing:-.01em}
.cp-p{font-weight:800;color:var(--brace);font-size:1.15rem}
.cp-d{grid-column:1/-1;color:var(--m)}
.cp-nota{padding:1.2rem var(--bordo) 0}

/* ── 6. la tagliata sulla brace ───────────────────────────────────────────── */
.tagliata{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;overflow:hidden;color:var(--carbone);
  background:radial-gradient(ellipse 42% 62% at 25% 55%,#ffb35c 0%,#f0903a 45%,transparent 75%),var(--brace);--m:#21160c}
/* il piatto non gira piu' con lo scorrimento: niente animazioni che muovono il cibo (24/10) */
.tg-piatto{transform:rotate(-2deg)}
.tg-piatto img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);box-shadow:0 0 0 10px rgba(255,255,255,.85),0 40px 70px -30px rgba(60,20,0,.9)}
.tagliata h2{font-size:clamp(2.6rem,1.4rem + 4vw,5rem)}
.tagliata p{max-width:42ch;font-size:1.08rem}
.mosso .tg-testo{opacity:0;transform:translateY(2rem);transition:opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1)}
.mosso .tg-testo.dentro{opacity:1;transform:none}

/* ── 7. il calore: la storia e i numeri ───────────────────────────────────── */
.calore{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);align-items:start}
.cl-motto{font:800 clamp(1.3rem,1rem + 1vw,1.8rem)/1.25 var(--font-b);letter-spacing:-.02em;margin-bottom:1rem;color:var(--brace)}
.cl-testo p+p{margin-top:.8rem}
.cl-foto img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r)}
.mosso .cl-foto{clip-path:inset(0 0 0 100%);transition:clip-path 1.2s cubic-bezier(.6,0,.2,1)}
.mosso .cl-foto.dentro{clip-path:inset(0)}
.cl-numeri{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.cl-numeri div{display:grid;border-top:2px solid var(--brace);padding-top:.7rem}
.cl-numeri dt{grid-row:2;color:var(--m);font-size:.9rem}
.cl-numeri dd{font:400 clamp(2.6rem,1.6rem + 3vw,4.4rem)/1 var(--font-t)}

/* ── 8. gli orari: le barre su 24 ore ─────────────────────────────────────── */
.barre{background:var(--carta)}
.br-scala{display:grid;grid-template-columns:repeat(4,1fr) 0;margin:0 0 .4rem calc(8rem + 1rem);margin-right:calc(11.5rem + 1rem);color:var(--m);font-size:.8rem}
.br-giorni{list-style:none;padding:0;display:grid;gap:.6rem;margin-bottom:1.4rem}
.br-giorni li{display:grid;grid-template-columns:8rem minmax(0,1fr) 11.5rem;gap:1rem;align-items:center}
.br-g{font-weight:700}
.br-24{position:relative;height:1.6rem;border-radius:4px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px calc(100% / 24))}
/* le fasce vere della scheda Google (24/10/2026): un rettangolo per fascia,
   su una scala di 24 ore; il giorno di chiusura resta vuoto */
.br-24 i{position:absolute;inset:0;transform-origin:left}
.br-24 svg{display:block;width:100%;height:100%}
.br-24 rect{fill:var(--brace)}
.mosso .br-24 i{transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.mosso .br-24 i:not(.dentro){transform:scaleX(0)}
.br-c{color:var(--m);font-style:italic}

/* ── 9. dove: la cartolina ────────────────────────────────────────────────── */
.cartolina{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);max-width:58rem;margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem);
  background:var(--cartolina);color:#2a241d;border-radius:4px;transform:rotate(-1.5deg);box-shadow:0 30px 50px -24px rgba(0,0,0,.8);--m:#5d5245}
.mosso .cartolina{transition:transform 1s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.mosso .cartolina:not(.dentro){opacity:0;transform:translateY(3rem) rotate(6deg)}
.ca-messaggio{padding-right:clamp(1rem,3vw,2.4rem);border-right:1.5px solid #b7a992}
.ca-saluti{font:400 clamp(1.5rem,1.1rem + 1.4vw,2.3rem)/1.05 var(--font-t);color:#b4561a;margin-bottom:1rem;letter-spacing:-.02em}
.ca-messaggio p{line-height:1.7}
.ca-vicino{margin:1rem 0 0;padding-left:1.1rem;line-height:1.8}
.ca-indirizzo{position:relative;padding:5.4rem 0 0 clamp(1rem,3vw,2.4rem)}
.ca-francobollo{position:absolute;right:0;top:0;width:4.4rem;height:5.2rem;display:grid;place-items:end center;padding:.4rem;
  background:radial-gradient(circle at 50% 38%,#ffb35c 0 18%,#d97a24 19% 30%,transparent 31%),linear-gradient(#3a1a0d,#7a2f0d);
  -webkit-mask:radial-gradient(circle,#0000 .2rem,#000 .21rem) -.3rem -.3rem/.6rem .6rem round;mask:radial-gradient(circle,#0000 .2rem,#000 .21rem) -.3rem -.3rem/.6rem .6rem round}
.ca-francobollo span{font:800 .62rem var(--font-b);color:#fff;letter-spacing:.08em;text-transform:uppercase}
.ca-timbro{position:absolute;right:2.6rem;top:2.6rem;width:4.6rem;height:4.6rem;border:2px solid rgba(60,50,40,.55);border-radius:50%;display:grid;place-items:center;
  font:800 .7rem var(--font-b);letter-spacing:.12em;color:rgba(60,50,40,.7);transform:rotate(-14deg)}
.ca-indirizzo p{font-size:1.05rem;line-height:2.1;background:linear-gradient(transparent calc(2.1em - 1px),#b7a992 0) 0 0/100% 2.1em}
.ca-tel{margin-top:.8rem}
.ca-indirizzo a{color:#2a241d}
.ca-maps{text-align:center;margin-top:2rem}
.ca-maps .maps{display:inline-block;padding:.4rem 0;color:var(--brace)}
.gdpr{font-size:.82rem;color:var(--m);max-width:52ch;margin-inline:auto;text-align:center}
.cartolina-s>.nota{margin-inline:auto;text-align:center}
.cartolina-s h2{text-align:center;margin-bottom:2.4rem}

/* ── 10. tre domande, una alla volta ──────────────────────────────────────── */
.domande{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start;background:var(--carta)}
.dm-testo p{max-width:40ch;color:#DDD7CF}
.tre{background:var(--carbone);border:1px solid var(--l);border-radius:var(--r);padding:clamp(1.4rem,4vw,2.4rem)}
.tre fieldset{border:0;margin:0;padding:0;display:grid;gap:1rem}
.tre legend{font:400 clamp(1.8rem,1.2rem + 2vw,2.8rem)/1 var(--font-t);letter-spacing:-.03em;margin-bottom:1rem;padding:0}
.tr-passo{color:var(--brace);font-weight:800;letter-spacing:.06em}
.tr-scelte{display:flex;flex-wrap:wrap;gap:.6rem}
.tr-scelte label{display:block;font-weight:400}
.tr-scelte input{position:absolute;opacity:0;width:1px;height:1px}
.tr-scelte span{display:block;min-width:3.4rem;text-align:center;padding:.8rem 1rem;border:2px solid var(--l-campo);border-radius:99px;font:800 1.1rem var(--font-b);cursor:pointer}
.tr-scelte input:checked+span{background:var(--brace);border-color:var(--brace);color:var(--carbone)}
.tr-scelte input:focus-visible+span{outline:3px solid var(--brace);outline-offset:3px}
.tr-bottoni{display:flex;flex-wrap:wrap;gap:.8rem}
.tr-bottoni button{font:700 1rem var(--font-b);border-radius:var(--r-btn);padding:.95rem 1.5rem;cursor:pointer;border:2px solid var(--brace)}
.tr-indietro{background:none;color:var(--t)}
.tr-avanti,.tr-invia{background:var(--brace);color:var(--carbone)}
.tre .tr-f[hidden],.tre [hidden]{display:none}

/* ── il piede: «Emma» in filo ─────────────────────────────────────────────── */
.piede-emma{padding:clamp(2.5rem,6vw,4.5rem) var(--bordo) 2rem;border-top:1px solid var(--l)}
.pe-filo{font:400 clamp(4.4rem,1rem + 18vw,20rem)/.8 var(--font-t);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--brace);
  filter:drop-shadow(0 0 8px rgba(217,122,36,.55));margin-bottom:1.6rem}
.pe-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;margin-bottom:1.4rem}
.pe-voci a{text-decoration:none;font-weight:700;padding:.35rem 0;color:var(--t)}
.piede-emma .legale a{color:var(--t)}

@media(max-width:900px){
  .capitolo{position:relative;top:0;min-height:0;grid-template-columns:1fr;grid-template-rows:none}
  .cp-foto{grid-column:1;grid-row:auto;margin-bottom:1.4rem}
  .cp-foto img{aspect-ratio:4/3}
  .tagliata,.calore,.domande{grid-template-columns:1fr}
  .cl-numeri{grid-template-columns:1fr 1fr}
  .cartolina{grid-template-columns:1fr}
  .ca-messaggio{border-right:0;border-bottom:1.5px solid #b7a992;padding:0 0 1.4rem}
  .ca-indirizzo{padding:5.6rem 0 0}
  .br-giorni li{grid-template-columns:5.5rem minmax(0,1fr)}
  .br-c{grid-column:2;font-size:.85rem;margin-top:-.4rem}
  .br-scala{margin:0 0 .4rem calc(5.5rem + 1rem)}
}
@media(max-width:520px){
  .emma .clip-parole{padding-bottom:5.8rem}
}
/* sullo schermo stretto la cartolina ruotata usciva di lato (18 px a 320,
   controllo totale del 23/10): meno rotazione, e la sezione la tiene dentro */
.cartolina-s{overflow-x:clip}
@media (max-width:40rem){.cartolina{transform:rotate(-.6deg)}.mosso .cartolina:not(.dentro){transform:translateY(3rem) rotate(2deg)}}