:root {
  --cream:#f5f0e8; --cream2:#ede7d9; --sage:#7a9e7e; --sage2:#5c7d60;
  --sage-light:#c8deca; --terra:#c4785a; --terra-light:#f0d9ce;
  --warm-dark:#2c2416; --warm-mid:#6b5e4a; --warm-light:#a89880;
  --white:#fdfaf4; --radius-lg:24px; --radius-pill:100px;
  --shadow-sm:0 2px 12px rgba(44,36,22,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"DM Sans",sans-serif; background:var(--cream); color:var(--warm-dark); min-height:100dvh; }
body::before { content:""; position:fixed; top:-120px; right:-80px; width:320px; height:320px;
  background:radial-gradient(circle,rgba(122,158,126,0.15) 0%,transparent 70%);
  pointer-events:none; z-index:0; }
.page { max-width:680px; margin:0 auto; padding:0 24px 64px; position:relative; z-index:1; }

.lang-toggle{display:flex;align-items:center;gap:4px;background:var(--cream2);border-radius:var(--radius-pill);padding:4px;flex-shrink:0}
.lang-btn{background:transparent;border:none;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--warm-light);cursor:pointer;padding:5px 10px;border-radius:var(--radius-pill);transition:background 0.2s,color 0.2s}
.lang-btn.active{background:var(--white);color:var(--sage2);box-shadow:0 1px 4px rgba(44,36,22,0.1)}
nav{display:flex;align-items:center;justify-content:space-between;padding:28px 0 0;margin-bottom:36px;gap:10px;flex-wrap:wrap}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logo{width:36px;height:36px}
.nav-name{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--warm-dark)}
.nav-name em{font-style:italic;color:var(--sage2)}
.nav-cta{background:linear-gradient(135deg,var(--sage),var(--sage2));color:white;border-radius:var(--radius-pill);padding:9px 18px;font-size:13px;font-weight:500;text-decoration:none}
.nav-back{font-size:13px;color:var(--warm-light);text-decoration:none;transition:color 0.2s}
.nav-back:hover{color:var(--sage2)}

/* ── Article page elements ── */
.article-header{margin-bottom:28px}
.article-tag{display:inline-block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.article-title{font-family:'Fraunces',serif;font-size:clamp(26px,5.5vw,38px);font-weight:600;color:var(--warm-dark);line-height:1.2;letter-spacing:-0.5px;margin-bottom:12px}
.article-desc{font-size:17px;color:var(--warm-mid);line-height:1.6;margin-bottom:14px;font-style:italic;font-family:'Fraunces',serif;font-weight:300}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--warm-light);padding-bottom:20px;border-bottom:1px solid var(--cream2)}
.toc{background:var(--white);border-radius:18px;padding:18px 20px;margin:24px 0;border-left:3px solid var(--sage-light);box-shadow:var(--shadow-sm)}
.toc-title{font-size:12px;font-weight:600;color:var(--warm-light);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px}
.toc ol{padding-left:18px}
.toc li{margin-bottom:6px}
.toc a{font-size:14px;color:var(--sage2);text-decoration:none;line-height:1.4}
.toc a:hover{text-decoration:underline}
.article-body{margin-top:8px}
.article-body p{font-size:16px;line-height:1.8;color:var(--warm-mid);margin-bottom:18px}
.article-body h2{font-family:'Fraunces',serif;font-size:22px;font-weight:500;color:var(--warm-dark);margin:32px 0 12px;line-height:1.3}
.article-body h3{font-size:16px;font-weight:600;color:var(--warm-dark);margin:20px 0 8px;line-height:1.4}
.article-body strong{color:var(--warm-dark)}
.article-body ul,.article-body ol{margin:12px 0 18px 20px}
.article-body ul li,.article-body ol li{font-size:15px;color:var(--warm-mid);line-height:1.8}

/* ── Recipe cards (used in recipe-style articles) ── */
.recipe-card{background:var(--white);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow-sm);margin:24px 0;border-left:4px solid var(--terra-light)}
.recipe-card h3{font-family:'Fraunces',serif;font-size:19px;font-weight:500;color:var(--warm-dark);margin-bottom:10px}
.recipe-meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.recipe-meta span{font-size:12px;color:var(--warm-light);background:var(--cream2);padding:3px 10px;border-radius:20px}
.recipe-card h4{font-size:13px;font-weight:600;color:var(--warm-mid);text-transform:uppercase;letter-spacing:1px;margin:14px 0 6px}
.recipe-card ul{margin:0 0 12px 16px}
.recipe-card ul li{font-size:14px;color:var(--warm-mid);line-height:1.7}
.recipe-card p{font-size:14px;color:var(--warm-mid);line-height:1.7;margin-bottom:8px}
.recipe-tip{background:#f0f8f0;border-radius:10px;padding:8px 12px;font-size:13px;color:var(--sage2);margin-top:10px}

.tips-box{background:var(--cream2);border-radius:16px;padding:18px 20px;margin:20px 0}
.tips-box h3{font-size:15px;font-weight:600;color:var(--warm-dark);margin-bottom:10px}
.tips-box ul{margin:0 0 0 16px}
.tips-box ul li{font-size:14px;color:var(--warm-mid);line-height:1.8}

.shopping-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.shopping-cat{background:var(--white);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm)}
.shopping-cat h4{font-size:12px;font-weight:600;color:var(--sage2);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.shopping-cat ul{margin:0 0 0 14px}
.shopping-cat ul li{font-size:13px;color:var(--warm-mid);line-height:1.7}
@media(max-width:480px){.shopping-grid{grid-template-columns:1fr}}

.cta-box{background:linear-gradient(135deg,#f0f8f0,#e4f0e5);border:1.5px solid var(--sage-light);border-radius:20px;padding:24px;text-align:center;margin:36px 0 0}
.cta-box p{font-size:15px;color:var(--warm-mid);margin-bottom:8px}
.cta-box h3{font-family:'Fraunces',serif;font-size:20px;font-weight:500;color:var(--warm-dark);margin-bottom:14px}
.cta-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--sage),var(--sage2));color:white;text-decoration:none;border-radius:50px;padding:14px 28px;font-size:15px;font-weight:500;box-shadow:0 4px 14px rgba(92,125,96,0.3);transition:transform 0.15s}
.cta-btn:active{transform:scale(0.97)}

.nav-articles{display:flex;justify-content:space-between;gap:12px;margin-top:32px}
.nav-art-link{background:var(--white);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--warm-mid);font-size:13px;box-shadow:var(--shadow-sm);flex:1;line-height:1.4;border:1px solid transparent;transition:border-color 0.2s}
.nav-art-link:hover{border-color:var(--sage-light)}
.nav-art-link span{display:block;font-size:11px;color:var(--warm-light);margin-bottom:4px}
.nav-art-link.right{text-align:right}

footer{text-align:center;padding-top:32px;border-top:1px solid var(--cream2);margin-top:40px}
footer p{font-size:12px;color:var(--warm-light);line-height:1.8}
footer a{color:var(--sage2);text-decoration:none}

/* ── Blog index page elements (blog.html) ── */
.blog-hero { margin-bottom:32px; }
.blog-badge { display:inline-flex; align-items:center; gap:6px; background:var(--sage-light);
  color:var(--sage2); font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  padding:5px 14px; border-radius:var(--radius-pill); margin-bottom:14px; }
.blog-hero h1 { font-family:'Fraunces',serif; font-size:clamp(28px,6vw,40px); font-weight:600;
  color:var(--warm-dark); line-height:1.2; letter-spacing:-0.5px; margin-bottom:10px; }
.blog-hero p { font-size:16px; color:var(--warm-mid); line-height:1.6; }
.tag-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.tag-pill { font-size:12px; font-weight:500; padding:5px 14px; border-radius:var(--radius-pill);
  cursor:pointer; border:1.5px solid var(--cream2); background:var(--white); color:var(--warm-mid);
  transition:all 0.2s; user-select:none; }
.tag-pill.active { border-color:var(--sage); background:var(--sage-light); color:var(--sage2); }
.articles-grid { display:flex; flex-direction:column; gap:14px; }
.article-card { background:var(--white); border-radius:var(--radius-lg); padding:20px 22px;
  text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); border:1px solid transparent;
  transition:border-color 0.2s,transform 0.18s,box-shadow 0.2s; display:block;
  animation:cardIn 0.4s ease both; }
@keyframes cardIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.article-card:hover { border-color:var(--sage-light); transform:translateY(-2px); box-shadow:0 6px 24px rgba(92,125,96,0.12); }
.card-tag { display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:1.5px; padding:3px 10px; border-radius:20px; margin-bottom:10px; }
.card-title { font-family:'Fraunces',serif; font-size:19px; font-weight:500; color:var(--warm-dark);
  line-height:1.3; margin-bottom:8px; }
.card-desc { font-size:14px; color:var(--warm-mid); line-height:1.6; margin-bottom:12px; }
.card-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--warm-light); }
.card-read-more { color:var(--sage2); font-weight:500; margin-left:auto; }
.article-count { font-size:12px; color:var(--warm-light); margin-bottom:16px;
  font-family:'Fraunces',serif; font-style:italic; }