/* Gardening style — Teich-Morgen palette, extracted from chatbot-garden (renate.chat).
   See ~/.claude/skills/tilde-style/reference/gardening.md for the full spec. */

:root {
  --pond-deep:    #1b4332;
  --pond-mid:     #2d6a4f;
  --pond-light:   #40916c;
  --lily-sage:    #74c69d;
  --lily-pale:    #ebf5ee;
  --lily-whisper: #f4faf6;
  --birdhouse:    #b5723a;
  --text-dark:    #1a2d22;
  --text-mid:     #3d5446;
  --text-soft:    #7a9482;

  --text-hero:  clamp(2.4rem, 5vw, 4rem);
  --text-h2:    clamp(1.4rem, 3vw, 2rem);
  --text-body:  1rem;
  --text-prose: 1.125rem;
  --text-meta:  0.9375rem;
  --text-micro: 0.82rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lily-pale);
  color: var(--text-dark);
  font: var(--text-body)/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.wrap {
  max-width: 68ch;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

header.hero {
  padding: 5rem 1.5rem 3rem;
  background: var(--pond-deep);
  color: var(--lily-whisper);
}

header.hero .inner {
  max-width: 68ch;
  margin: 0 auto;
}

h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: var(--text-hero);
  letter-spacing: .02em;
  margin: 0 0 .75rem;
}

header.hero p.tagline {
  font-size: var(--text-prose);
  color: var(--lily-sage);
  margin: 0;
  max-width: 42ch;
}

h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: var(--text-h2);
  color: var(--pond-deep);
  margin: 3rem 0 1rem;
}

p, li {
  font-size: var(--text-prose);
  line-height: 1.7;
  color: var(--text-mid);
}

a { color: var(--pond-mid); }
a:hover { color: var(--pond-light); }

.specimen {
  border-left: 3px solid var(--lily-sage);
  padding: .25rem 0 .25rem 1.25rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: var(--text-dark);
}

.specimen cite {
  display: block;
  margin-top: .5rem;
  font-style: normal;
  font-size: var(--text-meta);
  color: var(--text-soft);
}

.inhabitants {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.inhabitant {
  display: block;
  background: var(--lily-whisper);
  border: 1px solid var(--lily-sage);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  text-decoration: none;
  transition: border-color .3s ease, background .3s ease;
}

.inhabitant:hover {
  border-color: var(--pond-light);
  background: #fff;
}

.inhabitant .name {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  color: var(--pond-deep);
  margin: 0 0 .35rem;
}

.inhabitant .desc {
  font-size: var(--text-meta);
  color: var(--text-mid);
  margin: 0;
}

.inhabitant .since {
  display: inline-block;
  margin-top: .75rem;
  font-size: var(--text-micro);
  color: var(--text-soft);
}

.back {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: var(--text-meta);
  color: var(--text-soft);
  text-decoration: none;
}
.back:hover { color: var(--pond-mid); }

footer {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  font-size: var(--text-micro);
  color: var(--text-soft);
}

@media (prefers-reduced-motion: no-preference) {
  header.hero .inner { animation: fadeIn 1.2s ease-in; }
  .inhabitant { animation: fadeIn .6s ease-in; }
}
@media (prefers-reduced-motion: reduce) {
  header.hero .inner, .inhabitant { animation: none; opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}