/* Da Gigino — stile del sito.
   Direzione: gigino-finale3. Sotto il forno (carta, pomodoro, legno), sopra la notte (notte, oro).
   Tutti i colori vengono dai token qui sotto. */

:root{
  --carta:#FFFBF3;
  --inchiostro:#241A14;
  --pomodoro:#B72A1B;
  --pomodoro-scuro:#8E1F13;
  --superficie:#F3E3CB;
  --legno:#6E4A2A;
  --notte:#16110E;
  --oro:#E7B24A;
  --su-notte:#F7EEDF;

  --car-titoli:'Bevan',Georgia,serif;
  --car-testo:'Source Serif 4',Georgia,serif;
  --car-scritta:'Kaushan Script',cursive;

  --t-piccolo:clamp(1rem,.96rem + .2vw,1.0625rem);
  --t-testo:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --t-grande:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --t-sezione:clamp(1.9rem,1.4rem + 2.4vw,3.2rem);
  --t-numero:clamp(2.4rem,1.4rem + 4.5vw,4.4rem);
  --t-neon:clamp(2rem,1.2rem + 4vw,3.6rem);
  --t-serata:clamp(1.6rem,1.2rem + 2.2vw,2.6rem);
  --t-titolo:clamp(3.1rem,1rem + 9vw,6.6rem);

  --margine:clamp(1rem,2.2vw,2rem);
  --larghezza:72rem;
  /* altezze delle due fasce fisse: la testata in alto e la barra dei contatti in basso.
     Stanno qui una volta sola perché la prima schermata e il fondo pagina le usano uguali. */
  --testata:3.5rem;
  --barra:3.25rem;
  --sezione:clamp(3.5rem,8vw,7.5rem);
  --raggio:0;
  --esce:cubic-bezier(.22,1,.36,1);

  /* la fascia di riggiole: motivo ripetuto, nessun testo sopra */
  --riggiole:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='48' height='48' fill='%23FFFBF3'/%3E%3Cpath d='M24 5 43 24 24 43 5 24Z' fill='none' stroke='%23B72A1B' stroke-width='2'/%3E%3Ccircle cx='24' cy='24' r='4' fill='%23E7B24A'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);font:var(--t-testo)/1.55 var(--car-testo);overflow-wrap:break-word}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,li,table{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--car-titoli);font-weight:400;text-wrap:balance}
h1{font-size:var(--t-titolo);line-height:.92;letter-spacing:-.02em}
h2{font-size:var(--t-sezione);line-height:1.03;letter-spacing:-.01em}
h3,h4{font-size:var(--t-grande);line-height:1.15}
p{max-width:62ch;text-wrap:pretty}
p+p{margin-top:.8em}
a{color:inherit;text-underline-offset:.22em}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pomodoro);outline-offset:3px}
::selection{background:var(--pomodoro);color:var(--carta)}
table{border-collapse:collapse;width:100%;max-width:34rem}
th,td{text-align:left;padding:.55rem .75rem .55rem 0;font-weight:400}
th{font-weight:600}

.contenitore{max-width:var(--larghezza);margin-inline:auto;padding-inline:var(--margine)}
section{padding-block:calc(var(--sezione)/2)}
.dopo-titolo{margin-top:clamp(1.5rem,3vw,2.5rem)}
.dato-tenue{color:var(--legno)}
.icona{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.prezzo{font-variant-numeric:tabular-nums;white-space:nowrap}

.bottone{display:inline-flex;align-items:center;gap:.5em;min-height:3rem;padding:.5rem 1.3rem;background:var(--pomodoro);color:var(--carta);border:2px solid var(--pomodoro);text-decoration:none;font-weight:600;transition:background-color 180ms ease,border-color 180ms ease,transform 140ms var(--esce)}
.bottone:hover{background:var(--pomodoro-scuro);border-color:var(--pomodoro-scuro)}
.bottone:active{transform:scale(.97)}
.bottone-filo{background:none;color:var(--carta);border-color:var(--carta)}
.bottone-filo:hover{background:var(--carta);color:var(--pomodoro);border-color:var(--carta)}

/* ---------- testata ---------- */
.testata{position:sticky;top:0;z-index:20;background:var(--carta)}
.testata-dentro{display:flex;flex-wrap:wrap;align-items:center;gap:0 .9rem;min-height:3.5rem;padding-block:.35rem}
.marchio{display:inline-flex;align-items:center;min-height:44px;margin-right:auto;font:400 1.35rem/1 var(--car-titoli);text-decoration:none;letter-spacing:-.01em}
.voci{display:flex;flex-wrap:wrap;gap:0 1.15rem}
.voci a{min-height:48px;display:inline-flex;align-items:center}
.testata .azione{min-height:44px;padding:.3rem 1rem;font-size:var(--t-piccolo)}
.panino,.chiudi{display:none}
/* telefoni stretti (320-360 px): la testata deve restare su una riga sola, se no ruba spazio alla prima schermata */
@media (max-width:22.5em){
  .testata-dentro{gap:0 .6rem}
  .marchio{font-size:1.15rem}
  .testata .azione{padding:.3rem .7rem}
}

@media (max-width:59.99em){
  .voci{order:3;width:100%;gap:0 1.5rem}
  .js .panino{display:grid;align-content:center;justify-items:center;gap:5px;width:48px;height:48px;padding:0;border:0;background:none;color:inherit}
  .panino span{display:block;width:24px;height:2px;background:currentColor}
  .js .voci{position:fixed;inset:0 0 0 auto;width:min(20rem,86vw);flex-direction:column;flex-wrap:nowrap;gap:0;padding:4.5rem var(--margine) 2rem;background:var(--carta);overflow-y:auto;visibility:hidden;transform:translateX(100%);transition:transform .2s var(--esce),visibility 0s .2s}
  .menu-aperto .voci{visibility:visible;transform:none;transition:transform .2s var(--esce)}
  .js .voci a{font:400 1.5rem/1.2 var(--car-titoli);min-height:56px}
  .js .chiudi{display:grid;place-items:center;position:absolute;top:.5rem;right:var(--margine);width:48px;height:48px;border:0;background:none;color:inherit;font-size:2rem}
  .menu-aperto,.menu-aperto body{overflow:hidden}}
@media (prefers-reduced-motion:reduce){.js .voci,.menu-aperto .voci{transition:none}}

/* ---------- apertura: l'insegna ---------- */
.apertura{background:var(--pomodoro);color:var(--carta);display:grid;grid-template-rows:1fr auto;padding-block:clamp(1.25rem,4vw,2.5rem) 0}
@media (max-width:59.99em){.apertura{min-height:calc(100svh - var(--testata) - var(--barra) - env(safe-area-inset-bottom))}}
.apertura-dentro{display:grid;gap:clamp(1.25rem,3.5vw,2.5rem);align-content:center}
/* la foto del forno: la bocca del forno, con la cornice chiara come le foto appese in pizzeria */
.apertura-foto{margin:0;display:grid}
.apertura-foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--notte);border:4px solid var(--carta);border-radius:50% 50% 0 0/26% 26% 0 0}
.apertura-testo{display:grid;gap:.35rem}
/* da telefono la prima schermata deve entrare tutta fra la testata e la barra: foto a fascia,
   locandina compatta, così l'ultimo blocco non finisce dietro la barra */
@media (max-width:59.99em){
  .apertura{padding-top:clamp(.5rem,1.5vw,.9rem)}
  .apertura-dentro{gap:clamp(.75rem,2.2vw,1.15rem)}
  .apertura-foto img{aspect-ratio:16/7}
  .apertura h1{margin-bottom:.25rem}
  /* la locandina delle serate resta solo da computer: da telefono la prima schermata deve entrare
     tutta fra la testata e la barra dei contatti, e le stesse serate sono nella sezione qui sotto */
  .apertura-dentro .locandina{display:none}
  .apertura .orari-brevi{margin-bottom:.25rem}
  /* l'arco chiude la prima schermata: da telefono un po' più basso, per non sfondare lo schermo */
  .arco{margin-top:clamp(1rem,2.5vw,1.75rem);height:clamp(1.75rem,4.5vw,3rem)}
}
.apertura h1{margin-bottom:.5rem}
.apertura .sotto{font-size:var(--t-testo);max-width:30ch}
.apertura .stato{font-weight:600}
.apertura .orari-brevi{font-size:var(--t-piccolo);max-width:34ch}
.azioni{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.apertura .bottone{background:var(--carta);color:var(--pomodoro);border-color:var(--carta)}
.apertura .bottone:hover{background:var(--superficie);border-color:var(--superficie);color:var(--pomodoro-scuro)}
.locandina{background:var(--carta);color:var(--pomodoro);padding:clamp(1.25rem,3vw,1.75rem);display:grid;gap:.6rem;max-width:26rem}
.locandina-titolo{font-family:var(--car-titoli);font-size:var(--t-grande);color:var(--inchiostro);line-height:1.15}
.locandina ul{display:grid;gap:.15rem}
.locandina li{font-family:var(--car-titoli);font-size:var(--t-grande);line-height:1.2}
.locandina .nota{font-size:var(--t-piccolo);color:var(--legno)}
.arco{background:var(--carta);width:min(26rem,82%);height:clamp(2.5rem,7vw,4.5rem);margin:clamp(2rem,5vw,3rem) auto 0;border-radius:50% 50% 0 0/100% 100% 0 0}
@media (min-width:60em){
  .apertura-dentro{grid-template-columns:minmax(0,1.05fr) minmax(20rem,.95fr);grid-template-areas:"testo foto" "testo locandina";align-items:center;gap:clamp(1.5rem,3vw,2.25rem) clamp(2rem,5vw,4rem)}
  .apertura-testo{grid-area:testo}
  .apertura-foto{grid-area:foto;align-self:end}
  .apertura-dentro .locandina{grid-area:locandina}
}

/* ---------- il menu ---------- */
.menu-sezione{background:var(--carta)}
.menu-cornice{border:3px double var(--inchiostro);outline:2px solid var(--inchiostro);outline-offset:-11px;padding:clamp(1.25rem,4vw,3rem);margin-top:clamp(2rem,5vw,3.5rem)}
.menu-gruppi{display:grid;gap:clamp(1.75rem,4vw,2.5rem)}
.gruppo h3{margin-bottom:.6rem}
.piatti li{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding-block:.5rem}
.piatti .nome{font-weight:600}
.piatti .prezzo{grid-column:2;grid-row:1;font-weight:600}
.piatti p{grid-column:1/-1;grid-row:2;font-size:var(--t-piccolo);color:var(--legno);max-width:54ch}
@media (min-width:60em){.menu-gruppi{grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3rem) clamp(2.5rem,5vw,4.5rem)}}

.piatto{display:grid;gap:clamp(1.5rem,4vw,2.5rem);align-items:center;margin-top:clamp(1.5rem,3vw,2.5rem)}
.piatto-arco{background:var(--pomodoro);color:var(--carta);width:min(20rem,90%);aspect-ratio:1/1.1;border-radius:50% 50% 0 0/58% 58% 0 0;display:grid;place-content:center;justify-items:center;gap:.25rem;text-align:center;padding:1.5rem}
.piatto-arco .prezzo{font-family:var(--car-titoli);font-size:var(--t-numero);line-height:1}
.piatto-arco .riga{font-size:var(--t-piccolo)}
.piatto-testo{display:grid;gap:.6rem}
.piatto-testo h3{font-size:var(--t-sezione)}
.piatto-testo .ingredienti{color:var(--legno)}
@media (min-width:48em){.piatto{grid-template-columns:minmax(0,2fr) minmax(22rem,3fr)}}
.note-menu{margin-top:clamp(1.5rem,3vw,2.5rem);display:grid;gap:.5rem;max-width:46rem}
.note-menu li{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start}
.note-menu .icona{margin-top:.35em;color:var(--pomodoro)}

/* ---------- la storia ---------- */
.storia{background:var(--superficie)}
.storia-dentro{display:grid;gap:clamp(1.5rem,4vw,3rem)}
.storia blockquote{max-width:44ch;font-size:var(--t-grande);line-height:1.45}
.storia blockquote p{max-width:none}
.firma{font-family:var(--car-scritta);font-size:var(--t-grande);color:var(--pomodoro)}
.numeri{display:grid;gap:clamp(1.25rem,3vw,2rem)}
.numeri li{display:grid;gap:.15rem}
.numeri .numero{font-family:var(--car-titoli);font-size:var(--t-numero);line-height:1;color:var(--inchiostro)}
.numeri .etichetta{font-size:var(--t-piccolo);color:var(--legno)}
@media (min-width:60em){
  .storia-dentro{grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr);align-items:start}
  .numeri{grid-template-columns:1fr;border-left:3px solid var(--legno);padding-left:clamp(1.5rem,3vw,2.5rem)}
}

/* ---------- la notte ---------- */
.porta{background:var(--notte);color:var(--oro);width:min(22rem,72%);height:clamp(3rem,10vw,5.5rem);margin:clamp(2rem,5vw,3rem) auto 0;border-radius:50% 50% 0 0/100% 100% 0 0;display:grid;place-items:center}
.porta .icona{width:2rem;height:2rem}
.notte{--fondo:var(--notte);--inchiostro:var(--su-notte);--secondario:var(--oro);background:var(--notte);color:var(--su-notte);padding-block:calc(var(--sezione)/2)}
.notte h2{color:var(--oro)}
.notte-dentro{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
.neon{font-family:var(--car-scritta);font-size:var(--t-neon);line-height:1.2;color:var(--su-notte);max-width:22ch;/* siti-ignora: il bagliore del neon, l'unico del sito */ text-shadow:0 0 .04em var(--su-notte),0 0 .18em var(--oro),0 0 .45em var(--oro)}
@media (prefers-reduced-motion:no-preference){
  .js .neon{opacity:.15;transition:opacity 200ms ease}
  .js .neon.acceso{animation:accende 1.6s steps(1) both}
}
@keyframes accende{0%{opacity:.15}12%{opacity:1}20%{opacity:.4}28%,100%{opacity:1}}
.serate{display:grid;gap:clamp(1rem,2.5vw,1.5rem)}
.serate li{display:grid;gap:.2rem}
.serate .giorno{font-size:var(--t-piccolo);color:var(--oro)}
.serate .nome-serata{font-family:var(--car-titoli);font-size:var(--t-serata);line-height:1.05;color:var(--su-notte);overflow-wrap:anywhere}
.scheda-notte{background:var(--notte);color:var(--su-notte);border:3px double var(--oro);padding:clamp(1.25rem,4vw,2.5rem);display:grid;gap:.75rem;max-width:44rem}
.scheda-notte h3{color:var(--oro)}
.regole{display:grid;gap:.4rem;font-size:var(--t-piccolo)}
.notte .bottone{background:var(--oro);border-color:var(--oro);color:var(--notte)}
.notte .bottone:hover{background:var(--su-notte);border-color:var(--su-notte);color:var(--notte)}
.notte :focus-visible,.apertura :focus-visible{outline-color:var(--oro)}
@media (min-width:60em){.notte-dentro{grid-template-columns:minmax(0,1fr) minmax(24rem,1fr);align-items:start}}

/* ---------- feste ---------- */
.feste{background:var(--carta)}
.menu-festa{display:grid;gap:clamp(1.25rem,3vw,2rem);margin-top:clamp(1.5rem,3vw,2.5rem)}
.menu-festa li{display:grid;grid-template-columns:1fr auto;column-gap:1.5rem;align-items:baseline;padding-block:.75rem}
.menu-festa .prezzo{font-family:var(--car-titoli);font-size:var(--t-grande);grid-column:2;grid-row:1}
.menu-festa p{grid-column:1/-1;grid-row:2;font-size:var(--t-piccolo);color:var(--legno);max-width:52ch}
@media (min-width:60em){.menu-festa{grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}}

/* ---------- orari ---------- */
.orari{background:var(--superficie)}
.orari-dentro{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
.chiuso{font-weight:600}
@media (min-width:60em){.orari-dentro{grid-template-columns:minmax(0,1fr) minmax(20rem,.8fr);align-items:start}}

/* ---------- dove siamo ---------- */
.riggiole{height:clamp(1.75rem,4vw,2.5rem);background:var(--riggiole) repeat-x center/auto 100%}
.dove{background:var(--carta)}
.dove-dentro{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
.indirizzo{font-size:var(--t-grande);font-family:var(--car-titoli);line-height:1.25}
.mappa{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--superficie);border:3px double var(--inchiostro)}
@media (min-width:60em){.mappa{aspect-ratio:16/10}}
.mappa iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mappa-facciata{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(90%,24rem);display:grid;justify-items:center;gap:.6rem;padding:1rem 1.25rem;text-align:center;background:var(--carta);color:var(--inchiostro)}
.mappa-nota{font-size:var(--t-piccolo);color:var(--legno);max-width:none}
@media (min-width:60em){.dove-dentro{grid-template-columns:minmax(0,1fr) minmax(22rem,1fr);align-items:start}}

/* ---------- piè di pagina ---------- */
.pie{background:var(--notte);color:var(--su-notte);padding-block:calc(var(--sezione)/2)}
.pie-nome{font-family:var(--car-titoli);font-size:var(--t-titolo);line-height:.92;color:var(--oro);letter-spacing:-.02em}
.pie-dentro{display:grid;gap:clamp(1.25rem,3vw,2rem)}
.pie a{color:var(--su-notte)}
.pie .dati{display:grid;gap:.4rem;font-size:var(--t-piccolo)}
.pie .riga-social{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center}
.pie .riga-social a{display:inline-flex;align-items:center;gap:.45em;min-height:44px}

/* ---------- barra delle azioni (telefono) ---------- */
.barra-azioni{position:fixed;inset:auto 0 0;display:grid;grid-template-columns:repeat(3,1fr);background:var(--inchiostro);padding-bottom:env(safe-area-inset-bottom);z-index:10}
.barra-azioni a{min-height:var(--barra);display:grid;place-items:center;color:var(--carta);font-weight:600;text-decoration:none;font-size:var(--t-piccolo);text-align:center;padding-inline:.25rem}
body{padding-bottom:calc(var(--barra) + env(safe-area-inset-bottom))}
@media (min-width:60em){
  .barra-azioni{display:none}body{padding-bottom:0}
  .pie-dentro{grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr);align-items:end}
  .pie .dati{grid-column:2}
  .pie .riga-social{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
  .bottone{transition:background-color 180ms ease}
  .bottone:active{transform:none}
}