/* Sticky-footer layout: the footer should always sit at the bottom of the
   viewport, not float up mid-page when there isn't much content (e.g. no
   search run yet, or few results). .page-content takes all remaining
   vertical space so footer is pushed down, never leaving dead space below
   it on tall screens. */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

/* ---- Site header: logo/name and the one path to farmer signup, stacked
   as two light centered rows rather than crammed side by side on one
   line — logo + tagline + a CTA button all sharing one row reads as
   cluttered, three different things all asking for attention at once.
   Stacked, each row stays simple: the brand mark reads first, the CTA
   reads as a calm second line right underneath it, not a competing
   headline. Still above the actual hero heading, still visible on every
   load, just no longer visually loud about it (see the git history for
   the two earlier versions this replaced: a full-width green banner
   above the header entirely, then a same-row side-by-side layout). */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(32px, 6vw, 52px) clamp(20px, 4vw, 56px) 0;
  text-align: center;
}
.hero-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-logo {
  height: 44px;
  width: auto;
  display: block;
}
.hero-sitename {
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--parchment-500);
  padding-left: 14px;
  border-left: 1px solid var(--soil-700);
}
.hero-farmer-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brand-300);
  text-decoration: none;
  padding: 8px 15px;
  border: 1px solid var(--brand-500);
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.hero-farmer-cta:hover {
  background: var(--brand-500);
  color: var(--soil-950);
}

.hero {
  padding: clamp(40px, 7vw, 88px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-400);
  margin-bottom: 14px;
  display: block;
}
.hero h2 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  max-width: 20ch;
  line-height: 1.05;
  margin: 0 auto 16px;
}
.hero p {
  max-width: 52ch;
  font-size: 1.05rem;
  margin: 0 auto;
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 22px auto 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--parchment-400);
}
.hero-stat strong {
  color: var(--moss-400);
  font-weight: 600;
}
.hero-stat-sep {
  opacity: 0.4;
}

.locator {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: center;
  gap: 14px;
  margin: 36px auto 0;
  padding: 22px;
  max-width: 920px;
  background: var(--soil-900);
  border: 1px solid var(--soil-700);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  text-align: left;
}
.locator .field {
  flex: 1 1 200px;
  min-width: 160px;
}
.locator label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.locator button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero #country-note {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.how-it-works {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px);
}
.how-it-works-step {
  flex: 1 1 220px;
  max-width: 300px;
  text-align: center;
}
/* Larger hand-drawn illustrations (not the small 1em line icons used
   elsewhere on the site) — enough visual weight that how the GAN Project
   works reads at a glance, not just from the caption text underneath.
   Same stroke-based, single-color style as every other icon on the site
   (see public/js/icons.js), just bigger and more detailed, so it stays
   consistent rather than introducing a second visual language. */
.how-it-works-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--soil-900);
  border: 1px solid var(--soil-700);
  color: var(--moss-400);
  margin-bottom: 16px;
}
.how-it-works-icon svg {
  width: 58px;
  height: 58px;
}
.how-it-works-step h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}
.how-it-works-step p {
  font-size: 0.88rem;
  color: var(--parchment-500);
  margin: 0;
}

/* Sits between the hero and the results, matching the hero/how-it-works
   content width, so it reads as part of the same intro section rather
   than an unrelated aside. Deliberately placed above the fold-ish (right
   after how-it-works, before results) rather than only in the footer:
   these are exactly the kind of platform facts a visitor should see
   without having to scroll past every listing first. May hold more than
   one stacked .callout (the in-person-only rule, AntsCanada's role), so
   this owns the spacing between them rather than each callout's own
   margin-bottom (which tokens.css's shared .callout already zeroes out
   as a last-child, and would otherwise collapse two stacked callouts
   together with no gap at all). */
.page-callout-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px) clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-callout-wrap .callout {
  margin-bottom: 0;
}
.page-callout-wrap .callout p {
  font-size: 0.88rem;
}

main {
  width: 100%;
  padding: 8px clamp(20px, 4vw, 56px) 72px;
  max-width: 1760px;
  margin: 0 auto;
}

.results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--parchment-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Crossfade between skeleton/results/empty-state instead of an instant
   innerHTML swap — see setResultsHtml() in marketplace.js. */
#results {
  transition: opacity 0.16s ease, transform 0.16s ease;
}
#results.is-transitioning {
  opacity: 0;
  transform: translateY(4px);
}

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

/* Signature element: a specimen tag. Notched top corner + a mono "collection
   label" strip, echoing a museum specimen card pinned with the species name. */
.specimen-card {
  position: relative;
  background: var(--soil-900);
  border: 1px solid var(--soil-700);
  border-left: 3px solid var(--brand-500);
  border-radius: 2px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-card);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  /* The grid stretches every card in a row to the same height; laying the
     card out as a column and pinning .card-footer to the bottom (instead of
     letting it fall wherever the description ends) keeps the price/Inquire
     button aligned across cards of different description lengths. */
  display: flex;
  flex-direction: column;
}
.specimen-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 16px; height: 16px;
  background: var(--soil-950);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-left: 1px solid var(--soil-700);
  border-bottom: 1px solid var(--soil-700);
}
.specimen-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-300);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.specimen-card h3 {
  font-size: 1.12rem;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.specimen-card h3 .icon { color: var(--brand-500); }
.specimen-card .desc {
  font-size: 0.88rem;
  color: var(--parchment-300);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-more {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand-300);
  cursor: pointer;
}
.desc-more:hover {
  text-decoration: underline;
}
.card-footer {
  margin-top: auto;
}
.specimen-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  padding-top: 12px;
  border-top: 1px dashed var(--soil-700);
}
.price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--parchment-050);
  font-size: 1.05rem;
}
.qty {
  color: var(--parchment-500);
  font-size: 0.78rem;
}
.housing-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--parchment-500);
  margin-bottom: 10px;
}
.seller-line {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--parchment-500);
  display: flex;
  align-items: center;
  gap: 5px;
}
.stamp {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--parchment-500);
  margin-top: 4px;
}

.empty-state {
  border: 1px dashed var(--soil-700);
  border-radius: var(--radius-md);
  padding: 48px 20px;
  text-align: center;
  color: var(--parchment-500);
  max-width: 640px;
  margin: 0 auto;
}
.empty-state strong {
  display: block;
  color: var(--parchment-100);
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.skeleton {
  height: 150px;
  border-radius: var(--radius-md);
  background: linear-gradient(100deg, var(--soil-900) 30%, var(--soil-800) 50%, var(--soil-900) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

footer {
  padding: 24px clamp(20px, 4vw, 56px) 44px;
  color: var(--parchment-500);
  font-size: 0.8rem;
  border-top: 1px solid var(--soil-800);
  text-align: center;
}
footer p { margin: 0 0 8px; color: inherit; font-size: inherit; }
footer p:last-child { margin-bottom: 0; }
.footer-links a { color: var(--parchment-500); text-decoration: underline; text-underline-offset: 2px; }
.footer-links a:hover { color: var(--brand-300); }
.footer-links span { padding: 0 4px; opacity: 0.5; }

@media (max-width: 480px) {
  .hero { padding: 32px 16px 28px; }
  .locator { padding: 16px; gap: 12px; }
  .results-meta { flex-wrap: wrap; gap: 6px; }
  .specimen-card { padding: 16px 16px 14px; }
  .how-it-works { gap: 24px; padding-bottom: 32px; }
  .site-header { padding-top: 28px; gap: 14px; }
  /* white-space:normal + a smaller border-radius rather than the default
     999px pill: on a narrow enough phone the full CTA sentence has to
     wrap to two lines to fit at all, and a 999px radius on a two-line
     button looks like a stretched stadium shape, not a button. */
  .hero-farmer-cta {
    font-size: 0.8rem;
    padding: 8px 16px;
    white-space: normal;
    text-align: center;
    border-radius: 10px;
    max-width: 280px;
  }
}