/* Il Ferracavallo - foglio di stile */

/* ==========================================================================
   CARATTERI — ospitati qui dentro, non presi da Google.
   Tre motivi, in ordine di importanza:
   1. Il carattere di Google Fonts si scarica dai server di Google, e per
      farlo il browser del visitatore gli manda il proprio indirizzo IP.
      Senza consenso e' un trasferimento di dati che il titolare del sito
      non puo' giustificare. Ospitandoli qui, il problema non esiste.
   2. Zero richieste esterne: niente DNS, niente handshake, niente attesa.
   3. Il sito funziona anche se Google e' irraggiungibile.
   Totale: 180 KB per otto tagli. Si scaricano una volta e restano in cache.
   ========================================================================== */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;
  src:url("font/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;
  src:url("font/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url("font/work-sans-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/work-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("font/work-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Work Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("font/work-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/space-mono-latin-400-normal.woff2") format("woff2")}

/* ==========================================================================
   IL FERRACAVALLO — sistema visivo
   --------------------------------------------------------------------------
   Tesi: in una trattoria di paese il tavolo e' vestito di carta. Sopra la
   carta si scrive a mano il piatto del giorno, sulla carta si fa il conto a
   matita nell'angolo, e sulla carta resta l'anello lasciato dal bicchiere.
   Tutto il sistema nasce da li': fondo di carta, inchiostro che non e' nero
   ma il blu della biro, e un solo rosso — quello del vino sulla tovaglia.

   L'unico oggetto scuro di tutta la pagina e' la lavagna. Compare due volte:
   in apertura e nella banda. Serve a dare il contrasto che la carta non ha.

   Superfici   Carta #f4f0e6 -> Tovaglia #ece7d9 -> Piega #e2dcca
               Lavagna #1c2230 (unica superficie scura, usata due volte)
   Testo       Inchiostro #1c2230 / Grafite #5a6272 / Matita #646a78
               (nessuno sotto 4,5:1 sulla carta — verificato, non stimato)
   Azione      Vino #8a2436 — solo il bottone principale e lo stato attivo
   Forme       Nessun angolo tondo oltre i 3px. La carta non ha raggi.
   Scala       11 · 13 · 15 · 17 · 21 · 28 · 40 · 58 · 92
   Ritmo       base 4px · gap sezione 128px · frame 1120px
   Elevazione  nessuna. Le cose stanno sulla carta, non sopra la carta.
               L'unica separazione consentita e' un capello da 1px.
   ========================================================================== */

:root{
  /* — Superfici: tre di carta, una di ardesia. Mai una quinta — */
  --carta:    #f4f0e6;
  --tovaglia: #ece7d9;
  --piega:    #e2dcca;
  --lavagna:  #1c2230;

  /* — Testo: neutri con dentro il blu dell'inchiostro, mai grigi puri.
       Nessuno dei tre scende sotto 4,5:1 sulla carta: le etichette sono
       piccole e in maiuscolo, e sono proprio quelle che si perdono. — */
  --inchiostro: #1c2230;   /* 13,97:1 sulla carta */
  --grafite:    #5a6272;   /*  5,39:1 */
  --matita:     #646a78;   /*  4,76:1 — piu' chiaro di cosi' non si legge */
  --gesso:      #e8e4d8;   /* 12,51:1 sulla lavagna */

  /* — Azione: l'anello di vino. Un solo posto, un solo scopo — */
  --vino:       #8a2436;
  --vino-caldo: #a83046;
  --vino-fioco: rgba(138, 36, 54, 0.10);

  /* — Bordi: capelli, non linee — */
  --capello:       rgba(28, 34, 48, 0.13);
  --capello-fioco: rgba(28, 34, 48, 0.065);
  --capello-gesso: rgba(232, 228, 216, 0.14);

  /* — Caratteri — */
  --display:  "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --testo:    "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --etichetta:"Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* — Scala: salti larghi, contrasto da menu scritto a mano — */
  --t11:11px; --t13:13px; --t15:15px; --t17:17px;
  --t21:21px; --t28:28px; --t40:40px; --t58:58px; --t92:92px;

  /* — Ritmo: base 4 — */
  --s4:4px;  --s8:8px;   --s12:12px; --s16:16px; --s24:24px;
  --s32:32px; --s40:40px; --s56:56px; --s72:72px; --s96:96px; --s128:128px;

  --frame:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:var(--t15);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Il display e' Fraunces e basta: mai per il corpo, mai per l'interfaccia. */
h1,h2,.display{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  letter-spacing:-0.025em;
  line-height:1.06;
  text-wrap:balance;
}

:focus-visible{outline:2px solid var(--vino);outline-offset:3px}

/* ---------- Impalcatura ---------- */
.frame{width:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--s24)}
.pagina{display:flex;flex-direction:column;gap:var(--s128);padding-block:var(--s96) var(--s96)}
.sezione{display:flex;flex-direction:column;gap:var(--s40)}

/* ---------- Etichetta: mono minuscola, spaziata, mai dentro un chip ---------- */
.etichetta{
  font-family:var(--etichetta);
  font-size:var(--t11);
  font-weight:400;
  line-height:1;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--matita);
}
.etichetta--vino{color:var(--vino)}
.etichetta--gesso{color:rgba(232,228,216,.72)}

/* ---------- Bottoni: squadrati. La carta non ha angoli tondi ---------- */
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  border:1px solid transparent;border-radius:2px;
  padding:14px var(--s24);
  font-family:var(--testo);font-size:var(--t13);font-weight:600;
  letter-spacing:0.02em;line-height:1;cursor:pointer;background:none;
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 260ms cubic-bezier(.16,.8,.24,1);
}
.bottone--vino{background:var(--vino);color:var(--carta)}
.bottone--vino:hover{background:var(--vino-caldo);transform:translateY(-2px)}
.bottone--vino:active{transform:translateY(0)}
.bottone--filo{border-color:var(--capello);color:var(--inchiostro)}
.bottone--filo:hover{border-color:var(--inchiostro)}
.bottone--piccolo{padding:9px var(--s16);font-size:var(--t11)}
/* Il terziario non e' un bottone: e' testo con una freccia. */
.fantasma{display:inline-flex;align-items:center;gap:var(--s8);font-size:var(--t13);
  font-weight:500;color:var(--grafite);transition:color 200ms ease}
.fantasma::after{content:"→";display:inline-block;transition:transform 260ms cubic-bezier(.16,.8,.24,1)}
.fantasma:hover{color:var(--inchiostro)}
.fantasma:hover::after{transform:translateX(6px)}

/* ---------- Navigazione: a filo, senza barra, senza fondo ---------- */
.nav{position:absolute;inset:0 0 auto 0;z-index:3;padding-block:var(--s32)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s24)}
.marchio{font-family:var(--display);font-size:var(--t21);letter-spacing:-0.01em;color:var(--inchiostro)}
.nav__links{display:flex;align-items:center;gap:var(--s32);font-size:var(--t13);color:var(--grafite)}
.nav__links a{transition:color 200ms ease}
.nav__links a:hover{color:var(--inchiostro)}

/* ---------- Apertura ----------
   Due colonne asimmetriche: a sinistra la carta, a destra la lavagna.
   La lavagna e' l'unico oggetto scuro dell'apertura, e regge tutto il contrasto. */
.apertura{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden}
.apertura__farina{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.apertura__griglia{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
  align-items:center;gap:var(--s56);padding-block:var(--s128) var(--s96)}
@media (min-width:960px){.apertura__griglia{grid-template-columns:1.15fr .85fr;gap:var(--s72)}}
.apertura__testo{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24)}
.apertura h1{font-size:clamp(44px,8.6vw,var(--t92));max-width:11ch}
.apertura h1 em{font-style:italic;color:var(--vino)}
.apertura__corpo{max-width:44ch;font-size:var(--t17);font-weight:300;color:var(--grafite)}
.apertura__azioni{display:flex;flex-wrap:wrap;gap:var(--s12);padding-top:var(--s8)}

/* Il voto: numero in Fraunces, non una stellina */
.voto{display:flex;align-items:center;gap:var(--s16);margin-top:var(--s16);
  padding-top:var(--s24);border-top:1px solid var(--capello-fioco);max-width:34rem}
.voto__num{font-family:var(--display);font-size:var(--t58);line-height:.85;
  letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.voto__testo{font-size:var(--t13);color:var(--grafite);line-height:1.55}
.voto__testo b{color:var(--inchiostro);font-weight:600}

/* ---------- La lavagna ---------- */
.lavagna{background:var(--lavagna);color:var(--gesso);border-radius:3px;padding:var(--s32) var(--s24);
  display:flex;flex-direction:column;gap:var(--s16);
  background-image:radial-gradient(70% 50% at 30% 0%,rgba(232,228,216,.055) 0%,rgba(28,34,48,0) 70%)}
.lavagna__cima{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s12);
  padding-bottom:var(--s16);border-bottom:1px solid var(--capello-gesso)}
.lavagna__titolo{font-family:var(--display);font-size:var(--t21);color:var(--gesso);letter-spacing:-0.01em}
.lavagna ul{display:flex;flex-direction:column}
.lavagna li{display:flex;align-items:baseline;gap:var(--s12);padding-block:var(--s12);
  border-bottom:1px solid rgba(232,228,216,.07);font-size:var(--t13)}
.lavagna li:last-child{border-bottom:0}
.lavagna__nome{color:var(--gesso)}
.lavagna__punti{flex:1;border-bottom:1px dotted rgba(232,228,216,.22);transform:translateY(-.28rem)}
.lavagna__prezzo{font-family:var(--etichetta);font-size:var(--t13);color:rgba(232,228,216,.82);
  font-variant-numeric:tabular-nums;flex:none}
.lavagna__piede{font-family:var(--etichetta);font-size:var(--t11);letter-spacing:.1em;
  color:rgba(232,228,216,.66);padding-top:var(--s8)}

/* ---------- Filo dei piatti ---------- */
.filo{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s40);padding-block:var(--s24);
  border-block:1px solid var(--capello-fioco);font-family:var(--etichetta);font-size:var(--t11);
  letter-spacing:.16em;text-transform:uppercase;color:var(--matita)}

/* ---------- Testata di sezione ---------- */
.testata{display:flex;flex-direction:column;gap:var(--s16);max-width:620px}
.testata h2{font-size:clamp(30px,5vw,var(--t58))}
.testata p{font-size:var(--t15);color:var(--grafite);max-width:56ch}

/* ---------- Blocco a due colonne ---------- */
.blocco{display:grid;grid-template-columns:1fr;gap:var(--s40);align-items:start}
@media (min-width:940px){.blocco{grid-template-columns:1fr 1fr;gap:var(--s72)}}
.blocco p{color:var(--grafite);max-width:52ch}
.blocco p + p{margin-top:var(--s16)}
.blocco p strong{color:var(--inchiostro);font-weight:600}

/* Il segnaposto foto e' progettato, non un rettangolo tratteggiato */
.posafoto{position:relative;aspect-ratio:4/5;background:var(--tovaglia);border-radius:3px;
  border:1px solid var(--capello-fioco);display:grid;place-items:center;overflow:hidden}
.posafoto::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(46deg,rgba(28,34,48,.028) 0 1px,transparent 1px 11px)}
.posafoto span{position:relative;font-family:var(--etichetta);font-size:var(--t11);
  letter-spacing:.16em;text-transform:uppercase;color:var(--matita);text-align:center;padding:var(--s24)}

/* ---------- Avviso segnaposto ---------- */
.avviso{border-left:2px solid var(--vino);background:var(--vino-fioco);
  padding:var(--s16) var(--s24);font-size:var(--t13);color:var(--inchiostro);max-width:70ch}
.avviso b{color:var(--vino);font-weight:600}

/* ---------- Menu a schede, zero JavaScript ---------- */
.schede{display:flex;flex-direction:column;gap:var(--s32)}
.schede input{position:absolute;opacity:0;pointer-events:none}
.linguette{display:flex;flex-wrap:wrap;gap:var(--s4);border-bottom:1px solid var(--capello-fioco);padding-bottom:var(--s12)}
.linguette label{font-family:var(--etichetta);font-size:var(--t11);letter-spacing:.14em;
  text-transform:uppercase;padding:11px var(--s16);border-radius:2px;cursor:pointer;
  color:var(--matita);user-select:none;transition:color 200ms ease,background-color 200ms ease}
.linguette label:hover{color:var(--inchiostro)}
.pannello{display:none}
#t1:checked~.linguette label[for=t1],#t2:checked~.linguette label[for=t2],
#t3:checked~.linguette label[for=t3],#t4:checked~.linguette label[for=t4]
  {background:var(--vino);color:var(--carta)}
#t1:checked~#p1,#t2:checked~#p2,#t3:checked~#p3,#t4:checked~#p4{display:block}
.schede input:focus-visible~.linguette label[for]{outline:2px solid var(--vino);outline-offset:2px}

/* La riga del piatto e' un conto fatto a mano: nome, puntini, prezzo allineato */
.piatti{display:grid;grid-template-columns:1fr;gap:var(--s24)}
@media (min-width:820px){.piatti{grid-template-columns:1fr 1fr;gap:var(--s24) var(--s56)}}
.piatto__riga{display:flex;align-items:baseline;gap:var(--s12)}
.piatto__nome{font-family:var(--display);font-size:var(--t17);letter-spacing:-0.01em}
.piatto__punti{flex:1;border-bottom:1px dotted var(--capello);transform:translateY(-.3rem)}
.piatto__prezzo{font-family:var(--etichetta);font-size:var(--t15);color:var(--vino);
  font-variant-numeric:tabular-nums;flex:none}
.piatto__nota{font-size:var(--t11);color:var(--matita);margin-top:var(--s4);
  font-family:var(--etichetta);letter-spacing:.06em}

/* ---------- Passi: la cifra e' la grafica, nessuna scheda ---------- */
.passi{display:grid;grid-template-columns:1fr;gap:var(--s56)}
@media (min-width:820px){.passi{grid-template-columns:repeat(3,1fr);gap:var(--s40)}}
.passo{display:flex;flex-direction:column;gap:var(--s12)}
.passo__cifra{font-family:var(--display);font-size:var(--t58);line-height:.85;
  letter-spacing:-0.05em;color:var(--vino);font-variant-numeric:tabular-nums}
.passo h3{font-family:var(--testo);font-size:var(--t17);font-weight:600;letter-spacing:-0.01em}
.passo p{font-size:var(--t13);color:var(--grafite);max-width:34ch}
.passo a{border-bottom:1px solid var(--capello);transition:border-color 200ms ease}
.passo a:hover{border-color:var(--vino)}

/* ---------- Domande ---------- */
details{border-bottom:1px solid var(--capello-fioco);padding-block:var(--s16)}
summary{font-size:var(--t15);font-weight:500;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:var(--s16);align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--etichetta);font-size:var(--t17);color:var(--vino);flex:none;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--grafite);margin-top:var(--s12);max-width:62ch;font-size:var(--t13)}

/* ---------- Orari ---------- */
.visita{display:grid;grid-template-columns:1fr;gap:var(--s56)}
@media (min-width:820px){.visita{grid-template-columns:1fr 1fr;gap:var(--s72)}}
.orari{display:flex;flex-direction:column}
.orari li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s16);
  padding-block:var(--s12);border-bottom:1px solid var(--capello-fioco);
  font-size:var(--t13);color:var(--grafite)}
.orari li[data-oggi]{color:var(--inchiostro)}
.orari li[data-oggi] .orari__val{color:var(--vino)}
.orari__val{font-family:var(--etichetta);font-size:var(--t11);color:var(--matita);font-variant-numeric:tabular-nums}
.recapiti{display:flex;flex-direction:column;gap:var(--s24)}
.recapito{display:flex;flex-direction:column;gap:var(--s4)}
.recapito__v{font-size:var(--t15);line-height:1.55}
.recapito__v a{border-bottom:1px solid var(--capello);padding-bottom:1px;transition:border-color 200ms ease}
.recapito__v a:hover{border-color:var(--vino)}

/* ---------- Banda: l'unico momento che rompe il frame ---------- */
.banda{position:relative;width:100%;background:var(--lavagna);color:var(--gesso);
  padding-block:var(--s96);overflow:hidden}
.banda::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 60% at 78% 20%,rgba(168,48,70,.18) 0%,rgba(28,34,48,0) 68%)}
.banda .frame{position:relative}
.banda h2{font-size:clamp(30px,5.4vw,var(--t58));color:var(--gesso);max-width:17ch}
.banda h2 em{font-style:italic;color:var(--vino-caldo)}
.banda p{color:rgba(232,228,216,.78);max-width:48ch;margin-top:var(--s16);font-size:var(--t15)}
.banda .bottone--filo{border-color:var(--capello-gesso);color:var(--gesso)}
.banda .bottone--filo:hover{border-color:var(--gesso)}

/* ---------- Chiusura ---------- */
.chiusura{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);
  padding-block:var(--s96) var(--s40);border-top:1px solid var(--capello-fioco)}
.chiusura h2{font-size:clamp(34px,7vw,var(--t92));max-width:12ch}
.chiusura h2 em{font-style:italic;color:var(--vino)}
.piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s16);
  padding-top:var(--s24);border-top:1px solid var(--capello-fioco);
  font-family:var(--etichetta);font-size:var(--t11);letter-spacing:.1em;color:var(--matita)}

/* ---------- Comparse ----------
   Salita lenta e messa a fuoco, mai un rimbalzo. Lo stato nascosto lo applica
   solo `html.anima`: senza JS, o a movimento spento, la pagina resta leggibile. */
.rivela{transition:opacity 900ms cubic-bezier(.16,.8,.24,1),
                  transform 900ms cubic-bezier(.16,.8,.24,1),
                  filter 900ms cubic-bezier(.16,.8,.24,1);
        transition-delay:var(--rit,0ms);will-change:opacity,transform}
html.anima .rivela{opacity:0;transform:translateY(26px);filter:blur(6px)}
html.anima .rivela.dentro{opacity:1;transform:none;filter:none}

/* A movimento spento non si muove niente, nemmeno le micro-interazioni.
   Chi ha "riduci movimento" nelle impostazioni non prende la classe `anima`,
   e per lui la pagina e' ferma e intera fin dal primo disegno. */
html:not(.anima) *,html:not(.anima) *::before,html:not(.anima) *::after{
  animation:none !important;transition:none !important}

/* ---------- Chiamata fissa sul telefono ---------- */
.chiama-fisso{display:none}
@media (max-width:760px){
  .nav__links{display:none}
  body{padding-bottom:4.4rem}
  .chiama-fisso{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--vino);color:var(--carta);text-align:center;
    font-family:var(--testo);font-size:var(--t15);font-weight:600;padding:var(--s16)}
  .pagina{gap:var(--s96);padding-block:var(--s96) var(--s72)}
  .apertura{min-height:auto}
  .apertura__griglia{padding-block:var(--s96) var(--s72)}
}