/**
 * styles.css — hominin-atlas.nodejavascript.com
 *
 * The page's identity is its own: theme colour #ca8a04, page background
 * #140704, its own gradient wash, and its own abstract — a repeating field of
 * CHEVRONS, the dispersal mark. No other site in the family draws chevrons.
 *
 * The chrome — the sticky bar, the footer, the cookie gate — is the house
 * pattern, and the [hidden] rule near the top is load-bearing: the gate swaps
 * one block for another by setting that attribute, and the user-agent default
 * for [hidden] is overridden by any author rule that declares `display`. Without
 * the !important the question sits on screen underneath its own settings panel.
 */

:root {
  --bg: #140704;
  --accent: #ca8a04;
  --accent-soft: #f59e0b;
  --yellow: #fbbf24;
  --text: #f6efe8;
  --muted: #b6a696;
  --hairline: rgba(202, 138, 4, 0.26);
  --card: rgba(255, 255, 255, 0.035);
  --card-line: rgba(255, 255, 255, 0.09);
  --container: 1120px;
  --consent-height: 0px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  /* Anything scrolled into view stops BELOW the sticky bar. Without this a chip,
     a contact row or a panel scrolled to by the browser lands underneath the bar
     — visible, painted, and unable to be clicked. */
  scroll-padding-top: 80px;
}

body {
  /* Three soft glows over a slow base. Every stop fades to nothing — a
     background built from shapes with a hard edge reads as two tones in two
     corners rather than as one page. */
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -10%, rgba(234, 88, 12, 0.22), transparent 70%),
    radial-gradient(900px 560px at 92% 6%, rgba(180, 60, 8, 0.2), transparent 68%),
    radial-gradient(1200px 760px at 50% 108%, rgba(120, 40, 6, 0.24), transparent 72%),
    linear-gradient(168deg, rgba(60, 22, 8, 0.55), rgba(10, 3, 1, 0.9)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 60%);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  /* The cookie bar is fixed to the bottom and takes the click where it sits, so
     the page reserves its measured height. The reservation goes AFTER the
     footer, in the body's padding: padding inside the footer would not lift the
     footer clear of the bar, because padding is inside the box. */
  padding-bottom: var(--consent-height);
}

/* ── the abstract ───────────────────────────────────────────────────────────── */

.dvs-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='52' viewBox='0 0 54 52'%3E%3Cg fill='none' stroke='%23ca8a04' stroke-linecap='round' stroke-width='1.6'%3E%3Cpath stroke-opacity='.24' d='M7 30 L27 12 L47 30'/%3E%3Cpath stroke-opacity='.12' d='M7 46 L27 28 L47 46'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse 92% 78% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 82%);
  mask-image: radial-gradient(ellipse 92% 78% at 50% 34%, #000 0%, rgba(0, 0, 0, 0.55) 52%, transparent 82%);
}

main,
.top,
.site-footer,
.skip {
  position: relative;
  z-index: 1;
}

/* ── shared bits ────────────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #1a0a02;
  padding: 10px 16px;
  z-index: 40;
  font-weight: 600;
}

.skip:focus {
  left: 8px;
  top: 8px;
}

a {
  color: var(--accent-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
}

a:hover {
  color: #ffd28a;
  border-bottom-color: currentColor;
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 18px 0 8px;
}

p {
  margin: 0 0 14px;
}

.note {
  color: var(--muted);
  font-size: 14.5px;
}

.linkish {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--accent-soft);
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.linkish:hover {
  color: #ffd28a;
}

.chip,
.bar,
.contact,
.station,
.panel {
  scroll-margin-top: 80px;
}

.gh-star {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 5px;
  flex: none;
  vertical-align: -0.06em;
  fill: var(--yellow);
}

/* ── header ─────────────────────────────────────────────────────────────────── */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  background: rgba(20, 7, 4, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: var(--text);
}

.brand .mark {
  color: var(--accent);
  display: inline-flex;
}

.brand b {
  display: block;
  font-size: 15px;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.brand small {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.1;
}

/* ── hero ───────────────────────────────────────────────────────────────────── */

.hero {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px 20px 30px;
}

.hero h1 {
  font-size: clamp(27px, 4.4vw, 46px);
  max-width: 26ch;
  margin-bottom: 20px;
}

.hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 22px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

.lede {
  font-size: clamp(16.5px, 1.6vw, 19px);
  max-width: 62ch;
  color: #e9ded4;
}

.capability {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 70ch;
}

.capability b {
  color: var(--accent-soft);
}

/* ── the map ────────────────────────────────────────────────────────────────── */

.map {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px 20px 30px;
}

.globe-wrap {
  position: relative;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(234, 88, 12, 0.12), transparent 62%);
}

.globe {
  position: relative;
  width: 100%;
  height: clamp(340px, 58vh, 620px);
}

/* The flat map is a 2:1 plate, so the box takes the same shape and stops
   cropping the poles the way a viewport-shaped box would. */
.globe[data-view="flat"] {
  height: auto;
  aspect-ratio: 2 / 1;
  min-height: 300px;
}

.globe .globecanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.globe .globecanvas:active {
  cursor: grabbing;
}

.globe .flatcanvas {
  display: block;
  cursor: grab;
  touch-action: none;
}

.globe .flatcanvas:active {
  cursor: grabbing;
}

.viewswitch {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: rgba(12, 6, 4, 0.72);
  backdrop-filter: blur(8px);
}

.viewbtn {
  border: 0;
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
}

.viewbtn:hover {
  color: var(--text);
}

.viewbtn.is-on {
  color: #1b0d04;
  background: var(--accent);
  font-weight: 600;
}

.mapzoom {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--card-line);
  background: rgba(12, 6, 4, 0.72);
  backdrop-filter: blur(8px);
}

.mapzoom button {
  min-width: 30px;
  border: 0;
  border-radius: 7px;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}

.mapzoom button:hover {
  background: rgba(234, 88, 12, 0.35);
}

.hover-readout {
  position: absolute;
  left: 12px;
  /* Clear of the zoom control, which is at 12px in both views. The card is
     anchored to the MAP and not to the frame around it: once the legend moved
     below the map, a card anchored to the frame was drawn underneath it. */
  bottom: 46px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(80%, 430px);
  padding: 6px 11px 6px 7px;
  border-radius: 10px;
  border: 1px solid var(--card-line);
  background: rgba(12, 6, 4, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
}

.hover-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.hover-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hover-species {
  color: var(--text);
  font-size: 12.5px;
}

.hover-where {
  color: var(--muted);
  font-size: 11.5px;
}

.projection-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

.globe-hud {
  position: absolute;
  left: 18px;
  top: 16px;
  pointer-events: none;
}

.globe-hud .year {
  margin: 0;
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.globe-hud .era {
  margin: 2px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-soft);
}

.globe-legend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  max-width: min(86%, 740px);
}

/* On the flat plate the legend would lie across Africa and southern Asia —
   hiding the very localities it is the key to. So it goes UNDER the map instead
   of on it: no land covered, and every species named. */
.globe[data-view="flat"] ~ .globe-legend {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  justify-content: stretch;
  max-width: none;
  padding: 10px 12px 13px;
  border-top: 1px solid var(--card-line);
}

/* The species name, italic, because a binomial is italic — and because the
   italic is what marks the difference between the name of a species and the
   nickname that used to be printed here. */
.sp {
  font-style: italic;
}

.chip.is-off {
  opacity: 0.34;
}

.chip.is-off i {
  background: transparent !important;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: var(--muted);
}

.chip-all {
  border-style: dashed;
  color: var(--accent-soft);
}

.chip-all[hidden] {
  display: none !important;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  font: inherit;
  font-size: 11.5px;
  line-height: 1.35;
  padding: 2px 7px 2px 4px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: rgba(12, 5, 2, 0.62);
  color: var(--muted);
  opacity: 0.88;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.chip:hover {
  color: var(--text);
  border-color: var(--card-line);
  opacity: 1;
}

/* ── timeline ───────────────────────────────────────────────────────────────── */

.timeline {
  margin-top: 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: var(--card);
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.play {
  flex: none;
  min-width: 84px;
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: rgba(234, 88, 12, 0.16);
  color: var(--text);
  cursor: pointer;
}

.play:hover {
  background: rgba(234, 88, 12, 0.3);
}

/* Quieter than Play: it is the way back to the start, not the main control. */
.play.ghost {
  min-width: 0;
  border-color: var(--card-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-weight: 500;
}

.play.ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  background: none;
  cursor: pointer;
}

.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.55));
}

.slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(234, 88, 12, 0.15), rgba(234, 88, 12, 0.55));
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -8px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ffd9a8;
  border: 2px solid var(--accent);
  box-shadow: 0 0 14px rgba(234, 88, 12, 0.7);
}

.slider::-moz-range-thumb {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ffd9a8;
  border: 2px solid var(--accent);
}

.slider:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}

.stations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.station {
  font: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
}

.station:hover {
  color: var(--text);
  border-color: var(--accent);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14px;
  color: var(--muted);
}

.stats b {
  color: var(--accent-soft);
  font-size: 17px;
}

.sea {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--muted);
  border-left: 2px solid var(--hairline);
  padding-left: 12px;
}

/* Shown only when the selected time is younger than anything in the data, so an
   empty map comes with the reason it is empty rather than reading as a fault. */
.record-note {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

/* ── the detail panel ───────────────────────────────────────────────────────── */

.panel {
  position: absolute;
  right: 32px;
  top: 74px;
  width: min(390px, calc(100% - 64px));
  max-height: clamp(240px, 48vh, 460px);
  overflow: auto;
  padding: 18px 20px 22px;
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: rgba(18, 8, 4, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  font-size: 14.5px;
}

.panel-head {
  position: relative;
  padding-left: 12px;
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
}

.panel-head h3 {
  margin: 0 0 2px;
}

.panel-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.panel-close {
  position: absolute;
  right: -6px;
  top: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--card-line);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.panel dl {
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr;
  gap: 4px 14px;
  margin: 14px 0;
  font-size: 14px;
}

.panel dt {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 3px;
}

.panel dd {
  margin: 0;
}

.panel .who {
  font-size: 15px;
  color: var(--accent-soft);
}

.refs {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}

.refs li {
  margin-bottom: 7px;
}

/* The species' picture, and the sentence that says where it came from. The credit
   is set at the same size as the rest of the panel's prose rather than shrunk into
   a footnote: on this page a picture without its source is the thing being argued
   against. */
.face {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 14px;
  align-items: start;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.face img {
  display: block;
  width: 168px;
  height: 168px;
  border-radius: 10px;
  object-fit: cover;
}

.face figcaption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.face figcaption b {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.face-why {
  font-style: italic;
}

.noface {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.noface img {
  display: block;
}

.noface p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 520px) {
  .face,
  .noface {
    grid-template-columns: 1fr;
  }
}

.refs-full {
  columns: 2;
  column-gap: 34px;
}

/* ── the species chart ──────────────────────────────────────────────────────── */

.chart,
.clashes,
.lineage,
.mixing,
.honesty,
.sources,
.privacy {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px 10px;
}

.bars {
  /* The three numbers that keep the marker line over the track and nowhere
     else. They are read once here and used by both the rows and the marker
     layer, so the row and the line it crosses cannot drift apart. */
  --bar-pad: 6px;
  --bar-gutter: 232px;
  --bar-gap: 12px;
  position: relative;
  margin-top: 18px;
  display: grid;
  gap: 3px;
}

.bar {
  position: relative;
  display: grid;
  grid-template-columns: var(--bar-gutter) 1fr;
  align-items: center;
  gap: var(--bar-gap);
  width: 100%;
  padding: 5px var(--bar-pad);
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
  text-align: left;
  opacity: 0.4;
  transition: opacity 0.18s ease;
}

/* The identity column. The name wraps inside its own cell, which is what makes
   room for the avatar — and what stops the bar from ever running under it. */
.bar-id {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.bar-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.bar-name {
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #f6efe8;
  font-weight: 620;
  overflow-wrap: break-word;
}

.bar.is-now {
  opacity: 1;
}

.bar.is-off {
  opacity: 0.16;
}

/* The time axis for one species. The fill is positioned inside this cell, so its
   percentages are of the track and never of the whole row. */
.bar-track {
  position: relative;
  display: block;
  height: 16px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
}

.bar-fill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  opacity: 0.9;
}

/* The nickname, beside the name and never instead of it. */
.nick {
  color: var(--muted);
  font-weight: 400;
  font-style: normal;
}

.bar-marker-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--bar-pad) + var(--bar-gutter) + var(--bar-gap));
  right: var(--bar-pad);
  pointer-events: none;
}

.bar-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--yellow);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.85);
}

/* ── contacts ───────────────────────────────────────────────────────────────── */

.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.contact {
  display: grid;
  gap: 3px;
  text-align: left;
  font: inherit;
  padding: 13px 15px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
}

.contact:hover {
  border-color: var(--accent);
  background: rgba(234, 88, 12, 0.09);
}

.contact.is-now {
  border-color: rgba(251, 191, 36, 0.5);
}

.contact-kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact b {
  font-size: 15px;
}

.contact-who {
  font-size: 12.5px;
  color: var(--muted);
}

/* ── the lineage chart ──────────────────────────────────────────────────────── */

.note.warn {
  border-left: 2px solid var(--accent);
  padding-left: 12px;
}

.lineage-host {
  margin-top: 16px;
}

.tree {
  /* The label column, the row height and the gutter between them are read by
     both the axis and every row, so a tick and the bar under it cannot drift
     apart. The chart's overlay of branch lines starts at the same gutter.
     The label width is set by the LONGEST date line ("1.90 million years ago →
     108 thousand years ago"), because when one wraps the whole chart grows a
     row taller and stops reading as a column of equal lines. */
  --tree-label: 16rem;
  --tree-gap: 12px;
  --tree-row: 30px;
}

.tree-axis,
.tree-row {
  display: grid;
  grid-template-columns: var(--tree-label) 1fr;
  gap: var(--tree-gap);
}

.tree-axis {
  margin-bottom: 4px;
}

.tree-axistrack {
  /* The second column. Without this the axis lands in the label column and is
     drawn behind the names, 13rem wide, which reads as no axis at all. */
  grid-column: 2;
  position: relative;
  height: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tree-tick {
  position: absolute;
  bottom: 3px;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.tree-tick:first-child {
  transform: translateX(-35%);
}

.tree-tick.is-now {
  transform: translateX(-100%);
  color: var(--yellow);
}

.tree-body {
  position: relative;
}

.tree-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree-row {
  /* A minimum, not a fixed height. A name that wraps to two lines used to
     overflow its row and run into the row below it, and the connectors are
     measured from the laid-out rows, so a taller row is followed correctly. */
  min-height: var(--tree-row);
  align-items: center;
}

.tree-name {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.tree-name:hover .tree-label i {
  color: var(--accent-soft);
}

.tree-name > i:not(.sp) {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.tree-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.25;
}

.tree-span {
  font-size: 10px;
  color: var(--muted);
}

/* Marks a lineage with no parent on the chart at all. */
.tree-q {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  font-size: 10px;
  color: var(--muted);
}

.tree-track {
  position: relative;
  height: var(--tree-row);
}

.tree-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  min-width: 3px;
  height: 10px;
  border-radius: 3px;
  opacity: 0.85;
}

.tree-bar.is-extant {
  opacity: 1;
}

.tree-row.is-unplaced .tree-bar {
  opacity: 0.4;
}

/* The overlay the branch lines are drawn into. It is inset to the track column
   exactly, so a line's horizontal position is a share of the track and never of
   the whole chart. */
.tree-links {
  position: absolute;
  inset: 0 0 0 calc(var(--tree-label) + var(--tree-gap));
  pointer-events: none;
}

.tree-link {
  position: absolute;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.tree-link.is-contested {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0 4px,
    rgba(255, 255, 255, 0) 4px 8px
  );
}

.tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

.tree-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.tree-key .tree-link {
  position: static;
  width: 3px;
  height: 16px;
  background: rgba(255, 255, 255, 0.55);
}

.tree-key .tree-link.is-contested {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.6) 0 4px,
    rgba(255, 255, 255, 0) 4px 8px
  );
}

.tree-key .tree-q {
  margin-left: 0;
}

.tree-note {
  max-width: 78ch;
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #ded2c7;
}

.tree-note p {
  margin: 0 0 10px;
}

.tree-note b {
  color: var(--accent-soft);
}

.tree-detail {
  margin-top: 18px;
}

.tree-detail summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--accent-soft);
}

.tree-branches {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.tree-branch {
  display: grid;
  gap: 3px;
  padding: 11px 14px;
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  background: var(--card);
  font-size: 13px;
}

.tree-branch.is-secure {
  border-left-color: var(--accent-soft);
}

.tree-branch-who {
  font-weight: 600;
}

.tree-branch-c {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.tree-branch-note {
  max-width: 82ch;
  line-height: 1.55;
  color: #ded2c7;
}

.tree-branch-src {
  font-size: 11px;
  color: var(--muted);
}

.tree-unplaced {
  max-width: 82ch;
  margin: 12px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #ded2c7;
}

/* ── how much of the genome moved ───────────────────────────────────────────── */
.mix-note {
  max-width: 78ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: #ded2c7;
}

.mix-note b {
  color: var(--accent-soft);
}

.shares {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 9px;
}

.share-btn {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 3px 14px;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--accent, var(--card-line));
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.share-btn:hover {
  background: rgba(234, 88, 12, 0.09);
}

.share-head {
  display: grid;
  align-content: start;
  gap: 3px;
}

.share-fig {
  font-size: 21px;
  font-weight: 650;
  line-height: 1.1;
  color: var(--muted);
}

/* A figure that is really a figure is the one thing here that gets the accent —
   and an arithmetic identity does not, because it is not an estimate of
   anything. */
.share.has-figure .share-fig {
  color: var(--yellow);
}

.share.is-defined .share-fig {
  color: var(--text);
}

.share-basis {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  /* The longest of these is "arithmetic, not an estimate". It wraps inside its
     own column rather than widening it, because widening it squeezes the pair
     of species on the right into a ribbon. */
  overflow-wrap: anywhere;
}

.share-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.share-pair {
  font-size: 13px;
}

.share-of {
  font-size: 12px;
  color: var(--muted);
}

.share-when {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.share-why {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--card-line);
  max-width: 82ch;
  font-size: 12px;
  line-height: 1.55;
  color: #ded2c7;
}

.mix-ghost {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 78ch;
  margin: 28px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--card-line);
  border-left: 3px solid var(--muted);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #ded2c7;
}

.mix-ghost > i:not(.sp) {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: none;
}

/* The sentence is one flex item, so it behaves as a paragraph. Without this it
   is one item per fragment and the sentence renders as columns. */
.mix-ghost > span {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── prose sections ─────────────────────────────────────────────────────────── */

.honesty ul {
  padding-left: 20px;
  color: #e2d6cb;
}

.honesty li {
  margin-bottom: 12px;
  max-width: 78ch;
}

.honesty b {
  color: var(--accent-soft);
}

.privacy p {
  max-width: 74ch;
  color: #ded2c7;
}

.stamp {
  font-size: 13px;
  color: var(--muted);
}

/* ── footer ─────────────────────────────────────────────────────────────────── */

.site-footer {
  margin-top: 50px;
  padding: 30px 20px 34px;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 10px;
  color: var(--text);
}

.footer-brand .mark {
  color: var(--accent);
  display: inline-flex;
}

.footer-links {
  margin: 0 0 8px;
}

.footer-copy {
  margin: 0;
  font-size: 12.5px;
}

/* ── the cookie gate ────────────────────────────────────────────────────────── */

.consent-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: rgba(16, 7, 3, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
}

.consent-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 20px;
}

.consent-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.consent-ask p {
  margin: 0;
  font-size: 14px;
  max-width: 62ch;
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #1a0a02;
  cursor: pointer;
}

.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--card-line);
}

.btn:hover {
  filter: brightness(1.08);
}

.consent-prefs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.consent-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--card-line);
  background: transparent;
  color: var(--text);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
  font-size: 14px;
}

.switch {
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 78px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  cursor: pointer;
}

.switch[aria-checked="true"] {
  background: rgba(234, 88, 12, 0.28);
  border-color: var(--accent);
  color: #ffd9a8;
}

.switch:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.consent-foot {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ── responsive ─────────────────────────────────────────────────────────────── */

/*
 * When a detail panel is open on a wide screen the map becomes two columns, and
 * the panel sits BESIDE the globe rather than over it. As an overlay it landed on
 * the species legend in the corner and made it unclickable — which a screenshot
 * cannot show and an end-to-end test caught immediately.
 */
@media (min-width: 1040px) {
  .map.has-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    gap: 18px;
    align-items: start;
  }

  .map.has-panel .panel {
    position: static;
    width: auto;
    max-height: none;
    margin: 0;
  }
}

@media (max-width: 900px) {
  .panel {
    position: static;
    width: auto;
    max-height: none;
    margin-top: 14px;
  }

  .refs-full {
    columns: 1;
  }

  .globe-legend {
    max-width: 92%;
  }
}

@media (max-width: 620px) {
  .globe {
    height: 58vh;
  }

  .globe[data-view="flat"] {
    height: auto;
    aspect-ratio: 3 / 2;
    min-height: 240px;
  }

  .viewswitch {
    top: auto;
    bottom: 10px;
    right: 10px;
  }

  .viewbtn {
    padding: 5px 10px;
    font-size: 11px;
  }

  .globe-hud {
    left: 12px;
    top: 10px;
  }

  /* The key is hidden on the globe, where it would eat a phone-sized sphere and
     the map is decorative at that size. On the flat plate it sits below the map,
     where it costs nothing to scroll past and is the only way to read the dots. */
  .globe[data-view="globe"] ~ .globe-legend {
    display: none;
  }

  .globe[data-view="flat"] ~ .globe-legend {
    padding: 8px 10px 10px;
  }

  .stations {
    gap: 5px;
  }

  .station {
    font-size: 11px;
    padding: 4px 9px;
  }

  .hero {
    padding-top: 34px;
  }

  /* The chart at phone width is STACKED: the name takes the full width in its
     own line and the track gets the full width beneath it. Side by side, at
     this width, the names wrapped to three lines, the labels ran into each
     other, and the track was too narrow for the bars to mean anything. Three
     axis ticks are kept — eight overlapped each other completely — and the
     section note carries the rest of the reading. */
  .tree {
    --tree-row: 0px;
  }

  .tree-axis,
  .tree-row {
    grid-template-columns: 1fr;
  }

  .tree-axistrack {
    grid-column: 1;
  }

  .tree-row {
    gap: 2px;
    padding-bottom: 5px;
  }

  .tree-track {
    height: 24px;
  }

  .tree-links {
    inset: 0;
  }

  .tree-tick {
    display: none;
    font-size: 9px;
  }

  .tree-tick:first-child,
  .tree-tick:nth-child(5),
  .tree-tick.is-now {
    display: block;
  }

  .shares {
    grid-template-columns: 1fr;
  }

  .share-btn {
    grid-template-columns: 7rem 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bar {
    transition: none;
  }
}