@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-400.woff2) format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/playfair-display-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2');}
:root{
  /* Famiglia 2, chiaro caldo, crema e carta. Scelta di Riccardo il 06/08/2026,
     riferimenti in _source/riferimenti-grafici.md */
  --bg:#f7f0e4; --fg:#2b211a; --muted:#6d5f52; --faint:#95867a;
  --line:rgba(43,33,26,.14); --rule:rgba(43,33,26,.20); --gold:#a86a2c;
  --panna:#efe2ca;
  --sans:'Inter',"Liberation Sans",Arial,sans-serif;
  --serif:'Playfair Display',"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 dal Playfair 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 30px;text-align:center;
  background:linear-gradient(180deg,var(--panna) 0%,#f3e8d6 62%,var(--bg) 100%)}
.hero__logo,.hero__image{display:none}
.hero__wordmark{display:block;width:min(80%,320px);height:auto;margin:0 auto}
.hero__tagline{margin:12px 0 0;font-size:14.5px;color:var(--muted)}
.hero__meta{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;
  font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.hero__meta .dot,.sep{display:none}

/* barra delle lingue, sopra la fascia calda */
.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:1px 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(--line);overflow:hidden}
.nav__inner{display:flex;justify-content:space-between;align-items:center;gap:6px;
  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:.11em;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:26px auto 0;padding:0 26px}
.about__photo img{display:block;width:100%;height:auto;margin-bottom:18px;border-radius:14px}
.about__text p{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--muted)}
.about__award{display:inline-block;margin-top:4px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold)}

/* riquadro allergeni */
.allergen-notice{max-width:680px;margin:24px auto 0;padding:18px 20px;
  background:var(--panna);border:1px solid rgba(43,33,26,.18);border-radius:14px;
  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:8px;border-top:1px solid var(--rule)}
.section-title{font-family:var(--serif);font-weight:400;font-size:34px;
  letter-spacing:.01em;margin:30px 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 dotted var(--line)}
.item:last-child{border-bottom:none}
.item__head{padding-right:86px}
.item__name{font-size:16.5px;font-weight:500;color:var(--fg)}
.item__price{position:absolute;top:15px;right:0;font-size:16.5px;font-weight:500;
  color:var(--fg);white-space:nowrap}
.item__desc{margin:5px 86px 0 0;font-size:14px;color:var(--muted);line-height:1.45}
.item__meta{margin-top:8px}
.badge{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:999px;
  background:var(--panna);border:1px solid rgba(168,106,44,.45);
  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,.5);color:#4a6e34}
.item__badge--soldout{display:inline-block;margin-left:9px;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.allergens{font-size:12.5px;font-style:italic;color:var(--faint)}

/* 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)}