:root {
  --bg: #1d130c;
  --card: #2a1d12;
  --cream: #f5e6cf;
  --muted: #c9a87c;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--cream);
  font-family: Georgia, 'Times New Roman', serif; line-height: 1.6;
}
a { color: #ffb35c; }
.hero {
  background: linear-gradient(rgba(20,10,4,.55), rgba(20,10,4,.75)), url('/img/hero.png') center/cover;
  min-height: 46vh; display: flex; align-items: flex-end; padding: 3rem 2rem;
}
.hero-text h1 { font-size: 3rem; margin: 0; color: #ffd9a0; text-shadow: 0 2px 12px #000; }
.hero-text p { font-size: 1.2rem; max-width: 36rem; text-shadow: 0 1px 8px #000; }
main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.2rem; }
h2 { color: #ffcf8f; border-bottom: 1px solid #5a3a20; padding-bottom: .4rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.card {
  background: var(--card); border-radius: 12px; overflow: hidden; text-decoration: none;
  color: var(--cream); border: 1px solid #4a2f18; transition: transform .15s;
}
.card:hover { transform: translateY(-3px); }
.card img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.card-body { padding: 1rem 1.1rem 1.3rem; }
.card-body h3 { margin: .3rem 0 .5rem; color: #ffd9a0; }
.card-body p { margin: 0; color: #d9bd93; font-size: .95rem; }
.badge {
  display: inline-block; background: #b3401e; color: #fff; font-size: .75rem;
  padding: .15rem .6rem; border-radius: 20px; font-family: Verdana, sans-serif;
}
.recipe-img { width: 100%; border-radius: 12px; }
.ingredients { background: var(--card); border: 1px solid #4a2f18; border-radius: 12px; padding: 1rem 1.4rem; }
.steps li { margin-bottom: .7rem; }
.about-teaser { margin-top: 2.5rem; }
footer { text-align: center; color: #8a6a45; padding: 2rem 1rem 3rem; font-size: .9rem; }
.btn {
  display: inline-block; background: #b3401e; color: #fff !important; text-decoration: none;
  font-family: Verdana, sans-serif; font-size: 1.1rem; padding: .9rem 2.2rem; border-radius: 12px;
}
.btn small { display: block; font-size: .75rem; opacity: .85; }
.incy-page { text-align: center; padding: 4rem 1rem; }
.incy-page h1 { color: #ffd9a0; }