/* seedandshelf.com — the app's own palette (src/theme/colors.ts), so the site and
   the app read as one thing. No webfonts: Georgia is the second name in the
   lockup's own font stack, so the site's headings are already the brand's face,
   and nothing has to be downloaded before the page can render. */

:root {
  --paper: #faf6ec;
  --cream: #f1e7ce;
  --cream-deep: #e6d8b8;
  --line: #dccfae;
  --ink: #33291e;
  --ink-soft: #6b5d4a;
  --green: #446a3c;
  --green-deep: #2e4a29;
  --clay: #bb5a34;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

.wrap {
  max-width: 46rem; /* ~68 characters of body text */
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* --- header ------------------------------------------------------------- */

header.site {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 2rem 0 1.75rem;
  text-align: center;
}

header.site img.lockup {
  width: 100%;
  max-width: 26rem;
  height: auto;
}

header.site p.tagline {
  margin: 1rem auto 0;
  max-width: 30rem;
  font-family: Georgia, "Palatino Linotype", serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* --- type -------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: Georgia, "Palatino Linotype", serif;
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: 2rem; margin: 2.5rem 0 0.75rem; }
h2 {
  font-size: 1.4rem;
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
}
h3 { font-size: 1.1rem; margin: 1.75rem 0 0.4rem; }

p { margin: 0 0 1rem; }
strong { color: var(--ink); }
a { color: var(--clay); }
a:hover { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

.lede { font-size: 1.15rem; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

/* --- lists ------------------------------------------------------------- */

ul.plain { list-style: none; padding: 0; margin: 0 0 1rem; }
ul.plain li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
ul.plain li:last-child { border-bottom: 0; }
/* Sprout-green marker rather than a bullet glyph, so it matches the app's own
   list treatment. */
ul.plain li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 1.15rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--green);
}

/* --- panels ------------------------------------------------------------ */

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}

/* The one thing on the site worth interrupting the reader for: this app does not
   tell you how to can safely. */
.notice {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--clay);
  border-radius: 0.5rem;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.notice p:last-child { margin-bottom: 0; }

/* --- footer ------------------------------------------------------------ */

footer.site {
  margin-top: 3.5rem;
  background: var(--green-deep);
  color: var(--cream);
  padding: 2rem 0;
}
footer.site a { color: var(--cream); }
footer.site .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}
footer.site p { text-align: center; margin: 0; font-size: 0.9rem; opacity: 0.85; }

main { padding-bottom: 1rem; }