:root{
  /* Warm neutral palette */
  --bg: #faf5ef;        /* warm cream */
  --surface: #fff9f6;   /* card background */
  --muted: #7a6b61;     /* warm gray-brown */
  --text: #2b2b25;      /* deep warm charcoal */
  --accent: #d99a86;    /* soft terracotta */
  --accent-2: #b89a84;  /* secondary warm taupe */
  --shadow: rgba(43,43,37,0.06);
  --radius: 14px;
}

/* Dark mode variant (optional) */
:root.dark{
  --bg: #14130f;
  --surface: #1b1916;
  --muted: #bfb7ae;
  --text: #efeae4;
  --accent: #8a5a4b;
  --accent-2: #6f5c52;
  --shadow: rgba(0,0,0,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.site-header{
  position:sticky;top:0;z-index:40;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,249,246,0.6), rgba(250,245,239,0.6));
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px;max-width:1100px;margin:0 auto}
.logo{font-family: 'Georgia', 'Times New Roman', serif; font-size:1.25rem; color:var(--text)}
.nav-links{list-style:none;display:flex;gap:14px;margin:0;padding:0}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600}
.nav-links a:hover{color:var(--text)}
.nav-actions{display:flex;gap:10px;align-items:center}
.search{padding:8px 12px;border-radius:999px;border:1px solid rgba(43,43,37,0.06);background:transparent;min-width:220px}

.container{max-width:1100px;margin:32px auto;padding:0 18px}

.hero{display:grid;gap:12px;padding:34px;border-radius:var(--radius);background:linear-gradient(180deg, var(--surface), rgba(255,255,255,0.6));box-shadow:0 6px 18px var(--shadow)}
.hero h1{font-family: 'Merriweather', Georgia, serif;font-size:2rem;margin:0;color:var(--text)}
.hero p{margin:0;color:var(--muted)}
.btn{display:inline-block;background:var(--accent);color:white;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600;box-shadow:0 6px 14px rgba(217,154,134,0.14)}

.featured h2, .categories h2, #instructions h2{margin-top:20px;margin-bottom:10px;font-family:'Merriweather', Georgia, serif}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--surface);border-radius:12px;padding:12px;box-shadow:0 6px 18px var(--shadow);border:1px solid rgba(255,255,255,0.3)}
.card img{width:100%;height:200px;object-fit:cover;border-radius:10px}
.card h3{margin:10px 0 6px;font-size:1.05rem}
.muted{color:var(--muted);font-size:0.95rem}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:8px 12px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,245,240,0.6));color:var(--text);text-decoration:none;border:1px solid rgba(0,0,0,0.03)}

.controls{display:flex;align-items:center;gap:12px;margin-bottom:16px}

.recipe-detail{display:grid;grid-template-columns:1fr;gap:18px}
.recipe-meta{display:flex;gap:12px;align-items:center}
.fav{background:transparent;border:1px solid rgba(43,43,37,0.08);padding:8px 12px;border-radius:10px}

.site-footer{text-align:center;padding:28px;color:var(--muted);border-top:1px solid rgba(0,0,0,0.04);margin-top:36px}

/* Instructions card styling */
.instructions{padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,250,246,0.8), rgba(255,249,244,0.6));border:1px solid rgba(0,0,0,0.03)}
.instructions ol{margin:0 0 8px 1.1rem;color:var(--muted)}
.instructions li{margin:6px 0}
.instructions a{color:var(--accent-2);text-decoration:underline}

/* Meet Marie card tweaks */
.meet-marie{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:16px;border-radius:12px}
.meet-marie img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:3px solid rgba(217,154,134,0.12);box-shadow:0 6px 18px var(--shadow)}
.meet-marie h3{margin:0;font-size:1.1rem}
.meet-marie p{margin:6px 0;color:var(--muted)}

/* Larger visual emphasis for recipe detail images */
.recipe-detail img{border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.08)}

/* Responsive layout tweaks */
@media(min-width:900px){
  .hero{grid-template-columns: 1fr 360px;align-items:center}
  .recipe-detail{grid-template-columns:1fr 360px}
  .card img{height:220px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* small utility */
.text-small{font-size:0.9rem;color:var(--muted)}