/* ===== Tokens ===== */
:root{
  --paper:#EEEBE3;
  --paper-dark:#E4DFD1;
  --ink:#1E1B18;
  --ink-soft:#514C46;
  --flame:#E2401F;
  --flame-dark:#B32E13;
  --flame-tint:#FBE4DC;
  --teal:#1F5C55;
  --teal-tint:#DCEAE6;
  --gold:#B8892B;
  --gold-tint:#F3E7CC;
  --line:#D8D2C4;
  --line-strong:#BDB5A2;
  --card:#F7F5EF;
  --radius:3px;
  /* Category accents */
  --c-fryer:#E2401F;
  --c-fryer-tint:#FBE0D6;
  --c-coffee:#6B4226;
  --c-coffee-tint:#E9DACB;
  --c-ice:#1F7A8C;
  --c-ice-tint:#D7EEF2;
  --c-blend:#3B6E4E;
  --c-blend-tint:#DCEBDF;
  --c-cook:#A8763E;
  --c-cook-tint:#F0E1CC;
  --c-grill:#8C2F1B;
  --c-grill-tint:#F0DAD2;
  --serif:"Source Serif 4","Georgia",serif;
  --grotesk:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grotesk);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--teal);}
.wrap{max-width:960px;margin:0 auto;padding:0 24px;}
.icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;vertical-align:-0.15em;}

/* ===== Top bar ===== */
.topbar{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  position:sticky;top:0;background:rgba(238,235,227,.92);backdrop-filter:blur(6px);z-index:20;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;}
.brand{
  font-family:var(--mono);
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink);
  font-size:15px;
  display:flex;align-items:center;gap:8px;
}
.brand .flame-dot{width:9px;height:9px;background:var(--flame);border-radius:50%;display:inline-block;}
.brand b{color:var(--flame);}
.nav a{
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  text-decoration:none;
  margin-left:22px;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--flame);border-color:var(--flame);}

/* ===== Hero ===== */
.hero{
  padding:52px 0 0;
  background:var(--ink);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;top:-140px;right:-100px;width:460px;height:460px;
  background:var(--flame);border-radius:50%;opacity:.55;
  filter:blur(40px);
}
.hero::after{
  content:"";
  position:absolute;bottom:-180px;right:140px;width:280px;height:280px;
  background:var(--teal);border-radius:50%;opacity:.5;
  filter:blur(40px);
}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:center;padding-bottom:36px;position:relative;z-index:1;}
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 14px;
  display:flex;align-items:center;gap:8px;
  font-weight:700;
}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--gold);display:inline-block;}
h1.display{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(38px,6.5vw,62px);
  line-height:1.02;
  margin:0 0 18px;
  letter-spacing:-0.01em;
  color:var(--paper);
}
h1.display em{font-style:italic;color:var(--flame);-webkit-text-stroke:.5px var(--paper);}
.lede{font-size:18px;color:#C9C2B4;max-width:56ch;margin:0;}

.badge-stack{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1;}
.badge-stat{
  display:flex;align-items:center;gap:14px;
  background:var(--paper);
  border-radius:99px;
  padding:8px 22px 8px 8px;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.badge-stat .dot{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:17px;color:#fff;
  flex-shrink:0;
}
.badge-stat .dot.f1{background:var(--flame);}
.badge-stat .dot.f2{background:var(--teal);}
.badge-stat .dot.f3{background:var(--gold);}
.badge-stat span{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.badge-stat b{display:block;font-family:var(--grotesk);font-weight:800;font-size:15px;color:var(--ink);}

/* ===== Category chips row — solid color pills ===== */
.chiprow{display:flex;flex-wrap:wrap;gap:10px;padding:26px 0 30px;position:relative;z-index:1;}
.chip{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border:none;
  border-radius:999px;
  padding:8px 16px;
  display:flex;align-items:center;gap:7px;
  color:#fff;
  font-weight:700;
}
.chip:nth-child(1){background:var(--c-fryer);}
.chip:nth-child(2){background:var(--c-coffee);}
.chip:nth-child(3){background:var(--c-ice);}
.chip:nth-child(4){background:var(--c-blend);}
.chip:nth-child(5){background:var(--c-cook);}
.chip:nth-child(6){background:var(--c-grill);}
.chip .icon{color:#fff;width:14px;height:14px;}

/* ===== Article index — colorful category cards ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:36px 0;}
.grid-item{
  background:var(--card);
  border:2px solid var(--ink);
  border-top:9px solid var(--line-strong);
  padding:0;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.grid-item:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 32px -10px rgba(30,27,24,.45);
}
.grid-item.pillar{border-top-color:var(--gold);background:var(--gold-tint);}
.grid-item.cat-fryer{border-top-color:var(--c-fryer);background:var(--c-fryer-tint);}
.grid-item.cat-coffee{border-top-color:var(--c-coffee);background:var(--c-coffee-tint);}
.grid-item.cat-ice{border-top-color:var(--c-ice);background:var(--c-ice-tint);}
.grid-item.cat-blend{border-top-color:var(--c-blend);background:var(--c-blend-tint);}
.grid-item.cat-cook{border-top-color:var(--c-cook);background:var(--c-cook-tint);}
.grid-item.cat-grill{border-top-color:var(--c-grill);background:var(--c-grill-tint);}

.grid-icon{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  margin:22px 0 0 22px;
}
.grid-item.pillar .grid-icon{background:var(--gold);}
.grid-item.cat-fryer .grid-icon{background:var(--c-fryer);}
.grid-item.cat-coffee .grid-icon{background:var(--c-coffee);}
.grid-item.cat-ice .grid-icon{background:var(--c-ice);}
.grid-item.cat-blend .grid-icon{background:var(--c-blend);}
.grid-item.cat-cook .grid-icon{background:var(--c-cook);}
.grid-item.cat-grill .grid-icon{background:var(--c-grill);}
.grid-icon .icon{width:28px;height:28px;stroke-width:1.4;}

.grid-body{padding:16px 22px 22px;flex:1;display:flex;flex-direction:column;}
.stars{color:var(--gold);font-size:13px;letter-spacing:1px;margin:0 0 8px;}
.grid-title{font-family:var(--serif);font-size:21px;margin:0 0 6px;line-height:1.2;}
.grid-meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;}
.grid-status{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  padding:6px 12px;border:1px solid var(--line-strong);color:var(--ink-soft);
  white-space:nowrap;border-radius:999px;align-self:flex-start;margin-top:auto;
}
.grid-status.live{border-color:var(--teal);color:#fff;background:var(--teal);}

/* ===== Trust strip ===== */
.trust{display:flex;flex-wrap:wrap;gap:28px;padding:20px 24px;background:var(--gold);border-radius:4px;margin:8px 0 36px;}
.trust-item{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:#fff;text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.trust-item .icon{color:var(--ink);width:18px;height:18px;}

/* ===== Full-bleed category bands (pillar guide) ===== */
.cat-band{width:100%;}
.cat-band .inner{max-width:960px;margin:0 auto;padding:52px 24px;}
.cat-band.b-fryer{background:var(--c-fryer-tint);}
.cat-band.b-coffee{background:var(--c-coffee-tint);}
.cat-band.b-ice{background:var(--c-ice-tint);}
.cat-band.b-blend{background:var(--c-blend-tint);}
.cat-band.b-cook{background:var(--c-cook-tint);}
.cat-band.b-grill{background:var(--c-grill-tint);}
.cat-band h2{margin-top:0;}

/* ===== Article body ===== */
.article{padding:48px 0 80px;}
.article-head{padding:56px 0 16px;}
.category-icon{
  width:72px;height:72px;border-radius:50%;
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  box-shadow:0 10px 22px -10px rgba(30,27,24,.5);
}
.category-icon.cat-coffee{background:var(--c-coffee);}
.category-icon.cat-grill{background:var(--c-grill);}
.category-icon.cat-fryer{background:var(--c-fryer);}
.category-icon.cat-ice{background:var(--c-ice);}
.category-icon.cat-blend{background:var(--c-blend);}
.category-icon.cat-cook{background:var(--c-cook);}
.category-icon .icon{width:32px;height:32px;stroke-width:1.4;}
.article h2{font-family:var(--serif);font-size:28px;margin:48px 0 16px;}
.article h3{font-family:var(--grotesk);font-weight:700;font-size:17px;margin:32px 0 10px;}
.article p{font-size:17px;color:#2b2722;}
.article ul{padding-left:20px;}
.article li{margin-bottom:8px;font-size:16px;}

/* ===== Verdict meter (signature element) ===== */
.meter{margin:20px 0 32px;border:1px solid var(--line);background:var(--card);padding:22px;position:relative;}
.meter::before{
  content:"VERDICT";
  position:absolute;top:-10px;left:20px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  padding:3px 10px;border-radius:2px;
}
.meter-row{display:grid;grid-template-columns:150px 1fr 70px;align-items:center;gap:12px;margin-bottom:14px;}
.meter-row:last-child{margin-bottom:0;}
.meter-label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
.meter-track{height:8px;background:var(--line);position:relative;border-radius:99px;overflow:hidden;}
.meter-fill{height:100%;background:var(--flame);border-radius:99px;}
.meter-fill.alt{background:var(--teal);}
.meter-score{font-family:var(--mono);font-size:12px;text-align:right;font-weight:600;}

/* ===== Compare table ===== */
table.cmp{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px;}
table.cmp th,table.cmp td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;}
table.cmp th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}
table.cmp tr:nth-child(even) td{background:var(--card);}

/* ===== Amazon CTA button ===== */
.buybox{
  border:2px solid var(--ink);
  background:var(--card);
  padding:22px;
  margin:28px 0;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  position:relative;
}
.buybox.winner{border-color:var(--gold);border-width:3px;background:var(--gold-tint);}
.ribbon{
  position:absolute;top:-12px;left:20px;
  background:var(--gold);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:2px;
  display:flex;align-items:center;gap:5px;
}
.buybox-name{font-family:var(--serif);font-size:19px;margin:0 0 4px;}
.buybox-price{font-family:var(--mono);font-size:13px;color:var(--ink-soft);}
.btn-amazon{
  font-family:var(--mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-decoration:none;
  background:var(--flame);
  color:#fff;
  padding:13px 22px;
  border-radius:var(--radius);
  white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .15s ease, transform .15s ease;
}
.btn-amazon:hover{background:var(--flame-dark);transform:translateY(-1px);}
.disclosure{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  border-left:3px solid var(--flame);
  padding:10px 16px;
  background:var(--card);
  margin:32px 0;
}

/* ===== Footer ===== */
footer{background:var(--ink);padding:36px 0;margin-top:56px;}
footer p{font-family:var(--mono);font-size:12px;color:#C9C2B4;}

@media(max-width:640px){
  .wrap{padding:0 18px;}

  /* Top bar: stack nav under brand, no more mid-word wrapping */
  .topbar .wrap{flex-wrap:wrap;row-gap:10px;padding:2px 18px;}
  .nav{width:100%;display:flex;gap:20px;}
  .nav a{margin-left:0;font-size:11px;}

  .hero-grid{grid-template-columns:1fr;gap:24px;}
  .badge-stack{flex-direction:column;}
  h1.display{font-size:32px;}

  .grid{grid-template-columns:1fr;}

  /* Buy boxes: stack and make the CTA a clear full-width tappable button */
  .buybox{flex-direction:column;align-items:stretch;gap:14px;padding:20px 18px;}
  .buybox-name{font-size:17px;}
  .btn-amazon{width:100%;justify-content:center;border-radius:6px;padding:14px 20px;}
  .ribbon{position:static;display:inline-flex;margin-bottom:4px;}

  table.cmp{font-size:13px;}
  table.cmp th,table.cmp td{padding:8px 8px;}
}