/* Reset, element defaults, typography, layout primitives, utilities. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: var(--wt-body) var(--t-16)/var(--lh-body) var(--font-body);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
body.has-pocbar { padding-bottom: calc(var(--pocbar-h) + var(--s-4)); }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* Headings: the serif carries h1 and h2; h3 and below are UI weight sans. */
h1, h2, .serif {
  font-family: var(--font-display); font-weight: var(--wt-head);
  line-height: var(--lh-tight); letter-spacing: var(--tracking-heading); text-wrap: balance;
}
h1 { font-size: var(--t-28); }
h2 { font-size: var(--t-22); }
h3 { font-size: var(--t-18); font-weight: var(--wt-ui-head); line-height: var(--lh-snug); }
h4 { font-size: var(--t-16); font-weight: var(--wt-ui-head); line-height: var(--lh-snug); }
p { text-wrap: pretty; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-strong); }
em.sp { font-style: italic; }                       /* species names */
mark {
  background: var(--accent); color: var(--on-accent); padding: 0 0.14em; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Public register */
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: 1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.h1 { font-size: var(--fs-h1); } .h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); line-height: 1.5; max-width: var(--measure); }

/* Layout primitives */
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section); }
.section.tight { padding-block: var(--section-tight); }
.stack > * + * { margin-top: var(--s-4); }
.stack.s2 > * + * { margin-top: var(--s-2); }
.stack.s5 > * + * { margin-top: var(--s-5); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: var(--gap-grid); }
.grid.auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.grid.c-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.scroll-x { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* relative: keeps visually hidden children from widening the page */
@media (max-width: 900px) { .grid.c2, .grid.c-7-5, .grid.c-5-7 { grid-template-columns: minmax(0, 1fr); } }

/* Utilities */
.muted { color: var(--muted); }
.small { font-size: var(--t-14); } .xs { font-size: var(--t-13); }
.strong { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { flex: none; }
@media (max-width: 640px) { .hide-sm { display: none !important; } }