:root{
  --white: hsl(0, 0%, 100%);
  --stone-100: hsl(30, 54%, 90%);
  --stone-150: hsl(30, 18%, 87%);
  --stone-600: hsl(30, 10%, 34%);
  --stone-900: hsl(24, 5%, 18%);
  --brown-800: hsl(14, 45%, 36%);
  --rose-800: hsl(332, 51%, 32%);
  --rose-50: hsl(330, 100%, 98%);

  --bg: var(--stone-100);
  --card-bg: var(--white);
  --accent: var(--rose-50);
  --muted: var(--stone-600);
  --heading: var(--brown-800);
  --text: var(--stone-900);
}

*{box-sizing:border-box}

body{
  font-family:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}

.page-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
}

.card{
  width:100%;
  max-width:760px;
  background:transparent;
  position:relative;
  transform-style:preserve-3d;
  margin:0 auto;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  left:24px;
  top:16px;
  background:var(--card-bg);
  border-radius:18px;
  box-shadow:0 28px 40px rgba(0,0,0,0.08);
  z-index:1;
  transform:rotate(-0.6deg);
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  left:-36px;
  top:-28px;
  background:var(--bg);
  border-radius:22px;
  z-index:0;
  transform:rotate(1.2deg) scale(1.02);
  opacity:0.95;
}

.card > .hero-img{
  position:relative;
  z-index:4;
  background:var(--card-bg);
  padding:12px;
  border-radius:12px;
  margin-bottom:-18px;
  box-shadow:0 6px 14px rgba(0,0,0,0.05);
}

.card img{
  display:block;
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:8px;
}

.content{
  background:var(--card-bg);
  padding:36px 44px;
  margin-top:-28px;
  border-radius:10px;
  z-index:3;
  position:relative;
  box-shadow:0 12px 22px rgba(0,0,0,0.06);
}

.content h1{
  font-family:'Young Serif', serif;
  font-weight:400;
  font-size:32px;
  margin:8px 0 8px;
  color:var(--heading);
}

.content .lead{
  font-size:16px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:18px;
}

.prep{
  background:var(--accent);
  padding:18px;
  border-radius:10px;
  margin-bottom:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6);
  border-left:4px solid var(--rose-800);
}

.prep h3{
  margin:0 0 8px 0;
  font-size:14px;
}

.prep ul{
  margin:0;
  padding-left:18px;
}

.prep li{
  font-size:15px;
  margin-bottom:6px;
  color:var(--brown-800);
}

.ingredients, .instructions, .nutrition{
  margin-bottom:20px;
}

.content h3{
  font-size:16px;
  color:var(--brown-800);
  margin-bottom:8px;
}

.ingredients ul, .instructions ol{
  padding-left:18px;
  margin:0;
}

.instructions ol li{
  margin-bottom:10px;
  font-size:16px;
  line-height:1.6;
}

.ingredients ul li{
  margin-bottom:8px;
  font-size:16px;
}

.nutrition table{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}

.nutrition th{
  text-align:left;
  padding:8px 0;
  font-weight:600;
  color:var(--brown-800);
}

.nutrition td{
  padding:6px 0;
  color:var(--text);
}

@media (max-width:820px){
  .card{max-width:620px}
}

@media (max-width:520px){
  .card{max-width:520px}
  .content{padding:20px}
  .card::before{left:12px}
}