:root {
  --ink: #163D34;
  --forest: #184E40;
  --leaf: #7E9957;
  --sage: #BED09B;
  --cream: #F4EFDF;
  --paper: #FAF8F0;
  --gold: #D8AC51;
  --coast: #497F98;
  --clay: #B86D4D;
  --muted: #5D7065;
  --text: #163D34;
  --secondaryText: #5D7065;
  --background: #FAF8F0;
  --surface: #F4EFDF;
  --action: #184E40;
  --onAction: #F4EFDF;
  --focus: #184E40;
  --border: #A6B58E;
  --warningText: #7D432F;
}
/* :root token variables are prepended by build.cjs from assets/design/moss-design-tokens.json */
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/NunitoSans-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 400 1rem/1.6 "Nunito Sans", system-ui, sans-serif;
}

a { color: var(--action); font-weight: 700; text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.preview {
  margin: 0;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
}

.bar { max-width: 1080px; margin: 0 auto; padding: 24px 24px 0; }
/* Wordmark clear space: at least a quarter of the lettering height on all sides. */
.logo { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 0; }
.logo img { display: block; width: 128px; height: auto; }

main { max-width: 1080px; margin: 0 auto; padding: 24px; }

.hero {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 24px 0 48px;
}
@media (min-width: 860px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0 64px; }
}

h1 {
  margin: 0 0 16px;
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.12;
  color: var(--forest);
}
h2 { margin: 32px 0 8px; font-weight: 800; font-size: 1.375rem; color: var(--forest); }

.lede { margin: 0 0 16px; font-size: 1.1875rem; max-width: 34em; }
.status {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 700;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.contact {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border-radius: 20px;
  background: var(--surface);
}
.contact h2 { margin-top: 0; }
.contact p { margin: 0; }
.fox { flex: none; width: 96px; height: 96px; object-fit: contain; }
@media (max-width: 520px) { .contact { flex-direction: column; align-items: flex-start; } }

.prose { max-width: 720px; }
.prose p { margin: 0 0 16px; }

footer {
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 24px;
  border-top: 1px solid var(--border);
  color: var(--secondaryText);
  font-size: 0.9375rem;
}
footer p { margin: 0 0 8px; }
footer nav a { display: inline-block; margin-right: 20px; padding: 12px 0; }