/* Osteria Mezzavia, vestito grafico. Derivato da trattoria-del-corso (famiglia 2,
   "chiaro caldo, crema e carta", scelta di Riccardo il 06/08/2026) e ridisegnato su
   un'identita' diversa: Instrument Serif al posto di Playfair, Source Sans 3 al posto
   di Inter, verde profondo al posto dell'ocra. I due locali finti non devono sembrare
   lo stesso posto con due nomi.

   Ogni file di carattere e' servito da qui, mai da una rete esterna.
   I due sottoinsiemi (latin e latin-ext) vanno dichiarati ENTRAMBI con unicode-range:
   i file base non contengono le lettere polacche (l con barra, a e e con codina, s z c
   con accento) e senza la riga latin-ext il browser le prende da un carattere di
   sistema, cambiando forma delle lettere in mezzo alla parola. Verificato con fontTools
   il 13/08/2026: base 206-231 glifi senza le polacche, ext 123-563 glifi con le polacche. */

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/source-sans-3-latin-ext-400-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/source-sans-3-latin-400-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/source-sans-3-latin-ext-400-italic.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/source-sans-3-latin-400-italic.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/source-sans-3-latin-ext-600-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/source-sans-3-latin-600-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* Contrasti misurati il 13/08/2026 su fondo #f6f2ea e su fascia #e8e2d3, soglia 4,5:
     fg 14,13 / 12,20   muted 5,86 / 5,07   faint 5,36 / 4,63   verde 6,92 / 5,98. */
  --bg:#f6f2ea; --fg:#1f2420; --muted:#55605a; --faint:#5b665f;
  --line:rgba(31,36,32,.14); --rule:rgba(31,36,32,.20); --gold:#2c5c43;
  --panna:#e8e2d3;
  --sans:'Source Sans 3',"Liberation Sans",Arial,sans-serif;
  --serif:'Instrument Serif',"Liberation Serif",Georgia,serif;
}
*{box-sizing:border-box}
/* clip e non hidden: hidden fa di body un contenitore di scorrimento
   e la barra categorie in sticky smette di restare in alto. */
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.5}
main{max-width:680px;margin:0 auto;padding:0 26px 60px}

/* testata: il nome e' un logo SVG di soli tracciati (assets/img/logo-wordmark.svg,
   generato dall'Instrument Serif del progetto), non testo scritto dal CSS: cosi' ha il
   suo testo alternativo per chi non vede e resta nitido a ogni dimensione. */
.hero{position:relative;padding:70px 26px 34px;text-align:center;
  background:var(--panna);border-bottom:1px solid var(--rule)}
.hero__logo{display:none}
.hero__wordmark{display:block;width:min(78%,340px);height:auto;margin:0 auto}
.hero__image{display:block;max-width:628px;margin:30px auto 0}
.hero__image img{display:block;width:100%;height:auto;border-radius:2px}
.hero__tagline{margin:14px 0 0;font-size:15px;font-style:italic;color:var(--muted)}
.hero__meta{margin-top:18px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.hero__meta .dot,.sep{display:none}

/* barra delle lingue, sopra la fascia */
.lang{position:absolute;top:0;right:0;left:0;z-index:6;
  display:flex;justify-content:flex-end;gap:14px;padding:22px 26px 0}
.lang a,.lang span,.lang strong{font-size:14px;letter-spacing:.14em;color:var(--muted);
  text-decoration:none;padding-bottom:6px}
.lang [aria-current],.lang .is-active,.lang strong{color:var(--fg);
  border-bottom:2px solid var(--gold)}

/* navigazione sezioni: resta appiccicata in alto mentre si scorre, e se le voci
   non ci stanno scorrono dentro la barra invece di allargare la pagina. */
.nav{position:sticky;top:0;z-index:5;background:var(--bg);
  border-bottom:1px solid var(--rule);overflow:hidden}
.nav__inner{display:flex;justify-content:space-between;align-items:center;gap:8px;
  max-width:680px;margin:0 auto;padding:15px 22px;
  overflow-x:auto;scrollbar-width:none}
.nav__inner::-webkit-scrollbar{display:none}
.nav__inner{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.nav a{flex:0 0 auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap}

/* racconto del locale: stessa gabbia delle sezioni. Senza questa regola il testo
   parte incollato al bordo dello schermo e su schermo largo diventa una riga unica. */
.about{max-width:680px;margin:30px auto 0;padding:0 26px}
.about__photo img{display:block;width:100%;height:auto;margin-bottom:20px;border-radius:2px}
.about__text p{margin:0 0 12px;font-size:15px;line-height:1.65;color:var(--muted)}
.about__award{display:inline-block;margin-top:4px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}

/* riquadro allergeni */
.allergen-notice{max-width:680px;margin:26px auto 0;padding:18px 20px;
  background:var(--panna);border-left:3px solid var(--gold);border-radius:2px;
  font-size:13.5px;line-height:1.55;color:var(--fg)}
.allergen-notice strong{font-weight:600}

/* sezioni */
.section{padding-top:30px}
.section + .section{margin-top:10px;border-top:1px solid var(--rule)}
.section-title{font-family:var(--serif);font-weight:400;font-size:40px;
  letter-spacing:0;line-height:1.1;margin:32px 0 24px;color:var(--fg)}
.menu-list{list-style:none;margin:0;padding:0}

/* piatto */
.item{position:relative;padding:15px 0 17px;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:none}
.item__head{padding-right:86px}
.item__name{font-size:16.5px;font-weight:600;color:var(--fg)}
.item__price{position:absolute;top:15px;right:0;font-family:var(--serif);font-size:19px;
  color:var(--fg);white-space:nowrap}
.item__desc{margin:5px 86px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.item__meta{margin-top:8px}
.badge{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:2px;
  background:transparent;border:1px solid var(--gold);
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);vertical-align:2px;white-space:nowrap}
.badge--veg{border-color:rgba(74,110,52,.6);color:#41632e}
.allergens{font-size:12.5px;font-style:italic;color:var(--faint)}

/* ============================================================
   Piatto esaurito.
   Trovato il 13/08/2026 dalla prova WhatsApp vera di Riccardo, non dai controlli
   automatici: si vede SOLO quando un piatto e' davvero esaurito, e durante il collaudo
   non ce n'era nessuno. Erano due difetti in uno.
   ============================================================ */

/* 1. Testo riservato ai lettori di schermo. Il modello condiviso emette
   <span class="sr-only">Piatto non disponibile</span> accanto al nome, ma questa classe
   non era definita: quella scritta finiva VISIBILE in pagina, di fianco al piatto.
   I tre clienti paganti ce l'hanno, le due demo no. Regola standard, non toccarla. */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* 2. L'etichetta era grigia come una nota a margine. Sugli altri menu e' ROSSA, perche'
   deve saltare all'occhio: chi legge deve capire in un colpo che quel piatto non c'e',
   se no lo ordina e la figura la fa il ristorante. Stesso rosso dei paganti (#C42B22),
   contrasto misurato su questo fondo: 5,06 contro la soglia di 4,5. */
.item__badge--soldout{display:inline-block;margin-top:6px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#C42B22}
/* il modello non stampa il prezzo di un piatto esaurito; questa riga e' la cintura di
   sicurezza se un domani lo stampasse. */
.item--sold-out .item__price{display:none}
/* il piatto resta leggibile ma si fa da parte rispetto a quelli disponibili */
.item--sold-out .item__name{color:var(--muted)}
.item--sold-out .item__desc,.item--sold-out .allergens{opacity:.72}

/* foto dentro la sezione delle pizze. Sta gia' dentro main, che ha la sua gabbia e i
   suoi margini: rimetterli qui la farebbe uscire piu' stretta della foto di testata. */
.visual{margin:32px 0 36px}
.visual img{display:block;width:100%;height:auto;border-radius:2px}

/* ============================================================
   Sezione "Oggi", il piatto del giorno.
   Si accende da sola quando il titolare scrive "aggiungi piatto ..." al bot WhatsApp:
   il modello condiviso (templates/partials/oggi_card.html) emette una scheda con
   markup suo, diverso da quello dei piatti normali. Senza queste regole la scheda
   esce nuda, e proprio mentre si prova la cosa che il prodotto vende.
   Concetto ripreso da quarantotto, riscritto sulle variabili di questo vestito.
   ============================================================ */
.section--oggi{margin-bottom:40px}

/* Il titolo "Oggi" resta nel DOM per chi naviga con la tastiera o con un lettore di
   schermo, ma non si vede: dentro la scheda c'e' gia' l'occhiello che fa da titolo.
   Regola standard "solo per lettori di schermo", non toccarla per estetica. */
.section-title--sr{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

.oggi-card{position:relative;max-width:460px;margin-inline:auto;padding:32px 26px;
  text-align:center;background:var(--panna);border:1px solid var(--gold);border-radius:2px}
/* seconda linea interna: cornice doppia */
.oggi-card::before{content:"";position:absolute;inset:7px;border:1px solid var(--gold);
  opacity:.34;pointer-events:none}
/* quattro staffe a L sugli spigoli della cornice interna */
.oggi-card__corner{position:absolute;width:14px;height:14px;border:1.5px solid var(--gold)}
.oggi-card__corner--tl{top:7px;left:7px;border-right:0;border-bottom:0}
.oggi-card__corner--tr{top:7px;right:7px;border-left:0;border-bottom:0}
.oggi-card__corner--bl{bottom:7px;left:7px;border-right:0;border-top:0}
.oggi-card__corner--br{bottom:7px;right:7px;border-left:0;border-top:0}

.oggi-card__eyebrow{margin:0 0 18px;font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}

.oggi-dish__name{margin:0;font-family:var(--serif);font-size:30px;line-height:1.1;
  font-weight:400;color:var(--fg)}
/* fregio: rombo con due filetti ai lati */
.oggi-dish__flourish{display:flex;align-items:center;justify-content:center;gap:9px;
  margin:14px 0;color:var(--gold);font-size:9px}
.oggi-dish__flourish::before,.oggi-dish__flourish::after{content:"";width:30px;height:1px;
  background:var(--gold);opacity:.55}
.oggi-dish__price{margin:0;font-family:var(--serif);font-size:19px;color:var(--fg)}
.oggi-dish__desc{margin:16px auto 0;max-width:34ch;font-size:14px;line-height:1.55;
  color:var(--muted)}
.oggi-dish__allergens{position:relative;margin:20px auto 0;padding-top:18px;
  font-size:12.5px;font-style:italic;color:var(--faint)}
.oggi-dish__allergens::before{content:"";position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:46%;border-top:1px solid var(--line)}
.oggi-dish__allergens-label{color:var(--faint)}
/* due o piu' piatti del giorno: filo di separazione fra le portate */
.oggi-dish--next{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}

@media print{.oggi-card{background:none}}

/* pie' di pagina */
.footer{max-width:680px;margin:0 auto;padding:40px 26px 50px;text-align:center;
  background:var(--panna);border-top:1px solid var(--rule);
  font-size:13.5px;color:var(--muted)}
.footer strong,.footer b{display:inline;color:var(--fg);font-weight:600;font-size:14.5px}
.footer p{margin:8px 0}
.footer a{color:var(--muted)}
.footer__updated,.footer__powered{font-size:12.5px;color:var(--faint)}