/* BrewWise — shared stylesheet. No external dependencies. Mobile-first. */
:root{
  --bg:#faf7f1;
  --card:#ffffff;
  --ink:#2c231a;
  --muted:#6d5f50;
  --accent:#b4531d;
  --accent-dark:#8a3c12;
  --accent-light:#f6e7d4;
  --border:#e8ddcd;
  --green:#2e7d32;
  --red:#b3261e;
  --radius:12px;
  --shadow:0 2px 14px rgba(44,35,26,.08);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:1.05rem;
}
img,svg{max-width:100%}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1060px;margin:0 auto;padding:0 1.25rem}

/* Header */
.site-header{
  background:var(--ink);
  color:#f5ede1;
  position:sticky;top:0;z-index:50;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.25rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:800;font-size:1.35rem;letter-spacing:.5px}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;flex:none}
.main-nav{display:flex;gap:.25rem;flex-wrap:wrap}
.main-nav a{color:#e9dcc8;padding:.45rem .7rem;border-radius:8px;font-size:.98rem}
.main-nav a:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* Hero */
.hero{
  background:linear-gradient(135deg,#2c231a 0%,#4a3120 60%,#6b4423 100%);
  color:#f7efe2;
  padding:3.2rem 0 2.8rem;
}
.hero h1{font-size:2.3rem;line-height:1.2;margin:0 0 .8rem}
.hero p.lead{font-size:1.15rem;color:#e3d3ba;max-width:640px;margin:0 0 1.4rem}
.hero .btn{margin-right:.6rem;margin-bottom:.6rem}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff !important;
  padding:.7rem 1.3rem;
  border-radius:10px;
  font-weight:700;
  border:0;
  cursor:pointer;
  text-decoration:none !important;
  transition:background .15s ease, transform .1s ease;
}
.btn:hover{background:var(--accent-dark)}
.btn:active{transform:scale(.98)}
.btn-outline{background:transparent;color:var(--accent-dark) !important;border:2px solid var(--accent)}
.btn-outline:hover{background:var(--accent-light)}
.btn-cta{font-size:1.05rem;padding:.8rem 1.6rem}

/* Sections & cards */
.section{padding:2.4rem 0}
.section h2{font-size:1.7rem;margin:0 0 .4rem}
.section .sub{color:var(--muted);margin:0 0 1.4rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.3rem;
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.card h3{margin:.2rem 0 .5rem;font-size:1.15rem}
.card h3 a{color:var(--ink)}
.card p{color:var(--muted);font-size:.98rem;flex:1}
.card .meta{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}
.tag{
  display:inline-block;background:var(--accent-light);color:var(--accent-dark);
  font-size:.78rem;font-weight:700;padding:.15rem .6rem;border-radius:999px;margin-bottom:.5rem;
}

/* Article layout */
.article{max-width:760px;margin:0 auto;padding:2rem 1.25rem}
.article h1{font-size:2rem;line-height:1.25;margin:.4rem 0 .6rem}
.article h2{font-size:1.45rem;margin:2.2rem 0 .6rem;padding-top:.4rem;border-top:1px solid var(--border)}
.article h3{font-size:1.15rem;margin:1.6rem 0 .4rem}
.article .byline{color:var(--muted);font-size:.9rem;margin-bottom:1.2rem}
.breadcrumb{font-size:.9rem;color:var(--muted);margin-bottom:.6rem}
.breadcrumb a{color:var(--accent-dark)}

.disclosure-box{
  background:#fff8ec;border:1px solid #ecd9b8;border-left:5px solid var(--accent);
  border-radius:8px;padding:.85rem 1rem;font-size:.93rem;margin:1.2rem 0;color:#5d4a2f;
}
.verdict{
  background:var(--ink);color:#f5ede1;border-radius:var(--radius);
  padding:1.2rem 1.3rem;margin:1.6rem 0;
}
.verdict strong{color:#ffd9a8}
.verdict p{margin:.4rem 0}
.key-takeaways{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.4rem 0;box-shadow:var(--shadow)}
.key-takeaways h2{border:0;margin-top:0;padding-top:0}
.key-takeaways ul{margin:.4rem 0;padding-left:1.2rem}

/* Tables */
.table-wrap{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
th{background:var(--ink);color:#f5ede1;text-align:left;padding:.7rem .8rem}
td{padding:.7rem .8rem;border-top:1px solid var(--border);vertical-align:top}
tr:nth-child(even) td{background:#fdfaf5}
td .btn{padding:.4rem .9rem;font-size:.88rem;white-space:nowrap}

/* Pros / cons */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.2rem 0}
.pros,.cons{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem}
.pros h4{color:var(--green);margin:.2rem 0 .5rem}
.cons h4{color:var(--red);margin:.2rem 0 .5rem}
.pros ul,.cons ul{margin:0;padding-left:1.2rem;font-size:.97rem}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--border);border-radius:10px;margin:.6rem 0;padding:.8rem 1rem}
.faq summary{font-weight:700;cursor:pointer;color:var(--ink)}
.faq p{margin:.5rem 0 0;color:var(--muted)}

/* CTA block */
.cta-block{background:var(--accent-light);border:1px solid #e5c9a4;border-radius:var(--radius);padding:1.4rem;text-align:center;margin:2rem 0}
.cta-block p{margin:.3rem 0 1rem}

/* Product mini-review */
.product{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem;margin:1.4rem 0;box-shadow:var(--shadow)}
.product h3{margin-top:0}
.product .price-note{font-size:.88rem;color:var(--muted)}

/* Email signup */
.signup{background:var(--ink);color:#f5ede1;border-radius:var(--radius);padding:1.8rem;margin:2.4rem 0}
.signup h2{color:#fff;margin-top:0}
.signup p{color:#d9c6a8}
.signup form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.signup input[type=email]{flex:1;min-width:220px;padding:.7rem .9rem;border-radius:10px;border:1px solid #5d4a38;font-size:1rem}
.signup .fine{font-size:.82rem;color:#a98f6d;margin-top:.7rem}

/* Forms (contact) */
.form-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow);max-width:640px}
.form-card label{display:block;font-weight:700;margin:.9rem 0 .3rem}
.form-card input,.form-card textarea,.form-card select{width:100%;padding:.7rem .9rem;border:1px solid var(--border);border-radius:8px;font-size:1rem;font-family:var(--font)}
.form-card textarea{min-height:140px;resize:vertical}
.form-note{font-size:.88rem;color:var(--muted);background:#fff8ec;border:1px solid #ecd9b8;border-radius:8px;padding:.7rem 1rem;margin-bottom:1.2rem}

/* Footer */
.site-footer{background:var(--ink);color:#cbbfa9;margin-top:3rem;padding:2.6rem 0 1.4rem;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.6rem;margin-bottom:1.6rem}
.footer-grid h4{color:#fff;margin:.2rem 0 .7rem;font-size:1rem}
.footer-grid a{color:#cbbfa9;display:block;padding:.18rem 0}
.footer-grid a:hover{color:#fff}
.footer-brand{display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:800;font-size:1.2rem;margin-bottom:.5rem}
.footer-brand svg{width:28px;height:28px}
.disclosure-notice{border-top:1px solid #4a3a2a;border-bottom:1px solid #4a3a2a;padding:1rem 0;margin-bottom:1rem;font-size:.88rem;color:#a98f6d}
.copyright{font-size:.85rem;color:#8a765c;text-align:center}

/* Responsive */
@media (max-width:720px){
  .hero h1{font-size:1.75rem}
  .article h1{font-size:1.6rem}
  .pros-cons{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .header-inner{padding:.6rem 1rem}
  .main-nav a{padding:.35rem .5rem;font-size:.92rem}
  body{font-size:1rem}
}