/* I Cuochi — anteprima non ufficiale. L'idea: si chiama come chi ci lavora,
   e la pagina e' il foglio battuto a macchina della cucina. La pasta sulla
   fiamma in cima, il foglio che esce dalla macchina, il provino, il menu'
   battuto con la penna rossa, la scheda delle tomaxelle, i cartellini dei
   nomi, il cartellino da timbrare, la busta, il modulo battuto, il colophon.
   IBM Plex Mono per il foglio, Plus Jakarta Sans per il resto; carta,
   inchiostro, ardesia e ruggine. Nella sezione 2 --p va da 0 a 1 col
   procedere dello scorrimento (i-cuochi.js); senza script vale 1. */
@font-face{font-family:"IBM Plex Mono";src:url(../../font/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../../font/plus-jakarta-200-800.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --carta:#FAF9F6;
  --inchiostro:#171613;
  --ardesia:#3A3833;
  --ruggine:#8A4A2F;        /* 6,6:1 sulla carta */
  --f:var(--carta);--t:var(--inchiostro);--m:#5C5852;--l:#E2DED6;
  --a:var(--ruggine);--a-btn:var(--inchiostro);--a-su:var(--carta);
  --font-t:"Plus Jakarta Sans",system-ui,sans-serif;--font-b:"Plus Jakarta Sans",system-ui,sans-serif;
  --macchina:"IBM Plex Mono",ui-monospace,monospace;
  --bordo:clamp(1rem,4.5vw,4rem);--r:2px;--r-btn:2px;
}
h1,h2,h3{font-family:var(--font-t);font-weight:800;line-height:1;letter-spacing:-.035em}
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(--carta);border-bottom:1px solid var(--l)}
.t-marchio{font:400 1.15rem/1 var(--macchina);letter-spacing:.04em}

/* ── 1. la pasta sulla fiamma, e le parole in basso al centro ─────────────── */
.cuochi .clip{--clip-h:calc(100svh - 5.2rem);align-items:end;justify-items:center;text-align:center}
.cuochi .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,22,19,.92) 0%,rgba(23,22,19,.5) 38%,rgba(23,22,19,0) 66%)}
.cuochi .clip-parole{padding:0 var(--bordo) 5.4rem;color:var(--carta);display:flex;flex-direction:column;align-items:center}
/* il velo sotto le parole (base.css): sugli schermi bassi il titolo sale sopra la
   forchetta e gli spaghetti, dove il velo dal basso e' gia' aperto */
.cuochi .clip{--velo-parole:rgba(23,22,19,.45)}
/* a 320 px la fonte va su tre righe e toccava il bottone */
@media(max-width:360px){.cuochi .clip-parole{padding-bottom:6.4rem}}
.clip-nome{font:800 clamp(3.4rem,1.4rem + 7vw,8.6rem)/.9 var(--font-t);letter-spacing:-.05em}
.clip-frase{display:inline-block;margin-top:1.1rem;font:400 clamp(.95rem,.88rem + .3vw,1.12rem)/1.5 var(--macchina);background:var(--carta);color:var(--inchiostro);
  padding:.35rem .8rem;transform:rotate(-1deg);box-shadow:0 6px 12px -6px rgba(0,0,0,.6)}
.clip-btn{margin-top:1.4rem;display:inline-block;font:700 1rem var(--font-b);text-decoration:none;color:var(--carta);border:2px solid var(--carta);padding:.95rem 1.5rem}
.clip-btn:hover{background:var(--carta);color:var(--inchiostro)}

/* ── 2. la macchina e il foglio ───────────────────────────────────────────── */
.apertura{--p:1;padding:0}
.js-foglio .apertura{height:190svh}
.ap-fisso{position:sticky;top:0;min-height:min(100svh,60rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(2rem,4vw,3rem) var(--bordo);overflow:hidden}
.ap-dove{color:var(--ruggine);font-weight:700;margin-bottom:1rem}
.apertura h2{font-size:clamp(2.8rem,1.4rem + 4.4vw,5.6rem);margin-bottom:1.4rem}
.riga{display:block}
.ap-sotto{font-size:1.1rem;max-width:40ch;margin-bottom:1.8rem}
.ap-azioni{display:flex;flex-wrap:wrap;gap:.8rem}
.ap-scorri{display:none;margin-top:1.6rem;font:400 .85rem var(--macchina);color:var(--m)}
.js-foglio .ap-scorri{display:block;opacity:calc(1.6 - var(--p) * 3)}

.macchina{position:relative;justify-self:center;width:min(100%,34rem);height:min(78svh,40rem);display:flex;flex-direction:column;justify-content:flex-end}
.foglio{position:relative;z-index:1;margin:0 7%;background:#fff;color:var(--inchiostro);padding:1.6rem 1.5rem 3.5rem;
  font:400 .95rem/1.7 var(--macchina);box-shadow:0 2px 0 #eee,0 20px 40px -24px rgba(23,22,19,.5);
  transform:translateY(calc((1 - var(--p)) * 62%));margin-bottom:-2.4rem}
.fg-testa{letter-spacing:.06em;border-bottom:1px solid var(--inchiostro);padding-bottom:.5rem;margin-bottom:.7rem}
.fg-data{min-height:1.7em}
.cursore{display:inline-block;width:.55em;height:1.1em;background:var(--inchiostro);vertical-align:-.15em;margin-left:.1em;animation:lampeggia 1s steps(2) 5}
@keyframes lampeggia{50%{opacity:0}}
.fg-oggi{margin-top:.8rem}
.fg-righe{list-style:none;padding:0;margin:.3rem 0 .8rem}
.fg-righe li{display:flex;gap:.5rem;align-items:baseline}
.fg-righe li span:last-child{white-space:nowrap}
.fg-righe i{flex:1;border-bottom:1px dotted #999;transform:translateY(-.3em)}
/* ogni riga compare quando il foglio e' uscito abbastanza */
.fg-righe li:nth-child(1){opacity:clamp(0,(var(--p) - .05) * 9,1)}
.fg-righe li:nth-child(2){opacity:clamp(0,(var(--p) - .17) * 9,1)}
.fg-righe li:nth-child(3){opacity:clamp(0,(var(--p) - .29) * 9,1)}
.fg-righe li:nth-child(4){opacity:clamp(0,(var(--p) - .41) * 9,1)}
.fg-righe li:nth-child(5){opacity:clamp(0,(var(--p) - .53) * 9,1)}
.fg-righe li:nth-child(6){opacity:clamp(0,(var(--p) - .65) * 9,1)}
.fg-righe li:nth-child(7){opacity:clamp(0,(var(--p) - .77) * 9,1)}
.fg-fine{opacity:clamp(0,(var(--p) - .88) * 9,1);font-style:italic}
.rullo{position:relative;z-index:2;height:2.4rem;border-radius:1.2rem;background:linear-gradient(180deg,#4a4741,#1e1d1a 60%,#3a3833);
  box-shadow:0 6px 10px -4px rgba(0,0,0,.5)}
.rullo i{position:absolute;top:50%;width:1.6rem;height:1.6rem;margin-top:-.8rem;border-radius:50%;background:#2a2926;box-shadow:inset 0 0 0 3px #57534b}
.rullo i:first-child{left:-.6rem}.rullo i:last-child{right:-.6rem}
.corpo{position:relative;z-index:2;height:5.5rem;margin:0 4%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,var(--ardesia),#24231f);
  box-shadow:0 30px 40px -30px rgba(0,0,0,.6)}
.corpo::before{content:"";position:absolute;left:12%;right:12%;top:1.2rem;height:1.6rem;border-radius:4px;
  background:repeating-linear-gradient(90deg,#57534b 0 1.6rem,transparent 1.6rem 2rem)}
.fg-nota{font-size:.82rem;color:var(--m);padding:0 var(--bordo);margin-top:1rem}

/* ── 3. la cucina a vista: il provino ─────────────────────────────────────── */
.provino{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:2rem clamp(2rem,5vw,5rem);align-items:center}
.pv-testo p+p{margin-top:.8rem}
.pv-pellicola{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;background:#111;padding:1.8rem .7rem;position:relative;
  background-image:radial-gradient(circle,#F3EFE6 0 .22rem,transparent .24rem),radial-gradient(circle,#F3EFE6 0 .22rem,transparent .24rem);
  background-size:1.1rem .9rem,1.1rem .9rem;background-position:0 .25rem,0 calc(100% - .25rem);background-repeat:repeat-x;transform:rotate(-1.2deg)}
.pv{position:relative;color:#ddd}
.pv-n{position:absolute;left:.2rem;top:-1.45rem;font:400 .7rem var(--macchina);color:#E2B04A}
.pv img{width:100%;aspect-ratio:2/3;object-fit:cover}
.pv figcaption{font:400 .72rem/1.3 var(--macchina);margin-top:.4rem;color:#cfcac0}
.mosso .pv picture{transition:filter 1.4s ease,opacity 1.4s ease}
.mosso .pv:not(.dentro) picture{filter:brightness(2.4) contrast(.4) grayscale(1);opacity:.35}
.mosso .pv-1 picture{transition-delay:.15s}.mosso .pv-2 picture{transition-delay:.3s}.mosso .pv-3 picture{transition-delay:.45s}.mosso .pv-4 picture{transition-delay:.6s}
.pv-nota{grid-column:1/-1;font-size:.82rem;color:var(--m)}

/* ── 4. il menu' battuto, con la penna rossa ──────────────────────────────── */
.battuto{background:#ECE8E0}
.bt-foglio{max-width:60rem;margin:0 auto;background:#fff;padding:clamp(1.6rem,5vw,3.6rem);font:400 1rem/1.7 var(--macchina);
  box-shadow:0 1px 0 #ddd,0 24px 40px -26px rgba(23,22,19,.55);transform:rotate(.6deg)}
.bt-testa{letter-spacing:.12em;border-bottom:1px solid var(--inchiostro);padding-bottom:.6rem;margin-bottom:.8rem}
.bt-intro{color:var(--m);margin-bottom:1.4rem}
.bt-righe{list-style:none;padding:0;columns:2 22rem;column-gap:3rem}
.bt-righe li{break-inside:avoid;display:grid;grid-template-columns:1fr auto;padding:.55rem 0;position:relative}
.mn-n{text-transform:uppercase;letter-spacing:.04em}
.mn-d{grid-column:1;color:var(--m);font-size:.88rem}
.mn-p{grid-column:2;grid-row:1}
.mn-casa::after{content:"";position:absolute;inset:-.1rem -.9rem -.2rem -.7rem;border:2.5px solid #C0392B;border-radius:48% 52% 46% 54%/55% 45% 55% 45%;
  transform:rotate(-2deg);pointer-events:none}
.mn-casa::before{content:"il piatto di casa ↓";position:absolute;right:-.4rem;top:-1.5rem;font:italic 400 .9rem var(--macchina);color:#C0392B;transform:rotate(-4deg)}
.mosso .bt-foglio .mn-casa::after{transition:clip-path 1s ease .6s}
.mosso .bt-foglio:not(.dentro) .mn-casa::after{clip-path:inset(0 100% 0 0)}
.battuto>.nota{max-width:60rem;margin:1.2rem auto 0}

/* ── 5. le tomaxelle: la scheda di ricetta ────────────────────────────────── */
.ricetta{display:grid;justify-items:center;overflow:hidden}
.rc-scheda{width:min(100%,40rem);background:#FFFDF8;padding:2rem clamp(1.4rem,4vw,2.6rem);font:400 .98rem/1.7 var(--macchina);
  background-image:linear-gradient(transparent 3.2rem,#E57373 3.2rem,#E57373 calc(3.2rem + 2px),transparent 0),
    repeating-linear-gradient(transparent 0 calc(1.7rem - 1px),#C9D6E8 calc(1.7rem - 1px) 1.7rem);background-position:0 0,0 4.15rem;
  box-shadow:0 18px 30px -20px rgba(23,22,19,.55);transform:rotate(-1.5deg)}
.rc-scheda h2{font:400 1.5rem/1 var(--macchina);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.6rem}
.rc-scheda dl{margin-bottom:1rem}
.rc-scheda dl div{display:grid;grid-template-columns:9rem 1fr;gap:1rem}
.rc-scheda dt{color:var(--ruggine)}
.mosso .rc-scheda{transition:transform .9s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.mosso .rc-scheda:not(.dentro){opacity:0;transform:translateY(3rem) rotate(4deg)}

/* ── 6. chi cucina: i cartellini da scrivere ──────────────────────────────── */
.nomi{background:var(--inchiostro);color:var(--carta);text-align:center;--m:#C9C5BD}
.nm-sotto{color:var(--m);margin:0 auto 2.4rem;max-width:44ch}
/* il secondo video (voce 25/10 (1)): la padella sulla fiamma, sopra i cartellini */
.nm-video{max-width:46rem;margin:0 auto 2.8rem}
.nm-video .secondo{border-radius:10px;box-shadow:0 20px 40px -24px rgba(0,0,0,.7);--sv-fondo:var(--ruggine);--sv-testo:#fff}
.nm-cartellini{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.nm-cartellini li{--m:#5C5852;display:grid;gap:.5rem;background:#fff;color:var(--inchiostro);border-radius:10px;overflow:hidden;padding-bottom:1.2rem;text-align:left}
.nm-ciao{background:var(--ruggine);color:#fff;font:800 1.4rem var(--font-t);text-align:center;padding:.8rem;letter-spacing:-.02em}
.nm-fa{font:400 .82rem var(--macchina);color:var(--m);padding:0 1.2rem}
.nm-riga{display:block;height:2.4rem;margin:0 1.2rem;border-bottom:2px dashed #b9b3a8}
.nm-cartellini li:nth-child(1){transform:rotate(-2deg)}.nm-cartellini li:nth-child(3){transform:rotate(1.5deg)}
.mosso .nm-cartellini li{transition:transform .8s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.mosso .nm-cartellini li:not(.dentro){opacity:0;transform:translateY(2rem) rotate(-8deg)}

/* ── 7. gli orari: il cartellino da timbrare ──────────────────────────────── */
.timbri{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2rem clamp(2rem,5vw,5rem);align-items:center}
.tm-cartellino{width:100%;max-width:30rem;justify-self:center;border-collapse:collapse;background:#F3E9C6;font:400 .9rem var(--macchina);
  box-shadow:0 18px 30px -20px rgba(23,22,19,.5);outline:2px solid #C9B98A;outline-offset:-10px}
.tm-cartellino th,.tm-cartellino td{border:1px solid #C9B98A;padding:.6rem .7rem;text-align:left}
.tm-cartellino thead th{background:#E9DCAE;text-transform:uppercase;letter-spacing:.08em;font-weight:400;font-size:.78rem}
.tm-cartellino tbody th{font-weight:400}
.tm-timbro{display:inline-block;color:#A3271B;border:1.5px solid #A3271B;padding:.05rem .4rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  transform:rotate(-3deg);opacity:.85}
.mosso .tm-timbro{transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .25s}
.mosso .tm-timbro:not(.dentro){opacity:0;transform:scale(1.8) rotate(-12deg)}

/* ── 8. dove: la busta ────────────────────────────────────────────────────── */
.busta-s{background:#ECE8E0;text-align:center}
.busta-s h2{margin-bottom:2.4rem}
.busta{position:relative;width:min(100%,38rem);margin:0 auto 1.6rem;text-align:left;display:flex;flex-direction:column;align-items:center}
.bs-lettera{position:relative;z-index:1;width:88%;margin-bottom:-3.2rem;background:#fff;padding:1.2rem 1.4rem 4rem;font:400 .92rem/1.6 var(--macchina);
  box-shadow:0 4px 10px rgba(0,0,0,.15)}
.bs-lettera ul{padding-left:1.1rem;margin:.6rem 0 0}
.bs-fronte{position:relative;z-index:2;width:100%;aspect-ratio:16/9;background:#D9B98C;padding:1.4rem 1.6rem;font:400 1rem/1.6 var(--macchina);
  box-shadow:0 20px 30px -20px rgba(23,22,19,.6);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px)}
.bs-mitt{font-size:.75rem;color:#5b4528}
.bs-ind{position:absolute;left:38%;top:44%;font-size:1.05rem}
.bs-timbro{position:absolute;right:1.4rem;top:1.2rem;border:2.5px solid #A3271B;color:#A3271B;font:400 .8rem/1.2 var(--macchina);text-transform:uppercase;
  padding:.4rem .6rem;transform:rotate(8deg);text-align:center}
.mosso .bs-lettera{transition:transform 1.1s cubic-bezier(.3,1,.4,1) .3s}
.mosso .busta:not(.dentro) .bs-lettera{transform:translateY(75%)}
.bs-maps .maps{display:inline-block;padding:.4rem 0;color:var(--ruggine)}
.gdpr{font-size:.82rem;color:var(--m);max-width:52ch;margin-inline:auto}
.busta-s>.nota{margin-inline:auto}

/* ── 9. prenota: il modulo battuto a macchina ─────────────────────────────── */
.battitura{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start}
.bt2-testo p{max-width:40ch}
.bt2-tel{margin-top:1rem;font-weight:700}
.macchina-f{background:#fff;padding:clamp(1.4rem,4vw,2.6rem);font-family:var(--macchina);box-shadow:0 1px 0 #ddd,0 24px 40px -26px rgba(23,22,19,.5)}
.macchina-f label{display:grid;grid-template-columns:11rem minmax(0,1fr);align-items:end;gap:.6rem;font:400 .9rem var(--macchina);letter-spacing:.04em}
.macchina-f input{font:400 1rem var(--macchina);border:0;border-bottom:1.5px dotted var(--inchiostro);border-radius:0;padding:.3rem 0;min-height:2.4rem;background:transparent}
.macchina-f .bk-ok{display:flex;font:400 .82rem/1.5 var(--font-b);letter-spacing:0}
.macchina-f button{justify-self:end;width:5.6rem;height:5.6rem;border-radius:50%;padding:0;background:radial-gradient(circle at 40% 35%,#4a4741,#1e1d1a);
  box-shadow:0 0 0 5px #d6d0c4,0 0 0 7px #8b857a,0 8px 0 2px #8b857a,0 14px 20px -6px rgba(0,0,0,.5);transition:transform .1s,box-shadow .1s}
.macchina-f button span{font:400 .8rem var(--macchina);letter-spacing:.1em;color:#F3EFE6}
.macchina-f button:active{transform:translateY(5px);box-shadow:0 0 0 5px #d6d0c4,0 0 0 7px #8b857a,0 3px 0 2px #8b857a,0 6px 10px -6px rgba(0,0,0,.5)}

/* ── il piede: il colophon battuto ────────────────────────────────────────── */
.piede-cuochi{padding:clamp(2.5rem,6vw,4rem) var(--bordo) 2rem;border-top:1px solid var(--l);text-align:center}
.pc-colophon{font:400 .9rem/1.8 var(--macchina);margin-bottom:1.4rem}
.pc-colophon p:first-child{letter-spacing:.2em;font-size:1.1rem}
.pc-voci{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.6rem;margin-bottom:1.4rem}
.pc-voci a{font:400 .9rem var(--macchina);padding:.35rem 0;color:var(--t)}
.piede-cuochi .legale{justify-items:center}

@media(max-width:900px){
  .ap-fisso{grid-template-columns:minmax(0,1fr);align-content:start;gap:1.5rem}
  .macchina{height:auto;min-height:28rem}
  .js-foglio .apertura{height:auto}
  .ap-fisso{position:relative}
  .provino,.timbri,.battitura{grid-template-columns:minmax(0,1fr)}
  .pv-pellicola{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem;transform:none}
  .nm-cartellini{grid-template-columns:minmax(0,1fr)}
  .bs-ind{left:1.6rem;top:auto;bottom:1.2rem}
  .macchina-f label{grid-template-columns:minmax(0,1fr);gap:.2rem}
  .tm-cartellino th,.tm-cartellino td{padding:.45rem .4rem}
  .tm-timbro{white-space:normal;font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){.apertura{--p:1!important}.js-foglio .apertura{height:auto}.ap-fisso{position:relative}}
/* il timbro entra da grande (scale 1.8): finché non entra e' trasparente, ma
   allargava la pagina di 19 px a 320 (controllo totale del 23/10). La sezione lo tiene dentro. */
.timbri{overflow-x:clip}