/* CSS Document */
  { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Momo Trust Display', sans-serif;
      color: #2b2b2b;
      background: #FAF9F6;
      line-height: 1.7;
      letter-spacing: .2px;
      padding-top: 64px;
     }
    a { color: inherit; text-decoration: none; }

    /* NAV */
    .nav {
      position: sticky; top: 0; z-index: 1000; height: 64px;
      display: flex; align-items: center; gap: 18px; padding: 0 18px;
      background: rgba(255,255,255,.72);
      border-bottom: 1px solid rgba(234,222,198,.9);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .nav__flavors { display: flex; gap: 10px; align-items: center; }
    .nav__tag { font-weight: 800; color: #3E3328; letter-spacing: .3px; margin-right: 6px; }
    .chip {
      display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 10px;
      background: rgba(200,168,108,.12); border: 1px solid rgba(200,168,108,.35);
      color:#5a4633; font-weight: 600; font-size: 14px;
      transition: background .2s ease;
    }
    .chip:hover { background: rgba(200,168,108,.2); }
    .chip[aria-current="true"]{
      background: rgba(200,168,108,.26);
      border-color: rgba(200,168,108,.6);
    }
    .nav__links { margin-left: auto; display: flex; gap: 12px; }
    .nav__links a { color: #5a4633; padding: 8px 10px; border-radius: 8px; }
    .nav__links a:hover { background: rgba(200,168,108,.15); }

    /* LAYOUT */
    .container { max-width: 1200px; margin: 0 auto; padding: 34px 20px 96px; }

    /* HERO */
    .hero {
      position: relative; width: 100%; min-height: 72vh;
      display: grid; place-items: start; overflow: hidden;
    }
    .hero::after { content:""; position: absolute; inset: 0; background: rgba(0,0,0,0.25); pointer-events: none; }
    .hero > img{
      position: absolute; inset: 0;
      width: 100% !important; height: 100% !important;
      object-fit: cover !important; object-position: center center !important;
      display: block;
    }

    .hero h1 { margin: 0 0 8px 0; font-size: clamp(24px, 5vw, 48px); font-weight: 800; color: #3E3328; letter-spacing: .3px; }
    .hero p { margin: 0; color: #5b5b5b; font-size: clamp(14px, 2vw, 18px); }

    /* SECTIONS */
    .section-title {
      display: flex; align-items: center; gap: 10px;
      color: #3E3328; margin: 42px 0 20px; font-size: 24px; font-weight: 800;
    }
    .section-title::before{ content:""; width: 12px; height: 12px; border-radius: 3px; background:#C8A86C; display:inline-block; }

    .ingredients-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: stretch; }
    .ing-card {
      display: grid; grid-template-rows: 300px auto;   
      background: #fff; border: 1px solid #EDE3CF; border-radius: 18px; overflow: hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,.05);
    }
    .ing-photo {
      width: 100%; height: 100%;
      background: repeating-linear-gradient(45deg, #FBF7EF 0 14px, #F2E7D4 14px 28px);
      border-bottom: 1px dashed #E1D3B8; display: grid; place-items: center;
      color: #9C855B; font-size: 14px;
      position: relative; overflow: hidden;
    }

    .ing-body { padding: 16px 18px 18px; }
    .ing-name { font-weight: 700; color:#5A4633; font-size: 18px; }
    .ing-qty { color:#757575; font-size: 14px; margin-top: 2px; }

    .steps { display: grid; gap: 22px; }
    .step {
      display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: center;
      background: #fff; border: 1px solid #EDE3CF; border-radius: 20px; overflow: hidden;
      box-shadow: 0 10px 26px rgba(0,0,0,.05); padding: 18px;
    }
    .step__media {
      width: 100%;
      height: 360px;                
      aspect-ratio: auto;           
      background: repeating-linear-gradient(135deg, #FBF7EF 0 14px, #F2E7D4 14px 28px);
      border: 1px dashed #E1D3B8; border-radius: 14px; display: grid; place-items: center;
      color:#9C855B; font-size: 15px;
      position: relative; overflow: hidden;
    }
    .step__body { padding: 8px 8px 8px 12px; }
    .step__title { margin: 0 0 8px; font-weight: 800; color:#4a3f33; font-size: 18px; }
    .step__text { margin: 0; color:#5e5e5e; font-size: 15px; }
    .step:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
    .step:nth-child(even) .step__body { order: 1; }
    .step:nth-child(even) .step__media { order: 2; }

    
    .ing-photo img,
    .step__media img{
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center center !important;
      display: block;
    }

    /* RESPONSIVE */
    @media (max-width: 1000px) {
      .container { padding: 28px 16px 80px; }
      .ing-card { grid-template-rows: 260px auto; }  
		.step__media { height: 300px; } }             
    @media (max-width: 820px) {
      .ingredients-grid { grid-template-columns: 1fr; }
      .step { grid-template-columns: 1fr; }
      .step:nth-child(even) { grid-template-columns: 1fr; }
      .hero { min-height: 60vh; }
      .nav { gap: 10px; }
      .nav__flavors { flex-wrap: wrap; }
    }
    @media (max-width: 600px){
      .step__media { height: 220px; }                
    }

   
    .recipe + .recipe { border-top: 1px dashed #E1D3B8; }
		
/* CONTACT US SECTION */
.contact-section {
  background: #fff;
  border-top: 1px solid #EDE3CF;
  padding: 80px 20px;
  text-align: center;
}

.contact-section h2 {
  color: #3E3328;
  font-weight: 800;
  font-size: 26px;
  margin-bottom: 12px;
}

.contact-section p {
  color: #5a4633;
  font-size: 16px;
  margin-bottom: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.contact-form label {
  font-weight: 600;
  color: #4a3f33;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #EDE3CF;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #C8A86C;
  box-shadow: 0 0 4px rgba(200,168,108,.4);
}

.contact-form button {
  background: #C8A86C;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background .3s ease;
  width: fit-content;
  align-self: flex-end;
}

.contact-form button:hover {
  background: #b99756;
}
:target {
  scroll-margin-top: 80px; 
}