:root { --fondo:#F8DEBD; --carta:#FDEDD6; --bordo:#E6C79E; --inchiostro:#5E2D20; --tenue:#74563C; --lacca:#C02135; --verde:#1F5B45; --ardesia:#365A69; }
* { box-sizing:border-box; }
body { margin:0; background:var(--fondo); color:var(--inchiostro); font-family:Outfit,"Avenir Next",sans-serif; line-height:1.5; }
main { max-width:760px; margin:0 auto; padding:56px 22px 72px; }
.targa { font-family:"Roboto Mono",monospace; letter-spacing:.32em; font-size:14px; color:var(--lacca); font-weight:500; text-decoration:none; }
h1 { font-weight:900; font-size:clamp(40px,8vw,72px); line-height:.98; letter-spacing:-.02em; margin:14px 0 18px; text-wrap:balance; }
h1 em { font-style:normal; color:var(--lacca); }
.lede { font-size:20px; max-width:560px; margin:0 0 30px; }
.lingua { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 26px; }
.lingua a { font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; border-radius:999px; border:1px solid var(--bordo); background:var(--carta); color:var(--tenue); text-decoration:none; }
.lingua a[aria-current="page"] { background:var(--inchiostro); color:var(--fondo); border-color:var(--inchiostro); }
.griglia { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0 0 34px; }
.scheda { background:var(--carta); border:1px solid var(--bordo); border-radius:18px; padding:18px; }
.scheda .n { font-family:"Roboto Mono",monospace; font-size:28px; color:var(--lacca); font-weight:500; line-height:1; }
.scheda h2 { margin:10px 0 6px; font-size:17px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.scheda p { margin:0; font-size:15px; color:var(--tenue); }
.presto { background:var(--inchiostro); color:var(--fondo); border-radius:18px; padding:22px 24px; margin:0 0 30px; }
.presto strong { display:block; font-size:20px; font-weight:900; margin-bottom:6px; }
.presto p { margin:0; opacity:.9; }
.presto a { color:inherit; }
footer { color:var(--tenue); font-size:14px; }
footer a { color:var(--verde); }
.attesa { margin:16px 0 0; }
.attesa label { display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
.attesa input[type="email"] { width:100%; font:inherit; font-size:17px; padding:12px 14px; border-radius:12px; border:1px solid var(--bordo); background:var(--carta); color:var(--inchiostro); }
.attesa .consenso { display:flex; gap:10px; align-items:flex-start; font-weight:400; margin:14px 0; }
.attesa .consenso input { margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--lacca); }
.attesa button { font:inherit; font-weight:900; font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding:13px 22px; min-height:48px; border-radius:999px; border:0; background:var(--lacca); color:#fff; cursor:pointer; }
.attesa button:disabled { opacity:.6; cursor:default; }
.attesa [role="status"] { margin:12px 0 0; min-height:1.5em; }
.attesa.fatto .campi { display:none; }
.conferma { text-align:center; padding-top:18vh; }
.conferma h1 { margin-top:8px; }
.conferma p { max-width:30rem; margin:0 auto 22px; font-size:19px; }
.vai { margin:-6px 0 26px; }
.vai a { font-weight:900; color:var(--lacca); text-decoration:none; font-size:18px; }
.briciole { font-size:14px; color:var(--tenue); margin:6px 0 0; }
.briciole a { color:var(--verde); }
h1.titolo { font-size:clamp(34px,7vw,56px); margin:10px 0 12px; }
.sotto { font-size:19px; max-width:620px; margin:0 0 22px; color:var(--tenue); }
.foto { margin:0 0 22px; }
.foto img { display:block; width:100%; height:auto; border-radius:18px; border:1px solid var(--bordo); background:var(--carta); }
.foto figcaption { font-size:12px; color:var(--tenue); margin-top:6px; }
.cifre { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin:0 0 16px; }
.cifra { background:var(--carta); border:1px solid var(--bordo); border-radius:16px; padding:14px 16px; }
.cifra .v { font-family:"Roboto Mono",monospace; font-size:26px; color:var(--lacca); font-weight:500; line-height:1; }
.cifra .e { font-size:12px; color:var(--tenue); margin-top:7px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.cifra.verde .v { color:var(--verde); }
.meta { display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--tenue); font-size:15px; margin:0 0 8px; padding:0; }
h2.sez { font-size:22px; font-weight:900; margin:36px 0 12px; letter-spacing:-.01em; scroll-margin-top:16px; }
ul.ingr { list-style:none; padding:0; margin:0; background:var(--carta); border:1px solid var(--bordo); border-radius:16px; }
ul.ingr li { display:flex; justify-content:space-between; gap:16px; padding:11px 16px; border-bottom:1px solid var(--bordo); }
ul.ingr li:last-child { border-bottom:0; }
.qta { font-family:"Roboto Mono",monospace; font-size:15px; white-space:nowrap; color:var(--tenue); }
ol.piano { list-style:none; padding:14px 16px; margin:0; background:var(--carta); border:1px solid var(--bordo); border-radius:16px; }
.riga { display:grid; grid-template-columns:2.2em minmax(0,1fr); gap:2px 8px; padding:7px 0; }
.riga .n, .passo .n { font-family:"Roboto Mono",monospace; color:var(--lacca); font-weight:500; }
.riga .nome { font-size:15px; }
.riga .nome small { color:var(--tenue); margin-left:8px; font-size:13px; }
.pista { grid-column:2; position:relative; height:12px; background:rgba(94,45,32,.07); border-radius:6px; overflow:hidden; }
.pista i { position:absolute; top:0; bottom:0; border-radius:6px; }
.pista i.mani, .legenda .mani::before { background:var(--lacca); }
.pista i.occhio, .legenda .occhio::before { background:var(--verde); }
.pista i.att, .legenda .att::before { background:repeating-linear-gradient(45deg,var(--ardesia) 0 4px,#8FA9B4 4px 8px); }
.legenda { display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0; font-size:13px; color:var(--tenue); }
.legenda span::before { content:""; display:inline-block; width:22px; height:10px; border-radius:5px; margin-right:7px; vertical-align:-1px; }
.nota { font-size:14px; color:var(--tenue); margin:8px 0 0; }
ol.passi { list-style:none; padding:0; margin:0; }
.passo { background:var(--carta); border:1px solid var(--bordo); border-radius:16px; padding:16px 18px; margin:0 0 12px; }
.passo h3 { margin:0 0 6px; font-size:19px; font-weight:900; line-height:1.25; }
.passo h3 .tipo { display:block; font-weight:400; font-size:13px; color:var(--tenue); margin-top:3px; }
.passo p { margin:0 0 8px; }
.passo ul { margin:0 0 8px; padding-left:20px; color:var(--tenue); }
.passo .segnale { margin:0; font-size:15px; }
ul.allergeni { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 6px; }
ul.allergeni li { border:1px solid var(--inchiostro); border-radius:999px; padding:5px 13px; font-size:14px; font-weight:600; }
ul.fonti, ul.vicine { padding-left:20px; margin:0 0 12px; }
ul.fonti a, ul.vicine a { color:var(--verde); }
ul.vicine small { color:var(--tenue); margin-left:6px; }
.presto { margin-top:34px; }
ul.carte { list-style:none; padding:0; margin:0 0 12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.carta a { display:block; text-decoration:none; color:inherit; background:var(--carta); border:1px solid var(--bordo); border-radius:16px; overflow:hidden; height:100%; }
.carta img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--bordo); }
.carta .t { display:block; padding:10px 12px 12px; }
.carta strong { display:block; font-size:16px; line-height:1.25; }
.carta small { display:block; margin-top:4px; color:var(--tenue); font-size:13px; }