@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Inter:wght@400;500;600&display=swap');

  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:'Inter', sans-serif;
    color:#2b2320;
    background:#fbf7f1;
    line-height:1.6;
  }
  h1,h2,h3{font-family:'Fraunces', serif; font-weight:700;}
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

  /* Nav */
  header{
    position:sticky; top:0; z-index:10;
    background:#fbf7f1;
    border-bottom:1px solid #e8ddd0;
  }
  nav{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 24px; max-width:1100px; margin:0 auto;
  }
  .logo{font-family:'Fraunces', serif; font-size:22px; font-weight:700; color:#5c3a21;}
  .nav-links{display:flex; gap:32px; list-style:none;}
  .nav-links a{font-weight:500; font-size:15px;}
  .nav-links a:hover{color:#a8632f;}
  .btn{
    background:#a8632f; color:#fff; padding:10px 20px;
    border-radius:6px; font-weight:600; font-size:14.5px;
  }
  .btn:hover{background:#8f5327;}
  .btn-outline{
    border:1px solid #a8632f; color:#a8632f; padding:10px 20px; border-radius:6px; font-weight:600; font-size:14.5px;
  }

  /* Hero */
  .hero{position:relative; height:520px;}
  .hero img{width:100%; height:100%; object-fit:cover;}
  .hero-overlay{
    position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(20,12,8,0.72), rgba(20,12,8,0.25));
    display:flex; align-items:center;
  }
  .hero-text{padding:0 60px; max-width:560px; color:#fff;}
  .hero-text h1{font-size:2.8rem; line-height:1.1; margin-bottom:16px;}
  .hero-text p{font-size:16.5px; margin-bottom:28px; color:#f1e8de;}
  .hero-actions{display:flex; gap:14px;}
  .hero-actions .btn-outline{border-color:#fff; color:#fff;}

  /* About */
  .about{padding:80px 0; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .about img{border-radius:12px;}
  .about .eyebrow{color:#a8632f; font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
  .about h2{font-size:2rem; margin:12px 0 16px;}
  .about p{color:#5c5148;}

  /* Menu */
  .menu{padding:80px 0; background:#f1e8dc;}
  .section-head{text-align:center; max-width:520px; margin:0 auto 48px;}
  .section-head .eyebrow{color:#a8632f; font-weight:600; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
  .section-head h2{font-size:2rem; margin-top:10px;}
  .menu-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;}
  .menu-item{background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(60,40,20,0.06);}
  .menu-item img{height:180px; object-fit:cover;}
  .menu-item-body{padding:18px 20px;}
  .menu-item-body h3{font-size:17px; display:flex; justify-content:space-between; align-items:center;}
  .menu-item-body .price{color:#a8632f; font-family:'Inter'; font-size:15px;}
  .menu-item-body p{font-size:14px; color:#5c5148; margin-top:6px;}

  /* Gallery */
  .gallery{padding:80px 0;}
  .gallery-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
  .gallery-grid img{border-radius:10px; height:180px; object-fit:cover;}

  /* Contact / Footer */
  footer{background:#2b2018; color:#f1e8de; padding:56px 0 28px;}
  .footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; margin-bottom:36px;}
  footer h3{font-size:20px; margin-bottom:14px; color:#fff;}
  footer h4{font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:#c9a97e; margin-bottom:14px; font-weight:600;}
  footer p, footer li{color:#cabfb2; font-size:14.5px; margin-bottom:8px;}
  .footer-bottom{border-top:1px solid #45392c; padding-top:20px; text-align:center; font-size:13px; color:#8a7c6c;}

  /* Responsive */
  @media (max-width:820px){
    .nav-links{display:none;}
    .hero-text{padding:0 28px;}
    .hero-text h1{font-size:2.1rem;}
    .about{grid-template-columns:1fr; gap:32px;}
    .menu-grid{grid-template-columns:1fr 1fr;}
    .gallery-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr;}
  }
  @media (max-width:520px){
    .menu-grid{grid-template-columns:1fr;}
    .hero{height:460px;}
  }
.contact{
  background-image:url(./🍵✨\ Indulge\ in\ Zen_\ Homemade\ Matcha\ Latte\ Recipe\ for\ a\ Tranquil\ Moment!\ ☕🌿.jpg);
}