/* Osteria del Ponte · Pisa · piano Basic
   Fraunces (titoli) + Nunito Sans (testo). Legno, mattone, oliva, lavagna. */
:root{
  --ink:#2B1D14;
  --paper:#F3E7D3;
  --cream:#FBF4E8;
  --brick:#9E3F22;
  --brick-dark:#7C2F17;
  --olive:#5E6B35;
  --wood:#7A4E2D;
  --board:#22302A;
  --chalk:#F1E9D8;
  --line:rgba(43,29,20,.18);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--brick-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.5vw,44px)}
h3{font-size:22px}
p{margin:0 0 1em}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
.eyebrow{font:700 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--brick);margin:0 0 14px}

/* testata */
.top{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:8px 0;flex-wrap:wrap}
.brand{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand em{font-style:italic;font-weight:400;color:var(--brick)}
.top nav{display:flex;gap:4px 18px;flex-wrap:wrap}
.top nav a{font:600 14px/1 var(--sans);color:var(--ink);text-decoration:none;letter-spacing:.04em;text-transform:uppercase;padding:8px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a:focus-visible{border-color:var(--brick);outline:none}
@media (max-width:640px){
  .top .wrap{justify-content:center;text-align:center}
  .top nav{justify-content:center;gap:2px 14px}
  .top nav a{font-size:12px;padding:6px 0}
}

/* apertura */
.hero{position:relative;min-height:min(88vh,760px);display:grid;align-items:end;color:var(--cream);isolation:isolate}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,18,10,.15) 0%,rgba(30,18,10,.35) 45%,rgba(30,18,10,.85) 100%)}
.hero .wrap{padding:120px 0 56px}
.hero h1{font-size:clamp(44px,8vw,96px);font-weight:700;line-height:.95;margin:0 0 18px;max-width:12ch}
.hero h1 em{font-style:italic;font-weight:400}
.hero p{font-size:clamp(17px,2.2vw,21px);max-width:44ch;margin:0 0 28px;color:rgba(251,244,232,.92)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;font:700 15px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:15px 22px;border-radius:3px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn.pri{background:var(--brick);color:#fff;border-color:var(--brick)}
.btn.pri:hover{background:var(--brick-dark);border-color:var(--brick-dark)}
.btn.ghost{color:var(--cream);border-color:rgba(251,244,232,.7)}
.btn.ghost:hover{background:rgba(251,244,232,.12)}
.btn.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.dark:hover{background:#000}

/* sezioni */
section{padding:72px 0}
@media (max-width:640px){section{padding:52px 0}}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
.split .txt p{font-size:18px}
.split .txt p:first-of-type{font-family:var(--serif);font-size:22px;font-style:italic;line-height:1.4;color:var(--wood)}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pics img{aspect-ratio:3/4;object-fit:cover;border-radius:4px}
.pics img:last-child{margin-top:36px}
.fact{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.fact div{font-size:15px}
.fact b{display:block;font-family:var(--serif);font-size:28px;font-weight:600;color:var(--brick)}

/* lavagna del menù */
.menu{background:var(--wood);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 9px);padding:56px 0}
.board{background:var(--board);color:var(--chalk);border:10px solid #3E2A1A;outline:3px solid #5B3E27;box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 0 80px rgba(0,0,0,.4);padding:clamp(24px,5vw,56px);border-radius:3px}
.board h2{color:var(--chalk);text-align:center;font-style:italic;font-weight:400;font-size:clamp(34px,5vw,52px);margin-bottom:6px}
.board .sub{text-align:center;color:rgba(241,233,216,.7);font-size:15px;margin-bottom:32px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 40px}
@media (max-width:820px){.cols{grid-template-columns:1fr;gap:28px}}
.cols h3{font-family:var(--serif);font-weight:600;font-size:20px;color:#E7C58A;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px dashed rgba(241,233,216,.35);padding-bottom:8px;margin-bottom:12px}
.dish{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;font-size:16px}
.dish span:first-child{font-family:var(--serif);font-size:18px}
.dish small{display:block;font-size:13px;color:rgba(241,233,216,.65);font-family:var(--sans)}
.dish b{font-weight:700;white-space:nowrap;color:#E7C58A}
.board .note{margin:30px 0 0;text-align:center;font-size:14px;color:rgba(241,233,216,.7);font-style:italic}

/* orari e dove */
.info{display:grid;grid-template-columns:1fr 1fr;gap:56px}
@media (max-width:820px){.info{grid-template-columns:1fr;gap:40px}}
.hours{list-style:none;padding:0;margin:0 0 18px;border-top:2px solid var(--ink)}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.hours li b{font-weight:700}
.hours li.off{color:var(--brick);font-weight:700}
.dove p{font-size:17px}
.dove address{font-style:normal;font-family:var(--serif);font-size:24px;line-height:1.3;margin:0 0 18px;padding-left:16px;border-left:4px solid var(--olive)}
.dove ul{padding-left:20px;margin:0}
.dove li{margin-bottom:8px}

/* contatti */
.contatti{background:var(--cream);border-top:1px solid var(--line)}
.contatti .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
@media (max-width:820px){.contatti .wrap{grid-template-columns:1fr;gap:28px}}
.contatti .side p{font-size:17px}
.contatti .side a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--brick)}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font:700 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--wood)}
input,textarea{font:400 16px/1.4 var(--sans);padding:12px 14px;border:1px solid rgba(43,29,20,.35);border-radius:3px;background:#fff;color:var(--ink);width:100%}
input:focus,textarea:focus{outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive)}
textarea{min-height:130px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
form .small{font-size:13px;color:#6b5a4a;margin:0}

/* fondo */
footer{background:var(--ink);color:rgba(251,244,232,.85);padding:40px 0 28px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
footer .brand{color:var(--cream);font-size:20px}
footer a{color:var(--cream)}
footer .iv{width:100%;margin-top:22px;padding-top:16px;border-top:1px solid rgba(251,244,232,.18);color:rgba(251,244,232,.6);font-size:13px}
footer .iv a{color:#E7C58A;text-decoration:none}
footer .iv a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--olive);outline-offset:2px}