/* ==========================================================================
   Vogels van Europa / Birds of Europe — stylesheet
   Eén bestand, geen frameworks, geen externe fonts.
   ========================================================================== */

/* ---------- lettertypen ----------
   Montserrat voor de lopende tekst en Antonio — een smalle, hoge grotesk — voor
   alles wat geen zin is: titels, namen, labels, knoppen en de legenda. Beide
   onder de SIL Open Font License 1.1 en vanaf deze site zelf geserveerd, dus er
   gaat geen verzoek naar een externe server. Zie de licentiebestanden in
   assets/fonts/. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Antonio";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/antonio-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Antonio";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/antonio-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --paper: #faf8f3;
  --paper-2: #f2eee4;
  --card: #ffffff;
  --ink: #1a1d18;
  --ink-2: #4a5348;
  --ink-3: #737d70;
  --line: #ddd8cb;
  --moss: #2f6b4f;
  --moss-dark: #24523d;
  --rust: #a9552a;
  --shadow: 0 1px 2px rgba(26, 29, 24, .05), 0 8px 24px rgba(26, 29, 24, .06);
  --radius: 12px;
  --maxw: 1280px;
  --sea: #ffffff;
  --land: #ffffff;
  --land-line: #1a1a1a;
  --map-resident: #3f9b52;
  --map-breeding: #f5cb2e;
  --map-winter: #3f7fd0;
  --map-passage: #cfcfcf;
  --map-arrow: #1a1a1a;
  --sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Antonio", "Haettenschweiler", "Arial Narrow", sans-serif;
  --serif: var(--sans);          /* geen serif meer; cursief blijft Montserrat */
  --display-tight: -.005em;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14170f;
    --paper-2: #1b1f18;
    --card: #1e231b;
    --ink: #eceadf;
    --ink-2: #c0c6b9;
    --ink-3: #8e9789;
    --line: #333a2f;
    --moss: #7fbd9c;
    --moss-dark: #a7d6bd;
    --rust: #e08b5c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    /* de kaart blijft een 'gedrukt' kaartje: licht papier met zwarte grenzen,
       alleen iets gedempt zodat het in het donker niet verblindt */
    --sea: #ebe9e3;
    --land: #ebe9e3;
    --land-line: #14140f;
    --map-resident: #3f9b52;
    --map-breeding: #f0c62c;
    --map-winter: #3f7fd0;
    --map-passage: #c4c4c0;
    --map-arrow: #14140f;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--moss-dark); text-underline-offset: 3px; }
a:hover { color: var(--rust); }

/* Koppen in de stijl van de omslag: zwaar, kort op elkaar en strak gespatieerd.
   De h1 in kapitalen, zoals de titel op het boek; daaronder gewoon gezet, want
   hele alinea's in kapitalen lezen niet. */
h1, h2, h3 { font-weight: 600; line-height: 1.1; }
h1 {
  font-size: clamp(2.4rem, 6.2vw, 4rem); margin: 0 0 .3em;
  text-transform: uppercase; font-weight: 700; line-height: .93;
}
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 2.4rem 0 .6rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }


/* ---------- wat een zin is en wat niet ----------
   Lopende tekst staat in Montserrat; alles wat losse woorden zijn — titels,
   vogelnamen, labels, knoppen, tabelkoppen, de legenda — staat in Antonio.
   Antonio is smal en hoog, dus het mag iets ruimer gespatieerd en zwaarder. */
h1, h2, h3,
.brand, .nav a, .lang, .chip, .tag, .badge, .weak-tag,
.viewswitch button, .filters button,
.crumbs, .facts h2, .facts th, th,
.card h3, .group-head h2, .section-head h2,
.taxnav-title, .taxnav-sub, .taxnav-list a, .taxnav-list .nav-group,
.taxnav-list summary, .taxnav-list .on, .taxnav-list em,
.tree-name, .tree-count, .tree-clade, .tree-families a, .tree-order-head a,
.clade-head, .clade-trail, .map-legend, .sound-head, .pager span,
.species-head .others, .site-footer nav a {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .012em;
}
h1, h2, h3 { letter-spacing: .006em; }
.sci, .lede, .map-note, .note, .credit { font-family: var(--sans); letter-spacing: 0; }
.chip, .tag, .badge, .facts h2, .facts th, th, .crumbs, .map-legend,
.taxnav-title, .tree-clade, .clade-head, .clade-trail, .pager span {
  letter-spacing: .05em;
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.22rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink); text-decoration: none;
}
.brand svg { width: 26px; height: 26px; flex: none; color: var(--moss); }
.brand span { white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 1rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--moss-dark); }
.lang {
  display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; font-size: .8rem; letter-spacing: .04em;
}
.lang a { padding: 3px 10px; text-decoration: none; color: var(--ink-3); }
.lang a[aria-current="true"] { background: var(--moss); color: #fff; }

@media (max-width: 620px) {
  .site-header .wrap { flex-wrap: wrap; gap: 8px 14px; padding-top: 10px; padding-bottom: 10px; min-height: 0; }
  .nav { width: 100%; margin-left: 0; justify-content: space-between; gap: 12px; }
  .nav a { font-size: .88rem; }
}

/* ---------- hero ---------- */

.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero-img { position: relative; height: min(58vh, 520px); overflow: hidden; background: var(--paper-2); }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
.card figure img, .hero-img img { height: 100%; }
.hero-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.62) 100%);
}
.hero-text {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: 0 20px 30px; color: #fff;
}
.hero-text .wrap { padding: 0; }
.hero-text h1 {
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.45); margin-bottom: .3em;
  max-width: 13ch;               /* breekt als op de omslag: korte, zware regels */
}
.hero-text p { max-width: 62ch; color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.45); margin: 0; }
.hero-credit {
  position: absolute; right: 10px; bottom: 6px; z-index: 3;
  font-size: .68rem; color: rgba(255,255,255,.75);
}
.hero-credit a { color: inherit; }

/* ---------- intro / sections ---------- */

.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 68ch; }
section { padding: 8px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-head p { color: var(--ink-3); margin: 0; font-size: .95rem; }

/* ---------- filter bar ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 24px; }
.search {
  flex: 1 1 260px; min-width: 200px;
  padding: 10px 14px; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink);
}
.search:focus { outline: 2px solid var(--moss); outline-offset: 1px; }
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .85rem;
  cursor: pointer; transition: .15s;
}
.chip:hover { border-color: var(--moss); color: var(--moss-dark); }
.chip[aria-pressed="true"] { background: var(--moss); border-color: var(--moss); color: #fff; }

/* ---------- species grid ---------- */

.grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: 0; margin: 0; list-style: none;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(26,29,24,.06), 0 16px 36px rgba(26,29,24,.12); }
.card a.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.card figure img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.card-body h3 { margin: 0; font-size: 1.15rem; }
.card-body .sci { font-style: italic; color: var(--ink-3); font-size: .88rem; }
.card-body .meta { margin-top: auto; padding-top: 10px; font-size: .8rem; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tag {
  font-size: .72rem; letter-spacing: .02em; text-transform: uppercase;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-3);
  border-radius: 999px; padding: 2px 8px;
}
.empty { color: var(--ink-3); font-style: italic; padding: 30px 0; }

/* ---------- species page ---------- */

.crumbs { font-size: .85rem; color: var(--ink-3); padding: 14px 0 0; }
.crumbs a { color: var(--ink-3); }

.species-head { display: grid; gap: 6px; padding-bottom: 6px; }
/* Onder de naam: de wetenschappelijke naam cursief, daarna dezelfde vogel in de
   andere talen van de site, gescheiden door een liggend streepje. */
.species-head .sci {
  font-family: var(--sans); font-size: 1.05rem; color: var(--ink-3);
  margin: 0; font-style: normal;
}
.species-head .sci i { font-style: italic; }
.species-head .sci .sep { color: var(--line); padding: 0 .15em; }
.species-head .sci .other {
  font-family: var(--display); font-weight: 500; letter-spacing: .03em;
  font-size: 1.12em;
}

.layout { display: grid; gap: 30px; grid-template-columns: 232px minmax(0, 1fr) 290px;
  align-items: start; padding: 22px 0 60px; }
.layout-nav { display: grid; gap: 30px; grid-template-columns: 232px minmax(0, 1fr); align-items: start; }
@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .layout .taxnav { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .layout, .layout-nav { grid-template-columns: 1fr; gap: 18px; }
}

.prose h2 { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.prose h2:first-of-type { border-top: 0; padding-top: 0; }
.prose p { margin: .5rem 0 1rem; }
.prose em { font-style: italic; }

.facts {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 18px 14px; box-shadow: var(--shadow); position: sticky; top: 80px;
}
.facts h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; font-family: var(--sans); color: var(--ink-3); margin: 16px 0 6px; border: 0; padding: 0; }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .92rem; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; text-align: right; }
.badge {
  display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: .78rem;
  font-weight: 600; letter-spacing: .02em;
}
.badge.lc { background: rgba(47,107,79,.14); color: var(--moss-dark); }
.badge.nt { background: rgba(169,85,42,.16); color: var(--rust); }

/* ---------- audio ---------- */

.sound {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin: 10px 0 4px;
}
.sound-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sound-head strong { font-size: .95rem; }
.sound audio { width: 100%; height: 38px; }
.credit { font-size: .78rem; color: var(--ink-3); margin: 8px 0 0; }
.credit a { color: var(--ink-3); }

figure.photo { margin: 0 0 6px; }
figure.photo img { width: 100%; height: auto; max-height: 620px; object-fit: contain; background: var(--paper-2);
  border-radius: var(--radius); border: 1px solid var(--line); }
figure.photo figcaption { font-size: .78rem; color: var(--ink-3); padding-top: 6px; }

/* ---------- prev / next ---------- */

.pager { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 30px; font-size: .92rem; }
.pager a { text-decoration: none; }
.pager span { color: var(--ink-3); font-size: .78rem; display: block; }

/* ---------- tables (credits) ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 640px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- callout ---------- */

.note {
  border-left: 3px solid var(--moss); background: var(--paper-2);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; margin: 20px 0;
  font-size: .95rem; color: var(--ink-2);
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line); background: var(--paper-2);
  margin-top: 60px; padding: 34px 0; font-size: .88rem; color: var(--ink-3);
}
.site-footer .cols { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; }
.site-footer a { color: var(--ink-2); }
.site-footer p { margin: .3em 0; max-width: 52ch; }

.skip {
  position: absolute; left: -9999px; background: var(--moss); color: #fff;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }


/* ---------- taxonomische groepen ---------- */

.tax-group { padding: 2px 0 14px; }
.group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 22px 0 14px;
}
.group-head h2 { margin: 0; font-size: 1.3rem; }
.group-head h2 a { text-decoration: none; color: var(--ink); }
.group-head h2 a:hover { color: var(--moss-dark); }
.group-head h2 .sci { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-3); font-size: .95rem; margin-left: 6px; }
.group-head p { margin: 0; color: var(--ink-3); font-size: .9rem; }
.group-head p a { color: var(--ink-3); }

.viewswitch { display: flex; gap: 8px; margin: -8px 0 22px; }

.more { margin-top: 22px; }
.more a { font-size: .95rem; text-decoration: none; }

.siblings { border-top: 1px solid var(--line); margin-top: 30px; padding-top: 6px; }
.siblings h2 { border: 0; padding-top: 0; font-size: 1.05rem; }
.siblings p { color: var(--ink-2); font-size: .95rem; }

.badge.vu { background: rgba(169, 85, 42, .2); color: var(--rust); }
.badge.en { background: rgba(169, 85, 42, .3); color: var(--rust); }

td .sci { font-style: italic; color: var(--ink-3); font-size: .85rem; }


/* ---------- verspreidingskaart ---------- */

.rangemap { margin: 6px 0 4px; }
.rangemap .map-holder {
  background: var(--sea); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; line-height: 0;
}
.rangemap svg { width: 100%; height: auto; display: block; }
.rangemap path.land { fill: var(--land); stroke: none; }
.rangemap path.border { fill: none; stroke: var(--land-line); stroke-width: .8; }
.rangemap path.coast { fill: none; stroke: var(--land-line); stroke-width: 1.1; }
.rangemap .area path { stroke: none; }
.rangemap .area.resident path { fill: var(--map-resident); }
.rangemap .area.breeding path { fill: var(--map-breeding); }
.rangemap .area.winter path   { fill: var(--map-winter); }
.rangemap .area.passage path  { fill: var(--map-passage); }
/* dichtheid: drie lagen over elkaar, samen tot bijna dekkend */
.rangemap .area { opacity: .40; }
.rangemap .area.lvl2 { opacity: .34; }
.rangemap .area.lvl3 { opacity: .42; }
.map-legend .k-density { color: var(--muted); }
.map-legend .k-density i {
  border: none; width: 34px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(90,90,90,.28), rgba(60,60,60,.85));
}
.rangemap .arrow {
  fill: none; stroke: var(--map-arrow); stroke-width: 2.2;
  stroke-dasharray: 3 7; stroke-linecap: round;
}
.rangemap .arrow-head { fill: var(--map-arrow); stroke: none; }
.rangemap .arrow-label { fill: var(--map-arrow); font-size: 19px; font-family: sans-serif; }
.map-legend .k-arrow {
  /* in de legenda de inktkleur van de pagina, niet die van de kaart:
     op een donkere achtergrond zou het kaartzwart onzichtbaar zijn */
  width: 26px; height: 0; border: 0; border-top: 2px dashed var(--ink-2); border-radius: 0;
  position: relative; top: -3px;
}

.map-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 4px;
  font-size: .82rem; color: var(--ink-2); padding: 0; list-style: none;
}
.map-legend li { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.12); }
.map-legend .k-resident { background: var(--map-resident); }
.map-legend .k-breeding { background: var(--map-breeding); }
.map-legend .k-winter   { background: var(--map-winter); }
.map-legend .k-passage  { background: var(--map-passage); }
.map-note { font-size: .78rem; color: var(--ink-3); margin: 2px 0 0; }


/* ---------- zijmenu: ordes en families ---------- */

.taxnav { font-size: .88rem; }
.taxnav-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px 14px; box-shadow: var(--shadow);
  position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow: auto;
}
.taxnav-title {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; list-style: none; font-weight: 600;
}
.taxnav-title::-webkit-details-marker { display: none; }
.taxnav-sub { margin: 2px 0 10px; font-size: .76rem; color: var(--ink-3); font-style: italic; }
.taxnav-list { list-style: none; margin: 0; padding: 0; counter-reset: orde; }
.taxnav-list > li { border-top: 1px solid var(--line); }
.taxnav-list > li:first-child { border-top: 0; }
.taxnav details > summary {
  cursor: pointer; padding: 6px 2px; list-style: none; display: flex;
  align-items: baseline; gap: 4px 6px; color: var(--ink); flex-wrap: wrap;
}
.taxnav details > summary::-webkit-details-marker { display: none; }
.taxnav details > summary::before {
  content: "▸"; color: var(--ink-3); font-size: .7rem; transition: transform .15s; flex: none;
}
.taxnav details[open] > summary::before { transform: rotate(90deg); }
.taxnav details > summary:hover .on { color: var(--moss-dark); }
.taxnav .on { font-weight: 600; }
.taxnav .sci {
  font-family: var(--serif); font-style: italic; color: var(--ink-3);
  font-size: .74rem; min-width: 0; overflow-wrap: anywhere;
  flex: 1 0 100%; order: 3; margin: -3px 0 0 14px;   /* wetenschappelijke naam op eigen regel */
}
.taxnav .on { flex: 1 1 62%; min-width: 0; order: 1; }
.taxnav em { margin-left: auto; padding-left: 6px; font-style: normal; color: var(--ink-3);
  font-size: .74rem; flex: none; order: 2; font-variant-numeric: tabular-nums; }
.taxnav details ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 14px; }
.taxnav details ul .sci { margin-left: 0; }
.taxnav details ul li a {
  display: flex; align-items: baseline; gap: 2px 6px; padding: 5px 6px; flex-wrap: wrap;
  text-decoration: none; color: var(--ink-2); border-radius: 6px;
}
.taxnav details ul li a:hover { background: var(--paper-2); color: var(--moss-dark); }
.taxnav details ul li a[aria-current="page"] {
  background: var(--moss); color: #fff;
}
.taxnav details ul li a[aria-current="page"] .sci,
.taxnav details ul li a[aria-current="page"] em { color: rgba(255,255,255,.8); }
.taxnav .nav-all a { font-size: .8rem; color: var(--ink-3); }

@media (max-width: 860px) {
  .taxnav-box { position: static; max-height: none; }
  .taxnav-title { font-size: .8rem; }
}


/* ---------- stamboom op de homepage ---------- */

.tree-lede { margin: 0 0 26px; max-width: 74ch; }
.tree, .tree-children { list-style: none; margin: 0; padding: 0; }
.tree { max-width: 940px; }

.tree-clade { position: relative; }
.tree > .tree-clade { margin-bottom: 34px; }

.clade-head { padding-top: 8px; margin-bottom: 4px; }
.clade-head h3 { margin: 0; font-size: 1.22rem; }
.clade-head .sci {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--ink-3); font-size: .9rem; margin-left: 6px;
}
.clade-head p { margin: 3px 0 0; color: var(--ink-3); font-size: .87rem; max-width: 70ch; }

.tree-clade.level-0 > .clade-head { border-top: 2px solid var(--moss); }
.tree-clade.level-1 > .clade-head { border-top: 1px solid var(--moss); }
.tree-clade.level-1 > .clade-head h3 { font-size: 1.08rem; }
.tree-clade.level-2 > .clade-head { border-top: 1px dotted var(--line); }
.tree-clade.level-2 > .clade-head h3,
.tree-clade.level-3 > .clade-head h3,
.tree-clade.level-4 > .clade-head h3 { font-size: .98rem; }
.tree-clade.level-3 > .clade-head,
.tree-clade.level-4 > .clade-head { border-top: 1px dotted var(--line); }
.tree-clade.level-3 > .clade-head p,
.tree-clade.level-4 > .clade-head p { font-size: .84rem; }

/* de takken van de boom */
.tree-children { margin-left: 12px; padding-left: 0; border-left: 1px solid var(--line); }
.tree-clade > .tree-children > li { position: relative; padding-left: 20px; }
.tree-clade > .tree-children > li::before {
  content: ""; position: absolute; left: 0; top: 24px; width: 14px;
  border-top: 1px solid var(--line);
}
.tree-clade.is-weak > .tree-children { border-left-style: dashed; }

.weak-tag {
  font-family: var(--sans); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--rust); border: 1px solid currentColor; border-radius: 999px;
  padding: 1px 7px; margin-left: 8px; vertical-align: middle; white-space: nowrap;
}

.tree-order { padding-top: 10px; padding-bottom: 12px; }
.tree-order + .tree-order { border-top: 1px solid var(--line); }
.tree-order-head {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  flex-wrap: wrap;
}
.tree-order-head img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--line); background: var(--paper-2);
}
.tree-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
.tree-order-head:hover .tree-name { color: var(--moss-dark); }
.tree-order-head .sci { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: .86rem; }
.tree-count { margin-left: auto; font-size: .78rem; color: var(--ink-3); white-space: nowrap; }
.clade-head .tree-count { margin-left: 8px; }

.tree-families { padding-left: 56px; margin-top: 2px; font-size: .86rem; line-height: 1.9; }
.tree-families a { text-decoration: none; color: var(--ink-2); }
.tree-families a:hover { color: var(--moss-dark); }
.tree-families .sci { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: .79rem; }
.tree-families em { font-style: normal; color: var(--ink-3); font-size: .76rem; }

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

@media (max-width: 640px) {
  .tree-families { padding-left: 0; }
  .tree-clade > .tree-children > li { padding-left: 12px; }
  .tree-clade > .tree-children > li::before { width: 8px; top: 26px; }
  .tree-children { margin-left: 6px; }
}

/* groepskop in het zijmenu */
.taxnav .nav-group {
  border-top: 0; padding: 12px 2px 2px; display: flex; gap: 6px; align-items: baseline;
  flex-wrap: wrap;
}
.taxnav .nav-group span:first-child {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--moss-dark); font-weight: 600;
}
.taxnav .nav-group + li { border-top: 0; }

/* pad door de stamboom op de ordepagina */
.clade-trail { margin: 4px 0 10px; font-size: .86rem; color: var(--ink-3); line-height: 2; }
.clade-trail .trail-label {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--moss-dark);
  font-weight: 600; margin-right: 4px;
}
.clade-trail .on { color: var(--ink-2); }
.clade-trail .sci { font-family: var(--serif); font-style: italic; }