:root{
  --cream:#f7f1e2; --paper:#fbf6ea; --ink:#2a2017; --soft:#6b5d49;
  --green:#1f3b2d; --green-deep:#16291f; --gold:#b08d4c; --gold-light:#cca962;
  --line:#e4d8bf;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"EB Garamond",Georgia,serif; font-size:19px; line-height:1.6;
}
h1,h2,h3,h4,.brand-text,.brand-mark{font-family:"Playfair Display",Georgia,serif; font-weight:700; letter-spacing:.01em}
a{color:inherit}

/* masthead */
.masthead{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.4rem; background:var(--green-deep);
  border-bottom:2px solid var(--gold); box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#f6e6c2}
.brand-text{font-size:1.5rem; color:#f6e6c2}
.topnav{display:flex; gap:1.6rem}
.topnav a{color:#e8dcbf; text-decoration:none; text-transform:uppercase; font-size:.8rem; letter-spacing:.18em}
.topnav a:hover{color:var(--gold-light)}

/* hero */
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:2.4rem; align-items:center;
  max-width:1100px; margin:0 auto; padding:3.2rem 1.4rem 2.8rem;
}
.eyebrow{color:var(--gold); text-transform:uppercase; letter-spacing:.28em; font-size:.78rem; margin:0 0 .4rem}
.hero h1{font-size:clamp(3rem,9vw,5.5rem); margin:.1rem 0; color:var(--green-deep)}
.tagline{font-family:"Playfair Display",serif; font-style:italic; font-size:1.6rem; color:var(--soft); margin:.1rem 0 1rem}
.lede{max-width:32ch; color:var(--soft)}
.btn{
  display:inline-block; margin-top:1rem; padding:.6rem 1.5rem; text-decoration:none;
  background:var(--green); color:#f6e6c2; border:1px solid var(--gold);
  text-transform:uppercase; letter-spacing:.14em; font-size:.8rem;
}
.btn:hover{background:var(--gold); color:var(--green-deep)}

/* image placeholders (replace .ph blocks with <img>) */
.ph{
  position:relative; min-height:260px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(45deg,rgba(176,141,76,.07) 0 14px,transparent 14px 28px),
    radial-gradient(120% 120% at 30% 20%, #efe4c8, #e7d8b4 60%, #ddcaa0);
  display:flex; align-items:center; justify-content:center;
}
.ph span{
  font-family:"Playfair Display",serif; font-style:italic; color:#9a7d44;
  font-size:1.3rem; letter-spacing:.04em;
}
.hero-photo{min-height:340px}

/* layout */
.container{max-width:880px; margin:0 auto; padding:0 1.4rem}
.intro{padding:1.5rem 0 1rem; text-align:center}
.intro p{max-width:60ch; margin:0 auto; font-size:1.15rem; color:var(--soft)}
.section-title{
  text-align:center; font-size:2.2rem; color:var(--green-deep); margin:2.6rem 0 1.4rem;
  position:relative;
}
.section-title:after{
  content:"❦"; display:block; color:var(--gold); font-size:1rem; margin-top:.3rem;
}

/* menu */
.course{margin:1.8rem 0 2.2rem}
.course h3{
  font-size:1.5rem; color:var(--green); text-align:center; margin:0 0 1rem;
  text-transform:uppercase; letter-spacing:.16em; font-size:1.1rem;
}
.course ul{list-style:none; margin:0; padding:0}
.course li{margin:0 0 1.1rem}
.dish{font-weight:600; font-size:1.18rem; white-space:nowrap}
.dots{display:none}
.price{float:right; color:var(--gold); font-weight:600; font-size:1.1rem}
.desc{margin:.1rem 0 0; color:var(--soft); font-size:1.02rem; max-width:54ch}
.menu-note{text-align:center; font-style:italic; color:var(--soft); margin-top:1.5rem; font-size:.95rem}

/* gallery */
.gallery .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}

/* visit */
.visit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; text-align:center; margin-bottom:3rem}
.visit h4{text-transform:uppercase; letter-spacing:.16em; color:var(--gold); font-size:.85rem; margin:0 0 .5rem}
.muted{color:#9a8d77; font-style:italic}

/* footer */
.sitefoot{
  text-align:center; padding:2rem 1rem; background:var(--green-deep); color:#cdbb95;
  border-top:2px solid var(--gold); font-size:.95rem; letter-spacing:.04em;
}
.sitefoot .brand-mark{color:#f6e6c2}

/* food photos */
img.hero-photo{width:100%; height:470px; object-fit:cover; border:1px solid var(--line);
  box-shadow:0 14px 36px rgba(22,41,31,.20)}
.gallery .grid img{width:100%; height:300px; object-fit:cover; display:block; border:1px solid var(--line)}

@media (max-width:760px){
  .hero{grid-template-columns:1fr; padding-top:2.5rem}
  .hero-photo{order:-1; min-height:240px}
  img.hero-photo{height:280px}
  .topnav{gap:1rem}
  .visit-grid{grid-template-columns:1fr; gap:1.4rem}
  .gallery .grid{grid-template-columns:1fr}
  .gallery .grid img{height:240px}
}