:root {
  --paper: #faf7f2;
  --ink: #221d18;
  --ink-soft: #5c5348;
  --ink-faint: #8a7f70;
  --rule: #e0d8cc;
  --accent: #a8552c;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.97rem + 0.15vw, 1.0625rem)/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.kicker, .rowlabel, .meta, .cat, .pc-tag, .pc-brand {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Header and footer */
.site-head, .site-foot { padding: 1.5rem var(--gutter); }
.site-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.wordmark { font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.site-head nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-head nav a {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
}
.site-head nav a:hover { color: var(--accent); }
.site-foot { border-top: 1px solid var(--rule); margin-top: 4rem; }
.foot-cats, .foot-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.foot-cats a, .foot-legal a {
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink-soft); text-decoration: none;
}
.foot-disclosure {
  font-family: var(--sans); font-size: 0.78rem; color: var(--ink-faint);
  margin: 1.25rem 0; padding: 0.75rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}

/* Layout */
main { padding: clamp(2rem, 5vw, 4rem) var(--gutter); max-width: 78rem; margin-inline: auto; }
h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.1rem); line-height: 1.12; font-weight: 400; letter-spacing: -0.015em; margin: 0.4rem 0 0.75rem; }
h1 a { text-decoration: none; }
h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); font-weight: 400; margin-top: 2.5rem; }
.dek { font-size: 1.1rem; color: var(--ink-soft); max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose p { margin: 1.15rem 0; }

/* Disclosure, must be visible and above the first card */
.disclosure {
  font-family: var(--sans); font-size: 0.8rem; color: var(--ink-soft);
  background: #f2ece2; border-left: 3px solid var(--accent);
  padding: 0.7rem 0.9rem; margin: 1.75rem 0; max-width: var(--measure);
}

/* Guide and category lists */
.guide-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.guide-item a { text-decoration: none; display: block; padding-top: 1rem; border-top: 1px solid var(--rule); }
.guide-item h3 { font-size: 1.15rem; font-weight: 400; line-height: 1.3; margin: 0.4rem 0; }
.guide-item p { font-size: 0.92rem; color: var(--ink-soft); margin: 0 0 0.5rem; }
.guide-item a:hover h3 { color: var(--accent); }

.hero { border-bottom: 1px solid var(--rule); padding-bottom: 2.5rem; margin-bottom: 2.5rem; }
.cat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.cat-chip {
  font-family: var(--sans); font-size: 0.8rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: 0.4rem 0.9rem; color: var(--ink-soft);
}
.cat-chip--hot { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Product card */
.picks { display: grid; gap: 2rem; margin-top: 3rem; }
.pc { border-top: 2px solid var(--ink); padding-top: 1.25rem; max-width: var(--measure); }
.pc-image--empty { display: none; }
.pc-image img { border-radius: 4px; margin-bottom: 1rem; }
.pc-rank { display: flex; align-items: baseline; gap: 0.75rem; }
.pc-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.pc-tag { color: var(--accent); }
.pc-title { font-size: 1.3rem; font-weight: 600; line-height: 1.25; margin: 0.5rem 0 0.15rem; }
.pc-brand { margin: 0 0 0.75rem; }
.pc-meta:empty { display: none; }
.pc-price { font-family: var(--sans); font-size: 1.3rem; font-weight: 700; }
.pc-price:empty { display: none; }
.pc-prime { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; color: #146eb4; border: 1px solid #cfe0ef; border-radius: 3px; padding: 0.1rem 0.35rem; margin-left: 0.5rem; }
.pc-rating { font-family: var(--sans); font-size: 0.8rem; color: var(--ink-faint); margin-left: 0.5rem; }
.pc-verdict { margin: 0.75rem 0; }
.pc-pros, .pc-cons { font-family: var(--sans); font-size: 0.88rem; margin: 0.5rem 0; padding-left: 1.1rem; }
.pc-pros li { color: #2f6b47; }
.pc-cons li { color: #a33b3b; }
.pc-specs { font-family: var(--sans); font-size: 0.85rem; margin: 1rem 0; border-top: 1px solid var(--rule); }
.pc-specs div { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid #f0eae0; }
.pc-specs span:first-child { color: var(--ink-faint); }
.pc-cta {
  display: inline-block; font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 0.75rem 1.4rem; border-radius: 4px; margin-top: 0.75rem; min-height: 44px;
}
.pc-cta:hover { background: var(--accent); }
.pc-fresh { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-faint); margin-top: 0.5rem; }

@media (max-width: 640px) {
  .site-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .pc-num { font-size: 1.6rem; }
  /* Long role tags (e.g. "Best for starting seeds indoors before it's warm
     enough outside") wrap to two lines at this width. Baseline-aligned next
     to the rank numeral, the wrapped second line crowds right under the
     numeral. Stacking removes the adjacency instead of trying to guess a
     gap that works for every tag length. */
  .pc-rank { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}