/* Friggitoria San Giorgio — anteprima non ufficiale. L'idea: un banco sotto i
   portici; si compone il cartoccio, si mangia camminando, niente
   prenotazione. Il fritto che sale dall'olio in cima, il vapore, il
   cartoccio da riempire, la paranza in diagonale, l'olio, Sottoripa, i
   cartocci di foto, l'insegna al neon, gli archi dei portici, lo scontrino,
   la carta oleata. Bebas Neue e DM Mono; olio, ambra, nero, carta. */
@font-face{font-family:"Bebas Neue";src:url(../../font/bebas-neue-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../../font/dm-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --olio:#F2B33D;           /* nero sopra 10,9:1 */
  --ambra:#C8791D;
  --nero:#17120E;
  --carta:#FFFFFF;
  --paglia:#F4E7C8;         /* la carta del cartoccio */
  --f:var(--carta);--t:var(--nero);--m:#5E554C;--l:#E7E1D8;
  --a:#8A4E0A;--a-btn:var(--nero);--a-su:var(--olio);
  --font-t:"Bebas Neue",Impact,sans-serif;--font-b:"DM Mono",ui-monospace,monospace;
  --bordo:clamp(1rem,4.5vw,4rem);--r:0;--r-btn:0;
}
body{font-size:1rem;line-height:1.65}
h1,h2,h3{font-family:var(--font-t);font-weight:400;line-height:.9;letter-spacing:.01em}
h2{font-size:clamp(2.8rem,1.8rem + 4vw,5.6rem);margin-bottom:1rem}
section{padding:clamp(3.5rem,8vw,7rem) var(--bordo)}

.testata{background:var(--nero);color:var(--carta)}
.t-marchio{font:400 2rem/1 var(--font-t);color:var(--olio);letter-spacing:.03em}
#nav a{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}

/* ── 1. il fritto che sale dall'olio, e l'insegna in alto ─────────────────── */
.frigg .clip{--clip-h:calc(100svh - 5.4rem);align-items:start}
.frigg .clip::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,14,.9) 0%,rgba(23,18,14,.55) 34%,rgba(23,18,14,0) 62%),
  linear-gradient(0deg,rgba(23,18,14,.6),transparent 22%)}
.frigg .clip-parole{padding:clamp(1.5rem,4vw,3rem) var(--bordo);color:var(--carta)}
.clip-nome{display:inline-block;font:400 clamp(3.4rem,1.2rem + 8vw,9.5rem)/.82 var(--font-t);color:var(--nero);background:var(--olio);
  padding:.12em .2em .02em;letter-spacing:.015em}
.clip-frase{font:400 clamp(1rem,.9rem + .4vw,1.25rem)/1.5 var(--font-b);margin-top:1rem;max-width:38ch}
.clip-btn{display:inline-block;margin-top:1.3rem;font:400 .95rem var(--font-b);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  color:var(--olio);border:1.5px solid var(--olio);padding:.9rem 1.3rem;
  background:rgba(23,18,14,.72)   /* vuoto, il giallo spariva sul fritto (voce Cowork 26/10 (1)) */}
.clip-btn:hover{background:var(--olio);color:var(--nero)}

/* ── 2. il vapore sul vassoio ─────────────────────────────────────────────── */
.apertura{position:relative;min-height:min(86svh,54rem);padding:0;display:grid;align-items:end;overflow:hidden;background:var(--nero);color:var(--carta)}
.ap-foto{position:absolute;inset:0}
.ap-foto picture,.ap-foto img{width:100%;height:100%}
.ap-foto img{object-fit:cover;object-position:50% 60%}
.ap-vapore{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.apertura::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,18,14,.94) 0%,rgba(23,18,14,.8) 45%,rgba(23,18,14,.35) 75%,rgba(23,18,14,.1) 100%);pointer-events:none}
.ap-testo{position:relative;z-index:2;padding:0 var(--bordo) clamp(2.5rem,6vw,4.5rem);max-width:56rem}
.apertura h2{font-size:clamp(3.4rem,1.6rem + 6.6vw,8rem);line-height:.86;margin-bottom:1.2rem}
.riga{display:block}
.ap-sotto{max-width:46ch;color:#F3ECE3}

/* ── 3. il menu': il cartoccio da comporre ────────────────────────────────── */
.cartoccio{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);grid-template-areas:"testa testa" "listino cono" "listino conto" "listino svuota" "nota nota";
  gap:0 clamp(2rem,5vw,5rem);background:var(--olio);align-items:start}
.ct-testa{grid-area:testa;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 3rem;margin-bottom:2rem}
.ct-testa p{max-width:42ch}
.ct-listino{grid-area:listino;list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.ct-pezzo{width:100%;height:100%;display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;text-align:left;cursor:pointer;
  font:inherit;color:var(--nero);background:var(--carta);border:2px solid var(--nero);padding:.9rem 1rem;transition:transform .15s,background .2s}
.ct-pezzo:hover{transform:translateY(-2px)}
.ct-pezzo[aria-pressed="true"]{background:var(--nero);color:var(--olio)}
.ct-n{font:400 1.9rem/1 var(--font-t);letter-spacing:.02em}
.ct-p{font-size:.95rem;align-self:center}
.ct-d{grid-column:1/-1;font-size:.8rem;opacity:.85}
.ct-cono{grid-area:cono;position:relative;justify-self:center;width:min(100%,17rem);aspect-ratio:3/4;--pieno:0}
.ct-carta,.ct-pieno{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,52% 100%,48% 100%)}
.ct-carta{background:repeating-linear-gradient(115deg,var(--paglia) 0 22px,#efdcae 22px 25px),var(--paglia);
  box-shadow:inset 0 0 0 3px var(--nero)}
.ct-pieno{background:radial-gradient(circle at 30% 20%,#ffd98a 0 8%,transparent 9%) 0 0/34px 30px,
  radial-gradient(circle at 70% 60%,#e2a23c 0 10%,transparent 11%) 0 0/40px 36px,linear-gradient(0deg,#c8791d,#f2b33d);
  /* il fritto riempie il cartoccio dalla punta: un cono simile, piu' piccolo */
  transform-origin:50% 100%;transform:scale(var(--pieno));transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.ct-dentro{position:absolute;inset:6% 12% auto;list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem}
.ct-dentro li{font:400 1.05rem/1 var(--font-t);background:var(--nero);color:var(--olio);padding:.25rem .45rem;animation:cade .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes cade{from{transform:translateY(-2.5rem) rotate(-8deg);opacity:0}}
.ct-conto{grid-area:conto;text-align:center;font-size:1rem;margin-top:1rem;min-height:3.2em}
.ct-conto b{font:400 2.2rem/1 var(--font-t);display:block}
.ct-svuota{grid-area:svuota;justify-self:center;font:400 .85rem var(--font-b);text-transform:uppercase;letter-spacing:.06em;background:none;
  border:1.5px solid var(--nero);color:var(--nero);padding:.7rem 1rem;cursor:pointer;margin-top:.6rem}
.cartoccio .nota{grid-area:nota;color:var(--nero)}

/* ── 4. la paranza, in diagonale ──────────────────────────────────────────── */
.paranza{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(2rem,5vw,4rem);
  background:var(--nero);color:var(--carta);overflow:hidden;--m:#D9CFC4}
.pr-diag{clip-path:polygon(0 10%,100% 0,100% 90%,0 100%);transform:rotate(-3deg) scale(1.04)}
/* niente animazioni che muovono il cibo con lo scorrimento (voce Cowork 24/10 (3)): la foto sta ferma */
.pr-diag img{width:100%;aspect-ratio:4/3;object-fit:cover}
.paranza h2{color:var(--olio)}
.paranza p{max-width:40ch}
.mosso .pr-testo{opacity:0;transform:translateY(2rem) rotate(-2deg);transition:opacity .7s,transform .9s cubic-bezier(.2,.7,.2,1)}
.mosso .pr-testo.dentro{opacity:1;transform:none}

/* ── 5. l'olio: la frase e i numeri ───────────────────────────────────────── */
.olio{background:var(--ambra);color:var(--nero)}
.ol-frase{font:400 clamp(2.2rem,1.2rem + 3.8vw,4.8rem)/.95 var(--font-t);max-width:22ch;margin-bottom:2.6rem;letter-spacing:.01em}
.ol-numeri{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.ol-numeri div{border-top:3px solid var(--nero);padding-top:.7rem;display:grid}
.ol-numeri dt{font-size:.85rem;grid-row:2}
.ol-numeri dd{font:400 clamp(2.6rem,1.6rem + 3vw,4.4rem)/1 var(--font-t)}
.olio .nota{color:var(--nero)}

/* ── 6. Sottoripa ─────────────────────────────────────────────────────────── */
.storia{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.st-testo p+p{margin-top:.8rem}
.st-foto img{width:100%;aspect-ratio:4/5;object-fit:cover}
.st-foto figcaption{font-size:.75rem;color:var(--m);margin-top:.4rem}
.mosso .st-foto picture{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1)}
.mosso .st-foto.dentro picture{clip-path:inset(0)}

/* ── 7. dal banco: le foto a cartoccio ────────────────────────────────────── */
.dalbanco{background:var(--paglia)}
.cn-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,2vw,1.6rem);align-items:start}
.cn picture{clip-path:polygon(0 0,100% 0,62% 100%,38% 100%)}
.cn img{width:100%;aspect-ratio:3/4;object-fit:cover}
.cn figcaption{text-align:center;font-size:.85rem;margin-top:.5rem}
.cn-1,.cn-3{margin-top:3rem}
.mosso .cn{transition:transform .9s cubic-bezier(.3,1.3,.5,1),opacity .5s}
.mosso .cn:not(.dentro){opacity:0;transform:translateY(-3rem) rotate(-6deg)}
.mosso .cn-1{transition-delay:.1s}.mosso .cn-2{transition-delay:.2s}.mosso .cn-3{transition-delay:.3s}

/* ── 8. gli orari: l'insegna APERTO al neon ───────────────────────────────── */
.neon{background:var(--nero);color:var(--carta);text-align:center;--m:#D9CFC4}
.ne-insegna{display:inline-block;padding:.35em .6em .2em;border:4px solid #5a4630;border-radius:14px;margin-bottom:2.4rem}
.ne-insegna span{font:400 clamp(4rem,2rem + 10vw,11rem)/.9 var(--font-t);letter-spacing:.08em;color:#ffcf6e;
  text-shadow:0 0 6px #ffb02e,0 0 18px #ff9a1a,0 0 42px #ff7a00}
.mosso .ne-insegna:not(.dentro) span{color:#4a3a28;text-shadow:none}
.mosso .ne-insegna.dentro span{animation:accendi 1.6s steps(1) both}
@keyframes accendi{0%,12%,24%{color:#4a3a28;text-shadow:none}8%,18%,30%,100%{color:#ffcf6e;text-shadow:0 0 6px #ffb02e,0 0 18px #ff9a1a,0 0 42px #ff7a00}}
.ne-giorni{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;max-width:56rem;margin:0 auto 1.6rem}
.ne-giorni li{display:grid;gap:.15rem}
.ne-giorni span:first-child{font:400 1.7rem/1 var(--font-t);color:var(--olio);letter-spacing:.06em}
.ne-giorni span+span{font-size:.85rem}
.neon .avviso-orari{margin-inline:auto}

/* ── 9. dove: gli archi dei portici ───────────────────────────────────────── */
.portici{background:#F6F2EC}
.po-testa{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem 3rem;margin-bottom:1.6rem}
.po-testa p{max-width:40ch}
.po-disegno svg{width:100%;height:auto;display:block}
.po-archi path,.po-terra{fill:none;stroke:var(--nero);stroke-width:5;stroke-linejoin:round}
.po-archi path{stroke-dasharray:700}
.po-banco rect{fill:var(--olio);stroke:var(--nero);stroke-width:4}
.po-banco path{stroke:var(--nero);stroke-width:6}
.po-segno circle{fill:var(--ambra);stroke:var(--nero);stroke-width:4}
.po-segno path{stroke:var(--nero);stroke-width:4}
.mosso .po-archi path{transition:stroke-dashoffset 1.6s ease-in-out}
.mosso .po-disegno:not(.dentro) .po-archi path{stroke-dashoffset:700}
.mosso .po-archi path:nth-child(2){transition-delay:.12s}.mosso .po-archi path:nth-child(3){transition-delay:.24s}
.mosso .po-archi path:nth-child(4){transition-delay:.36s}.mosso .po-archi path:nth-child(5){transition-delay:.48s}
.mosso .po-archi path:nth-child(6){transition-delay:.6s}.mosso .po-archi path:nth-child(7){transition-delay:.72s}
.mosso .po-segno{transition:transform .6s cubic-bezier(.3,1.6,.5,1) 1.4s}
.mosso .po-disegno:not(.dentro) .po-segno{transform:translateY(-40px)}
.po-disegno figcaption{font-size:.85rem;color:var(--m);text-align:center;margin-top:.4rem}
.po-vicino{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:1rem 3rem;margin:2rem 0 1rem}
.po-vicino b{font:400 2.6rem/1 var(--font-t);display:block}
.po-vicino span{color:var(--m)}
.po-maps .maps{display:inline-block;padding:.4rem 0;color:var(--a)}
.gdpr{font-size:.82rem;color:var(--m);max-width:52ch}

/* ── 10. scriveteci: lo scontrino ─────────────────────────────────────────── */
.scontrino-s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2.5rem clamp(2rem,6vw,6rem);align-items:start;background:var(--nero);color:var(--carta);
  --m:#D9CFC4}
.scontrino-s a{color:var(--carta)}
.sc-testo p{max-width:40ch}
.sc-tel{margin-top:1rem}
.scontrino{position:relative;background:#FBFAF6;color:var(--nero);padding:2.2rem 1.6rem 2.4rem;gap:.9rem;transform:rotate(1.2deg);
  --a:var(--nero);--a-btn:var(--nero);--a-su:var(--olio);--m:#5E554C;--l-campo:#bdb5aa;--r:0;--r-btn:0;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 51% repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/16px 51% repeat-x;
  mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 51% repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/16px 51% repeat-x}
.sc-testa{text-align:center;font-size:.85rem;letter-spacing:.06em;padding-bottom:.8rem;border-bottom:1.5px dashed #9a9186}
.scontrino label{font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:.82rem}
.scontrino input,.scontrino textarea{font-family:var(--font-b);background:transparent;border:0;border-bottom:1.5px dashed #9a9186;border-radius:0;padding:.5rem 0}
.sc-totale{display:flex;justify-content:space-between;border-top:1.5px dashed #9a9186;border-bottom:1.5px dashed #9a9186;padding:.6rem 0;font-size:.9rem}
.scontrino .bk-ok{text-transform:none;letter-spacing:0;font-size:.82rem}
.scontrino .bk-ok a{color:var(--nero)}
.scontrino button{font:400 .95rem var(--font-b);text-transform:uppercase;letter-spacing:.06em;justify-self:stretch}

/* ── il piede: la carta oleata ────────────────────────────────────────────── */
.piede-frigg{padding:clamp(2.5rem,6vw,4rem) var(--bordo) 2rem;color:var(--nero);
  background:radial-gradient(ellipse 14% 22% at 18% 30%,rgba(200,121,29,.16),transparent 70%),
    radial-gradient(ellipse 10% 16% at 72% 64%,rgba(200,121,29,.13),transparent 70%),
    radial-gradient(ellipse 8% 12% at 44% 80%,rgba(200,121,29,.1),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 6px),#F1EADB;--m:#5E554C}
.pf-nome{font:400 clamp(3rem,1.4rem + 7vw,8rem)/.85 var(--font-t);letter-spacing:.02em;margin-bottom:1.4rem}
.pf-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;margin-bottom:1.4rem}
.pf-voci a{text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;padding:.35rem 0;color:var(--nero)}
.piede-frigg .legale a{color:var(--nero)}

@media(max-width:900px){
  .apertura::after{background:linear-gradient(0deg,rgba(23,18,14,.95) 0%,rgba(23,18,14,.82) 55%,rgba(23,18,14,.35) 80%,rgba(23,18,14,0) 100%)}
  .apertura .ferma-moto{top:1rem;bottom:auto}
  .cartoccio{grid-template-columns:1fr;grid-template-areas:"testa" "cono" "conto" "svuota" "listino" "nota"}
  .ct-cono{width:min(60%,12rem)}
  .paranza,.storia,.scontrino-s{grid-template-columns:1fr}
  .ol-numeri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cn-1,.cn-3{margin-top:1.5rem}
}
@media(max-width:520px){
  .ct-listino{grid-template-columns:1fr}
}