/* 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;
  --green-soft: #5f8a54; /* the app's greenSoft — hover underlines */
  --clay: #bb5a34;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* The promo banner is an in-page jump; sliding makes it obvious the page moved
     rather than replaced itself. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

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;
}

/* Tighter gutters on a phone. 1.25rem either side is generous at 390px wide, and
   the header tagline wants that width to stay on one line. Not taken to zero —
   text against the screen edge reads badly and can sit under a curved bezel. */
@media (max-width: 30rem) {
  .wrap { padding: 0 0.9rem; }
}

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

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

/* Top nav. Inline links on the right at desktop; a hamburger on the left below
   640px, opening the drawer further down this file.
   The negative margins pull it up and out into the header's own padding, so it
   sits nearer the corner than the text column allows. */
nav.topnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.95rem;
  margin: -1.25rem -0.4rem 0.9rem 0;
}
nav.topnav a {
  color: var(--green-deep);
  text-decoration: none;
  font-weight: 600;
}
/* The underline arrives in the lighter green while the text stays dark, so the
   hover reads as a change of state rather than a change of colour. Specific
   enough to beat the global `a:hover { text-decoration: none }`. */
nav.topnav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
nav.topnav .sep {
  color: var(--line);
  margin: 0 0.55rem;
}

/* Wide screens: the nav leaves the text column and sits against the PAGE's right
   edge. It can't get there by margin alone — .wrap is max-width 46rem and centred,
   so an in-flow nav is pinned to the text column's edge however far it's pulled.
   Absolute positioning against the full-width header is the only way out.
   Gated at 56rem because below that the centred lockup and a right-hand nav no
   longer fit side by side, and they would overlap. */
@media (min-width: 56rem) {
  header.site { position: relative; }
  nav.topnav {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    margin: 0;
  }
}

/* Hidden at desktop; the media query at the end of this file swaps them. */
.menu-btn { display: none; }

/* --- mobile drawer ------------------------------------------------------ */

.menu-btn {
  background: none;
  border: 0;
  padding: 0.4rem;
  margin: 0;
  cursor: pointer;
  color: var(--green-deep);
  line-height: 0;
}
.menu-btn:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(35, 28, 18, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 20;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 20rem);
  background: var(--cream);
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  /* visibility, not just transform: it also takes the links out of the tab order
     while the drawer is shut. */
  visibility: hidden;
  transition: transform 200ms ease, visibility 200ms;
  z-index: 21;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { transform: none; visibility: visible; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 2px solid var(--green-deep);
}
.drawer-mark { width: 2.75rem; height: 2.75rem; }
.drawer-close {
  background: none;
  border: 0;
  padding: 0.25rem 0.4rem;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--green-deep);
}
.drawer-close:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 1rem;
  /* The dark-green rules asked for: one under each row, so they read as a stack
     of bars rather than a list with a stray line at the end. */
  border-bottom: 2px solid var(--green-deep);
}
.drawer-links a:hover { background: var(--cream-deep); text-decoration: none; }

/* Locked while the drawer is open so the page behind doesn't scroll under a
   dragging finger. */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-backdrop { transition: none; }
}

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;
  /* Scales with the viewport so the line holds together on a phone — at a flat
     1.15rem it needs ~390px and drops "harvest" onto its own line on anything
     narrower. Capped at 1.15rem, so desktop is exactly as before. */
  font-size: clamp(0.95rem, 4.1vw, 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);
  /* So a jumped-to heading lands with air above it instead of flush against the
     top edge of the viewport. */
  scroll-margin-top: 1.5rem;
}
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; }

/* --- promo banner ------------------------------------------------------- */

/* The one loud element on the site. Dark green so it reads as a band rather than
   a button that happens to be wide, and it only says one thing. */
a.promo {
  display: block;
  background: var(--green-deep);
  color: var(--cream);
  text-decoration: none;
  text-align: center;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--green-deep);
}
a.promo:hover { background: #26401f; } /* a shade deeper — it's already the darkest token */
a.promo:focus-visible { outline: 3px solid var(--clay); outline-offset: -3px; }
.promo-strong {
  font-family: Georgia, "Palatino Linotype", serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin-right: 0.6rem;
}
/* Slightly held back so "Download Now" leads and this reads as the detail. Cream
   at 85% on this ground is still comfortably past AA. */
.promo-rest { opacity: 0.85; font-size: 0.95rem; white-space: nowrap; }
/* On a narrow phone the two halves stack rather than the second half wrapping
   mid-phrase. */
@media (max-width: 26rem) {
  .promo-strong { display: block; margin-right: 0; }
}

/* --- download button --------------------------------------------------- */

/* Deliberately the only button-shaped thing on the site, so there's never a
   question which link is the one you came for. Dark green, inverting to beige on
   hover — the icon is stroked in currentColor, so it inverts with the text
   instead of disappearing. */
a.download {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--green-deep);
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0.8rem 1.5rem;
  border-radius: 0.6rem;
  border: 1px solid var(--green-deep);
  transition: background-color 120ms ease, color 120ms ease;
}
a.download:hover {
  background: var(--cream);
  color: var(--green-deep);
}
a.download:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
a.download .icon { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  a.download { transition: none; }
}

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

footer.site {
  margin-top: 3.5rem;
  background: var(--green-deep);
  color: var(--cream);
  padding: 2rem 0;
}
footer.site a { color: var(--cream); text-decoration: none; }
/* Same hover as the top nav, so both menus behave identically. */
footer.site a:hover {
  text-decoration: underline;
  text-decoration-color: var(--green-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
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; }

/* --- phone: hamburger instead of inline links --------------------------- */
/* 640px matches the width menu.js watches, so a rotation into landscape can't
   leave the body scroll-locked with the drawer hidden by CSS. */
@media (max-width: 640px) {
  .topnav-links { display: none; }
  .menu-btn { display: block; }
  /* Hamburger goes top LEFT on a phone — thumb territory — while the desktop
     links sit right. Same element, opposite ends. */
  nav.topnav {
    justify-content: flex-start;
    /* Position reset in case the wide-screen rule above applied before a resize,
       so the nav rejoins the flex row rather than floating over it.
       margin-left halves the gap to the hamburger: the gutter contributes 0.9rem
       and the button's own padding 0.4rem, so pulling back 0.65rem takes 1.3rem
       down to 0.65rem. */
    position: static;
    margin: 0 0 0 -0.65rem;
    flex: 0 0 auto;
  }

  /* Hamburger and lockup share one row, with the lockup taking whatever width is
     left. Done with flex on the existing markup rather than by restructuring,
     because the lockup is a bare <img> on the home page and a linked <a><img> on
     the others — flex treats either as the same kind of child. */
  header.site {
    padding: 0.9rem 0 1.25rem;
  }
  header.site .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.55rem;
  }
  header.site .wrap > a,
  header.site .wrap > img.lockup {
    flex: 1 1 0;
    min-width: 0;
    /* The 26rem desktop cap would stop it filling the row. */
    max-width: none;
  }
  header.site .wrap > a { line-height: 0; }
  /* Full basis forces the tagline onto its own line beneath the pair. */
  header.site p.tagline {
    flex: 1 0 100%;
    margin-top: 0.8rem;
  }
}