@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --bg-paper: #f8f1e3;
  --bg-panel: #fbf6e9;
  --border: #d6c597;
  --ink-900: #1a1509;
  --ink-700: #3b301a;
  --ink-500: #6b5a3c;
  --field-growing: #84b85a;
  --field-ripe: #debf3c;
  --tier-gold-star: #f2cc40;
  --ring: #8b6a24;
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ring); text-decoration: underline; }
a:hover { color: var(--ink-900); }

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}

header.site .brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ink-900);
  text-decoration: none;
  letter-spacing: -0.01em;
}

header.site nav a {
  margin-left: 20px;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink-500);
}

header.site nav a:hover { color: var(--ink-900); }

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  color: var(--ink-900);
}

h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  margin: 40px 0 12px;
  color: var(--ink-900);
}

h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  margin: 24px 0 4px;
  color: var(--ink-900);
}

p, li { color: var(--ink-700); }

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-500);
  margin: 0 0 32px;
}

.cta {
  display: inline-block;
  background: var(--ink-900);
  color: var(--bg-paper);
  padding: 14px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  margin: 24px 0;
  border: 2px solid var(--ink-900);
}

.cta:hover { background: var(--bg-paper); color: var(--ink-900); }
.cta.disabled { background: var(--bg-panel); color: var(--ink-500); border-color: var(--border); cursor: not-allowed; }

.hero-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 32px 0 40px;
  height: 80px;
}

.hero-fields > div { border-radius: 4px; }
.hero-fields > div:nth-child(1) { background: var(--field-growing); }
.hero-fields > div:nth-child(2) { background: var(--field-ripe); }
.hero-fields > div:nth-child(3) { background: var(--field-growing); }
.hero-fields > div:nth-child(4) { background: var(--tier-gold-star); }

footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--ink-500);
}

footer a { color: var(--ink-500); }
.muted { color: var(--ink-500); font-size: 0.8125rem; }
.updated { font-style: italic; color: var(--ink-500); margin-bottom: 32px; }

ul { padding-left: 1.25em; }
li { margin-bottom: 6px; }

/* Screenshot gallery */
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}

.shots img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* Support form */
.support-form { margin: 24px 0 8px; }

.support-form .field { margin-bottom: 16px; }

.support-form label {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink-700);
  margin-bottom: 6px;
}

.support-form input,
.support-form textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-900);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.support-form input:focus,
.support-form textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(139, 106, 36, 0.18);
}

.support-form textarea { resize: vertical; }

.support-form .cta { border: 2px solid var(--ink-900); cursor: pointer; }
.support-form .cta:disabled { opacity: 0.6; cursor: progress; }

/* Honeypot — visually and aurally hidden, but not display:none (bots skip those) */
.support-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin: 12px 0 0; font-size: 0.9375rem; min-height: 1.4em; }
.form-status.success { color: var(--field-growing); font-weight: 500; }
.form-status.error { color: #b4452e; font-weight: 500; }

@media (max-width: 600px) {
  h1 { font-size: 2rem; }
  main { padding: 24px 20px 64px; }
  header.site { flex-direction: column; align-items: flex-start; gap: 12px; }
  header.site nav a { margin-left: 0; margin-right: 16px; }
  .shots { grid-template-columns: 1fr; }
}