:root {
  --bg: #f4f8f1;
  --ink: #26332a;
  --green: #3f7a4e;
  --green-dk: #2d5a39;
  --terra: #b5632f;
  --edge: #d6e4d2;
  --dim: #5f7163;
  --card: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  line-height: 1.6;
}

a { color: var(--green); }
a:hover { color: var(--green-dk); }

.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--edge);
}
.plot { max-width: 820px; margin: 0 auto; padding: 0 18px; }
.topbar .plot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 14px 18px;
}
.brandmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--green-dk);
  text-decoration: none;
}
.brandmark svg { width: 26px; height: 26px; display: block; }
.tabs { margin-left: auto; display: flex; gap: 18px; font-size: .95rem; }
.tabs a { color: var(--dim); text-decoration: none; }
.tabs a:hover { color: var(--terra); }

.hello { padding: 26px 18px 4px; }
.hello h1 { font-size: 1.6rem; margin: 0 0 8px; color: var(--green-dk); }
.hello p { margin: 0; color: #3b4a3f; max-width: 60ch; }

main .plot { padding: 18px; }
h2 { font-size: 1.15rem; color: var(--green-dk); margin: 24px 0 14px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.pot {
  background: var(--card);
  border: 1px solid var(--edge);
  border-top: 4px solid var(--green);
  border-radius: 10px;
  padding: 15px 17px;
}
.pot .stamp {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--terra);
  margin: 0 0 6px;
}
.pot h3 { margin: 0 0 7px; font-size: 1.05rem; color: var(--ink); }
.pot h3 a { text-decoration: none; }
.pot h3 a:hover { text-decoration: underline; }
.pot p { margin: 0; font-size: .95rem; }

.panel {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 18px 20px;
}
.panel p { margin: 0 0 12px; }
.panel p:last-child { margin-bottom: 0; }
.panel h2:first-child { margin-top: 0; }

.sprout { font-size: 2.4rem; margin: 0 0 4px; }
.nope { text-align: center; padding: 56px 18px; }
.nope .big { font-size: 2.8rem; color: var(--terra); margin: 0 0 8px; font-weight: 700; }

.leaf-foot {
  background: var(--green-dk);
  color: #cfe3d2;
  margin-top: 34px;
}
.leaf-foot .plot { padding: 18px; font-size: .85rem; }
.leaf-foot a { color: #e9d2bd; }

@media (max-width: 440px) {
  .tabs { margin-left: 0; width: 100%; gap: 14px; }
  .grid { grid-template-columns: 1fr; }
}