/* PANETTA — proposta "classico": carta, farina, serif da bottega.
   Si carica DOPO style.css e ne sovrascrive il registro pop. */

:root{
  --bg:#FFF9D6;
  --surface:#F7E6B5;
  --kraft:#F3DFA9;
  --ink:#5A2923;
  --fg:#3A211C;
  --muted:#7B574B;
  --accent:#904B4B;
  --accent-2:#E8B07F;
  --cream:#FFF9D6;
  --line:rgba(90,41,35,.24);

  --f-display:"Fraunces",Georgia,serif;
  --f-ui:"EB Garamond",Garamond,Georgia,serif;
  --f-body:"EB Garamond",Garamond,Georgia,serif;

  --bw:1px;
  --sh:none;
  --r:0px;
  --ease:cubic-bezier(.7,0,.2,1);

  /* grana della carta */
  --grana: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* fibre della carta da pane */
  --fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .28' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .26 0 0 0 0 .14 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

body{font-size:17px;line-height:1.65;color:var(--fg);background:var(--bg)}
body::before{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  background:var(--grana);opacity:.42;mix-blend-mode:multiply;
}

/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:500;color:var(--ink);letter-spacing:0;line-height:1.04}
h1{font-size:clamp(2.4rem,4.4vw,3.7rem)}
h2{font-size:clamp(1.8rem,2.8vw,2.5rem)}
h1 em,h2 em{font-style:italic;color:var(--accent)}
.lead{font-size:1.1rem;color:var(--fg)}
.accent{color:var(--accent);font-style:italic;font-weight:400}
.label{
  font-family:var(--f-ui);font-size:.72rem;letter-spacing:.28em;color:var(--accent);
  display:inline-flex;align-items:center;gap:.9em;
}
.label::before{content:"";width:26px;height:1px;background:currentColor;flex:none}

/* ---------- header ---------- */
.header{background:rgba(255,249,214,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo img{height:54px}
.nav{gap:1.6rem}
.nav a:not(.btn){
  font-family:var(--f-ui);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.3rem 0;border:0;border-radius:0;color:var(--ink);
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px;
  transition:background-size .5s var(--ease),color .3s ease;
}
.nav a:not(.btn):hover{background-size:100% 1px;color:var(--accent);transform:none}
.nav a:not(.btn)[aria-current="page"]{
  background-color:transparent;background-size:100% 1px;color:var(--accent);
  box-shadow:none;animation:none;border:0;
}
.burger summary{font-family:var(--f-ui);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase}
.burger nav{background:var(--bg);border-bottom:1px solid var(--line)}
.burger nav a{font-family:var(--f-display);color:var(--ink);border-bottom:1px solid var(--line)}

/* fregio: bordura sottile da carta da pacchi */
.fregio{
  height:12px;animation:none;background-color:var(--bg);
  border-bottom:1px solid var(--line);border-top:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Cpath d='M11 3l3 3-3 3-3-3z' fill='%23904B4B' opacity='.55'/%3E%3Ccircle cx='0' cy='6' r='.9' fill='%23904B4B' opacity='.5'/%3E%3C/svg%3E");
  background-size:22px 12px;
}

/* ---------- bottoni ---------- */
.btn{
  font-family:var(--f-display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:650;
  font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 14;
  padding:.95rem 1.6rem;border-radius:0;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
  box-shadow:none;outline:1px solid var(--line);outline-offset:3px;
  transition:background .35s ease,color .35s ease,outline-offset .35s var(--ease);
}
.btn:hover{transform:none;box-shadow:none;background:var(--accent);border-color:var(--accent);outline-offset:6px}
.btn:active{transform:none;box-shadow:none}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--sm,.nav .btn{padding:.6rem 1.05rem;font-size:.72rem;box-shadow:none;border-radius:0}
.nav .btn:hover{border-color:var(--accent)}
.btn--crema{background:var(--cream);color:var(--ink);border-color:var(--cream);box-shadow:none;outline-color:rgba(255,249,214,.3)}
.btn--crema:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--ink);box-shadow:none}
.sez--scura .btn--line{background:transparent;color:var(--cream);border-color:rgba(255,249,214,.6);box-shadow:none;outline-color:rgba(255,249,214,.2)}
.sez--scura .btn--line:hover{background:var(--cream);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--kraft) var(--fibre);border-bottom:1px solid var(--line)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 72% 45%,rgba(255,249,214,.55),transparent 70%)}
.hero .wrap{position:relative;z-index:2}
.farina{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero__link{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.8rem;margin-top:.6rem}
.hero__link a:not(.btn){
  font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ink);
  padding-bottom:3px;background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px;
  transition:background-size .5s var(--ease),color .3s;
}
.hero__link a:not(.btn):hover{color:var(--accent);background-size:40% 1px}

.hero__arte{position:relative;display:grid;place-items:center;width:min(100%,470px);margin-inline:auto;aspect-ratio:1}
.hero__arte .logo-hero{width:70%;grid-area:1/1}
.anello{grid-area:1/1;width:100%;height:100%;overflow:visible;color:var(--accent)}
.anello__giro{transform-origin:250px 250px;animation:gira 90s linear infinite}
.anello text{font-family:var(--f-ui);font-size:15px;letter-spacing:.3em;fill:currentColor}
@media (max-width:860px){.hero__arte{width:min(86%,360px)}}

/* ---------- ornamento con spighe ---------- */
.ornato{display:flex;align-items:center;gap:1.1rem;color:var(--accent);width:100%}
.ornato::before,.ornato::after{content:"";flex:1;height:1px;background:var(--line)}
.ornato svg{width:118px;height:30px;flex:none;overflow:visible}
.ornato path,.anello .disegna{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ornato:not(.rv--off) path{animation:disegna 2.4s var(--ease) forwards}
.ornato:not(.rv--off) path:nth-child(odd){animation-delay:.25s}
@keyframes disegna{to{stroke-dashoffset:0}}

/* ---------- nastri ---------- */
.nastro{background:var(--ink);border:0;padding-block:.75rem}
.nastro__track{animation-duration:80s;gap:2.2rem;padding-right:2.2rem}
.nastro span{font-family:var(--f-ui);font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;color:var(--cream)}
.nastro i{font-size:.55rem;color:var(--accent-2)}
.nastro--vuoto{background:transparent;padding-block:clamp(1.6rem,3vw,2.4rem);border-block:1px solid var(--line)}
.nastro--vuoto .nastro__track{animation-duration:110s}
.nastro--vuoto span{
  font-family:var(--f-display);font-style:italic;text-transform:none;letter-spacing:0;
  font-size:clamp(2rem,4.2vw,3.3rem);color:rgba(144,75,75,.34);-webkit-text-stroke:0;
}
.nastro--vuoto i{font-size:.8rem;color:var(--accent-2)}

/* ---------- sezioni ---------- */
.sez--tinta{background:var(--surface) var(--fibre)}
.sez--tinta::before,.sez--tinta::after,
.sez--scura::before,.sez--scura::after{background:var(--line);height:1px;animation:none}
.sez--scura::before,.sez--scura::after{background:rgba(255,249,214,.18)}
.sez--scura::before{top:10px}
.sez--scura::after{bottom:10px}

.chi__titolo h2{font-size:clamp(2.1rem,3.6vw,3rem)}
.chi__testo{border-top:1px solid var(--line)}
.giustificato{font-size:1.14rem;line-height:1.75}
.capolettera::first-letter{
  font-family:var(--f-display);font-weight:500;color:var(--accent);font-size:4.4em;line-height:.78;
  padding:0;margin:.08em .08em 0 -.02em;background:none;border:0;border-radius:0;box-shadow:none;
}

/* foto: passe-partout, grana, rivelazione a tendina */
.foto{
  border:1px solid var(--line);border-radius:0;box-shadow:none;padding:9px;position:relative;
  background:var(--cream);animation:none;
}
.sez--tinta .foto{background:var(--cream)}
.foto::after{content:"";position:absolute;inset:9px;box-shadow:inset 0 0 0 1px rgba(90,41,35,.22);pointer-events:none}
.foto img{filter:sepia(.14) saturate(.88) contrast(1.03);transition:filter .8s ease,transform 1.6s var(--ease)}
.foto:hover img{transform:none;filter:none}
.foto.rv{transition:opacity .9s ease}
.foto[data-par].rv:not(.rv--off){transition:opacity .9s ease}
.foto.rv--off{opacity:0;transform:none}
.foto.rv img{clip-path:inset(0);transition:clip-path 1.5s var(--ease) .15s,transform 1.9s var(--ease) .15s,filter .8s ease}
.foto.rv--off img{clip-path:inset(0 0 100% 0);transform:scale(1.14)}

/* servizi: indice numerato come un listino di bottega */
.tessere{counter-reset:t;gap:0!important;border-top:1px solid var(--line)}
.tessera{
  counter-increment:t;position:relative;isolation:isolate;overflow:hidden;
  flex-direction:column;align-items:flex-start;justify-content:space-between;gap:2.2rem;min-height:150px;
  padding:1.2rem 1.2rem 1.25rem;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;box-shadow:none;
  transition:color .45s ease;
}
.tessera:nth-child(4n){border-right:0}
.tessera::before{content:counter(t,upper-roman);font-family:var(--f-ui);font-size:.72rem;letter-spacing:.22em;color:var(--accent);transition:color .45s ease}
.tessera::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease)}
.tessera:hover{background:transparent;color:var(--cream);transform:none;box-shadow:none}
.tessera:hover::before{color:var(--accent-2)}
.tessera:hover::after{transform:scaleY(1)}
.tessera__t{font-family:var(--f-display);font-weight:500;font-size:clamp(1.25rem,1.8vw,1.5rem);padding-right:1.6rem}
.tessera__go{position:absolute;right:1.2rem;bottom:1.3rem;width:auto;height:auto;border:0;background:none;color:var(--accent);font-size:.95rem;transition:transform .45s var(--ease),color .45s}
.tessera:hover .tessera__go{transform:translateX(4px);background:none;color:var(--accent-2)}
@media (max-width:900px){.tessera:nth-child(n){border-right:1px solid var(--line)}.tessera:nth-child(2n){border-right:0}}
@media (max-width:480px){.tessera{min-height:120px;padding:1rem}}

/* catering: stesso badge, inciso e più lento */
.sez--scura{background:var(--ink) var(--fibre)}
.catering__raggi line{stroke-width:1.1}
.catering__raggi{animation-duration:140s}
.catering__punti{animation-duration:200s}
.catering__punti circle{r:2.2px}
.catering__badge text{font-family:var(--f-ui);font-size:15px;letter-spacing:6px}
.catering__badge text:nth-of-type(2){font-family:var(--f-display);font-style:italic;font-size:60px;letter-spacing:0}
.catering__titolo{color:var(--cream);-webkit-text-stroke:0;font-style:italic;font-size:clamp(2.6rem,5vw,4rem)}
.catering__titolo:hover{color:var(--cream)}

/* dove siamo */
.info{background:none;border:0;border-block:1px solid var(--line);border-radius:0;padding:1.1rem 0}
.info dt{font-size:.7rem;letter-spacing:.22em}
.info a{text-decoration-color:var(--accent-2);text-decoration-thickness:1px}

/* fascia del panificio con sigillo 1968 */
.fascia--1968{justify-content:flex-start;gap:1.5rem 2.6rem}
.fascia--1968 .stack{flex:1;min-width:16rem}
.sigillo{width:118px;height:118px;flex:none;color:var(--accent);transition:transform .8s cubic-bezier(.3,1.5,.5,1),opacity .5s ease}
.sigillo__giro{transform-origin:60px 60px;animation:gira 50s linear infinite}
.sigillo text{fill:currentColor}
.fascia--1968.rv--off{opacity:1;transform:none}
.fascia--1968.rv--off .sigillo{transform:scale(1.6) rotate(-30deg);opacity:0}

/* footer */
.footer::before{content:none}
.footer{font-size:.95rem}
.footer__base{border-top:1px solid rgba(246,231,194,.22)}
.footer__loghi img{height:74px}

@media (prefers-reduced-motion:reduce){
  .anello__giro,.sigillo__giro{animation:none}
  .ornato path{stroke-dashoffset:0}
  .foto.rv--off img{clip-path:none}
}

/* ---------- pagina panificio ---------- */
.hero__arte .logo-hero--panificio{width:68%}

/* ---------- pagina menu: listino da bottega ---------- */
.menu-testa{position:relative;overflow:hidden;background:var(--kraft) var(--fibre);border-bottom:1px solid var(--line)}
.menu-testa .wrap{position:relative;z-index:2}
.menu-top{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,4vw,3rem);gap:1.1rem}
.menu-top h1{font-size:clamp(3.2rem,8vw,5.4rem);font-style:italic;color:var(--accent);font-weight:500}
.menu-top .ornato{max-width:26rem;margin-inline:auto}
.menu-top .lead a{color:var(--ink);text-decoration-color:var(--accent-2);text-underline-offset:3px;text-decoration-thickness:1px}
.menu-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 67px);z-index:15;background:rgba(255,249,214,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.menu-nav .wrap{gap:.4rem 1.6rem;padding-block:.85rem}
.menu-nav a{
  font-family:var(--f-ui);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  padding:.2rem 0;border:0;border-radius:0;background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0 1px;
  transition:background-size .5s var(--ease),color .3s;
}
.menu-nav a:hover{background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px;color:var(--accent);animation:none}
.menu-corpo{position:relative;padding-block:clamp(3rem,6vw,4.5rem)}
@media (min-width:861px){.menu-corpo::before{content:"";position:absolute;top:clamp(3rem,6vw,4.5rem);bottom:clamp(3rem,6vw,4.5rem);left:50%;width:1px;background:var(--line)}}
.cat{scroll-margin-top:140px;gap:.7rem}
.cat h2{
  background:none;border:0;box-shadow:none;border-radius:0;color:var(--ink);
  font-size:clamp(1.7rem,2.6vw,2.15rem);font-weight:500;padding:0 0 .5rem;border-bottom:1px solid var(--line);
}
.cat h2::before,.cat h2::after{content:"✦";font-size:.32em;vertical-align:middle;margin-inline:.9rem;color:var(--accent-2)}
.sub{font-family:var(--f-ui);font-size:.7rem;letter-spacing:.28em;margin-top:.9rem}
.sub::before,.sub::after{border-top:1px solid var(--line)}
.listino li{padding:.34rem 0;font-size:1.04rem}
.listino li::after{border-bottom:1px dotted rgba(90,41,35,.35)}
.listino .prezzo{font-family:var(--f-ui);font-size:1rem;color:var(--accent)}
.listino .unita{font-style:italic;font-size:.82rem}
.listino .nota{font-size:.84rem}
.nota-cat{border:0;border-block:1px solid var(--line);border-radius:0;padding:.9rem 0;text-align:center;font-style:italic;font-size:.98rem;max-width:none}
.nota-cat strong{font-style:normal;font-family:var(--f-ui);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.2rem}

/* ---------- titoli: Fraunces grasso, morbido, da insegna ---------- */
h1,h2,h3,.tessera__t,.cat h2,.catering__titolo,.menu-top h1{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;line-height:1.02;
  font-optical-sizing:auto;font-variation-settings:"SOFT" 100,"WONK" 0;
}
h1{font-size:clamp(2.5rem,4.6vw,3.9rem);font-weight:800}
h1 em,h2 em,.catering__titolo,.menu-top h1{font-style:italic;font-weight:700;font-variation-settings:"SOFT" 100,"WONK" 1}
.tessera__t{font-size:clamp(1.15rem,1.6vw,1.35rem);font-weight:600}
.cat h2{font-size:clamp(1.5rem,2.2vw,1.85rem)}
.capolettera::first-letter{font-family:var(--f-display);font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1}
.nastro--vuoto span{font-family:var(--f-display);font-weight:600;font-variation-settings:"SOFT" 100,"WONK" 1}
.catering__badge text:nth-of-type(2){font-family:var(--f-display);font-weight:700;font-size:54px}
.sigillo > text{font-family:var(--f-display);font-weight:700;font-size:22px}

/* ===== BLOCCO PICCOLA BAKERY (home) ===== */
.piccola{padding-block:clamp(2.6rem,6vw,4.4rem)}
.piccola h2{font-size:clamp(1.9rem,3.6vw,2.8rem);font-weight:700}
.piccola h2 em{font-weight:500;color:var(--accent)}
.prodotti{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35rem 1rem;font-family:var(--f-display);font-style:italic;font-size:clamp(1.15rem,2vw,1.4rem);color:var(--ink);margin:0 auto 2.4rem;padding-block:1rem;border-block:1px solid var(--line);max-width:52rem}
.prodotti .label{font-style:normal;flex-basis:100%;text-align:center;justify-content:center}
.prodotti i{font-style:normal;color:var(--accent);font-size:.7em}
.a__testa{text-align:center;max-width:40rem;margin:0 auto 2.4rem}
.a__testa p{color:var(--muted);margin-top:.6rem}
.a__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:stretch}
.a__col{display:flex;flex-direction:column;gap:1rem}
.a__col .foto{--ar:4/3}
.a__col h3{font-size:1.5rem;font-weight:700}
.a__col h3 em{font-weight:500;color:var(--accent)}
.a__col p{font-size:1.05rem;color:var(--fg)}
.a__e{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:var(--accent)}
.a__e span{font-family:var(--f-display);font-style:italic;font-size:2.2rem;line-height:1}
.a__e i{width:1px;flex:1;background:var(--line)}
.a__piede{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--line);display:flex;justify-content:center;align-items:center;gap:1.4rem;flex-wrap:wrap}
.a__piede p{font-family:var(--f-display);font-style:italic;font-size:1.35rem;color:var(--ink)}
@media (max-width:760px){.a__grid{grid-template-columns:1fr}.a__e{flex-direction:row}.a__e i{height:1px;width:auto}}


/* ===== LIEVITA: scritta animata sotto il blocco piccola bakery ===== */
.lievita{margin-top:clamp(2.6rem,6vw,4.4rem);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center}
.lievita__frase{font-family:var(--f-display);font-size:clamp(2rem,5.4vw,4.2rem);line-height:1;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.lievita__frase span{display:inline-block;transform-origin:50% 100%;font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;font-weight:400;transform:scale(1,.55) translateY(20%);opacity:0;transition:none}
.lievita__frase em span{color:var(--accent);font-style:italic}
.lievita.vai .lievita__frase span{animation:lievita-l 1.6s cubic-bezier(.25,.9,.3,1.25) forwards, respira 3.6s ease-in-out infinite;animation-delay:calc(var(--k) * 55ms), calc(1.8s + var(--k) * 90ms)}
@keyframes lievita-l{0%{opacity:0;transform:scale(1,.55) translateY(20%);font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 144;font-weight:400}
  60%{opacity:1}100%{opacity:1;transform:none;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;font-weight:800}}
@keyframes respira{0%,100%{transform:none;font-weight:800}50%{transform:scale(1.03,1.06);font-weight:900}}
.lievita__sotto{font-family:var(--f-ui);font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity 1s 1.4s}
.lievita.vai .lievita__sotto{opacity:1}

@media (prefers-reduced-motion:reduce){.lievita__frase span{animation:none!important;opacity:1;transform:none;font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144}.lievita__sotto{opacity:1}}
@media (max-width:640px){.lievita__frase em{display:block;margin-top:.1em}.lievita__frase{font-size:clamp(2.2rem,11vw,3rem)}}

/* ===== MOBILE (telefono) ===== */
@media (max-width:640px){
  /* hero: respiro tra titolo e indirizzo */
  .ht-testo h1{margin-bottom:.4rem}
  .ht-testo .ht-info{margin-top:1.4rem}
  /* testi: niente giustificato con sillabe spezzate */
  .giustificato{text-align:left;hyphens:manual;-webkit-hyphens:manual;line-height:1.7}
  /* pulsanti a tutta larghezza, uguali */
  .btns{flex-direction:column;align-items:stretch}
  .btns .btn{width:100%;justify-content:center;text-align:center}
  /* servizi: elenco a righe invece di riquadri spezzati */
  .tessere{grid-template-columns:1fr!important}
  .tessera{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.6rem;min-height:0;padding:1rem .2rem;border-right:0!important}
  .tessera__t{hyphens:manual;-webkit-hyphens:manual;padding-right:0;font-size:1.2rem}
  .tessera__go{position:static}
  /* catering: timbro più piccolo, non occupa tutto lo schermo */
  .catering__badge{width:min(58%,210px)}
  /* piccola bakery: prodotti in colonna, foto meno alte */
  .prodotti{flex-direction:column;align-items:center;gap:.2rem}
  .prodotti i{display:none}
  .a__col .foto{--ar:3/2}
  .a__testa{margin-bottom:1.6rem}
  .lievita__sotto{letter-spacing:.16em}
}

/* =====================================================
   TELEFONO — "SACCHETTO": tutto stampato a un colore su carta kraft
   ===================================================== */
.solo-m,.pg--m{display:none}
@media (max-width:640px){
  :root{
    --kr:#D9B784;--inc:#7A3A36;
    --bg:var(--kr);--surface:var(--kr);--kraft:var(--kr);
    --ink:var(--inc);--fg:var(--inc);--muted:var(--inc);--accent:var(--inc);--accent-2:#F3DFB8;
    --cream:#F3DFB8;--line:rgba(122,58,54,.4);
  }
  body{background:var(--kr) repeating-linear-gradient(90deg,rgba(90,41,35,.035) 0 2px,transparent 2px 7px)}
  .header,.burger nav{background:var(--kr)}
  .sez--tinta,.sez--scura{background:transparent}
  .sez--tinta::before,.sez--tinta::after,.fregio{display:none}
  .label{color:var(--inc)}
  .btn{background:var(--inc);color:#F3DFB8;border-color:var(--inc);outline:0}
  .btn--line{background:transparent;color:var(--inc);border:1.5px solid var(--inc)}
  .hero__link a:not(.btn){color:var(--inc)}

  /* foto in bicromia, come stampate sulla carta */
  .foto{background:var(--inc)!important;padding:0;border:1.5px solid var(--inc);isolation:isolate;box-shadow:0 0 0 5px var(--kr),0 0 0 6.5px var(--inc)}
  .foto img{filter:grayscale(1) contrast(1.2) brightness(1.08);mix-blend-mode:screen}
  .foto::after{inset:0;background:var(--kr);mix-blend-mode:multiply;box-shadow:none}
  .pg--m{display:block;--tb:var(--kr);--tf:var(--inc)}

  /* hero: la stampa del sacchetto al posto delle tessere */
  .solo-m{display:block}
  .ht .tessere-ht,.ht .ht-testo h1{display:none!important}
  .ht{border:0;padding-top:1.1rem}
  .stampa{border:2px solid var(--inc);outline:1px solid var(--inc);outline-offset:4px;padding:1.8rem 1rem 1.6rem;text-align:center;color:var(--inc);margin:4px}
  .stampa__su{font-size:.72rem;letter-spacing:.32em;text-transform:uppercase}
  .stampa__nome{font-family:var(--f-display);font-style:italic;font-weight:800;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-size:clamp(4rem,22vw,5.4rem);line-height:.9;letter-spacing:-.02em;margin-top:.5rem}
  .stampa__sotto{display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--f-display);font-weight:700;font-variation-settings:"SOFT" 100;font-size:.95rem;letter-spacing:.42em;text-transform:uppercase;margin-top:.3rem;padding-left:.42em}
  .stampa__sotto::before,.stampa__sotto::after{content:"";width:26px;height:1px;background:currentColor}
  .stampa__icone{display:flex;justify-content:center;gap:1rem;margin:1.3rem 0 .2rem}
  .stampa__icone svg{width:36px;height:36px}
  .stampa__slogan{font-family:var(--f-display);font-weight:500;font-variation-settings:"SOFT" 100;font-size:1.45rem;line-height:1.15;margin-top:1rem}
  .stampa__foto{--ar:4/3;margin:1.4rem 0 0}
  .ht-testo{margin-top:1.4rem}
  .ht-testo .ht-info{margin-top:0;text-align:center}
  .ht-testo .ht-info .label{justify-content:center}
  .ht-testo .hero__link{justify-content:center}

  /* nastro e piede: stampa piena, testo in negativo */
  .nastro span{color:#F3DFB8}
  .footer{background:var(--inc);color:#F3DFB8}
  .footer::before{content:none}
  .footer .label{color:#F3DFB8;opacity:.8}

  /* chi siamo */
  .chi__testo{border-color:var(--inc)}
  .capolettera::first-letter{color:var(--inc)}

  /* piccola bakery: listino a puntini, coppia di foto, timbro col numero */
  .a__testa{text-align:center}
  .prodotti{display:block;border:0;padding:0;margin:0 0 1.8rem;text-align:left}
  .prodotti .label{display:flex;margin-bottom:.4rem}
  .prodotti span:not(.label){display:flex;align-items:baseline;gap:.5rem;padding:.35rem 0;font-size:1.3rem}
  .prodotti span:not(.label)::after{content:"";flex:1;border-bottom:2px dotted rgba(122,58,54,.55);transform:translateY(-5px)}
  .a__grid{grid-template-columns:1fr 1fr!important;gap:.9rem}
  .a__e,.a__col p{display:none}
  .a__col{gap:.6rem;border:1.5px solid var(--inc);padding:5px 5px .7rem}
  .a__col .foto{--ar:3/4;box-shadow:none;border:0}
  .a__col h3{font-size:1rem;text-align:center;line-height:1.15}
  .a__col h3 em{display:block;font-weight:400;font-size:.9rem;margin-top:.15rem;color:var(--inc)}
  .a__piede{flex-direction:column;gap:0;border:0;margin-top:1.8rem;padding:0}
  .a__piede p{order:2;display:none}
  .a__piede .btn{width:auto;min-width:15rem;flex-direction:column;background:transparent;color:var(--inc);border:2px dashed var(--inc);outline:0;padding:.9rem 1.2rem;transform:rotate(-2deg);font-size:1.5rem;letter-spacing:.02em;text-transform:none;font-weight:800}
  .a__piede .btn::before{content:"Basta chiamare";display:block;font-family:var(--f-ui);font-weight:400;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;margin-bottom:.15rem}
  .lievita__frase,.lievita__frase em span{color:var(--inc)}

  /* servizi: griglia di icone stampate */
  .tessere{grid-template-columns:repeat(4,minmax(0,1fr))!important;border-top:1.5px solid var(--inc);border-left:1.5px solid var(--inc)}
  .tessera{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:.4rem;padding:.8rem .15rem .7rem!important;border:0!important;border-right:1.5px solid var(--inc)!important;border-bottom:1.5px solid var(--inc)!important;min-height:0}
  .tessera::before,.tessera__go{display:none}
  .tessera .pg--m{width:34px;height:34px}
  .tessera__t{font-family:var(--f-ui);font-weight:400;font-size:.74rem!important;line-height:1.15;text-align:center;letter-spacing:.02em}
  .tessera::after{background:var(--inc)}

  /* catering: niente timbro grande, il testo basta */
  .catering__arte{display:none}
  .sez--scura{border-block:2px solid var(--inc)}
  .sez--scura .label,.sez--scura .lead,.catering__titolo{color:var(--inc)}
  .sez--scura .btn--crema{background:var(--inc);color:#F3DFB8;border-color:var(--inc)}
  .sez--scura .btn--line{color:var(--inc);border-color:var(--inc)}

  /* loghi del piede ristampati nel colore del sacchetto */
  .footer__loghi img{filter:brightness(0) invert(.9) sepia(.4)}
}