/* Hereabouts site stylesheet.
   Every color, font, radius and spacing value here comes from DESIGN.md's front matter.
   Change the token there first, then here; nothing on the pages sets a raw color of its own. */

:root {
  /* colors */
  --ground: #ECE5D3;
  --surface: #F7F2E6;
  --ink: #26201A;
  --on-ink: #ECE5D3;
  --moss: #3B4A2A;
  --on-moss: #F1EAD8;
  --moss-soft: #C9CBAE;
  --moss-deep: #2F3B21;
  --ink-soft: #5B5146;
  --ink-faint: #8A7E6F;
  --rule: #CFC4AB;
  --rule-strong: #A99C80;
  --accent: #D8A01C;
  --native: #4A5A2B;
  --success: #4A5A2B;
  --warning: #9C6B0F;
  --error: #A8432E;
  --info: #5B7089;
  --photo-border: #26201A40;
  --state-dormant: #D9D0B8;
  --state-winter: #BDB8A8;
  --state-green: #7D8757;
  --state-bloom: #B86B52;
  --state-fruit: #8E3B3B;
  --state-fall: #B5602E;
  --cat-tree: #6B4F3A;
  --cat-shrub: #7A6A43;
  --cat-perennial: #B8923E;
  --cat-grass: #A89464;
  --cat-fern: #5E6B4A;
  --cat-vine: #8B6F47;
  --cat-groundcover: #7D7A52;

  /* type */
  --font-display: "Young Serif", Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", Arial, sans-serif;
  --font-reading: "Alegreya", Georgia, serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;
  --size-display: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
  --size-heading: 1.375rem;
  --size-body: 1rem;
  --size-reading: 1.0625rem;
  --size-label: 0.75rem;
  --size-mono: 0.8125rem;

  /* shape and space */
  --r-sm: 2px;
  --r-md: 4px;
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 48px;
  --content-max: 1360px;
  /* The logo's height: the initial lockup, where the tag is the H and its stake drops below the
     baseline. The capitals are 0.434 of the file's height (96 of 221 units), so 1.67 times the
     display size keeps them 0.72 of the display size, as before. Its clear space is a third of this. */
  --logo-h: calc(var(--size-display) * 1.67);

  /* motion */
  --t-micro: 100ms;
  --t-short: 200ms;
  --t-medium: 250ms;
}

/* ---- ground ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* The paper grain: a fixed noise at 7%, multiplied over the ground. Cards and photographs
   sit above it (z-index 1), so it never crosses them. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.15  0 0 0 0 0.1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body > * { position: relative; z-index: 1; }

a { color: var(--moss); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--moss); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
/* The logo: the outlined lockup from docs/designs/logo/kit/svg/, never retyped beside the tag. */
.logo { margin: 0; line-height: 0; }
.logo a { display: inline-block; }
.logo img { display: block; height: var(--logo-h); width: auto; }
.heading { font-family: var(--font-display); font-size: var(--size-heading); line-height: 1.15; letter-spacing: -0.01em; }
.label { font-family: var(--font-body); font-weight: 700; font-size: var(--size-label); line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); }
.mono { font-family: var(--font-mono); font-size: var(--size-mono); font-variant-numeric: tabular-nums; }
.reading { font-family: var(--font-reading); font-size: var(--size-reading); line-height: 1.5; }
.sci { font-family: var(--font-reading); font-style: italic; font-size: 1rem; color: var(--ink-soft); margin: 2px 0 0; }

/* ---- buttons, inputs ---- */
.btn {
  display: inline-block;
  font: 500 15px/1.3 var(--font-body);
  background: var(--moss);
  color: var(--on-moss);
  border: 1px solid var(--moss);
  border-radius: var(--r-md);
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--t-micro) ease-out, border-color var(--t-micro) ease-out;
}
.btn:hover, .btn:active { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--on-moss); }
.btn:disabled { background: var(--rule-strong); border-color: var(--rule-strong); color: var(--surface); cursor: default; }
.btn.secondary { background: transparent; color: var(--moss); border-color: var(--moss); }
.btn.secondary:hover, .btn.secondary:active { background: transparent; color: var(--moss-deep); border-color: var(--moss-deep); }
.band .btn.secondary { color: var(--on-moss); border-color: var(--moss-soft); }
.band .btn.secondary:hover, .band .btn.secondary:active { color: var(--on-moss); border-color: var(--on-moss); }
.link-btn { font: inherit; padding: 0; border: 0; background: none; cursor: pointer; color: var(--moss); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.link-btn:hover { text-decoration-color: var(--moss); }

.input, select.input {
  font: 400 16px var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-width: 0;
}
.input::placeholder { color: var(--ink-faint); }
.input:focus-visible { border-color: var(--ink); }

/* checkboxes: 14px, rule-strong border; checked is moss with an on-moss check */
input[type="checkbox"].check {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin: 0;
  flex: 0 0 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  position: relative;
  cursor: pointer;
  vertical-align: -2px;
}
input[type="checkbox"].check:checked { background: var(--moss); border-color: var(--moss); }
input[type="checkbox"].check:checked::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--on-moss);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"].check:disabled { border-color: var(--rule); background: var(--ground); cursor: default; }

/* chips: outline in ink-soft; the active chip fills with goldenrod */
.chip {
  font: 500 13px var(--font-body);
  padding: 4px 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-micro) ease-out;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---- the native mark: the only green on a card ---- */
.native-mark { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--font-body); color: var(--native); text-transform: none; letter-spacing: 0; }
.native-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--native); }

/* ---- header band (once a location is set) ---- */
.band {
  background: var(--moss);
  color: var(--on-moss);
  padding: var(--s-lg) var(--s-xl);
}
.band-inner { max-width: var(--content-max); margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-xl); flex-wrap: wrap; }
.band .edition { font-family: var(--font-reading); font-style: italic; font-size: var(--size-reading); color: var(--moss-soft); margin: calc(var(--logo-h) / 3) 0 0; }
.band .edition a, .band .edition .link-btn { color: var(--moss-soft); font-style: normal; font-family: var(--font-body); font-size: 14px; text-decoration: underline; text-decoration-color: var(--moss-soft); text-underline-offset: 3px; margin-left: 10px; }
.band .edition a:hover, .band .edition .link-btn:hover { color: var(--on-moss); text-decoration-color: var(--on-moss); }
.band-nav { display: flex; gap: var(--s-md); align-items: center; }
.band-nav a { color: var(--moss-soft); font: 500 14px var(--font-body); text-decoration: none; }
.band-nav a:hover, .band-nav a[aria-current="page"] { color: var(--on-moss); }
.band-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--moss-soft); text-underline-offset: 3px; }
.band :focus-visible { outline-color: var(--accent); }

/* ---- the location form: one element, moved between the home screen and the band ---- */
.loc-form { margin: 0; }
.loc-row { display: flex; gap: var(--s-sm); align-items: stretch; }
.loc-row .input { flex: 1 1 200px; }
.loc-msg { margin: var(--s-sm) 0 0; font-size: 14px; color: var(--error); }
.loc-msg.pending { color: var(--ink-soft); }
.loc-msg:empty { display: none; }
/* In the band the form is folded away until "Change" is pressed, then it unfolds beneath the edition line. */
#band-form-slot { max-width: var(--content-max); margin: 0 auto; }
.band .loc-form { display: none; max-width: 520px; margin-top: var(--s-md); }
.band .loc-form.open { display: block; }
.band .loc-form .btn { background: transparent; color: var(--on-moss); border-color: var(--moss-soft); }
.band .loc-form .btn:hover { background: var(--moss-deep); }
.band .loc-row .input { flex: 1 1 180px; }
.band .loc-msg, .band .loc-msg.pending { color: var(--on-moss); }
.band .loc-note { font-size: 13px; line-height: 1.4; color: var(--moss-soft); margin: 10px 0 0; }

/* ---- home screen (no location yet): no band, ink on kraft ---- */
.home { max-width: 520px; margin: 0 auto; padding: var(--s-2xl) var(--s-md) var(--s-2xl); }
.home .tagline { font-family: var(--font-reading); font-size: var(--size-reading); line-height: 1.35; color: var(--ink-soft); margin: calc(var(--logo-h) / 3) 0 22px; }
.home .loc-row { flex-direction: column; }
.home .loc-row .input { flex: 0 0 auto; padding: 11px 12px; }
.home .loc-row .btn { font-size: 16px; padding: 11px; }
.home .loc-note { font-size: 13px; line-height: 1.4; color: var(--ink-soft); margin: 12px 0 0; }
.home .why { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 12px; }
.home .why li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.35; }
.home .why li b { font: 500 15px var(--font-body); display: block; }
.home .why li span { color: var(--ink-soft); font-size: 14px; }
.home .why li i { width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--moss); display: block; }
.home .site-nav { margin-top: 26px; font-size: 14px; }

/* the one authored moment: the band settles in over 250ms when a location is set */
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
.band.settling { animation: settle var(--t-medium) ease-out; }
@media (prefers-reduced-motion: reduce) { .band.settling { animation: none; } .btn, .chip { transition: none; } }

/* ---- results: filter rail beside the card grid ---- */
.layout { display: grid; grid-template-columns: 220px 1fr; max-width: var(--content-max); margin: 0 auto; }
aside.filters { border-right: 1px solid var(--rule); padding: var(--s-lg) var(--s-lg) var(--s-2xl) var(--s-xl); position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.filters-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-sm); }
.filters-header h2 { font-family: var(--font-display); font-size: var(--size-heading); letter-spacing: -0.01em; }
.filter-group { padding: var(--s-md) 0; border-top: 1px solid var(--rule); }
.filter-group:first-of-type { border-top: 0; }
.filter-group h3 { margin: 0 0 var(--s-sm); font: 700 var(--size-label)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); }
.filter-options { display: flex; flex-direction: column; gap: 2px; }
.filter-options label, .vendor-grid label, .local-toggle { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 3px 0; color: var(--ink); cursor: pointer; user-select: none; }
.vendor-grid { display: flex; flex-direction: column; gap: 2px; }
.vendor-grid label.unreachable { color: var(--ink-soft); cursor: default; }
.vendor-hint, .local-hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.local-hint { margin: 0 0 0 4px; }
.local-toggle { margin-bottom: 6px; flex-wrap: wrap; }
.month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.month-grid .chip { padding: 4px 2px; font-size: 12px; }
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.color-swatch { width: 100%; height: 22px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid var(--photo-border); padding: 0; }
.color-swatch.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.color-swatch[data-color="white"]   { background: #F4F0E3; }
.color-swatch[data-color="yellow"]  { background: #E8C557; }
.color-swatch[data-color="orange"]  { background: #D68A3C; }
.color-swatch[data-color="red"]     { background: #B13C3C; }
.color-swatch[data-color="pink"]    { background: #D693A4; }
.color-swatch[data-color="purple"]  { background: #8E6BA8; }
.color-swatch[data-color="blue"]    { background: #6A8AA8; }
.color-swatch[data-color="green"]   { background: #7D8757; }
.slider-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.slider-row input[type="range"] { flex: 1; accent-color: var(--moss); margin: 0; }
.slider-row output { font-family: var(--font-mono); font-size: var(--size-mono); color: var(--ink); min-width: 34px; text-align: right; }
.toggle-filters { display: none; }

main.results { padding: var(--s-lg) var(--s-xl) var(--s-2xl); min-width: 0; }
.coverage { font-family: var(--font-reading); font-size: var(--size-reading); color: var(--ink-soft); margin: 0 0 var(--s-md); }
.results-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md); flex-wrap: wrap; margin-bottom: var(--s-lg); }
.result-count { font-family: var(--font-mono); font-size: var(--size-mono); color: var(--ink-soft); }
.result-count strong { font-weight: 500; color: var(--ink); }
.sort-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.sort-row select.input { font-size: 14px; font-weight: 500; padding: 5px 8px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--s-lg); }
.empty { text-align: center; padding: 60px 20px; color: var(--ink-soft); font-family: var(--font-reading); font-style: italic; font-size: var(--size-reading); }

/* ---- card ---- */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); display: flex; flex-direction: column; min-width: 0; }
.plate { margin: var(--s-md) var(--s-md) 0; }
.plate .frame { border: 1px solid var(--photo-border); border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ground); display: flex; align-items: center; justify-content: center; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate figcaption { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate .no-photo { font-family: var(--font-reading); font-style: italic; font-size: 15px; color: var(--ink-soft); padding: var(--s-md); text-align: center; }
.card h3 { font-family: var(--font-display); font-size: var(--size-heading); line-height: 1.15; letter-spacing: -0.01em; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }

/* The card as a seed packet. Front: the name centered above a framed photo, then the category line
   between two rules. Then the growing details, which "Growing details: Hide" folds away on every card.
   Last, the bottom strip with "Where to buy" as the card's one button. */
.card .front { text-align: center; padding: 18px var(--s-md) 0; }
.card .plate { margin: 14px 20px 0; }
.card .plate .frame { outline: 1px solid var(--ink-soft); outline-offset: 3px; }
.card .plate figcaption { margin-top: 8px; text-align: center; }
.catline { display: flex; align-items: center; gap: 10px; margin: 12px var(--s-md) 14px; font: 700 11px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.catline::before, .catline::after { content: ""; flex: 1; border-top: 1px solid var(--rule-strong); }
.card .details { padding: 0 var(--s-md) var(--s-md); }
.card .details .label { margin: 14px 0 0; }
.card .notes { margin: 0; }
.card dl.stats, .plant-page dl.stats { border-top: 0; padding-top: 0; margin-top: 8px; }
.card dl.stats dt, .plant-page dl.stats dt, .spec dt { font: 700 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.card dl.stats dt, .plant-page dl.stats dt { padding-top: 3px; }

/* The four quick facts in a ruled box, two by two */
.spec { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); margin: 8px 0 0; }
.spec > div { padding: 7px 9px 8px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.spec > div:nth-child(2n) { border-right: 0; }
.spec > div:nth-last-child(-n+2):nth-child(odd), .spec > div:last-child { border-bottom: 0; }
.spec dt { margin: 0 0 5px; }
.spec dd { margin: 0; font-size: 14px; color: var(--ink); }

/* The season chart: month letters across the top, one row per thing the plant does, this month ringed.
   Placement classes: c = first column, e = end line, r = row, rs = how many rows the ring covers. */
.season { display: grid; grid-template-columns: 62px repeat(12, 1fr); row-gap: 5px; margin-top: 8px; align-items: center; }
.season .ml { font: 400 10px/1 var(--font-mono); color: var(--ink-faint); text-align: center; padding-bottom: 1px; }
.season .ml.now { color: var(--ink); font-weight: 500; }
.season .rl { grid-column: 1; font: 700 10px/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.season .track { grid-column: 2 / -1; height: 0; border-top: 1px dotted var(--rule-strong); }
.season .bar { height: 9px; border-radius: var(--r-sm); margin: 0 1px; }
.season .now-col { border: 2px solid var(--accent); border-radius: var(--r-sm); align-self: stretch; margin: -3px 0; }
.season .c2 { grid-column-start: 2; }  .season .c3 { grid-column-start: 3; }  .season .c4 { grid-column-start: 4; }
.season .c5 { grid-column-start: 5; }  .season .c6 { grid-column-start: 6; }  .season .c7 { grid-column-start: 7; }
.season .c8 { grid-column-start: 8; }  .season .c9 { grid-column-start: 9; }  .season .c10 { grid-column-start: 10; }
.season .c11 { grid-column-start: 11; } .season .c12 { grid-column-start: 12; } .season .c13 { grid-column-start: 13; }
.season .e3 { grid-column-end: 3; }   .season .e4 { grid-column-end: 4; }   .season .e5 { grid-column-end: 5; }
.season .e6 { grid-column-end: 6; }   .season .e7 { grid-column-end: 7; }   .season .e8 { grid-column-end: 8; }
.season .e9 { grid-column-end: 9; }   .season .e10 { grid-column-end: 10; } .season .e11 { grid-column-end: 11; }
.season .e12 { grid-column-end: 12; } .season .e13 { grid-column-end: 13; } .season .e14 { grid-column-end: 14; }
.season .r1 { grid-row: 1; } .season .r2 { grid-row: 2; } .season .r3 { grid-row: 3; }
.season .r4 { grid-row: 4; } .season .r5 { grid-row: 5; } .season .r6 { grid-row: 6; }
.season .rs2 { grid-row: 1 / span 2; } .season .rs3 { grid-row: 1 / span 3; } .season .rs4 { grid-row: 1 / span 4; }
.season .rs5 { grid-row: 1 / span 5; } .season .rs6 { grid-row: 1 / span 6; }

dl.stats { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: var(--s-md) 0 0; font-size: 14px; border-top: 1px solid var(--rule); padding-top: 10px; }
dl.stats dt { color: var(--ink-soft); margin: 0; }
dl.stats dd { margin: 0; color: var(--ink); }
dl.stats dd.mono { font-size: var(--size-mono); }
.notes { font-family: var(--font-reading); font-size: 15px; color: var(--ink-soft); margin: var(--s-md) 0 0; line-height: 1.4; }
/* The bottom strip, like a packet's tear-off stub */
.card-foot { margin-top: auto; padding: 12px var(--s-md) 14px; display: flex; align-items: center; background: var(--ground); border-top: 1px dashed var(--rule-strong); border-radius: 0 0 var(--r-sm) var(--r-sm); font-size: 14px; }
.card-foot .btn { flex: 1; }
.card-foot .btn .mono { font-size: inherit; }
.card-foot .no-seller { color: var(--ink-soft); font-size: 13px; padding: 8px 0; }

/* "Growing details: Show / Hide" in the bar above the cards */
.details-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-soft); }
.details-toggle .chip { font-size: 13px; padding: 5px 10px; }
.details-toggle .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* ---- plant page ----
   One whole seed packet with a printed double border: a line across the top with the county and
   the USDA symbol, the name, the category line, then the photo and the season chart beside the
   growing details. "Where to buy" is an order slip below a dashed line, one row per seller. */
.plant-page { max-width: var(--content-max); margin: 0 auto; padding: var(--s-lg) var(--s-xl) var(--s-2xl); }
.plant-page .packet { max-width: 1100px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule-strong); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; outline: 1px solid var(--ink-soft); outline-offset: -9px; padding: 22px 34px 30px; }
.plant-page .topline, .plant-page .range-label { font: 700 10px/1.3 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.plant-page .topline { min-height: 26px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.plant-page .title { text-align: center; margin: 22px 0 0; }
.plant-page h1 { font-family: var(--font-display); font-size: 34px; line-height: 1.05; letter-spacing: -0.01em; }
.plant-page .sci { font-size: 19px; }
.plant-page .catline { margin: 16px auto 0; max-width: 520px; }
/* The name sits centred under the top line. The boxed "Native range" label sits in the empty space to
   its right: the map, then the USDA link and symbol in the top line's small capitals. The box is no
   taller than the name block, so the packet is no taller than without it. */
.plant-page .head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(min-content, 1fr); align-items: center; column-gap: 16px; }
.plant-page .head .topline { grid-column: 1 / -1; }
.plant-page .head .mid { grid-column: 2; grid-row: 2; padding-top: 22px; }
.plant-page .head .title { margin: 0; }
.plant-page .range-label { grid-column: 3; grid-row: 2; justify-self: center; margin-top: 22px; display: grid; grid-template-columns: 120px 84px; grid-template-areas: "map title" "map ." "map usda"; grid-template-rows: auto 1fr auto; column-gap: 10px; padding: 8px 10px 8px 8px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); }
.plant-page .range-label p { margin: 0; }
.plant-page .range-title { grid-area: title; }
.plant-page .range-label .range-map { grid-area: map; padding-right: 10px; border-right: 1px solid var(--rule); }
.plant-page .usda-line { grid-area: usda; }
.plant-page .usda-line a { color: var(--moss); text-decoration-color: var(--rule-strong); }
.plant-page .usda-line .mono { display: block; margin-top: 3px; font-size: 11px; letter-spacing: 0.04em; color: var(--ink); }
.plant-page .range-map svg { display: block; width: 100%; height: auto; }
.plant-page .range-map path { fill: var(--rule); stroke: var(--surface); stroke-width: 0.6; stroke-opacity: 0.7; stroke-linejoin: round; }
.plant-page .range-map path.in { fill: var(--ink-soft); }
.plant-page .range-map circle { fill: var(--accent); }
.plant-page .body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 34px; margin: 24px 0 0; }
.plant-page .body > div { min-width: 0; }
.plant-page .plate { margin: 0; }
.plant-page .plate .frame { outline: 1px solid var(--ink-soft); outline-offset: 3px; }
.plant-page .plate figcaption { margin-top: 8px; text-align: center; }
.plant-page h2.label { margin: 22px 0 0; }
.plant-page .right > h2.label:first-child { margin-top: 0; }
.plant-page .spec, .plant-page .season { margin-top: 10px; }
.plant-page .care { font-family: var(--font-reading); font-size: var(--size-reading); color: var(--ink); max-width: 60ch; margin: 8px 0 0; line-height: 1.5; }
.plant-page .care .aside { color: var(--ink-soft); }
.plant-page .slip { max-width: 1100px; margin: 0 auto; background: var(--surface); border: 1px solid var(--rule-strong); border-top: 1px dashed var(--ink-soft); border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 18px 34px 22px; }
.order { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.order thead th { font: 700 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 0 12px 6px 0; border-bottom: 1px solid var(--rule-strong); }
.order td, .order th.name { padding: 11px 12px 11px 0; border-bottom: 1px dotted var(--rule-strong); vertical-align: middle; color: var(--ink-soft); text-align: left; }
.order tr:last-child td, .order tr:last-child th.name { border-bottom: 0; }
.order th.name { font: 500 16px var(--font-body); color: var(--ink); }
.order .mono { font-size: 12px; }
.order td.price { white-space: nowrap; color: var(--ink); }
.order td.go { text-align: right; padding-right: 0; white-space: nowrap; }
.order .btn { font-size: 14px; padding: 6px 12px; }
.buy-none, .buy-disclosure { font-size: 14px; color: var(--ink-soft); margin: var(--s-sm) 0 0; }
.buy-disclosure { font-size: 13px; color: var(--ink-soft); }
.band .back { font: 500 14px var(--font-body); color: var(--moss-soft); text-decoration: none; }
.band .back:hover { color: var(--on-moss); }

/* ---- secondary pages (vendors, disclosure) ---- */
.page-main { max-width: 820px; margin: 0 auto; padding: var(--s-xl) var(--s-md) var(--s-2xl); }
.page-main .intro, .page-main p { font-family: var(--font-reading); font-size: var(--size-reading); line-height: 1.5; color: var(--ink); margin: 0 0 var(--s-md); }
.page-main ul { margin: 0 0 var(--s-md); padding-left: 1.25em; }
.page-main li { font-family: var(--font-reading); font-size: var(--size-reading); line-height: 1.5; color: var(--ink); margin: 0 0 var(--s-xs); }
.page-main h1 { font-size: var(--size-display); }
.page-main h2 { font-family: var(--font-display); font-size: var(--size-heading); letter-spacing: -0.01em; margin: var(--s-xl) 0 var(--s-md); }
.page-main h2.label { font: 700 var(--size-label)/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); margin: var(--s-xl) 0 var(--s-sm); }
.vendor-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: var(--s-md); margin-bottom: var(--s-md); }
.vc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vc-name { font-family: var(--font-display); font-size: var(--size-heading); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.vc-name:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); }
.vc-loc { color: var(--ink-soft); font-size: 14px; }
.vc-meta { margin: var(--s-sm) 0 0; font-size: 14px; color: var(--ink); }
.vc-meta div { margin-bottom: 2px; }
.vc-meta dt { display: inline; color: var(--ink-soft); }
.vc-meta dd { display: inline; margin: 0; }
.vc-count { font-size: 14px; color: var(--ink-soft); margin-top: var(--s-sm); }

/* ---- footer and nav ---- */
.site-footer { max-width: var(--content-max); margin: 0 auto; padding: var(--s-md) var(--s-xl) var(--s-xl); font-size: 13px; color: var(--ink-soft); }
.site-nav { display: flex; gap: var(--s-md); flex-wrap: wrap; }
.site-nav a { font-size: 14px; }

/* ---- phones and tablets ---- */
@media (max-width: 820px) {
  .band { padding: var(--s-md) var(--s-md) var(--s-md); }
  .band-inner { align-items: flex-start; gap: var(--s-sm); }
  .band .edition { font-size: 1rem; }
  #location-actions { white-space: nowrap; }
  .layout { grid-template-columns: 1fr; }
  aside.filters { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: var(--s-md); }
  aside.filters[data-collapsed="true"] .filter-group, aside.filters[data-collapsed="true"] .filters-header { display: none; }
  .toggle-filters { display: inline-block; width: 100%; margin-top: var(--s-sm); }
  aside.filters[data-collapsed="true"] .toggle-filters { margin-top: 0; }
  main.results { padding: var(--s-md); }
  .plant-page { padding: var(--s-md) var(--s-md) var(--s-xl); }
  .plant-page .packet { padding: 18px 20px 22px; outline-offset: -7px; }
  .plant-page h1 { font-size: 26px; }
  .plant-page .sci { font-size: 1rem; }
  .plant-page .body { grid-template-columns: 1fr; gap: 22px; }
  .plant-page .head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .plant-page .head .mid { grid-column: 1; }
  .plant-page .range-label { grid-column: 2; margin-top: 16px; grid-template-columns: 92px; grid-template-areas: "title" "map" "usda"; grid-template-rows: auto; row-gap: 5px; padding: 7px; }
  .plant-page .range-label .range-map { padding: 0; border: 0; }
  .plant-page .usda-line { padding-top: 5px; border-top: 1px solid var(--rule); }
  .plant-page .range-map circle { r: 24px; }
  .plant-page .slip { padding: 16px 20px 18px; }
  /* On a phone each seller is a block: name, how and price stacked at left, the button at right. */
  .order, .order tbody { display: block; }
  .order thead { display: none; }
  .order tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 11px 0; border-bottom: 1px dotted var(--rule-strong); }
  .order tr:last-child { border-bottom: 0; }
  .order td, .order th.name { padding: 0; border: 0; grid-column: 1; }
  .order td.how, .order td.price { font-size: 13px; white-space: normal; }
  .order td.go { grid-column: 2; grid-row: 1 / span 3; align-self: center; white-space: normal; }
  .order .btn { font-size: 13px; padding: 5px 10px; max-width: 8.5em; text-align: center; line-height: 1.25; white-space: normal; }
  .site-footer { padding: var(--s-md); }
}