/* --------------------------------------------------------------
   MENU PORTA RIVA  ·  foglio di stile
   Non serve toccarlo per cambiare i piatti: quelli stanno
   dentro index.html. Qui ci sono colori, caratteri e misure.
   -------------------------------------------------------------- */

/* I tre caratteri del progetto. Licenza SIL Open Font.
   I file veri stanno nella cartella font/ */
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;src:url("font/young-serif.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400;font-display:swap;src:url("font/newsreader-regular.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("font/newsreader-corsivo.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:600;font-display:swap;src:url("font/newsreader-semigrassetto.woff2") format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url("font/dm-mono.woff2") format("woff2")}

/* Marchio e monogramma, dalla cartella img/ */
.logo{background-image:url("img/marchio.svg")}
.mark{background-image:url("img/monogramma.svg")}

/* --------------------------------------------------------------
     COLORI E CARATTERI  ·  cambiali qui e cambiano in tutta la pagina
     -------------------------------------------------------------- */

  /* Layout: colonna unica da telefono, navigazione appiccicata, arco e linea d'acqua come unici ornamenti */

  :root{
   --bg:#EDE5D8; --surface:#F4EEE4; --ink:#2A1F14; --muted:#7E5838;
   --accent:#C4622D; --rule:#D3C4AC; --chip:#E3D8C5;
   --display:"Young Serif",Georgia,"Times New Roman",serif;
   --body:"Newsreader",Georgia,serif;
   --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
   color-scheme:light;
  }

  *{box-sizing:border-box}

  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}

  .wrap{max-width:30rem;margin:0 auto;padding-inline:20px;padding-block:0 40px}
  header.top{padding-block:26px 16px;text-align:center;display:grid;justify-items:center;gap:14px}

  .logo{width:150px;aspect-ratio:1151/704;background-size:contain;background-repeat:no-repeat;background-position:center}

  .payoff{font-family:var(--display);font-size:1rem;color:var(--ink);margin:0}

  .intro{font-size:.9375rem;color:var(--muted);margin:0;max-width:26rem;text-wrap:balance}
  /* --------------------------------------------------------------
     BARRA DELLE SEZIONI (le pastiglie in alto)
     -------------------------------------------------------------- */

  nav.jump{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--rule);margin-inline:-20px;padding-inline:20px}

  .jump .row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-block:10px}

  .jump .row::-webkit-scrollbar{display:none}

  .jump a{flex:0 0 auto;font-family:var(--mono);font-size:.6875rem;letter-spacing:.04em;text-decoration:none;color:var(--muted);background:var(--chip);padding:6px 11px;border-radius:999px;white-space:nowrap}

  .jump a.on{background:var(--accent);color:var(--bg)}
  /* --------------------------------------------------------------
     SEZIONI E PIATTI
     -------------------------------------------------------------- */

  .sec{padding-block:26px 6px;scroll-margin-top:60px}

  .sechead{display:grid;gap:8px;margin-bottom:6px}

  .wave{width:64px;height:12px;color:var(--muted);opacity:.7}

  h2{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.15;margin:0;color:var(--accent)}

  .snote{font-family:var(--mono);font-size:.6875rem;color:var(--muted);margin:0 0 14px}

  .dish{padding-block:15px;border-top:1px solid var(--rule)}

  .sec .dish:first-of-type{border-top:none;padding-top:6px}

  .dish.evidenziato{background:var(--surface);margin-inline:-14px;padding:14px 14px 16px;border-top:none;border-radius:2px}

  h3{font-family:var(--body);font-weight:600;font-size:1.0625rem;line-height:1.3;margin:0;text-wrap:balance}

  .price{font-family:var(--mono);font-weight:400;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;margin-left:.55em}

  .fmt{font-family:var(--mono);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--muted);opacity:.7;white-space:nowrap;margin-left:.5em}

  .desc{font-style:italic;color:var(--muted);font-size:.9375rem;line-height:1.42;margin:4px 0 0}

  .alg{margin:9px 0 0;font-family:var(--mono);font-size:.625rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--muted)}

  .algtext{font-family:var(--mono);font-size:.6875rem;line-height:1.5;color:var(--muted);margin:6px 0 0}

  .algtext.none{margin-top:8px;font-style:normal}
  footer{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);display:grid;gap:12px;justify-items:center;text-align:center}

  .mono{font-family:var(--mono);color:var(--muted)}
  footer .mono{font-size:.6875rem;line-height:1.6}

  .legend{width:100%;text-align:left;border-top:1px solid var(--rule);padding-top:22px;scroll-margin-top:66px}

  .lgh{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--accent);margin:0 0 4px}

  .lgintro{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:12px 0 16px;font-style:italic}

  .lg{display:flex;gap:10px;padding-block:7px;border-top:1px solid var(--rule)}

  .lgn{font-family:var(--mono);font-size:.6875rem;color:var(--accent);flex:0 0 1.4rem;padding-top:2px;font-variant-numeric:tabular-nums}

  .lg b{display:block;font-weight:600;font-size:.875rem;color:var(--ink)}

  .lg span{display:block;font-size:.75rem;line-height:1.45;color:var(--muted)}

  .mark{width:44px;aspect-ratio:288/368;background-size:contain;background-repeat:no-repeat;background-position:center;opacity:.85}

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

  @media (prefers-reduced-motion:no-preference){.jump a{transition:background .15s,color .15s}}