/*
 * The look of every page at the bare domain: the holding page, the launch
 * list's pages, and the three policies.
 *
 * Design's "Market and Feed" mockup (19 September 2026) — a market's header,
 * search and category strip over a feed of posts — made to work on a phone as
 * well as the 1280px artboard it was drawn on. Its values are kept exactly;
 * only the layout bends.
 *
 * One theme, on purpose. The design commits to a pale field with a dark header
 * and footer, and every color below is set explicitly so the page reads the
 * same whatever the visitor's system is set to.
 *
 * Source Sans 3 is served from here (fonts/, with its license) rather than from
 * Google: no visitor's browser contacts anyone but us.
 */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ground: #ECEFE9;   /* the field the page sits on */
  --ink: #16241A;      /* text, and the header, hero and footer */
  --card: #FFFFFF;
  --line: #D6DDD2;     /* card borders and rules */
  --muted: #4E5D52;    /* secondary text */
  --body: #24332A;     /* post text */
  --soft: #35443A;
  --green: #2F6B3A;
  --accent: #F0B93A;   /* the one bright color: primary buttons */
  --cream: #F4ECDC;
  --gold: #F2D48A;     /* "Coming soon!" */
  --tile: #E2E8DE;
  --field: #A9B4A6;    /* input borders */
  --foot: #C9D3C6;
  --hero-sub: #E6F0E4;
  --seam: #33443A;     /* the rule between header and category strip */
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.5 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  /* The footer sits at the bottom of the window on a short page, rather than
     halfway up it with bare ground below. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#content { flex: 1 0 auto; width: 100%; }
a { color: inherit; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--accent); color: var(--ink);
        padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.top { background: var(--ink); color: #FFFFFF; }
.bar { max-width: 1280px; margin: 0 auto; padding: 13px 28px; display: flex; align-items: center;
       gap: 14px 28px; flex-wrap: wrap; min-height: 72px; }
/* The logo (img/logo-v2.png, logo.png in 256 colors since 9 October 2026):
   the dark-ground version, background cut away. */
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { display: block; height: 64px; width: auto; }
.search { flex: 1 1 320px; display: flex; height: 46px; margin: 0; min-width: 0; }
.search input { flex: 1; min-width: 0; border: 0; border-radius: 8px 0 0 8px; padding: 0 16px;
                font: inherit; font-size: 16px; background: #FFFFFF; color: var(--ink); }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:disabled { cursor: not-allowed; }
.search button { width: 56px; border: 0; border-radius: 0 8px 8px 0; background: var(--accent);
                 display: grid; place-items: center; cursor: not-allowed; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 16px; font-weight: 600; flex-shrink: 0; }
.nav a { color: #FFFFFF; text-decoration: none; }
.nav a:hover { text-decoration: underline; color: #FFFFFF; }
.nav .notify { background: var(--accent); color: var(--ink); padding: 11px 18px; border-radius: 8px; font-weight: 700; }
.nav .notify:hover { color: var(--ink); text-decoration: none; filter: brightness(1.05); }

.strip { border-top: 1px solid var(--seam); }
.strip ul { max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 44px; list-style: none;
            display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 600;
            overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.strip ul::-webkit-scrollbar { display: none; }
.strip .soon { margin-left: auto; color: var(--gold); padding-left: 12px; }

/* ---------- body ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

.hero { margin-top: 20px; min-height: 340px; border-radius: 12px; padding: 48px 56px;
        background: var(--ink); color: #FFFFFF;
        display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.hero-words { display: flex; flex-direction: column; gap: 10px; }
.kicker { font-size: 24px; font-weight: 600; margin: 0; }
.hero h1 { margin: 0; font-size: clamp(42px, 6.2vw, 64px); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; }
.hero p.lede { margin: 0; font-size: 19px; line-height: 1.5; max-width: 640px; color: var(--hero-sub); }
.hero-ctas { flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; width: 260px; }
.cta { display: block; text-align: center; text-decoration: none; padding: 16px; border-radius: 8px;
       font-weight: 700; font-size: 18px; color: var(--ink); }
.cta:hover { color: var(--ink); filter: brightness(1.05); }
.cta-accent { background: var(--accent); }
.cta-white { background: #FFFFFF; }

.panel { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
         padding: 24px 28px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; }
.panel-head p { margin: 0; font-size: 15px; color: var(--muted); }
.kinds { margin: 18px 0 0; padding: 0; list-style: none; display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kind { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.kind-art { height: 150px; background: var(--tile); display: grid; place-items: center; color: var(--green); }
.kind-text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.kind-name { font-weight: 700; font-size: 18px; margin: 0; }
.kind-sub { font-size: 15px; color: var(--muted); margin: 0; }

.columns { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.feed { display: flex; flex-direction: column; gap: 20px; }
.post { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px;
        display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.post-by { display: flex; align-items: center; gap: 12px; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #FFFFFF;
          display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; }
.post-who { font-weight: 700; font-size: 17px; line-height: 1.3; }
.post-meta { font-size: 14px; color: var(--muted); line-height: 1.3; }
/* Not balanced: these are three short sentences, and evening out the lines
   split "You make / it." across them. */
.post h2 { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; text-wrap: pretty; }
.post p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.post-foot { border-top: 1px solid var(--line); padding-top: 10px; display: flex; }
.post-foot a { flex: 1; text-align: center; text-decoration: none; padding: 12px; border-radius: 8px;
               font-weight: 700; font-size: 16px; color: var(--soft); }
.post-foot a:hover { background: var(--tile); color: var(--ink); }

.signups { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
.signup { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
          padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.signup h2 { margin: 0; font-size: 22px; font-weight: 700; }
.signup p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--soft); }
.signup label { font-size: 14px; font-weight: 700; color: var(--muted); }
.signup input[type=email], .signup input[type=text], .signup select {
  height: 48px; padding: 0 14px; font: inherit; font-size: 17px; width: 100%;
  border: 1px solid var(--field); border-radius: 8px; background: #FFFFFF; color: var(--ink); }
/* The list a dropdown opens is drawn by the browser, which on some systems
   falls back to its own colors whatever the page says. Named here so it can
   only ever be dark on white (the storefront learned this on 24 September
   2026, when its "Farms within" list opened unreadable). */
.signup option { background: #FFFFFF; color: var(--ink); }
/* ZIP code and distance side by side: two short answers to one question. A
   farm has no distance, and its ZIP keeps the same half width, so the two boxes
   line up with each other. */
.signup .where { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signup .field { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pill { height: 50px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 17px;
        cursor: pointer; padding: 0 24px; }
.pill:hover { filter: brightness(1.05); }
.pill-accent { background: var(--accent); color: var(--ink); }
.pill-green { background: var(--green); color: #FFFFFF; }
.signups .fine { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; padding: 0 4px; }
/* The field people cannot see, which only a bot fills in. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.foot { margin-top: 40px; background: var(--ink); color: #FFFFFF; text-align: center; padding: 44px 28px 40px; }
.foot-line { margin: 0 auto; max-width: 900px; font-size: 26px; font-weight: 700; line-height: 1.25; }
.foot-sub { margin: 12px 0 0; font-size: 15px; color: var(--foot); }
.foot-links { margin: 14px auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
              justify-content: center; gap: 6px 18px; font-size: 15px; }
.foot-links a { color: var(--foot); }
.foot-links a:hover { color: #FFFFFF; }
/* Also from us: the owner's other products by their logos, under a rule and
   after the policies. Each logo keeps its own background, so on the ink they
   sit as two tiles. */
.foot-also { margin: 24px auto 0; padding-top: 18px; max-width: 560px;
             border-top: 1px solid rgba(255, 255, 255, .15); font-size: 15px; }
.foot-also-label { margin: 0 0 12px; font-weight: 700; color: #FFFFFF; }
.foot-also ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;
                align-items: center; justify-content: center; gap: 16px; }
.foot-also a { display: block; border-radius: 6px; }
.foot-also img { display: block; height: 44px; width: auto; border-radius: 6px;
                 box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
/* Barnyard Boss is a tall lockup with a small name: a little taller, so the
   two names come out the same size. */
.foot-also img.also-tall { height: 56px; }
.foot-also a:hover img { filter: brightness(1.1); }

/* ---------- a single card: the launch list's pages and the policies ---------- */
.single { max-width: 760px; margin: 28px auto 0; padding: 0 28px; }
.sheet { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 32px 36px;
         display: flex; flex-direction: column; gap: 14px; }
.sheet h1 { margin: 0; font-size: clamp(30px, 5vw, 40px); font-weight: 700; line-height: 1.1; }
.sheet h2 { margin: 12px 0 0; font-size: 22px; font-weight: 700; line-height: 1.25; scroll-margin-top: 16px; }
.sheet p, .sheet ul, .sheet ol { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); }
.sheet ul, .sheet ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: 8px; }
.sheet form { margin: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.sheet .back { font-size: 16px; }
.sheet .note { background: #FBF3DC; border: 1px solid #E8D29A; color: #5E4610; border-radius: 8px;
               padding: 12px 14px; font-size: 16px; }
/* A policy, as build-policies.mjs lifts it from the app: a title, the date it
   was last changed, then its sections in one wrapper. */
.doc h1 + p { color: var(--muted); font-size: 15px; }
.doc > div { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.doc > div > p:last-child { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
                            color: var(--muted); font-size: 16px; }

/* ---------- the seller packet: sell/ ---------- */
.sell .lede { font-size: 20px; line-height: 1.5; color: var(--ink); }
.sell .fees { border-collapse: collapse; width: 100%; max-width: 520px; font-size: 17px; }
.sell .fees caption { text-align: left; font-size: 15px; color: var(--muted); padding-bottom: 6px; }
.sell .fees th { text-align: left; font-weight: 400; padding: 8px 0; border-top: 1px solid var(--line); }
.sell .fees td { text-align: right; padding: 8px 0; border-top: 1px solid var(--line);
                 font-variant-numeric: tabular-nums; }
.sell .fees tr:first-child th, .sell .fees tr:first-child td { font-weight: 700; }
.sell .signup { margin-top: 6px; }
.print-only { display: none; }

/* Printed, the packet is a one-page handout in two columns: the ink header
   stays (the logo is made for it), the navigation and the sign-up form give
   way to the address, and the type tightens to fit. */
@media print {
  @page { size: letter; margin: 0.4in; }
  body { background: #FFFFFF; min-height: 0; }
  .top { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .top .bar { min-height: 0; padding: 8px 18px; }
  .top .brand img { height: 46px; }
  .skip, .top .nav, .top .strip, .foot, .sell .signup, .screen-only { display: none !important; }
  .print-only { display: block; }
  .single { max-width: none; margin: 12px 0 0; padding: 0; }
  .sheet.sell { display: block; border: 0; padding: 0; column-count: 2; column-gap: 0.32in; }
  .sheet.sell h1, .sheet.sell .lede, .sheet.sell .print-only { column-span: all; }
  .sheet.sell > * { margin: 0 0 5px; }
  .sheet.sell h1 { font-size: 24pt; margin-bottom: 6px; }
  .sheet.sell .lede { font-size: 13pt; line-height: 1.4; margin-bottom: 12px; }
  .sheet.sell h2 { font-size: 13pt; margin: 12px 0 4px; break-after: avoid; }
  .sheet.sell p, .sheet.sell ul { font-size: 11pt; line-height: 1.4; color: var(--ink); }
  .sheet.sell ul { display: block; padding-left: 1.1rem; }
  .sheet.sell li { margin-bottom: 2px; }
  .sheet.sell ul, .sheet.sell .fees, .sheet.sell p { break-inside: avoid; }
  .sell .fees { font-size: 11pt; max-width: none; }
  .sell .fees caption { font-size: 10pt; padding-bottom: 3px; }
  .sell .fees th, .sell .fees td { padding: 3px 0; }
  .sheet.sell .print-only { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line);
                            font-size: 13pt; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- narrower screens ---------- */
@media (max-width: 1040px) {
  .columns { grid-template-columns: minmax(0, 1fr); }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .bar { padding: 12px 16px; gap: 12px; min-height: 0; }
  .search { order: 3; flex-basis: 100%; }
  .nav { margin-left: auto; gap: 14px; }
  .strip ul { padding: 0 16px; gap: 22px; }
  /* First on a phone, where the end of the strip is off the screen. */
  .strip .soon { order: -1; margin-left: 0; padding-left: 0; }
  .wrap, .single { padding: 0 16px; }
  .hero { flex-direction: column; align-items: stretch; min-height: 0; padding: 32px 24px; gap: 28px; }
  .kicker { font-size: 20px; }
  .hero p.lede { font-size: 18px; }
  .hero-ctas { width: auto; }
  .panel { padding: 20px 18px; }
  .panel-head h2 { font-size: 23px; }
  .kinds { gap: 12px; }
  .kind-art { height: 112px; }
  .kind-text { padding: 12px 12px 14px; }
  .post { padding: 20px 18px; }
  .post h2 { font-size: 24px; }
  .post p { font-size: 17px; }
  .signup { padding: 20px 18px; }
  .sheet { padding: 26px 20px; }
  .sheet p, .sheet ul, .sheet ol { font-size: 17px; }
  .foot { padding: 36px 16px 32px; }
  .foot-line { font-size: 22px; }
}
@media (max-width: 520px) {
  .nav .sell { display: none; }   /* the hero's "I want to sell" is right below */
  .bar { gap: 10px; }
  .brand img { height: 48px; }
  /* Small enough to share the top row with the name on a 375px phone. */
  .nav .notify { padding: 9px 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}