/* Milkweed USA — design system
   Zero web fonts, zero frameworks. One stylesheet, cached hard. */

:root {
  --paper:       #FBF7EF;
  --paper-2:     #F4EEE2;
  --card:        #FFFFFF;
  --ink:         #17231C;
  --ink-2:       #46574C;
  --ink-3:       #6C7E72;
  --green:       #1F4032;
  --green-2:     #2F6349;
  --moss:        #4C7C5D;
  --sage:        #9BB39A;
  --orange:      #D95B18;
  --orange-2:    #E2792E;
  --amber:       #E8A33C;
  --pollen:      #F3D680;
  --rose:        #C0567C;
  --sky:         #4E8FA8;
  --line:        rgba(31, 64, 50, 0.16);
  --line-soft:   rgba(31, 64, 50, 0.08);
  --shadow:      0 1px 2px rgba(23,35,28,.05), 0 8px 24px -12px rgba(23,35,28,.18);
  --shadow-lg:   0 2px 4px rgba(23,35,28,.06), 0 24px 48px -20px rgba(23,35,28,.28);
  --radius:      14px;
  --radius-sm:   9px;
  --maxw:        1180px;
  --gutter:      1.25rem;   /* the space either side of .wrap */
  --prose:       70ch;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0F1613;
    --paper-2:   #151E19;
    --card:      #17211C;
    --ink:       #E7EBE5;
    --ink-2:     #AEBCB1;
    --ink-3:     #86988C;
    --green:     #8FCBA6;
    --green-2:   #A6D9B8;
    --moss:      #7FB891;
    --sage:      #6E8C74;
    --orange:    #F2854A;
    --orange-2:  #F79A63;
    --amber:     #F0B45C;
    --pollen:    #E8CE7E;
    --rose:      #DF87A6;
    --sky:       #7BB6CD;
    --line:      rgba(160, 200, 175, 0.20);
    --line-soft: rgba(160, 200, 175, 0.10);
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--green-2); text-decoration-color: var(--sage); text-underline-offset: 2px; }
a:hover { color: var(--orange); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px;
}

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.15; font-weight: 600; letter-spacing: -0.012em; color: var(--ink); }
h1 { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -0.022em; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); margin-top: 2.6em; margin-bottom: .5em; }
h3 { font-size: clamp(1.16rem, 1.05rem + .5vw, 1.35rem); margin-top: 1.9em; margin-bottom: .35em; }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; margin-top: 1.5em; margin-bottom: .3em; }
h2:first-child, h3:first-child { margin-top: 0; }

p, ul, ol, dl, table, figure, pre { margin-bottom: 1.05em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .3em; }
li::marker { color: var(--sage); }
strong { font-weight: 650; color: var(--ink); }
em { font-style: italic; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

.i, i.sci, .sci { font-style: italic; }

/* ---------- layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
@media (max-width: 640px) { :root { --gutter: .875rem; } }
.prose { max-width: var(--prose); }
.prose > * + h2 { margin-top: 2.4em; }
.section { padding: clamp(2.75rem, 5vw, 4.75rem) 0; }
.section--tight { padding: clamp(2rem, 3.5vw, 3rem) 0; }
.section--alt { background: var(--paper-2); border-block: 1px solid var(--line-soft); }
.stack > * + * { margin-top: 1.05em; }
.center { text-align: center; }
.lede { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: var(--ink-2); font-family: var(--serif); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--green); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.masthead__in { display: flex; align-items: center; gap: 1.25rem; min-height: 62px; }
.brand {
  display: inline-flex; align-items: baseline; gap: .42rem;
  font-family: var(--serif); font-weight: 650; font-size: 1.24rem;
  color: var(--ink); text-decoration: none; letter-spacing: -.018em; white-space: nowrap;
}
.brand:hover { color: var(--green-2); }
.brand:hover .brand__sub { color: var(--orange-2); }
.brand__sub {
  font-family: var(--sans); font-size: .58em; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--orange);
  padding-left: .42rem; border-left: 1px solid var(--line); align-self: center;
}
.nav { margin-left: auto; display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550;
  padding: .42rem .68rem; border-radius: 8px; white-space: nowrap;
}
.nav a:hover { background: var(--line-soft); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--green-2); background: var(--line-soft); }
@media (max-width: 780px) {
  /* Two short rows rather than one crowded one. The nav gets a hairline of its
     own so it reads as a second bar instead of a stray block of links. */
  .masthead__in { flex-wrap: wrap; gap: 0; min-height: 0; padding-top: .5rem; }
  .brand { font-size: 1.12rem; padding-bottom: .5rem; }
  .nav {
    margin-left: 0; width: 100%; flex-wrap: nowrap; gap: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    border-top: 1px solid var(--line-soft);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a {
    font-size: .86rem; padding: .58rem .7rem; border-radius: 0;
    border-bottom: 2px solid transparent;
  }
  .nav a:first-child { padding-left: 0; }
  .nav a:hover { background: none; }
  .nav a[aria-current="page"] { background: none; border-bottom-color: var(--green-2); }
}

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .84rem; color: var(--ink-3); padding-top: 1.4rem; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem .1rem; }
.crumbs li { margin: 0; display: flex; align-items: center; }
.crumbs li + li::before { content: "›"; margin: 0 .45rem; color: var(--sage); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--orange); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.25rem, 5vw, 4rem); }
.hero { background: var(--paper-2); border-bottom: 1px solid var(--line-soft); }
.hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 1.35rem + 2.9vw, 3.5rem); line-height: 1.05; letter-spacing: -.022em; }
.hero .lede { max-width: 34ch; margin-top: 1.1rem; }
.hero .btnrow { margin-top: 1.9rem; }
/* The photograph runs to the edge of the window rather than stopping at the
   column. max() gives the gutter on a narrow window and the true distance to
   the viewport edge on a wide one. */
@media (min-width: 881px) {
  .hero__art { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--maxw)) / 2)); }
  .hero__art .shot img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px 0 0 4px; }
}
@media (max-width: 880px) {
  /* Edge to edge. The photograph is the first thing on the page, so it gets
     the full width rather than sitting in a column with margins either side. */
  .hero { padding-top: 0; }
  .hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__art { order: -1; max-width: none; margin-inline: calc(50% - 50vw); width: 100vw; }
  .hero__art .shot img { border-radius: 0; aspect-ratio: 5 / 3; object-fit: cover; }
  .hero__art .shot figcaption { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
}

.kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.kicker a { color: inherit; text-decoration: none; }
.kicker a:hover { color: var(--orange); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--moss); margin-bottom: .9rem;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--green); color: #FBF7EF; text-decoration: none;
  padding: .68rem 1.15rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; transition: background .15s ease;
}
.btn:hover { background: var(--green-2); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--line-soft); color: var(--ink); }
.btn--orange { background: var(--orange); }
.btn--orange:hover { background: var(--orange-2); }
@media (prefers-color-scheme: dark) {
  .btn { background: var(--green); color: #0F1613; }
  .btn:hover { background: var(--green-2); color: #0F1613; }
  .btn--orange { color: #180D06; }
}
.btnrow { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

.card { position: relative; }
.card h3 { margin-top: 0; }
a.card { text-decoration: none; color: inherit; display: block; }

/* species entry: photograph, then type, no frame */
.sp-card { display: flex; flex-direction: column; }
.sp-card__art { background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.sp-card__art.is-plate { padding: .4rem; }
.sp-card__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sp-card__art.is-plate img { object-fit: contain; }
.sp-card__body { padding: .7rem 0 0; display: flex; flex-direction: column; flex: 1; }
.sp-card__name { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; line-height: 1.2; }
a.sp-card:hover .sp-card__name { color: var(--orange); }
.sp-card__sci { font-style: italic; color: var(--ink-3); font-size: .85rem; margin-top: .1rem; }
.sp-card__meta { margin-top: auto; padding-top: .45rem; font-size: .78rem; color: var(--ink-3); line-height: 1.5; }
.sp-card__meta .sep { opacity: .5; margin: 0 .1em; }

/* Native status, stated in type rather than in a colored chip. */
.is-native { color: var(--moss); font-weight: 650; }
.is-introduced { color: var(--orange); font-weight: 650; }
.is-rare { color: var(--rose); font-weight: 650; }
@media (prefers-color-scheme: dark) { .is-native { color: var(--green); } }

/* ---------- pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 650; letter-spacing: .01em;
  padding: .2rem .55rem; border-radius: 999px;
  background: var(--line-soft); color: var(--ink-2); border: 1px solid var(--line-soft);
  white-space: nowrap;
}
.pill--native  { background: color-mix(in srgb, var(--moss) 18%, transparent); color: var(--green-2); border-color: color-mix(in srgb, var(--moss) 28%, transparent); }
.pill--warn    { background: color-mix(in srgb, var(--orange) 15%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
.pill--rare    { background: color-mix(in srgb, var(--rose) 16%, transparent); color: var(--rose); border-color: color-mix(in srgb, var(--rose) 30%, transparent); }
.pill--co      { background: color-mix(in srgb, var(--sky) 16%, transparent); color: var(--sky); border-color: color-mix(in srgb, var(--sky) 30%, transparent); }
.pills { display: flex; flex-wrap: wrap; gap: .38rem; }

.swatch { width: .7em; height: .7em; border-radius: 999px; border: 1px solid rgba(0,0,0,.18); flex: none; display: inline-block; }

/* ---------- callouts ---------- */
.callout {
  border-left: 3px solid var(--moss); background: var(--paper-2);
  padding: 1rem 1.15rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.6rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout__t { font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--moss); margin-bottom: .35rem; display: block; }
.callout--warn { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, var(--paper-2)); }
.callout--warn .callout__t { color: var(--orange); }
.callout--tip { border-color: var(--sky); }
.callout--tip .callout__t { color: var(--sky); }

/* ---------- data tables ---------- */
/* position:relative so that absolutely positioned descendants, chiefly the
   .sr-only labels in the bloom chart, are contained by the scroller. Without
   it their containing block is the page, and a table wider than the screen
   pushes them off the right edge of the document. */
.tablewrap { position: relative; overflow-x: auto; margin: 1.5rem 0; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; margin: 0; }
th, td { text-align: left; padding: .6rem .85rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); white-space: nowrap; border-bottom: 2px solid var(--ink); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--sage) 12%, transparent); }
td .sci { font-style: italic; }

/* ---------- spec list (species facts) ---------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 2.5rem; margin: 1.6rem 0; border-top: 2px solid var(--ink);
}
.fact { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.fact dt { font-size: .78rem; letter-spacing: .02em; color: var(--ink-3); font-weight: 500; }
.fact dd { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.35; text-align: right; }

/* ---------- bloom calendar ---------- */
.bloom { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: .5rem 0 .2rem; }
.bloom span { height: 9px; border-radius: 2px; background: var(--line-soft); }
.bloom span.on { background: var(--amber); }
.bloom span.peak { background: var(--orange); }
.bloom-labels { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; font-size: .6rem; color: var(--ink-3); text-align: center; letter-spacing: -.02em; }

/* ---------- rating dots ---------- */
.dots { display: inline-flex; gap: 2px; vertical-align: -1px; }
.dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--line); display: block; }
.dots i.on { background: var(--moss); }
.dots--orange i.on { background: var(--orange); }

/* ---------- map of the United States ---------- */
/* Real Census boundaries, Albers USA, with Alaska and Hawaii inset bottom left.
   See src/lib/map.mjs. Fills are set here so both themes work from one file. */
.usmap { display: block; width: 100%; height: auto; max-width: 940px; margin: 0 auto; }
.usmap-fig { margin: 1.75rem 0; }
.usmap__state path {
  fill: var(--line-soft); stroke: var(--paper); stroke-width: .75; stroke-linejoin: round;
  transition: fill .12s ease;
}
.usmap__state { outline: none; }
.usmap__state:hover path, .usmap__state:focus-visible path { stroke: var(--ink); stroke-width: 1.6; }
.usmap__state:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.usmap path.d0 { fill: var(--line-soft); }
.usmap path.d1 { fill: color-mix(in srgb, var(--moss) 16%, var(--paper-2)); }
.usmap path.d2 { fill: color-mix(in srgb, var(--moss) 34%, var(--paper-2)); }
.usmap path.d3 { fill: color-mix(in srgb, var(--moss) 56%, var(--paper-2)); }
.usmap path.d4 { fill: color-mix(in srgb, var(--green) 78%, var(--moss)); }
.usmap path.d5 { fill: var(--green); }
.usmap path.in  { fill: var(--green); }
.usmap path.out { fill: var(--line-soft); }
.usmap__label {
  font-family: var(--sans); font-size: 13px; font-weight: 650; text-anchor: middle;
  fill: var(--ink-2); pointer-events: none; letter-spacing: -.02em;
}
.usmap__label.d3, .usmap__label.d4, .usmap__label.d5 { fill: #FBF7EF; }
.usmap__callout {
  font-family: var(--sans); font-size: 13px; font-weight: 650; fill: var(--ink-2);
  pointer-events: none; letter-spacing: -.02em;
}
.usmap__leader { stroke: var(--sage); stroke-width: .8; fill: none; }
@media (prefers-color-scheme: dark) {
  .usmap__label.d3, .usmap__label.d4, .usmap__label.d5 { fill: #0F1613; }
  .usmap__state path { stroke: var(--paper); }
}
/* A range map is printed small and carries no labels, so it can be denser. */
.usmap--range { max-width: 620px; }
.usmap--range .usmap__state path { stroke-width: 1; }

/* ---------- the homepage opening ---------- */
.intro { max-width: 64ch; margin-bottom: 2.6rem; }
.intro h2 { margin-top: 0; }
.intro .lede { margin-top: .7rem; }
.intro p + p { margin-top: 1.05em; }
.anatomy {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem 1.4rem; border-top: 2px solid var(--ink); padding-top: 1.5rem;
}
.anatomy__item { margin: 0; }
.anatomy__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; background: var(--paper-2); display: block; margin-bottom: .6rem;
}
.anatomy__item figcaption { font-size: .88rem; line-height: 1.5; color: var(--ink-2); }
.anatomy__item figcaption strong {
  display: block; font-family: var(--serif); font-size: 1.05rem;
  color: var(--ink); margin-bottom: .2rem; font-weight: 650;
}
.gallery--parts .shot figcaption strong { color: var(--ink); }

/* A closing photograph: small, at the foot, after the information. */
.closer { margin: 0; max-width: 420px; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.closer img { width: 100%; height: auto; display: block; border-radius: 3px; background: var(--paper-2); }
.closer figcaption { font-size: .72rem; line-height: 1.45; color: var(--ink-3); padding-top: .45rem; }
.closer figcaption a { color: var(--ink-3); }

/* ---------- brand guide swatches ---------- */
/* Named .token, not .swatch: .swatch is already the small color dot in the
   species tables, and reusing it squashed every chip to 0.7em. */
.tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.4rem 1.2rem; margin: 1.2rem 0 2.4rem; }
.token__chip { display: block; height: 68px; border-radius: 4px; border: 1px solid var(--line-soft); }
.token__meta { margin-top: .55rem; font-size: .78rem; line-height: 1.45; }
.token__meta strong { display: block; color: var(--ink); font-weight: 600; font-size: .84rem; margin-bottom: .25rem; }
.token__meta code { display: block; color: var(--ink-3); font-size: .72rem; background: none; padding: 0; border: 0; }

/* ---------- illustrated glossary ---------- */
.gloss { margin: 1.6rem 0 0; border-top: 2px solid var(--ink); }
.gloss__row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem;
  align-items: start; padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft);
}
.gloss__fig img {
  width: 96px; height: 72px; object-fit: cover; display: block;
  border-radius: 3px; background: var(--paper-2);
}
/* A diagram is line art, so it is fitted rather than cropped. */
.gloss__fig svg { display: block; width: auto; height: auto; max-width: 96px; max-height: 76px; margin: 0 auto; }
.gloss__fig:empty { background: none; }
.gloss__body dt { font-weight: 700; font-size: 1.02rem; color: var(--ink); margin: 0 0 .2rem; }
.gloss__body dd { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.55; }
.gloss__see { white-space: nowrap; font-size: .88rem; }
@media (max-width: 560px) {
  .gloss__row { grid-template-columns: 72px minmax(0, 1fr); gap: .85rem; }
  .gloss__fig img { width: 72px; height: 56px; }
  .gloss__fig svg { max-width: 72px; max-height: 60px; }
}

/* ---------- API documentation ---------- */
code {
  font-family: var(--mono); font-size: .88em;
  background: var(--line-soft); border-radius: 4px; padding: .1em .35em;
  overflow-wrap: anywhere;
}

.code {
  background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 6px;
  padding: .8rem 1rem; overflow-x: auto; font-family: var(--mono); font-size: .82rem;
  line-height: 1.55; margin: 1rem 0; color: var(--ink);
}
.code code { font-family: inherit; background: none; padding: 0; }
.endpoint { border-top: 2px solid var(--ink); padding-top: .95rem; margin: 2rem 0; }
.endpoint h3 { margin: 0 0 .45rem; font-size: 1.15rem; }
.endpoint__p { margin: 0 0 .8rem; }
.endpoint__p code {
  font-size: .8rem; color: var(--green-2); background: var(--paper-2);
  border: 1px solid var(--line-soft); padding: .22em .55em; border-radius: 5px;
}
.endpoint__eg { font-size: .86rem; color: var(--ink-3); font-style: italic; }

/* ---------- children's activities ---------- */
.activities { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.2rem 2.6rem; margin-top: 1.6rem; }
.activity { border-top: 2px solid var(--ink); padding-top: 1rem; }
.activity h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.activity__meta { font-size: .8rem; color: var(--ink-3); margin: 0 0 .8rem; }
.activity__meta strong { color: var(--ink-3); font-weight: 650; }
.activity > p { font-size: .95rem; color: var(--ink-2); }
.activity__steps { padding-left: 1.15em; margin: .9rem 0; font-size: .93rem; }
.activity__steps li { margin-bottom: .5em; }
.activity__then {
  font-size: .9rem; border-left: 2px solid var(--amber);
  padding-left: .85rem; color: var(--ink-2);
}

/* ---------- research listing ---------- */
.papers { list-style: none; padding: 0; margin: 1.2rem 0 2rem; border-top: 2px solid var(--ink); }
.paper { padding: .85rem 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.paper__t {
  display: block; font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  line-height: 1.35; color: var(--ink); text-decoration: none;
}
.paper__t:hover { color: var(--green-2); text-decoration: underline; }
.paper__m { display: block; font-size: .84rem; color: var(--ink-3); margin-top: .25rem; line-height: 1.45; }
.paper__doi {
  display: block; font-family: var(--mono); font-size: .7rem; color: var(--sage); margin-top: .2rem;
  overflow-wrap: anywhere;
}

/* ---------- population charts ---------- */
.chart { margin: 1.8rem 0 2.2rem; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-grid { stroke: var(--line-soft); stroke-width: 1; }
.ch-axis { stroke: var(--ink); stroke-width: 1; }
.ch-bar { transition: opacity .12s ease; }
.ch-bar:hover { opacity: .72; }
.ch-tick, .ch-year {
  font-family: var(--sans); font-size: 11px; fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ch-note { font-family: var(--sans); font-size: 11.5px; font-weight: 650; fill: var(--ink-2); }
.ch-unit {
  font-family: var(--sans); font-size: 10px; font-weight: 700; fill: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase;
}
.chart figcaption { font-size: .82rem; line-height: 1.5; color: var(--ink-3); margin-top: .7rem; font-style: normal; }
.is-down { color: var(--orange); font-variant-numeric: tabular-nums; }
.is-up { color: var(--green-2); font-variant-numeric: tabular-nums; }

/* ---------- state climate and year panels ---------- */
/* position:relative so the screen-reader data table, which is absolutely
   positioned, is contained here rather than by the page. */
.climate { margin: 0; position: relative; }
.climate__svg { display: block; width: 100%; height: auto; overflow: visible; }
.cl-tick, .cl-month { font-family: var(--sans); font-size: 10px; fill: var(--ink-3); }
.cl-month { font-size: 10.5px; font-weight: 600; }
.cl-axis { font-family: var(--sans); font-size: 9.5px; font-weight: 600; fill: var(--ink-3);
  letter-spacing: .04em; text-transform: uppercase; }
.cl-freeze { stroke: var(--sky); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.cl-base { stroke: var(--line); stroke-width: 1; }
.climate figcaption, .yearchart figcaption {
  font-size: .74rem; line-height: 1.45; color: var(--ink-3); margin-top: .5rem; font-style: normal;
}

.yearchart { margin: 0; }
.yeartable { width: 100%; border-collapse: collapse; font-size: .72rem; table-layout: fixed; }
.yeartable th[scope="col"] {
  font-size: .64rem; font-weight: 700; color: var(--ink-3); text-align: center;
  padding: 0 0 .3rem; border: 0; letter-spacing: 0;
}
.yeartable th[scope="col"]:first-child { width: 40%; }
.yeartable th[scope="row"] {
  font-size: .74rem; font-weight: 500; color: var(--ink-2); text-align: left;
  padding: .22rem .5rem .22rem 0; border: 0; white-space: normal; line-height: 1.25;
}
.yeartable tbody tr:hover { background: none; }
.yeartable td.yr {
  padding: 0; border: 0; height: 13px;
  border-bottom: 3px solid var(--paper);
  border-right: 1px solid var(--paper);
  background: var(--line-soft);
}
.yeartable td.is-bloom { background: var(--amber); }
.yeartable td.is-bloom.is-peak { background: var(--orange); }
.yeartable td.is-monarch { background: var(--orange-2); }
.yeartable td.is-sow { background: var(--moss); }
.yeartable td.is-seed { background: var(--sage); }
@media (prefers-color-scheme: dark) {
  .yeartable td.yr { border-color: var(--paper-2); }
}

/* Range and locator maps are flat files, so they need no fill rules here. */
.rangemap { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }

/* Locator map on a state page: a flat file, so it needs no fill rules here. */
.locator { display: block; width: 100%; height: auto; border-radius: 3px; }

.legend { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--ink-3); flex-wrap: wrap; }
.legend i { width: 20px; height: 12px; border-radius: 3px; display: block; background: var(--line-soft); }
.legend i.d1 { background: color-mix(in srgb, var(--moss) 16%, var(--paper-2)); }
.legend i.d2 { background: color-mix(in srgb, var(--moss) 34%, var(--paper-2)); }
.legend i.d3 { background: color-mix(in srgb, var(--moss) 56%, var(--paper-2)); }
.legend i.d4 { background: color-mix(in srgb, var(--green) 78%, var(--moss)); }
.legend i.d5 { background: var(--green); }

/* A guide carrying the interactive key runs full width; the prose inside it
   still holds a readable measure. */
.prose--wide { max-width: none; }
.prose--wide > p, .prose--wide > ul, .prose--wide > ol, .prose--wide > h2,
.prose--wide > h3, .prose--wide > .lede, .prose--wide > .callout,
.prose--wide > .toc, .prose--wide > .faq, .prose--wide > .cite { max-width: var(--prose); }
.foot-asides {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 2.5rem; margin-top: 3rem;
}

/* ---------- the interactive key ---------- */
.ident {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin: 1.5rem 0 2.5rem; border-top: 2px solid var(--ink); padding-top: 1.4rem;
}
@media (max-width: 860px) { .ident { grid-template-columns: minmax(0, 1fr); } }

.ident__q { margin-bottom: 1.5rem; }
.ident__q h3 {
  font-family: var(--sans); font-size: .92rem; font-weight: 650;
  margin: 0 0 .5rem; display: flex; align-items: baseline; gap: .55rem;
}
.ident__num {
  font-size: .68rem; font-weight: 700; color: var(--sage);
  font-variant-numeric: tabular-nums; min-width: 1ch;
}
.ident__hint { font-size: .82rem; color: var(--ink-3); margin: -.25rem 0 .55rem 1.6rem; }
.ident__q select {
  font: inherit; font-size: .92rem; padding: .5rem .65rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  /* The indent is a margin, so the width has to give it back or the control
     runs 1.6rem past its container and takes the page with it. */
  width: calc(100% - 1.6rem); max-width: 22rem; margin-left: 1.6rem;
}
.ident__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: 1.6rem; }
.ident__chips button {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .4rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
}
.ident__chips button:hover { border-color: var(--ink-3); color: var(--ink); }
.ident__chips button[aria-pressed="true"] {
  background: var(--green); border-color: var(--green); color: #FBF7EF; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .ident__chips button[aria-pressed="true"] { color: #0F1613; }
}

.ident__sticky { position: sticky; top: 5rem; }
@media (max-width: 860px) { .ident__sticky { position: static; } }
.ident__summary {
  font-family: var(--serif); font-size: 1.05rem; color: var(--ink-2);
  border-top: 2px solid var(--ink); padding-top: .8rem; margin: 0 0 .9rem;
}
#ident-reset { margin-bottom: 1.2rem; font-size: .85rem; padding: .4rem .9rem; }
.ident__nearh {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3);
  margin: 1.6rem 0 .7rem; padding-top: .7rem; border-top: 1px solid var(--line-soft);
}
.ident__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 1rem .9rem; }
.ident__card { text-decoration: none; display: block; }
.ident__card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 3px; background: var(--paper-2); display: block; margin-bottom: .35rem;
}
.ident__name { display: block; font-family: var(--serif); font-weight: 600; font-size: .95rem; color: var(--ink); line-height: 1.2; }
.ident__sci { display: block; font-style: italic; font-size: .78rem; color: var(--ink-3); }
.ident__why { display: block; font-size: .72rem; color: var(--orange); margin-top: .2rem; }
.ident__card:hover .ident__name { color: var(--green-2); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; align-items: end; margin: 1.5rem 0 .4rem; padding: 1.1rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-3); }
.field select, .field input {
  font: inherit; font-size: .9rem; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); min-width: 8.5rem;
}
.field input { min-width: 12rem; }
.filters .grow { flex: 1 1 12rem; }
.result-count { font-size: .85rem; color: var(--ink-3); margin: .9rem 0 1.2rem; }
.hidden { display: none !important; }

/* ---------- TOC ---------- */
.toc { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-soft); padding: .9rem 0 1rem; margin: 1.8rem 0; }
.toc strong { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); margin-bottom: .5rem; }
.toc ol { margin: 0; padding-left: 1.1em; font-size: .93rem; columns: 2; column-gap: 1.6rem; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.toc li { margin-bottom: .25em; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { cursor: pointer; padding: .95rem 2rem .95rem 0; font-weight: 600; font-family: var(--serif); font-size: 1.06rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .8rem; font-size: 1.4rem; color: var(--sage); font-family: var(--sans); font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 1.1rem; color: var(--ink-2); max-width: var(--prose); }
.faq details > div > :last-child { margin-bottom: 0; }

/* ---------- photography ---------- */
.shot { margin: 0; }
.shot img { width: 100%; display: block; border-radius: 3px; background: var(--paper-2); }
.shot figcaption { font-size: .72rem; line-height: 1.45; color: var(--ink-3); padding: .45rem 0 0; }
.shot figcaption a { color: var(--ink-3); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; margin: 1.5rem 0; }
.gallery .shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.hero-shot img { border-radius: 4px; }
.credit { font-size: .78rem; color: var(--ink-3); margin-top: .8rem; }

/* ---------- sidebar blocks (flat, not nested cards) ---------- */
.aside-block { border-top: 2px solid var(--ink); padding-top: .9rem; margin-bottom: 2rem; }
.aside-block h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.aside-block .shot { margin-bottom: .9rem; }
.aside-block p { font-size: .94rem; color: var(--ink-2); }
.aside-block p:last-child { margin-bottom: 0; }
.aside-block ul.tight { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.aside-block ul.tight li { margin-bottom: .4em; padding-bottom: .4em; border-bottom: 1px solid var(--line-soft); }
.aside-block ul.tight li:last-child { border-bottom: 0; }
.stat-note { font-size: .82rem; color: var(--ink-3); margin-top: -.8rem; max-width: 70ch; }

/* ---------- editorial index list ---------- */
/* Used wherever a grid of boxes would otherwise appear: months, guides, links.
   Hairline rules and type hierarchy instead of borders and drop shadows. */
.index-list { border-top: 2px solid var(--ink); }
.index-list__row {
  display: grid; grid-template-columns: 8.5rem 1fr auto; gap: 1.5rem; align-items: baseline;
  padding: .95rem 0; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.index-list__row:hover { color: inherit; }
.index-list__row:hover .index-list__t { color: var(--orange); }
.index-list__k { font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--moss); }
.index-list__t { font-family: var(--serif); font-size: 1.14rem; font-weight: 600; line-height: 1.3; }
.index-list__d { display: block; font-family: var(--sans); font-size: .9rem; font-weight: 400; color: var(--ink-2); margin-top: .2rem; max-width: 62ch; }
.index-list__n { font-size: .82rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .index-list__row { grid-template-columns: 1fr auto; gap: .3rem 1rem; }
  .index-list__k { grid-column: 1 / -1; }
}

/* definition list for explaining parts of a thing */
.parts { margin: 1.6rem 0; border-top: 2px solid var(--ink); }
.parts > div { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: .8rem 0; border-bottom: 1px solid var(--line-soft); }
.parts dt { font-weight: 700; font-size: .95rem; }
.parts dd { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 620px) { .parts > div { grid-template-columns: 1fr; gap: .25rem; } }

/* leaf-arrangement diagrams */
.arrgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.6rem; margin: 1.8rem 0; }
.arrgrid figure { margin: 0; }
.arrgrid__d { display: flex; justify-content: center; padding: .6rem 0 .9rem; }
.arrgrid figcaption { font-size: .9rem; color: var(--ink-2); line-height: 1.5; border-top: 1px solid var(--line-soft); padding-top: .6rem; }
.arrgrid figcaption strong { display: block; color: var(--ink); font-family: var(--serif); font-size: 1.02rem; margin-bottom: .2rem; }

/* small key/value list for sidebars */
.mini-dl { margin: 0; font-size: .9rem; }
.mini-dl > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.mini-dl > div:last-child { border-bottom: 0; }
.mini-dl dt { color: var(--ink-3); }
.mini-dl dd { margin: 0; font-weight: 600; text-align: right; }

/* Each rating is one flex item, so a line break falls between ratings rather
   than between a label and its dots. The separators are drawn by the layout
   instead of sitting in the markup, which is what left an orphaned "·" at the
   start of the second line. */
.species-meta {
  font-size: .85rem; color: var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .25rem 1.15rem; margin-bottom: .9rem;
}
.species-meta > * { white-space: nowrap; }
.species-meta .rating { position: relative; }
.species-meta .rating + .rating::before,
.species-meta .is-native + .rating::before,
.species-meta .is-introduced + .rating::before {
  content: "·"; position: absolute; left: -.66rem; color: var(--sage);
}
/* On a phone the row becomes a two-column grid: the ratings line up, and no
   separator is ever left hanging at the start of a line. */
@media (max-width: 560px) {
  .species-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .9rem; }
  .species-meta > *:first-child { grid-column: 1 / -1; }
  .species-meta .rating + .rating::before,
  .species-meta .is-native + .rating::before,
  .species-meta .is-introduced + .rating::before { content: none; }
}
.species-meta .dots { margin-left: .35em; }

/* ---------- calendar ---------- */
.monthlist { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1rem; font-size: .95rem; }
.monthlist li { margin-bottom: .25em; }
.monthlist a[aria-current="page"] { font-weight: 700; color: var(--orange); }

.bloomtable th[scope="row"] { font-weight: 500; font-size: .9rem; white-space: nowrap; }
.bloomtable .bt-m { text-align: center; width: 2.1rem; padding: .5rem .2rem; }
.bloomtable td.bt { padding: 0; width: 2.1rem; border-left: 1px solid var(--paper); background: var(--line-soft); }
.bloomtable td.bt.on { background: var(--amber); }
.bloomtable td.bt.peak { background: var(--orange); }
.bloomtable tbody tr:hover td.bt { outline: 1px solid var(--ink-3); outline-offset: -1px; }

/* ---------- supplier finder ---------- */
.zipform { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: end; margin: 1.6rem 0 .8rem; padding: 1.1rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.zipform .field input { min-width: 9rem; font-size: 1.05rem; letter-spacing: .06em; }
.zipresult { font-size: .95rem; color: var(--ink-2); margin-bottom: 1.5rem; }

.supplier-list { margin: 1rem 0 2rem; border-top: 2px solid var(--ink); }
.supplier { padding: .95rem 0; border-bottom: 1px solid var(--line-soft); }
.supplier__head { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; justify-content: space-between; }
.supplier__name { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.supplier__name a { text-decoration: none; }
.supplier__name a:hover { text-decoration: underline; }
.supplier__type { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--moss); white-space: nowrap; }
.supplier__note { font-size: .93rem; color: var(--ink-2); margin: .3rem 0 .25rem; max-width: 68ch; }
.supplier__meta { font-size: .8rem; color: var(--ink-3); margin: 0; }
.supplier__meta .sep { opacity: .5; margin: 0 .3em; }

.suggest { display: flex; flex-wrap: wrap; gap: .8rem 1.1rem; align-items: end; margin: 1.4rem 0; padding: 1.2rem 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.suggest .field { flex: 1 1 13rem; }
.suggest .field.grow { flex: 1 1 100%; }
.suggest .field input { width: 100%; }
.consent { flex: 1 1 100%; font-size: .88rem; color: var(--ink-2); display: flex; gap: .5rem; align-items: flex-start; }
.consent input { margin-top: .2rem; }
.suggest__status { flex: 1 1 100%; font-size: .9rem; margin: 0; color: var(--moss); }

/* ---------- references and citation ---------- */
.refs { counter-reset: ref; list-style: none; padding-left: 0; font-size: .92rem; }
.refs li {
  counter-increment: ref; position: relative; padding-left: 2.2rem;
  margin-bottom: .7em; color: var(--ink-2); line-height: 1.5;
}
.refs li::before {
  content: counter(ref) "."; position: absolute; left: 0; top: 0;
  color: var(--sage); font-variant-numeric: tabular-nums; font-weight: 600;
}
.ref-id { font-family: var(--mono); font-size: .82em; color: var(--ink-3); }

.cite { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.6rem; }
.cite h2 { margin-top: 0; }
.cite__note { font-size: .92rem; color: var(--ink-2); max-width: 62ch; }
.cite__list { display: grid; margin-top: 1rem; border-top: 1px solid var(--line-soft); }
.cite__row {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .9rem; align-items: start;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft);
}
.cite__label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding-top: .2rem; }
.cite__text { font-family: var(--mono); font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: var(--ink); background: none; }
.cite__copy {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 6px; padding: .3rem .6rem; white-space: nowrap;
}
.cite__copy:hover { background: var(--line-soft); color: var(--ink); }
@media (max-width: 620px) {
  .cite__row { grid-template-columns: 1fr auto; }
  .cite__label { grid-column: 1 / -1; }
}

/* ---------- a11y ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- misc ---------- */
.nextprev { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
@media (max-width: 560px) { .nextprev { grid-template-columns: 1fr; } }
.nextprev a { text-decoration: none; display: block; padding: .9rem 0; border-top: 2px solid var(--ink); font-family: var(--serif); font-size: 1.08rem; font-weight: 600; }
.nextprev a:hover { color: var(--orange); }
.nextprev small { display: block; color: var(--ink-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: .2rem; }
.nextprev .r { text-align: right; }

.linklist { list-style: none; padding: 0; columns: 2; column-gap: 2rem; }
.linklist.c3 { columns: 3; }
@media (max-width: 780px) { .linklist, .linklist.c3 { columns: 2; } }
@media (max-width: 480px) { .linklist, .linklist.c3 { columns: 1; } }
.linklist li { break-inside: avoid; margin-bottom: .3em; }

.hgroup { max-width: 46rem; }
.hgroup .lede { margin-top: .8rem; }
.pagehead { padding: 1.5rem 0 .5rem; }

.figure { margin: 1.8rem 0; }
.figure figcaption { font-size: .84rem; color: var(--ink-3); margin-top: .6rem; font-style: italic; }

.plant-plate {
  background: var(--paper-2); border-radius: 3px;
  padding: 1.25rem; display: flex; align-items: center; justify-content: center;
}
.plant-plate img { width: 100%; max-width: 300px; height: auto; }

.two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
/* minmax(0, 1fr) rather than 1fr: a bare 1fr track is min-width:auto, so any
   wide child (a species table, a code block) makes the whole page scroll
   sideways instead of scrolling inside its own wrapper. */
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.two-col > *, .prose, .sidebar { min-width: 0; }
.sidebar { position: sticky; top: 5rem; }
@media (max-width: 900px) { .sidebar { position: static; } }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem 1.2rem; margin: 2rem 0; }
/* Four figures want an even 2 x 2 on a phone. auto-fit would give three and an
   orphan, and squeeze every caption into five lines to do it. */
@media (max-width: 620px) { .stat-row { grid-template-columns: 1fr 1fr; column-gap: 1.1rem; } }
.stat span a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.stat span a:hover { color: var(--ink); text-decoration-color: currentColor; }
.stat--sm b { font-family: var(--sans); font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem); line-height: 1.25; font-weight: 650; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1; color: var(--green-2); font-weight: 600; }
.stat span { font-size: .82rem; color: var(--ink-3); display: block; margin-top: .3rem; line-height: 1.35; }

/* ---------- footer ---------- */
.foot { background: var(--green); color: #DCE7DE; padding: 3rem 0 2rem; margin-top: 4rem; }
@media (prefers-color-scheme: dark) { .foot { background: var(--paper-2); color: var(--ink-2); border-top: 1px solid var(--line-soft); } }
.foot a { color: #F2EBDC; text-decoration: none; }
@media (prefers-color-scheme: dark) { .foot a { color: var(--ink); } }
.foot a:hover { text-decoration: underline; color: var(--pollen); }
.foot h4 { color: #fff; font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .7rem; opacity: .72; }
@media (prefers-color-scheme: dark) { .foot h4 { color: var(--ink); } }
.foot ul { list-style: none; padding: 0; font-size: .92rem; }
.foot li { margin-bottom: .32em; }
.foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.foot__grid--5 { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 1.6rem; }
@media (max-width: 980px) { .foot__grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__bot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .82rem; opacity: .8; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
@media (prefers-color-scheme: dark) { .foot__bot { border-top-color: var(--line-soft); } }
.foot .brand { color: #fff; font-size: 1.35rem; }
.foot .brand__sub { color: var(--pollen); border-left-color: rgba(255,255,255,.25); }
@media (prefers-color-scheme: dark) {
  .foot .brand { color: var(--ink); }
  .foot .brand__sub { color: var(--orange); border-left-color: var(--line); }
}

/* ---------- print ---------- */
@media print {
  .masthead, .foot, .filters, .btnrow, .nextprev { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: none; color: #000; }
  .card, .facts { break-inside: avoid; }
}