:root{
  --legno:#2a1c13; --legno-luce:#4a3424; --venatura:rgba(0,0,0,.09);
  --carta:#f1e7d4; --carta-70:rgba(241,231,212,.7); --carta-45:rgba(241,231,212,.45); --carta-12:rgba(241,231,212,.12);
  --ambra:#E0A340; --ombra:rgba(0,0,0,.55);
  --display:"Fraunces",Georgia,serif; --testo:"Instrument Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--legno);color:var(--carta);font-family:var(--testo);font-size:15px;line-height:1.5;
  background-image:radial-gradient(ellipse 120% 60% at 50% 0%,var(--legno-luce),transparent 70%);background-repeat:no-repeat;overflow-x:hidden;
  min-height:100vh;display:flex;flex-direction:column}   /* il footer resta in fondo anche con poco contenuto */
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(94deg,transparent 0 14px,var(--venatura) 14px 17px,transparent 17px 33px)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ambra);outline-offset:3px}

header{position:sticky;top:0;z-index:20;padding:12px 16px 10px;
  background:linear-gradient(var(--legno) 70%,transparent)}
.riga{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-family:var(--display);font-weight:300;font-size:22px;letter-spacing:.01em}
.brand b{font-weight:600;color:var(--ambra)}
.social{display:flex;gap:8px}
/* Il bottone delle app: staccato dai social, col bordo ambra; sotto i 560px resta solo l'icona. */
.destra{display:flex;align-items:center;gap:14px}
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-width:38px;box-sizing:border-box;padding:0 14px 0 12px;border:1px solid var(--ambra);border-radius:999px;color:var(--ambra);font-size:13px;font-weight:500}
.app-btn:hover{background:var(--ambra);color:#2a1c13}
@media (max-width:560px){.app-btn{padding:0}.app-btn span{display:none}.destra{gap:10px}}
.social a{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--carta-45);border-radius:50%;color:var(--carta)}
.social a:hover{border-color:var(--ambra);color:var(--ambra)}
.cerca{position:relative;margin-top:10px}
.cerca input{width:100%;padding:12px 14px 12px 42px;border-radius:999px;border:1px solid var(--carta-45);
  background:rgba(0,0,0,.28);color:var(--carta);font:15px var(--testo);outline:none}
.cerca input:focus{border-color:var(--ambra)}
.cerca svg{position:absolute;left:15px;top:13px;opacity:.6}
.indietro{font-size:13px;color:var(--carta-70);display:inline-flex;align-items:center;gap:6px}
/* Sui telefoni stretti la testata non ci sta tutta: "Sul tavolo" sparisce (il marchio porta già alla home)
   e i bottoni tondi si stringono di poco. */
@media (max-width:430px){.riga .indietro{display:none}.destra{gap:8px}.social{gap:6px}}
@media (max-width:380px){.social a,.app-btn{width:35px;height:35px;min-width:35px}.brand{font-size:20px}}
@media (max-width:340px){.social a,.app-btn{width:32px;height:32px;min-width:32px}.brand{font-size:18px}.destra,.social{gap:5px}}

footer{position:relative;z-index:1;margin-top:auto;padding:20px 16px 40px;text-align:center;color:var(--carta-45);font-size:12px}