/* Live Species: every page but the home page (an animal's record, How we count, Changes, Credits, About, Privacy,
   the not-found page). Loaded after site.css, so the ground, type, colour, bar and footer are the home page's own.
   Text never under 14px; links keep the chalk focus outline from site.css. */
:root { --gut: clamp(24px, 4.45vw, 64px); }
html[data-mode="phone"] { --gut: 16px; }
@media (min-width: 600px) { html[data-mode="phone"] { --gut: 24px; } }

/* The logo on the gutter by its ink: the limb's left tip is 13.51 of the 496.51 viewBox units in. */
.page .bar .brand__lockup { position: relative; left: -5.33px; }
html[data-mode="phone"] .page .bar .brand__lockup { left: -4.57px; }
.page .foot__brand .brand__lockup { position: relative; left: -6.31px; }

.pg { padding: 136px 0 96px; }
html[data-mode="phone"] .pg { padding: 92px 0 64px; }
.pg__in { max-width: calc(1180px + 2 * var(--gut)); }
.pg--text .pg__in { max-width: calc(800px + 2 * var(--gut)); }
.pg a { color: var(--chalk); }
.pg a:hover { color: var(--muted); }

.pg__back a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.3 var(--sans); color: var(--muted); }
.pg .p-tag { margin-top: 24px; }
.pg__name { margin-top: 4px; font: 800 max(40px, min(7vw, 76px))/1.02 var(--sans); letter-spacing: -0.006em; overflow-wrap: break-word; }
.pg__title { font-weight: 600; font-size: max(36px, min(6vw, 56px)); line-height: 1.04; letter-spacing: -0.014em; }
.pg__sci { margin-top: 10px; font-style: italic; font-size: 18px; line-height: 1.4; color: var(--muted); }
.pg__place { margin-top: 2px; font-style: italic; font-size: 16px; line-height: 1.4; color: var(--muted); }

.pg__top { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; margin-top: 40px; align-items: start; }
html[data-mode="phone"] .pg__top { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
.pg__photo img { width: auto; max-width: 100%; height: auto; max-height: min(72vh, 760px); }   /* a tall photo shrinks whole, never cropped */
.pg__photo figcaption { margin-top: 10px; display: grid; gap: 4px; font: 14px/1.45 var(--sans); color: var(--muted); }
.pg__photo figcaption a { color: var(--muted); }
.pg__credit { overflow-wrap: anywhere; }

.pg__fig { padding-top: 18px; border-top: 1px solid var(--hair-2); }
.pg__fig + .pg__fig { margin-top: 28px; }
.pg__ftag { margin-bottom: 12px; font: 700 14px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--light); }
.pg__n { font-family: var(--sans); font-weight: 800; font-stretch: 75%; font-size: max(56px, min(9vw, 104px)); line-height: 0.92; letter-spacing: 0; font-variant-numeric: lining-nums proportional-nums; overflow-wrap: break-word; }
.pg__n--long { font-size: max(40px, min(6vw, 68px)); line-height: 1.02; }
.pg__kind { margin-top: 14px; font: 700 16px/1.3 var(--sans); }
.pg__date { margin-top: 4px; font: 600 15px/1.4 var(--sans); color: var(--muted); }
.pg__counted { margin-top: 10px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }

.pg__lead { margin-top: 44px; max-width: 800px; font-size: 22px; line-height: 1.5; }
html[data-mode="phone"] .pg__lead { margin-top: 28px; font-size: 19px; }
.pg__hook { margin-top: 16px; max-width: 800px; font-size: 18px; line-height: 1.5; color: var(--muted); }
.pg__wall { margin-top: 12px; max-width: 800px; font-size: 17px; line-height: 1.5; }
.pg__sec { margin-top: 52px; padding-top: 28px; border-top: 1px solid var(--hair); max-width: 800px; }
html[data-mode="phone"] .pg__sec { margin-top: 40px; padding-top: 22px; }
.pg__h { margin-top: 48px; font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
html[data-mode="phone"] .pg__h { font-size: 25px; }
.pg__sec .pg__h { margin-top: 0; }
.pg__sec p, .pg--text p { margin-top: 14px; max-width: 800px; font-size: 17px; line-height: 1.55; }
html[data-mode="phone"] .pg__sec p, html[data-mode="phone"] .pg--text p { font-size: 16px; }
.pg--text .pg__lead { margin-top: 20px; font-size: 20px; }
.pg__h3 { margin-top: 28px; font: 700 16px/1.3 var(--sans); }
.pg__list { margin-top: 14px; display: grid; gap: 12px; max-width: 800px; }
.pg__list li { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.pg__press li::first-letter { text-transform: uppercase; }
.pg__press q { font-style: italic; }
.pg__srcl, .pg__when { display: block; font: 600 14px/1.4 var(--sans); color: var(--muted); }
.pg__more a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.3 var(--sans); }

.cr__list { margin-top: 18px; display: grid; }
.cr__item { padding: 16px 0 18px; border-top: 1px solid var(--hair); }
.cr__item p { margin-top: 4px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.pg--credits .cr__item p.cr__name, .pg--credits .cr__item p.cr__body { margin-top: 0; font: 700 16px/1.35 var(--sans); }
.cr__credit, .cr__cut, .cr__lic, .cr__src { font-family: var(--sans); }

/* ------------------------------------------------------------------ fix lane, 2026-11-13 (reports/REVIEW-2026-11-13.md) */
/* Phones: the wordmark at the top of every page, the humans block out of the bar (its credit is in the footer). */
html[data-mode="phone"] .page .bar[data-compact] .brand__lockup { display: block; }
html[data-mode="phone"] .page .bar[data-compact] .brand__small { display: none; }
html[data-mode="phone"] .page .bar[data-compact] .bar__humans, html[data-mode="phone"] .page .bar[data-compact] .bar__credit { display: none; }
html[data-mode="phone"] .page .bar[data-compact] .menu-btn { margin-left: auto; }

/* An animal's page, the first screen. Without the script, and on a phone, a plain stack: tagline, the humans line,
   the way back, tag, name, numeral, kind and date, then the photo whole. record.js turns it into the home page's
   scene on wider screens (.rh--on). */
html[data-mode] .pg--rec, .pg--rec { padding-top: 0; }
.rh { position: relative; overflow: hidden; }
.rh__text { position: relative; z-index: 3; padding: 72px var(--gut) 0; max-width: calc(800px + 2 * var(--gut)); }
html[data-mode="desk"] .rh__text { padding-top: 104px; }
.rh__tagline { margin: 0 0 6px; }
.rh__humans { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; white-space: nowrap; }
.rh__hlab { font: 600 14px/1.3 var(--sans); color: var(--muted); }
.rh__hfig { font: 600 16px/1.3 var(--sans); }
.rh .pg__back { margin-top: 4px; }
.rh .p-tag { margin-top: 16px; }
.rh__fig { margin-top: 12px; }
.rh__num { margin: 0; font-family: var(--sans); font-weight: 800; font-stretch: 75%; font-size: max(56px, min(13vw, 104px)); line-height: 1; letter-spacing: 0; color: var(--chalk); font-variant-numeric: lining-nums proportional-nums; overflow-wrap: anywhere; }
.rh__num--words { font-size: max(44px, min(10vw, 76px)); line-height: 1.02; }
.rh__num .num__w { font-size: max(14px, 0.215em); }   /* the number words never under the 14 px floor on a phone */
.rh__last { margin-top: 10px; font: 600 16px/1.4 var(--sans); }
.rh .pg__ftag { margin-bottom: 6px; }
.rh .pg__sci { margin-top: 16px; }
.rh__counted { margin-top: 10px; max-width: 560px; }
.rh__other { margin-top: 10px; max-width: 560px; font-size: 16px; line-height: 1.5; color: var(--muted); }
.rh__photo { position: relative; z-index: 2; margin: 28px var(--gut) 0; }
.rh__earth, .rh__grain, .rh__shade, .rh__ring { display: none; }
.rh:not(.rh--on) .rh__lens { position: static; width: auto; height: auto; border-radius: 0; overflow: visible; background: none; box-shadow: none; }
.rh:not(.rh--on) .lens__inner, .rh:not(.rh--on) .lens__sheen { display: none; }
.rh:not(.rh--on) .rh__img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(72vh, 760px); }
.rh__cap { margin-top: 10px; display: grid; gap: 4px; font: 14px/1.45 var(--sans); color: var(--muted); }
.rh__cap a { color: var(--muted); }

/* Wider screens: the home page's scene (record.js sets the sizes from the home's 1440x900 proportions). */
html[data-mode="desk"] .rh--on { background: radial-gradient(calc(900px * var(--k)) calc(700px * var(--k)) at 72% 70%, #111214 0%, #0D0E10 60%, #0B0C0E 100%); }
.rh--on .rh__earth { display: block; position: absolute; z-index: 0; left: 0; top: 0; }
.rh--on .rh__grain { display: block; z-index: 1; }
.rh--on .rh__shade { display: block; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 12, 14, 0.82) 0, rgba(11, 12, 14, 0.62) calc(520px * var(--k)), rgba(11, 12, 14, 0) calc(760px * var(--k))); }
.rh--on .rh__text { width: calc(460px * var(--k)); min-width: 300px; max-width: 46vw; padding-right: 0; padding-bottom: 40px; }
.rh--on .rh__tagline { font-size: max(14px, calc(17px * var(--k))); }
.rh--on .pg__name { font-size: max(40px, min(calc(76px * var(--k)), 6vw)); }
.rh--on .rh__num { position: absolute; z-index: 3; white-space: nowrap; overflow-wrap: normal; }
.rh--on .rh__photo { position: static; margin: 0; }
.rh--on .rh__lens { position: absolute; z-index: 2; }
.rh--on .rh__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.rh--on .rh__lens--whole .rh__img { object-fit: fill; }
.rh--on .rh__ring { display: block; position: absolute; z-index: 2; }
.rh--on .rh__cap { position: absolute; z-index: 3; margin: 0; text-align: center; }
.rh--on .rh__cap::before { content: ""; position: absolute; z-index: -1; left: -40px; right: -40px; top: -20px; bottom: -20px; background: radial-gradient(closest-side, rgba(11, 12, 14, 0.86), rgba(11, 12, 14, 0.55) 62%, rgba(11, 12, 14, 0)); pointer-events: none; }

/* Below the first screen: the text left, the figure card sticky in the right column (designer 1). */
.pg__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); column-gap: 64px; align-items: start; max-width: calc(1180px + 2 * var(--gut)); margin: 0; padding: 0 var(--gut); }
.pg__main { grid-column: 1; grid-row: 1; min-width: 0; }
.pg__card { grid-column: 2; grid-row: 1; position: sticky; top: 104px; margin-top: 52px; }
html[data-mode="phone"] .pg__body { display: block; }
html[data-mode="phone"] .pg__card { position: static; margin-top: 24px; }
.fc { padding-top: 16px; border-top: 1px solid var(--hair-2); }
.fc__l { font: 700 14px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--light); }
.fc__last { margin-top: 10px; font: 600 15px/1.3 var(--sans); color: var(--muted); }
.fc__n { margin-top: 8px; font-family: var(--sans); font-weight: 800; font-stretch: 75%; font-size: 64px; line-height: 0.98; font-variant-numeric: lining-nums proportional-nums; overflow-wrap: anywhere; }
.fc__n--long { font-size: 44px; }
.fc .pg__kind { margin-top: 10px; }
.fc__scope { margin-top: 2px; font: 600 15px/1.4 var(--sans); }
.fc__src { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.fc__src a { color: var(--chalk); }
html[data-mode="phone"] .fc { padding-top: 12px; }
/* The second figure of a disputed pair: about half the size, muted (designer 4). */
.fc--second { margin-top: 24px; padding: 14px 16px 16px; border: 1px solid var(--hair); background: rgba(242, 238, 230, 0.03); color: var(--muted); }
.fc--second .fc__l { color: var(--muted); }
.fc--second .fc__n { font-size: 32px; color: var(--muted); }
.fc--second .pg__kind { font-size: 15px; color: var(--muted); }

.pg__tq q { font-style: italic; }
.pg__srcs .src > a { font-weight: 600; }
.src__t { display: block; color: var(--muted); }
.src__pub { margin: 0; font: 600 16px/1.4 var(--sans); }
.src__docs { display: grid; gap: 6px; margin-top: 6px; padding-left: 14px; border-left: 1px solid var(--hair); }

/* The way on: the next animal, the whole wall, the letter (visitor 5). */
.pg__next .pg__h3 { margin-top: 32px; }
.nx { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 18px; color: var(--chalk); text-decoration: none; }
.nx:hover .nx__name { text-decoration: underline; }
.nx__ph img { display: block; width: 120px; height: auto; }   /* the photo whole, never cropped */
.nx__b { display: grid; gap: 2px; }
.nx__tag { font: 700 14px/1.3 var(--sans); color: var(--light); }
.nx__name { font: 800 22px/1.2 var(--sans); }
.nx__fig { font-family: var(--sans); font-weight: 800; font-stretch: 75%; font-size: 36px; line-height: 1.05; }
.nx__meta { font: 600 14px/1.4 var(--sans); color: var(--muted); }

/* How Live Species counts: a sticky index on the right, the kinds as a legend (designer 5). */
.pg--idx .pg__in { max-width: calc(1100px + 2 * var(--gut)); }
.idx__grid { display: grid; grid-template-columns: minmax(0, 800px) minmax(200px, 240px); column-gap: 64px; align-items: start; }
.idx__main { grid-column: 1; grid-row: 1; min-width: 0; }
.idx { grid-column: 2; grid-row: 1; position: sticky; top: 112px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
.idx__h { font: 700 14px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--light); }
.idx ul { display: grid; margin-top: 4px; }
.idx a { display: inline-flex; align-items: center; min-height: 40px; font: 600 15px/1.3 var(--sans); }
html[data-mode="phone"] .idx__grid { display: block; }
html[data-mode="phone"] .idx { position: static; margin-bottom: 28px; }
.kl { margin-top: 18px; display: grid; gap: 0; max-width: 800px; }
.kl__row { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); column-gap: 24px; padding: 14px 0; border-top: 1px solid var(--hair); }
.kl dt .pg__kind, .kl dt .pg__ftag { margin: 0; display: inline-block; }
.kl dd { margin: 0; font-size: 16px; line-height: 1.5; }
html[data-mode="phone"] .kl__row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
[id] { scroll-margin-top: 96px; }

/* Credits: an index, a grid of cards with a small picture each, the bodies in two columns (designer 6). */
.cr__index ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; }
.cr__index a { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.3 var(--sans); }
.pg--credits .pg__in { max-width: calc(1180px + 2 * var(--gut)); }
.pg--credits .pg__lead, .pg--credits .pg__in > p { max-width: 800px; }
.cr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 18px; }
html[data-mode="phone"] .cr__grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) and (max-width: 1099px) { .cr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cr__card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0 18px; border-top: 1px solid var(--hair); }
.cr__thumb img { display: block; width: 72px; height: auto; }   /* the photo whole, never cropped */
.cr__txt p { margin-top: 4px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pg--credits .cr__txt p.cr__name { margin-top: 0; font: 700 16px/1.35 var(--sans); }
.cr__credit, .cr__cut, .cr__lic, .cr__src { font-family: var(--sans); }
.cr__bodies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 18px; }
html[data-mode="phone"] .cr__bodies { grid-template-columns: minmax(0, 1fr); }
.cr__body { padding: 12px 0 14px; border-top: 1px solid var(--hair); }
.cr__body p { margin-top: 2px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.pg--credits .cr__body p.cr__bname { margin-top: 0; font: 600 15px/1.4 var(--sans); }

/* Nothing on these pages moves but the bar's humans figure, which updates once a minute under reduced motion. */