/* ==========================================================================
   Vorstmans Gids van de Europese Vogels — stylesheet
   Eén bestand, geen frameworks, geen externe letters.
   Het palet, de letters en de basisopmaak volgen vorstman.com; de gids zet
   daar zijn eigen onderdelen bovenop.
   ========================================================================== */

/* ---------- lettertypen ----------
   De letters van vorstman.com: Cormorant Garamond voor de koppen, IBM Plex Sans
   voor de lopende tekst en IBM Plex Mono voor de kleine labels. Eén ding blijft
   van de gids zelf: de titel van de bladzijde staat in Antonio, de smalle hoge
   grotesk van de veldgidsomslagen. Alle vier staan onder de SIL Open Font
   License 1.1 en worden vanaf deze site zelf geserveerd — er gaat dus geen
   verzoek naar Google of naar een andere server. Zie assets/fonts/. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-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: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-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: "IBM Plex Sans";
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-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: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  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: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  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: "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 {
  /* Het palet van vorstman.com: koel blauwgrijs papier, panelen die daar een
     tint boven of onder liggen, en messing als enige accent. De gids heeft
     daarnaast één tweede accent nodig — de statusbadges van de IUCN moeten uit
     elkaar te houden zijn — en dat is het maanblauw van diezelfde stijl. */
  --paper: #E9EAEE;               /* de grond */
  --paper-2: #DEE1E8;             /* dieper vlak: fotovlakken, uitsparingen */
  --card: #F4F5F8;                /* paneel: kaarten en secties */
  --ink: #161C2B;
  --ink-2: #414B63;               /* secundaire tekst */
  --ink-3: #58627A;               /* bijschriften en labels */
  --line: #C6CBD8;                /* de lijn */
  --line-soft: #D8DCE4;           /* een zachtere lijn, tussen rijen */
  --brass: #7F5D0B;               /* messing: het accent */
  --brass-dark: #6A4D09;          /* messing als letter, iets dieper */
  --lunar: #3F5480;               /* maanblauw: het tweede accent */

  /* de oude namen wijzen nu naar dit palet, zodat de hele stylesheet meeloopt */
  --teal: color-mix(in srgb, var(--brass) 13%, var(--paper));
  --teal-ink: var(--brass);
  --pink: color-mix(in srgb, var(--lunar) 18%, var(--paper));
  --pink-ink: var(--lunar);
  --moss: var(--brass);
  --moss-dark: var(--brass-dark);
  --rust: var(--lunar);

  --shadow: 0 1px 2px rgba(22, 28, 43, .07), 0 10px 30px -22px rgba(22, 28, 43, .55);
  --radius: 3px;
  --maxw: 1280px;
  --sea: #ffffff;
  --land: #ffffff;
  --land-line: #161C2B;
  /* de verspreidingskaart houdt zijn eigen vier kleuren: groen, geel, blauw,
     grijs — die zeggen iets, en het palet van de site mag ze niet overstemmen */
  --map-resident: #3F9B52;
  --map-breeding: #F5CB2E;
  --map-winter: #3F7FD0;
  --map-passage: #B0B0B0;
  --map-arrow: #161C2B;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Antonio", "Haettenschweiler", "Arial Narrow", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-tight: -.005em;
  --measure: 68ch;
  color-scheme: light dark;

  /* de namen zoals ze op vorstman.com heten, zodat regels die daarvandaan
     komen hier zonder omzetten werken */
  --ground: var(--paper);
  --panel: var(--card);
  --panel-2: var(--paper-2);
  --rule: var(--line);
  --rule-soft: var(--line-soft);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1120;
    --paper-2: #1D2438;
    --card: #141A2C;
    --ink: #E2E6EF;
    --ink-2: #AEB7CB;
    --ink-3: #7C87A0;
    --line: #2A3248;
    --line-soft: #212940;
    /* in het donker keren de rollen om: het messing en het maanblauw worden
       lichter, want ze staan dan als letter op een donker vlak */
    --brass: #D6AB52;
    --brass-dark: #D6AB52;
    --lunar: #9FB2D8;
    --teal: color-mix(in srgb, var(--brass) 16%, var(--paper));
    --pink: color-mix(in srgb, var(--lunar) 20%, var(--paper));
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px -24px rgba(0, 0, 0, .9);
    /* de verspreidingskaart blijft een 'gedrukt' kaartje: licht papier met
       donkere grenzen, alleen gedempt zodat het in het donker niet verblindt */
    --sea: #E4E7EE;
    --land: #E4E7EE;
    --land-line: #10131f;
    --map-resident: #3F9B52;
    --map-breeding: #F5CB2E;
    --map-winter: #3F7FD0;
    --map-passage: #B0B0B0;
    --map-arrow: #10131f;
  }
}

/* en dezelfde kleuren als de lezer zelf de nacht kiest */
:root[data-theme="dark"] {
  --paper: #0D1120;
  --paper-2: #1D2438;
  --card: #141A2C;
  --ink: #E2E6EF;
  --ink-2: #AEB7CB;
  --ink-3: #7C87A0;
  --line: #2A3248;
  --line-soft: #212940;
  /* in het donker keren de rollen om: het messing en het maanblauw worden
     lichter, want ze staan dan als letter op een donker vlak */
  --brass: #D6AB52;
  --brass-dark: #D6AB52;
  --lunar: #9FB2D8;
  --teal: color-mix(in srgb, var(--brass) 16%, var(--paper));
  --pink: color-mix(in srgb, var(--lunar) 20%, var(--paper));
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 34px -24px rgba(0, 0, 0, .9);
  /* de verspreidingskaart blijft een 'gedrukt' kaartje: licht papier met
     donkere grenzen, alleen gedempt zodat het in het donker niet verblindt */
  --sea: #E4E7EE;
  --land: #E4E7EE;
  --land-line: #10131f;
  --map-resident: #3F9B52;
  --map-breeding: #F5CB2E;
  --map-winter: #3F7FD0;
  --map-passage: #B0B0B0;
  --map-arrow: #10131f;
}

* { box-sizing: border-box; }

/* Een element met het attribuut hidden hoort weg te zijn. Zonder deze regel
   wint elke eigen display-waarde (flex, grid) van de standaard van de browser,
   en blijven verborgen knoppen gewoon staan. */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

html { scroll-behavior: smooth; }

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

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

a { color: var(--brass-dark); text-underline-offset: 3px; }
a:hover { color: var(--brass-dark); }
/* in de lopende tekst dragen verwijzingen een eigen, zachte lijn */
.prose a, .lede a, .note a, .credit a, .src-list a {
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
}
.prose a:hover, .lede a:hover, .note a:hover, .credit a:hover, .src-list a:hover {
  border-bottom-color: var(--brass);
}

/* ---------- koppen en wat waarin staat ----------
   Antonio is voor één ding gereserveerd: de titel van de bladzijde, in
   kapitalen zoals op een veldgidsomslag. Alle koppen daaronder staan in
   Cormorant Garamond; de lopende tekst in IBM Plex Sans; en de kleine labels —
   tabelkoppen, kruimelpad, legenda, aantallen — in IBM Plex Mono, klein en
   gespatieerd in kapitalen. */

h1, h2, h3 { text-wrap: balance; }
h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.2vw, 4rem); margin: 0 0 .3em;
  text-transform: uppercase; font-weight: 700; line-height: .93;
  letter-spacing: .006em;
}
h2, h3 {
  font-family: var(--serif);
  font-weight: 600; letter-spacing: -.012em;
}
h2 { font-size: 1.7rem; line-height: 1.15; margin: 2.2rem 0 .5rem; }
h3 { font-size: 1.25rem; line-height: 1.2; margin: 1.6rem 0 .4rem; }

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

/* de naam van de gids in de kopbalk hoort bij de titels, dus in Antonio */
.brand { font-family: var(--display); font-weight: 700; letter-spacing: .01em; }

/* koppen die in de gids een naam dragen: vogel, geslacht, familie, orde */
.card h3, .group-head h2, .section-head h2,
.tree-name, .clade-head, .species-head h2, .facts h2 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.012em;
}

/* de menubalk, de knoppen en de verwijzingen: de lopende letter */
.nav > a, .chip, .steun-knop, .viewswitch button, .filters button,
.taxnav-list a, .taxnav-list summary, .taxnav-list .on, .taxnav-list em,
.tree-families a, .tree-order-head a, .site-footer nav a {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
}

/* de kleine labels: mono, klein, in kapitalen en ruim gespatieerd */
.tag, .badge, .weak-tag, .crumbs, .facts th, th, .map-legend, .pager span,
.taxnav-title, .taxnav-sub, .taxnav-list .nav-group, .tree-clade, .tree-count,
.clade-trail, .sound-head, .species-head .others, .ov-count, .genus-head span,
.guests-head span, .hab-filter-title {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.crumbs, .clade-trail, .species-head .others, .sound-head { letter-spacing: .06em; }

/* een wetenschappelijke naam staat cursief en nooit vet, waar hij ook staat */
.sci { font-family: var(--sans); font-weight: 400; font-style: italic; letter-spacing: 0; }
.lede, .map-note, .note, .credit { font-family: var(--sans); letter-spacing: 0; }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 8px 16px;
  flex-wrap: wrap;              /* past de volle naam niet, dan zakt het menu een regel */
  min-height: 62px;
}
/* het woordmerk: de naam in Antonio, met de ondertitel er in de lopende letter
   naast — zoals de .wordmark van vorstman.com */
.brand {
  display: flex; align-items: baseline; gap: 4px 11px; flex-wrap: nowrap; flex: 0 1 auto;
  font-size: 1.02rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; line-height: 1;
}
.brand em {
  font-family: var(--sans); font-style: normal; font-weight: 400;
  font-size: .72rem; letter-spacing: .02em; text-transform: none;
  color: var(--ink-3); white-space: nowrap;
}
.brand svg { width: 24px; height: 24px; flex: none; align-self: center; color: var(--brass); }
.brand span { white-space: nowrap; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.nav > a { color: var(--ink-2); text-decoration: none; font-size: .88rem;
           padding: 5px 9px; border-radius: var(--radius); }
.nav > a:hover { background: var(--paper-2); color: var(--ink); }
.nav > a[aria-current="page"] { color: var(--brass); font-weight: 600; }
/* ---------- language switcher ---------- */
/* The switcher shows a flag rather than a two-letter code.  A flag is a country
   and not a language, so the readable name stays on the element for a screen
   reader and in the tooltip; only the letters are hidden.  Which flag belongs
   to which button is read off hreflang, and for the button of the page you are
   already on, off the lang of the document itself — never off its position,
   because a page that lacks one translation has one button fewer. */
.lang, .langs{display:flex;gap:2px;align-items:center;border:1px solid var(--rule);
  border-radius:3px;padding:2px}
.lang a,.lang span,.langs a,.langs span{display:block;width:28px;height:20px;padding:0;font-size:0;
  line-height:0;border-radius:2px;text-decoration:none;
  background-color:transparent;background-repeat:no-repeat;
  background-position:center 3px;background-size:18px auto}
.lang a[hreflang="en"],html[lang="en"] .lang .on{background-image:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2030%22><clipPath%20id=%22a%22><path%20d=%22M30%2015h30v15zv15H30zH0V15zV0h30z%22/></clipPath><rect%20width=%2260%22%20height=%2230%22%20fill=%22%23012169%22/><path%20d=%22M0%200l60%2030m0-30L0%2030%22%20stroke=%22%23FFF%22%20stroke-width=%226%22/><path%20d=%22M0%200l60%2030m0-30L0%2030%22%20clip-path=%22url%28%23a%29%22%20stroke=%22%23C8102E%22%20stroke-width=%224%22/><path%20d=%22M30%200v30M0%2015h60%22%20stroke=%22%23FFF%22%20stroke-width=%2210%22/><path%20d=%22M30%200v30M0%2015h60%22%20stroke=%22%23C8102E%22%20stroke-width=%226%22/></svg>")}
.lang a[hreflang="nl"],html[lang="nl"] .lang .on{background-image:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%209%206%22><rect%20width=%229%22%20height=%226%22%20fill=%22%2321468B%22/><rect%20width=%229%22%20height=%224%22%20fill=%22%23FFF%22/><rect%20width=%229%22%20height=%222%22%20fill=%22%23AE1C28%22/></svg>")}
.lang a[hreflang="es"],html[lang="es"] .lang .on{background-image:url("data:image/svg+xml,<svg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%209%206%22><rect%20width=%229%22%20height=%226%22%20fill=%22%23AA151B%22/><rect%20y=%221.5%22%20width=%229%22%20height=%223%22%20fill=%22%23F1BF00%22/></svg>")}
.lang a,.langs a{opacity:.45;transition:opacity .13s,background-color .13s}
.lang a:hover,.lang a:focus-visible,.langs a:hover,.langs a:focus-visible{opacity:1;background-color:var(--panel-2)}
.lang .on,.langs .on{opacity:1;box-shadow:inset 0 -2px 0 var(--brass)}
/* If the reader has forced their own colours, an image conveys nothing: give
   the letters back. */
@media (forced-colors: active){
  .lang a,.lang span,.langs a,.langs span{font-size:11.5px;line-height:1;width:auto;height:auto;
    padding:4px 7px;background-image:none;opacity:1;
    font-family:"IBM Plex Mono",monospace}
}

/* ---------- day and night ---------- */
/* The stylesheet already carries both palettes: the light one on :root and the
   dark one behind prefers-color-scheme, with data-theme allowed to overrule
   either.  This button is only a way of setting that attribute by hand.  It
   shows the view you would move to and not the one you are in — a moon by day,
   a sun by night — and it is hidden until its script is running, because a
   switch that does nothing is worse than no switch. */
.themesw{appearance:none;display:flex;align-items:center;justify-content:center;
  width:28px;height:26px;padding:0;cursor:pointer;
  color:var(--ink-3);background:transparent;
  border:1px solid var(--rule);border-radius:3px;
  transition:color .13s,background-color .13s,border-color .13s}
.themesw[hidden]{display:none}

.themesw:hover{color:var(--brass);background:var(--panel-2)}
.th-i{display:block;width:16px;height:16px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:16px 16px;mask-size:16px 16px;
  -webkit-mask-image:var(--th-glyph);mask-image:var(--th-glyph)}
/* The label is the button's accessible name, so the one that does not apply is
   taken out of the document rather than merely hidden from sight. */
.th-n,.th-d{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
:root{--th-glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M20.6%2015.2A9%209%200%200%201%208.8%203.4%209%209%200%201%200%2020.6%2015.2Z%22/%3E%3C/svg%3E")}
.themesw .th-d{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--th-glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%224.1%22/%3E%3Cpath%20d=%22M12%202.2v2.5M12%2019.3v2.5M2.2%2012h2.5M19.3%2012h2.5M5.1%205.1l1.8%201.8M17.1%2017.1l1.8%201.8M18.9%205.1l-1.8%201.8M6.9%2017.1l-1.8%201.8%22/%3E%3C/svg%3E")}
  :root:not([data-theme="light"]) .themesw .th-n{display:none}
  :root:not([data-theme="light"]) .themesw .th-d{display:inline}
}
:root[data-theme="dark"]{--th-glyph:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%224.1%22/%3E%3Cpath%20d=%22M12%202.2v2.5M12%2019.3v2.5M2.2%2012h2.5M19.3%2012h2.5M5.1%205.1l1.8%201.8M17.1%2017.1l1.8%201.8M18.9%205.1l-1.8%201.8M6.9%2017.1l-1.8%201.8%22/%3E%3C/svg%3E")}
:root[data-theme="dark"] .themesw .th-n{display:none}
:root[data-theme="dark"] .themesw .th-d{display:inline}

/* De wisselaar heet in deze gids .lang; de regels hierboven schrijven .langs,
   dus die naam draagt hij ook. */
@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: .84rem; }
}

/* ---------- 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;
  /* alleen onderin donker genoeg voor witte letters; de middenband blijft vrij
     zodat de vogel in de foto zichtbaar blijft */
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 42%,
                              rgba(0,0,0,.26) 70%, rgba(0,0,0,.66) 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(--teal-ink); color: var(--moss-dark); background: color-mix(in srgb, var(--teal) 28%, transparent); }
.chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal-ink); color: var(--ink); }

/* een soort zonder vrij gelicentieerde foto: geen gat, maar een leeg vlak op
   het kaartje en op de bladzijde een regel die zegt waarom er niets staat */
.card figure .no-photo { display: block; width: 100%; height: 100%; background: var(--paper-2); }
.no-photo-note {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; color: var(--ink-2); font-size: .95rem; margin: 0 0 1.4rem;
}

/* ---------- 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); }
/* Het venster ligt niet in het midden maar wat hoger. Een staande foto wordt
   in een 4:3 kaartje boven en onder even hard gesneden, en dan gaat precies het
   hoofd eruit — de koekoek en de roerdomp stonden zo onthoofd op hun
   familiebladzijde. Bij een liggende foto verandert deze regel niets, want dan
   wordt er alleen links en rechts gesneden. build.py zet er per foto een
   scherpere waarde overheen (zie `kijkpunt`); deze 25 % is de bodem voor foto's
   waarvan de afmetingen niet bekend zijn, en voor gidsen die die berekening nog
   niet hebben. */
.card figure img { width: 100%; height: 100%; object-fit: cover;
                   object-position: 50% 25%; }
.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; }
/* de rij leefgebieden is het laatste op het kaartje en houdt de kaartjes op
   gelijke hoogte; de labels ("Zeevogel", "Meeuw of stern") staan er niet meer */
.card-body .habs.small { margin-top: auto; padding-top: 10px; }
.tag {
  font-size: .72rem; letter-spacing: .02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--teal) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal-ink) 25%, transparent);
  color: var(--ink-2); 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; }
/* De wetenschappelijke naam van een orde of familie staat naast de titel,
   gescheiden door een streepje: even groot, cursief, en in het grijs dat hij
   had toen hij nog klein eronder stond. Niet in kapitalen — een
   wetenschappelijke naam draagt zijn eigen hoofdletter. */
.species-head h1 .sci {
  font-family: inherit; font-size: 1em; font-weight: inherit;
  font-style: italic; text-transform: none;
  color: var(--ink-3); letter-spacing: .01em;
}
.species-head h1 .sep { color: var(--ink-3); font-weight: 400; }
/* Op een smal scherm past een lange naam met zijn Latijn er niet naast: dan
   zou het streepje in zijn eentje op een regel belanden. Daar zetten we de
   wetenschappelijke naam eronder en laten we het streepje weg. */
@media (max-width: 620px) {
  .species-head h1 .sep { display: none; }
  .species-head h1 .sci { display: block; }
}
.species-head > .lede { margin: 10px 0 0; max-width: 78ch; }
/* 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; }
/* de namen in de andere talen staan naast de wetenschappelijke naam: even
   groot, maar recht en niet vet, zodat alleen het Latijn cursief is */
.species-head .sci .other {
  font-family: var(--sans); font-weight: 400; font-style: normal;
  letter-spacing: 0; font-size: 1em;
}

/* De soortpagina: zijmenu, greep, verhaal, en rechts het kaartje met de feiten.
   De greep zit tussen menu en verhaal, dus die krijgt een eigen smalle kolom.
   Omdat de tussenruimte per kolom niet apart in te stellen is, staat de
   kolomruimte op 13 px — menu tot verhaal wordt dan 13 + 5 + 13 = 31 — en
   houdt het feitenkaartje zijn eigen lucht met een marge. */
.layout {
  display: grid; align-items: start; padding: 22px 0 60px;
  grid-template-columns: var(--taxnav-w, 360px) 5px minmax(0, 1fr) 290px;
  column-gap: 13px; row-gap: 30px;
}
.layout > .facts { margin-left: 17px; }
/* Het zijmenu schuift mee: de boom is lang, en je wilt er halverwege een lange
   soortenlijst nog bij kunnen. Blijft hij hoger dan het scherm, dan scrollt hij
   van binnen. Onder de 860 px staat hij boven de inhoud en heeft dit geen zin. */
@media (min-width: 861px) {
  .taxnav {
    position: sticky; top: 74px;
    max-height: calc(100vh - 92px); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
}
/* Het zijmenu, een greep om het breder te maken, en de inhoud. De breedte staat
   in --taxnav-w zodat het scriptje in de <head> hem kan zetten vóór de bladzijde
   tekent — anders zie je hem bij elke klik verspringen. */
.layout-nav {
  display: grid; align-items: start;
  grid-template-columns: var(--taxnav-w, 360px) 5px minmax(0, 1fr);
  gap: 0 13px;
}
/* Onder de 1180 px staat het zijmenu op de soortpagina boven de inhoud, over de
   volle breedte. Slepen heeft daar geen zin, dus de greep verdwijnt — en met
   display:none telt hij ook niet meer als kolom mee. */
@media (max-width: 1180px) {
  .layout { grid-template-columns: minmax(0, 1fr) 290px; column-gap: 30px; }
  .layout .taxnav { grid-column: 1 / -1; }
  .layout > .facts { margin-left: 0; }
  .layout .navgrip { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; gap: 18px; }
  .layout-nav { grid-template-columns: 1fr; gap: 18px; }
  .navgrip { display: none; }
}

/* De greep tussen menu en inhoud: een dun handvat dat pas opvalt als je er
   met de muis bij komt. Slepen verbreedt, dubbelklikken zet hem terug. */
.navgrip {
  align-self: stretch; position: relative;
  cursor: col-resize; touch-action: none;
  border-radius: 3px;
}
.navgrip > span {
  position: absolute; top: 24px; bottom: 24px; left: 1px; width: 3px;
  border-radius: 3px; background: var(--line);
  opacity: 0; transition: opacity .15s, background .15s;
}
.navgrip:hover > span, .navgrip:focus-visible > span, .navgrip.slepend > span {
  opacity: 1; background: var(--brass);
}
.navgrip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* tijdens het slepen mag de tekst niet oplichten alsof je selecteert */
body.navslepen { user-select: none; cursor: col-resize; }

.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; }

/* De volledige zoölogische naamregel onder het kopje Wetenschappelijke naam:
   soort, auteur en jaartal, en zo nodig de afwijkende naam van GBIF. */
.prose p.naamregel {
  font-family: var(--sans);
  font-size: .95rem;
  letter-spacing: 0;
  margin: .5rem 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.prose p.naamregel .gbif-naam { color: var(--ink-3); white-space: nowrap; }

.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: .68rem; text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); font-weight: 400; color: var(--ink-3); margin: 16px 0 8px; 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); }
/* Staat een maat er twee keer, elk uit een ander handboek, dan hoort de naam van
   dat handboek erbij — kleiner en lichter, want het is een bijschrift bij het
   label en niet het label zelf. */
.facts dt .bron {
  display: block; font-family: var(--sans); font-size: .72rem;
  letter-spacing: 0; text-transform: none; font-style: italic;
  color: var(--ink-3); opacity: .85;
}
.facts dd { margin: 0; text-align: right; }
.badge {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  min-width: 2.6em; text-align: center; white-space: nowrap;
  border: 1px solid transparent;
}
/* De officiële kleuren van de IUCN Rode Lijst, zoals ze op de kaart van de
   organisatie zelf staan. Ze lopen van groen naar rood en zijn wereldwijd
   herkenbaar; het palet van de site geldt hier dus niet. De letterkleur is per
   trede gekozen op leesbaarheid: donker op de lichte treden, wit op de drie
   donkere. Deze kleuren staan vast en veranderen niet mee met dag of nacht. */
.badge.ex { background: #000000; color: #ffffff; }
.badge.ew { background: #542344; color: #ffffff; }
.badge.cr { background: #D81E05; color: #ffffff; }
.badge.en { background: #FC7F3F; color: #1a1206; }
.badge.vu { background: #F9E814; color: #1a1206; }
.badge.nt { background: #CCE226; color: #14180a; }
.badge.lc { background: #60C659; color: #0e1a0d; }
.badge.dd { background: #D1D1C6; color: #1b1b18; }
.badge.ne { background: #FFFFFF; color: #1b1b1b; border-color: #b9bcc4; }

/* De status staat onder de maten en krijgt de volle breedte van het kadertje.
   In de rechterkolom alleen is het te krap: daar passen "Ernstig bedreigd" en de
   pil met de code niet naast elkaar, en dan zakken de woorden onder de pil. */
.status-rij {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 12px; flex-wrap: wrap;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .92rem;
}
.status-rij .status-l { color: var(--ink-3); }
.status-rij .status-waarde {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-left: auto; text-align: right;
}
.status-rij .status-tekst { color: var(--ink); }


/* ---------- leefgebieden (EUNIS) ----------
   Een rij ronde foto's: het beeld zegt in één oogopslag wat voor landschap het
   is, de naam eronder zegt welk type precies. Zonder naam blijft een foto van
   riet en een foto van zeggemoeras onderling niet te onderscheiden. */

.hab-block { margin: 12px 0 6px; }
.hab-lead { color: var(--ink-3); font-size: .88rem; margin: 0 0 10px; }

.habs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 16px 18px;
}
.habs li { margin: 0; }
.habs .hab {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 92px; text-decoration: none; color: var(--ink-2);
}
.habs .hab img {
  width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line), var(--shadow);
  background: var(--paper-2);
}
.habs .hab span {
  font-family: var(--sans); font-size: .82rem; line-height: 1.15;
  text-align: center; letter-spacing: .01em;
}
.habs a.hab:hover img { box-shadow: 0 0 0 2px var(--teal-ink), var(--shadow); }
.habs a.hab:hover span { color: var(--moss-dark); }

/* op de kaartjes in de soortenlijst: klein, zonder naam, alleen als geheugensteun */
.habs.small { gap: 6px; margin: 8px 0 2px; }
.habs.small .hab { width: auto; }
.habs.small .hab img { width: 30px; height: 30px; border-width: 1px; }
.habs.small .hab span { display: none; }

/* de filterbalk heeft nu rijen met een kopje ervoor */
.filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: 100%; margin-top: 2px;
}
.filter-label {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin-right: 2px;
  min-width: 104px;
}
.filter-label a { color: inherit; }
.chip.sub { font-size: .82rem; padding: 3px 10px; }

/* de overzichtspagina */
.narrow-wide { max-width: 1080px; }
.hab-group { margin: 34px 0 0; scroll-margin-top: 80px; }
.hab-group h2 .code, .hab-card .code {
  font-family: var(--sans); color: var(--ink-3); font-weight: 500;
  letter-spacing: .06em; font-size: .8em;
}
.hab-cards {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 18px 20px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.hab-groep-tekst { margin: 8px 0 0; max-width: 76ch; color: var(--ink-2); }
.hab-wenk { margin: 4px 0 0; font-size: .88rem; color: var(--ink-3); }

.hab-card { scroll-margin-top: 80px; }
.hab-card > details { height: 100%; }
/* Klikken op een kaart klapt de beschrijving uit. Die is honderd woorden lang
   en past niet in een kolom van tweehonderd pixels, dus neemt een open kaart de
   hele rij in beslag. */
.hab-card:has(details[open]) { grid-column: 1 / -1; }

/* De summary krijgt zelf géén display: flex. Safari laat het uitklapblok dan
   niet meer opengaan; de flex hoort op de span erbinnen. */
.hab-card summary {
  cursor: pointer; list-style: none;
  border-radius: var(--radius); padding: 4px; margin: -4px;
}
.hab-card summary::-webkit-details-marker { display: none; }
.hab-card summary::marker { content: ""; }
.hab-sam { display: flex; align-items: center; gap: 14px; }
.hab-kop { display: block; min-width: 0; }
.hab-card summary:hover strong,
.hab-card summary:focus-visible strong { color: var(--rust); }
.hab-card summary:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.hab-card img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.hab-card strong { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; }
.hab-where, .hab-count { display: block; font-size: .78rem; color: var(--ink-3); }
.hab-count { color: var(--moss-dark); }
/* het driehoekje achter de code draait mee, zodat te zien is dat er iets
   open- en dichtgaat */
.hab-card summary .code { white-space: nowrap; }
.hab-card summary .code::after {
  content: "\25b8"; margin-left: 5px; display: inline-block;
  transition: transform .12s ease; color: var(--ink-3);
}
.hab-card details[open] summary .code::after { transform: rotate(90deg); }

.hab-tekst {
  margin: 10px 0 0 98px; max-width: 72ch;
  border-left: 2px solid var(--line); padding-left: 14px;
}
.hab-tekst p { margin: 0; color: var(--ink-2); }
.hab-meer { margin-top: 8px !important; font-size: .88rem; }
.hab-meer a { color: var(--moss-dark); }
.hab-meer a:hover { color: var(--rust); }

@media (max-width: 620px) {
  .hab-tekst { margin-left: 0; }
}

@media (max-width: 620px) {
  .filter-label { min-width: 0; width: 100%; margin-bottom: -2px; }
  .habs .hab { width: 78px; }
  .habs .hab img { width: 64px; height: 64px; }
}


/* ---------- de stamboom in het zijmenu ----------
   De clades springen trapsgewijs in, zodat elke sprong in de boom zichtbaar is.
   De ordes staan daar los van: die beginnen allemaal op dezelfde lijn en de
   families precies één stap naar rechts. Anders zou een orde diep in de boom
   verder inspringen dan een orde die er hoog in hangt, en dat leest niet. */

.taxnav-list .nav-clade {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--moss-dark);
  margin: 14px 0 2px; line-height: 1.25;
}
.taxnav-list .nav-clade .sci {
  display: block; text-transform: none; letter-spacing: 0;
  font-family: var(--sans); font-style: italic; font-size: .74rem;
  color: var(--ink-3); font-weight: 400;
}
.taxnav-list .nav-clade.lvl0 { margin-top: 4px; }
.taxnav-list .nav-clade.lvl1 { padding-left: 5px; }
.taxnav-list .nav-clade.lvl2 { padding-left: 10px; }
.taxnav-list .nav-clade.lvl3 { padding-left: 15px; }
.taxnav-list .nav-clade.lvl4 { padding-left: 20px; }
.taxnav-list .nav-clade.lvl5 { padding-left: 25px; }

/* Alle ordes beginnen op dezelfde lijn, ongeacht hoe diep ze in de boom hangen,
   en alle families op één lijn daar rechts van — ook de families die onder een
   subclade vallen. Een subclade is dus zichtbaar aan zijn kopje, niet aan een
   extra sprong naar rechts; anders zou de ene familie verder inspringen dan de
   andere en valt de kolom uit elkaar. */
.taxnav-list .nav-order > details > summary { padding-left: 31px; }
.taxnav-list .nav-order > details > ul { padding-left: 45px; }
.taxnav-list .nav-order > details > ul > li > a { padding-left: 6px; }
.taxnav-list .nav-order > details > summary::marker,
.taxnav-list .nav-order > details > summary::-webkit-details-marker { margin-left: 0; }

/* subclades binnen een orde: kopjes boven de families, op dezelfde lijn */
.taxnav-list .nav-sub {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 10px 0 2px; padding-left: 0;
}
.taxnav-list .nav-sub .sci {
  text-transform: none; letter-spacing: 0; font-family: var(--sans);
  font-style: italic; color: var(--ink-3);
}

/* ---------- inhoudsopgave op de ordepagina ---------- */

.ov { margin: 8px 0 26px; }
.ov h2 { margin-top: 0; }
.ov-list { list-style: none; margin: 0; padding: 0; }
/* Elke regel in het overzicht heeft dezelfde bouw, of ze nu een clade of een
   familie beschrijft: links de naam, uiterst rechts het aantal, en daaronder
   over de volle breedte de omschrijving. Dat vraagt om een raster en niet om
   flexbox: bij flexbox bepaalt de lengte van de naam of de omschrijving nog
   op dezelfde regel past, en dan verspringt de uitlijning per regel. */
.ov-clade, .ov-family {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
  border-bottom: 1px solid var(--line);
}
.ov-title { min-width: 0; grid-column: 1; }
.ov-count { grid-column: 2; justify-self: end; }
.ov-desc { grid-column: 1 / -1; }

/* De clade staat een trapje boven de families die eronder hangen, dus dezelfde
   vorm als zij maar een maat groter. */
.ov-clade { margin: 18px 0 6px; padding-bottom: 7px; }
.ov-clade .ov-title strong, .ov-clade .ov-title .sci {
  font-family: var(--display); font-size: 1.28rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.ov-clade .ov-title .sci {
  font-style: italic; text-transform: none;
  color: var(--ink-3); letter-spacing: .01em;
}
.ov-clade.d1 { padding-left: 18px; }
.ov-clade.d2 { padding-left: 36px; }

/* de omschrijving hoort onder de naam en loopt over de hele breedte */
.ov-desc {
  display: block; color: var(--ink-2);
  font-size: .9rem; line-height: 1.55; margin-top: 4px; max-width: 78ch;
}
.ov-family > .ov-desc { margin-top: 6px; }

/* Eén regel per familie op een ordepagina: de naam links, het aantal rechts,
   en een dunne lijn eronder. */
.ov-family { padding: 7px 0; }
.ov-family.in-sub { padding-left: 18px; }
/* De familienaam is een groepsnaam en draagt dus dezelfde vorm als de kopjes
   INHEEMSE SOORTEN, EXOTEN en DWAALGASTEN: Antonio, in kapitalen. De
   wetenschappelijke naam blijft cursief en houdt zijn eigen hoofdletter. */
.ov-family .ov-title > a {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
}
.ov-family .ov-title > .sci {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  font-style: italic; text-transform: none; letter-spacing: .01em;
  color: var(--ink-3);
}
.ov-title > .sep { color: var(--ink-3); font-weight: 400; }
.ov-count {
  font-family: var(--mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}


/* ---------- filteren op leefgebied: ronde foto's ----------
   Tien hoofdgroepen naast elkaar. Kies je er een, dan blijft alleen die staan,
   met links een even grote cirkel om terug te gaan, en verschijnen de formaties
   binnen die groep op de rij eronder. */

/* Het filter hoort onder de zoekbalk, over de volle breedte. Zonder
   flex-shrink: 0 kruipt het bij een korte rij cirkels naast de zoekbalk. */
.hab-filter { flex: 0 0 100%; width: 100%; margin: 6px 0 2px; }
.hab-filter-title {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 10px;
}
.filter-picks {
  display: flex; flex-wrap: wrap; gap: 14px 16px;
  width: 100%; margin: 4px 0 2px;
}
.filter-picks.subs {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.hab-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 96px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--ink-2); font: inherit;
}
.hab-pick img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  transition: box-shadow .12s ease;
}
.hab-pick span {
  font-family: var(--sans); font-size: .82rem; line-height: 1.15;
  text-align: center; letter-spacing: .01em;
}
.hab-pick:hover img { box-shadow: 0 0 0 2px var(--teal-ink), var(--shadow); }
.hab-pick[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--brass), var(--shadow); }
.hab-pick[aria-pressed="true"] span { color: var(--ink); font-weight: 600; }

/* de terugcirkel draagt geen foto maar een pijl, en is verder identiek */
.hab-back .hab-back-mark {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1.7rem; line-height: 1;
  color: var(--ink-2); background: var(--paper-2);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  transition: box-shadow .12s ease, color .12s ease;
}
.hab-back:hover .hab-back-mark {
  box-shadow: 0 0 0 2px var(--teal-ink), var(--shadow); color: var(--moss-dark);
}


/* ---------- afstammingslijn ----------
   Eén rechte lijn van eukaryoot tot vogel: elke clade zit in de vorige, dus
   elke stap springt een klein stukje verder in. Na een stuk of twaalf stappen
   houdt het inspringen op — anders loopt de tekst het scherm af — maar de
   verticale lijn links laat zien dat de reeks doorloopt. */

.anc-part { margin: 40px 0 0; scroll-margin-top: 80px; }
.anc-list { list-style: none; margin: 18px 0 0; padding: 0; }
.anc-node {
  --step: 0;
  margin-left: calc(var(--step) * 9px);
  padding: 10px 0 10px 16px;
  border-left: 2px solid color-mix(in srgb, var(--teal) 70%, transparent);
}
.anc-node h3 {
  margin: 0; font-size: 1.12rem; letter-spacing: .01em;
}
.anc-node h3 .sci { font-weight: 400; font-size: .92rem; color: var(--ink-3); }
.anc-desc { margin: 2px 0 0; color: var(--ink-2); font-size: .94rem; }

.anc-leap {
  margin: 10px 0 2px; padding: 12px 14px;
  background: color-mix(in srgb, var(--pink) 16%, transparent);
  border-left: 3px solid var(--pink);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.anc-leap strong {
  font-family: var(--sans); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rust);
}
.anc-leap p { margin: 4px 0 0; font-size: .94rem; }

.anc-meta { margin-top: 6px; }
.anc-meta > summary {
  cursor: pointer; font-family: var(--sans); font-style: italic;
  font-size: .8rem; color: var(--ink-3); list-style: none;
}
.anc-meta > summary::-webkit-details-marker { display: none; }
.anc-meta > summary::after { content: " ▾"; font-style: normal; }
.anc-meta dl {
  margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  font-size: .84rem; color: var(--ink-2);
}
.anc-meta dt {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .07em;
  font-size: .72rem; color: var(--ink-3); padding-top: 2px;
}
.anc-meta dd { margin: 0; }
.anc-more { margin-top: 30px; }

@media (max-width: 720px) {
  .anc-node { margin-left: calc(var(--step) * 4px); padding-left: 12px; }
}


/* ---------- onderfamilies op de familiepagina ---------- */

.subfam-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 34px 0 4px; padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
/* De onderfamilie draagt dezelfde kop als de orde, de familie en de groepjes
   inheems/exoot/dwaalgast: Antonio, met de wetenschappelijke naam ernaast,
   cursief en grijs. Ze staat een trapje boven de geslachtskoppen, dus iets
   groter dan die. */
.subfam-head h2 {
  margin: 0; font-size: 1.28rem;
  font-family: var(--display); font-weight: 700; letter-spacing: .01em;
}
.subfam-head h2 .sci {
  font-family: inherit; font-size: 1em; font-style: italic; font-weight: inherit;
  color: var(--ink-3); letter-spacing: .01em;
}
.subfam-head h2 .sep { color: var(--ink-3); font-weight: 400; }

/* De omschrijving van de onderfamilie staat op een eigen regel onder het
   kopje, over de volle breedte — de flexrij erboven houdt naam en aantal links
   en rechts. Iets kleiner dan de familie-inleiding, want ze staat een trapje
   lager in de boom. */
.subfam-head .subfam-desc {
  flex-basis: 100%; order: 3;
  margin: 8px 0 0;
  font-family: var(--sans); font-size: 1rem; line-height: 1.55;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
  max-width: 74ch;
}

.tax-group.in-subfam { padding-left: 18px; border-left: 1px solid var(--line); }
.tax-group.in-subfam .group-head h2 { font-size: 1.05rem; }

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

.sound {
  background: color-mix(in srgb, var(--teal) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal-ink) 22%, transparent);
  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); }

/* Onder de hoofdfoto kan een rij extra foto's staan: het vrouwtje bij een
   soort waarvan de geslachten verschillen, het kuiken bij een nestvlieder.
   Eén ervan krijgt de volle breedte, twee staan naast elkaar. */
/* De extra foto's staan in een raster van gelijke vakken: even breed en even
   hoog, zodat ze onder elkaar uitlijnen en de bijschriften op dezelfde hoogte
   beginnen. Dat is vooral van belang bij de vormen — vijf ondersoorten van de
   gele kwikstaart naast elkaar vergelijk je alleen goed als ze even groot zijn.
   Binnen het vak staat de foto heel (contain), er wordt dus nooit iets
   afgesneden (een staande foto verloor met cover zijn onderste helft — bij het
   nonnetje bleef alleen het mannetje over); bij een staand of vierkant beeld
   blijft links en rechts wat papier over. Ze zijn bewust kleiner dan de
   hoofdfoto: die blijft het beeld van de bladzijde.
   De kolommen zijn minstens 240 px breed: smaller dan dat zie je het verschil
   tussen twee ondersoorten niet meer. In de tekstkolom passen er dan twee naast
   elkaar, op een breed scherm drie. Eén foto blijft klein — die mag de bladzijde
   niet overnemen; build.py zet daarvoor `aantal-1`, `aantal-2` of `aantal-3` op
   de rij. */
.extra-fotos {
  display: grid;
  align-items: start;
  gap: 14px 10px;
  margin: 10px 0 6px;
}
/* Eén foto krijgt ongeveer de breedte die een kolom in de rijen hierboven ook
   heeft (≈ 270 px in de tekstkolom), zodat een vrouwtje boven een rij
   ondersoorten er niet groter uitziet dan de ondersoorten zelf. */
.extra-fotos.aantal-1 { grid-template-columns: minmax(0, 290px); }
.extra-fotos.aantal-2,
.extra-fotos.aantal-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.extra-fotos.aantal-2 { max-width: 570px; }
.extra-fotos.aantal-3 { max-width: 850px; }
figure.extra-foto { margin: 0; min-width: 0; }
figure.extra-foto img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
  border-radius: 3px; background: var(--paper-2);
  border: 1px solid var(--line); display: block;
}
figure.extra-foto figcaption {
  font-size: .74rem; color: var(--ink-3); padding-top: 5px; line-height: 1.4;
}
figure.extra-foto figcaption strong { color: var(--ink-2); }

/* De kop boven de ondersoorten en kleedvormen, met een lijn erboven. Zonder die
   scheiding staat een vrouwtje in dezelfde rij als een ondersoort, en dat zijn
   twee heel verschillende dingen. De lijn loopt over de breedte van de tekst,
   niet over de foto's eronder — hij hoort bij de bladzijde, niet bij het
   raster. */
.vormen-kop {
  margin: 20px 0 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 1.15rem;
  color: var(--ink-2);
}

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 { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line);
     vertical-align: bottom; white-space: nowrap;
     font-size: .66rem; letter-spacing: .12em; color: var(--ink-3); font-weight: 400; }
td { text-align: left; padding: 11px 15px; border-bottom: 1px solid var(--line-soft);
     vertical-align: top; color: var(--ink-2); }
td:first-child { color: var(--ink); }
tbody tr:last-child td { border-bottom: 0; }

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

/* het kader: paneel met een lijn eromheen en messing aan de kant, zoals de
   .callout van vorstman.com */
.note {
  background: var(--card); border: 1px solid var(--line);
  border-left: 2px solid var(--brass); border-radius: var(--radius);
  padding: 16px 20px; margin: 22px 0;
  font-size: .95rem; color: var(--ink-2);
}
.note strong { color: var(--ink); }

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

.site-footer {
  border-top: 1px solid var(--line); background: var(--card);
  margin-top: 40px; padding: 34px 0 44px; font-size: .84rem; color: var(--ink-3);
}
.site-footer .cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px;
}
.site-footer p { margin: 0 0 .35em; max-width: 44ch; }
.site-footer .cols > div:last-child { text-align: right; font-family: var(--mono);
  font-size: .72rem; letter-spacing: .1em; color: var(--ink-3); }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--brass); }
.site-footer p { margin: .3em 0; max-width: 52ch; }

.skip {
  position: absolute; left: -9999px; background: var(--brass); color: var(--card);
  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-size: 1em; font-style: italic; font-weight: 600;
  color: inherit; letter-spacing: inherit;
}
.group-head h2 .sep, .subfam-head h2 .sep { color: var(--ink-3); font-weight: 400; }
.group-head p, .subfam-head p {
  margin: 0; font-family: var(--mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.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; }



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; position: relative;
}

/* Spitsbergen ligt boven de bovenrand van het kaartvenster en past er dus niet
   op. Voor de soorten die er broeden staat het als inzetje in de linkerbovenhoek,
   waar de kaart open water is. Bjørnøya krijgt een eigen kadertje eronder, want
   het ligt ruim tweehonderd kilometer zuidelijker en zou in hetzelfde paneel een
   stipje worden. Elk paneel heeft daarom zijn eigen schaal. De inzetjes dragen
   dezelfde seizoenskleuren als de kaart zelf; het gaat er alleen om dát de vogel
   er zit. */
.rangemap .spits-inzet {
  position: absolute; top: 2.5%; left: 2%;
  width: 19%; max-width: 108px;
}
.rangemap .spits-paneel {
  border: 1px solid var(--land-line); border-radius: 2px;
  background: var(--sea); padding: 2px 2px 0;
  line-height: 0;
}
.rangemap .spits-paneel + .spits-paneel { margin-top: 5px; width: 46%; }
.rangemap .spits-inzet svg { width: 100%; height: auto; display: block; }
.rangemap .spits-inzet path { stroke: var(--land-line); stroke-width: .7; }
.rangemap .spits-paneel.spits-bjornoya path { stroke-width: 1.2; }
.rangemap .spits-inzet span {
  display: block; font-family: var(--sans); font-size: .58rem; line-height: 1.5;
  letter-spacing: .02em; color: var(--ink-3); text-align: center;
}
.rangemap .spits-paneel.spits-bjornoya span { font-size: .5rem; }
@media (max-width: 560px) {
  .rangemap .spits-inzet { width: 26%; }
  .rangemap .spits-inzet span { font-size: .52rem; }
  .rangemap .spits-paneel.spits-bjornoya span { font-size: .46rem; }
}
.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;
}


/* ---------- archipelkaartje voor de eilandsoorten ---------- */
/* Deze kaart staat als SVG in de bladzijde zelf en niet in .map-holder:
   hij is klein genoeg om dat te dragen, en dan staat hij er ook zonder
   JavaScript. De zee is dezelfde als bij de Europakaart. */
.rangemap.islands .eilandkaart {
  width: 100%; height: auto; display: block;
  background: var(--sea); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.eilandkaart .e-leeg { fill: var(--land); stroke: var(--land-line); stroke-width: .5; }
.eilandkaart .e-resident { fill: var(--map-resident); stroke: var(--land-line); stroke-width: .5; }
.eilandkaart .e-breeding { fill: var(--map-breeding); stroke: var(--land-line); stroke-width: .5; }
.eilandkaart .e-winter   { fill: var(--map-winter);   stroke: var(--land-line); stroke-width: .5; }
.eilandkaart .e-passage  { fill: var(--map-passage);  stroke: var(--land-line); stroke-width: .5; }
.eilandkaart .e-naam {
  font-family: var(--sans); font-size: 4.4px; fill: var(--ink-3); text-anchor: middle;
}
.eilandkaart .e-naam.op { fill: var(--ink-2); }
.eilandkaart .e-kop {
  font-family: var(--sans); font-size: 4.8px; fill: var(--ink-3);
  letter-spacing: .08em; text-transform: uppercase;
}


.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 ---------- */

/* Inter is breder dan Antonio: het zijmenu blijft
   een maatje kleiner, anders breken de familienamen over twee regels. */
.taxnav { font-size: .84rem; }
.taxnav-list a, .taxnav-list summary, .taxnav-list .on, .taxnav-list em,
.taxnav-list .nav-group, .taxnav-title { letter-spacing: 0; }
.taxnav .on { flex: 1 1 70%; }
.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(--sans); 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(--teal); color: var(--ink);
}
.taxnav details ul li a[aria-current="page"] .sci,
.taxnav details ul li a[aria-current="page"] em { color: color-mix(in srgb, var(--ink) 66%, transparent); }
.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 { --maxd: 7; --tstep: 33px; }   /* diepste orde, en wat één niveau inspringt */
.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(--sans); 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; margin-left: 0; 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,
.tree-order-head .tree-geen-beeld {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  object-position: 50% 25%;          /* zie .card figure img */
  border: 1px solid var(--line); background: var(--paper-2);
}
/* Een orde waarvan nog geen enkele soort een vrije foto heeft, houdt zijn plek
   in de rij: een leeg rondje in plaats van een gat. */
.tree-order-head .tree-geen-beeld { display: inline-block; }
.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(--sans); 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; }

/* De families van een orde: elk op een eigen regel, en bij elke orde even ver
   van de linkerkant. Het extra inspringen dat de boom aan een diep hangende
   orde geeft, wordt hier gecompenseerd, zodat alle families één kolom vormen. */
.tree-families {
  margin-left: calc(56px + (var(--maxd) - var(--d, 0)) * var(--tstep));
  margin-top: 2px; font-size: .86rem; line-height: 1.6;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.tree-families a {
  display: inline-flex; align-items: baseline; gap: 6px;
  text-decoration: none; padding: 2px 0; color: var(--ink-2);
}
.tree-families a:hover { color: var(--moss-dark); }
.tree-families .sci { font-family: var(--sans); 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(--sans); font-style: italic; }


/* ---------- de bladzijde over het ei ---------- */

.ei-page p { max-width: 68ch; }
.ei-sec { margin-top: 34px; scroll-margin-top: 80px; }
.ei-toc { font-family: var(--sans); font-size: 1rem; color: var(--ink-3);
  margin: 18px 0 0; max-width: none; }
.ei-toc span { text-transform: uppercase; letter-spacing: .07em; font-size: .78rem;
  margin-right: 6px; }
.ei-toc a { color: var(--moss-dark); text-decoration: none; }
.ei-toc a:hover { color: var(--rust); text-decoration: underline; }

.ei-fig { margin: 22px 0 0; }
/* De figuren zijn 'gedrukte platen', net als de verspreidingskaarten: ze houden
   ook in het donker hun lichte ondergrond, alleen iets gedempt. */
.ei-plate { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; }
.ei-plate svg,
.ei-plate img { display: block; width: 100%; height: auto; }
@media (prefers-color-scheme: dark) { .ei-plate { filter: brightness(.92) saturate(.95); } }

.ei-key { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); font-size: .93rem;
  color: var(--ink-2); }
.ei-key li { position: relative; padding-left: 34px; line-height: 1.45; }
.ei-key strong { font-family: var(--sans); font-weight: 600; color: var(--ink);
  font-size: 1.04em; }
.ei-n { position: absolute; left: 0; top: .1em; width: 24px; height: 24px;
  border: 1.5px solid var(--ink-3); border-radius: 50%; font-family: var(--sans);
  font-size: .88rem; line-height: 22px; text-align: center; color: var(--ink-2); }
.ei-key li:hover .ei-n { border-color: var(--rust); color: var(--rust); }
/* Wie een regel in de legenda aanwijst, ziet het onderdeel in de tekening
   oplichten. Dat kan alleen omdat de svg in de pagina zelf staat. */
.ei-fig .ep { transition: stroke .12s ease, stroke-width .12s ease; }
.ei-fig .ei-badge circle { transition: fill .12s ease; }
.ei-fig:has(.ei-key li:nth-child(1):hover) .ep-1,
.ei-fig:has(.ei-key li:nth-child(1):focus-within) .ep-1 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(1):hover) .ei-b1 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(2):hover) .ep-2,
.ei-fig:has(.ei-key li:nth-child(2):focus-within) .ep-2 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(2):hover) .ei-b2 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(3):hover) .ep-3,
.ei-fig:has(.ei-key li:nth-child(3):focus-within) .ep-3 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(3):hover) .ei-b3 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(4):hover) .ep-4,
.ei-fig:has(.ei-key li:nth-child(4):focus-within) .ep-4 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(4):hover) .ei-b4 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(5):hover) .ep-5,
.ei-fig:has(.ei-key li:nth-child(5):focus-within) .ep-5 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(5):hover) .ei-b5 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(6):hover) .ep-6,
.ei-fig:has(.ei-key li:nth-child(6):focus-within) .ep-6 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(6):hover) .ei-b6 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(7):hover) .ep-7,
.ei-fig:has(.ei-key li:nth-child(7):focus-within) .ep-7 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(7):hover) .ei-b7 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(8):hover) .ep-8,
.ei-fig:has(.ei-key li:nth-child(8):focus-within) .ep-8 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(8):hover) .ei-b8 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(9):hover) .ep-9,
.ei-fig:has(.ei-key li:nth-child(9):focus-within) .ep-9 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(9):hover) .ei-b9 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(10):hover) .ep-10,
.ei-fig:has(.ei-key li:nth-child(10):focus-within) .ep-10 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(10):hover) .ei-b10 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(11):hover) .ep-11,
.ei-fig:has(.ei-key li:nth-child(11):focus-within) .ep-11 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(11):hover) .ei-b11 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(12):hover) .ep-12,
.ei-fig:has(.ei-key li:nth-child(12):focus-within) .ep-12 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(12):hover) .ei-b12 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(13):hover) .ep-13,
.ei-fig:has(.ei-key li:nth-child(13):focus-within) .ep-13 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(13):hover) .ei-b13 circle { fill: #f0ddd0; }
.ei-fig:has(.ei-key li:nth-child(14):hover) .ep-14,
.ei-fig:has(.ei-key li:nth-child(14):focus-within) .ep-14 { stroke: #9c5a33; stroke-width: 3; }
.ei-fig:has(.ei-key li:nth-child(14):hover) .ei-b14 circle { fill: #f0ddd0; }

/* de hagelsnoeren en het dooiervlies zijn zelf al lijnen: die mogen bij het
   oplichten niet dunner worden */
.ei-fig:has(.ei-key li:nth-child(9):hover) .ep-9 { stroke-width: 9; }
.ei-fig:has(.ei-key li:nth-child(10):hover) .ep-10 { stroke-width: 5; }

.ei-fig figcaption { margin-top: 14px; font-size: .88rem; color: var(--ink-3);
  max-width: 76ch; }


.ei-src { margin: 14px 0 0; padding-left: 22px; font-size: .9rem; color: var(--ink-2); }
.ei-src li { margin-bottom: 7px; }

@media (max-width: 640px) {
  .ei-key { grid-template-columns: 1fr; }
  .ei-plate { border-radius: 8px; }
}

/* bronnenlijst onder een alinea (indeling, herkomst) */
.src-list { margin: 10px 0 0; padding-left: 18px; list-style: square; }
.src-list li { margin: 2px 0; color: var(--ink-2); }


/* ---------- steunen ----------
   De knop staat in de opmaak van de gids en niet in die van de betaaldienst:
   dezelfde pilvorm als de chips, salie als accent, Inter als letter, en in het
   donker draaien de rollen mee met de rest van het palet. In de menubalk is hij
   licht — hij mag opvallen, niet schreeuwen; op de steunpagina zelf is hij vol,
   want daar is hij de handeling. */

/* Messing op vlak in plaats van een gevulde knop: hij hoort zichtbaar te zijn
   en niet te roepen — zo staat hij ook op vorstman.com. */
.steun-knop {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper-2); padding: 5px 13px; font-size: .86rem; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
/* de menubalk kleurt zijn eigen verwijzingen; de knop houdt zijn eigen kleur,
   ook als hij de huidige bladzijde is */
.nav a.steun-knop, .nav a.steun-knop[aria-current="page"] { color: var(--brass); }
.nav a.steun-knop:hover, .nav a.steun-knop:focus-visible {
  background: var(--paper-2); border-color: var(--brass); color: var(--ink);
}
/* op de steunpagina zelf: vol vlak, zoals een aangeklikte chip */
/* op de steunpagina zelf draagt hij de kleur: daar is hij het onderwerp */
.nav a.steun-knop[aria-current="page"] {
  background: var(--brass); border-color: var(--brass); color: var(--card);
}

/* op de steunpagina is het de eigenlijke handeling: vol vlak, iets groter */
.steun-knop.groot {
  background: var(--brass); border-color: var(--brass); color: var(--card);
  border-radius: var(--radius); padding: 9px 16px; font-size: .95rem; font-weight: 500;
}
.steun-knop.groot:hover, .steun-knop.groot:focus-visible {
  background: var(--ink); border-color: var(--ink); color: var(--card);
}

/* de betaalroutes staan in dezelfde blokken als de kaartjes elders */
.steun-routes {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 30px 0 0;
}
.steun-route {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px 22px;
  /* de knoppen van de twee routes staan op dezelfde hoogte, ook al is de ene
     tekst langer dan de andere */
  display: flex; flex-direction: column;
}
.steun-route .steun-knop { margin-top: auto; align-self: flex-start; }
.steun-route h2 { margin: 0 0 .35em; font-size: 1.15rem; }
.steun-route p { margin: 0 0 1.1em; color: var(--ink-2); font-size: .95rem; }

.steun-klein {
  border-top: 1px solid var(--line); margin-top: 34px; padding-top: 14px;
  font-size: .85rem; color: var(--ink-3); max-width: 62ch;
}

@media (max-width: 620px) {
  /* in de smalle balk loopt de knop mee met de rest van het menu */
  .steun-knop { font-size: .84rem; padding: 4px 11px; }
}

/* ---------- de kopregels boven een rij kaartjes ----------
   Eén vorm voor alles wat een rij kaartjes aankondigt: het geslacht op de
   familiepagina en de drie groepen — inheemse soorten, exoten, dwaalgasten — op
   elke bladzijde. Naam links, aantal rechts, en een dunne lijn erbóven die het
   deel van de vorige rij scheidt. Volgt zo'n regel meteen op een kop van een
   hoger niveau, die zelf al een lijn onder zich heeft, dan valt die lijn weg:
   twee lijnen vlak onder elkaar is er één te veel. */

.guests-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--line);
  margin: 26px 0 14px; padding-top: 12px;
  font-family: var(--display); font-weight: 700;
  font-size: 1.12rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--ink-2);
}
/* een geslachtsnaam blijft een wetenschappelijke naam: cursief en niet in
   kapitalen, ook al staat de regel verder in Antonio */
.guests-head i {
  font-style: italic; text-transform: none; letter-spacing: .01em;
}
.guests-head span {
  font-family: var(--mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

/* geen lijn als er al een lijn vlak boven staat */
.group-head + [data-natives] > .guests-head,
.group-head + [data-guests] > .guests-head,
.group-head + [data-genus] > .guests-head,
.subfam-head + [data-genus] > .guests-head,
[data-natives] > .guests-head:first-child,
[data-natives] > [data-genus]:first-child > .guests-head,
.species-head + [data-natives] > .guests-head,
.species-head + [data-genus] > .guests-head,
.species-head + .subfam-head + [data-genus] > .guests-head {
  border-top: 0; margin-top: 14px; padding-top: 0;
}

.guests-sub { margin: -6px 0 16px; max-width: 70ch; font-size: .88rem; color: var(--ink-3); }

/* in het overzicht boven de orde staat de groep tussen de geslachten, maar
   rechtop — het is geen geslachtsnaam */



/* ---------- bronnen & licenties ----------
   Bovenaan het verhaal in een leeskolom, onderaan de bestandslijsten over de
   volle breedte: die tabellen hebben vier kolommen met lange namen en licenties,
   en in een smalle kolom breekt elke regel over drie regels. */

.bron-lijst { list-style: none; margin: 0 0 8px; padding: 0; }
.bron-item {
  border-top: 1px solid var(--line); padding: 14px 0 4px;
}
.bron-item h3 {
  margin: 0 0 4px; font-family: var(--display); font-weight: 700;
  font-size: 1.12rem; text-transform: uppercase; letter-spacing: .02em;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.bron-item h3 a { text-decoration: none; }
.bron-item h3 a:hover { text-decoration: underline; }
/* de licentie is een label, geen kop: klein, mono, grijs */
.bron-lic {
  font-family: var(--mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.bron-item p { margin: 0; color: var(--ink-2); max-width: 78ch; }

.bestanden { padding: 8px 0 40px; }
.bestanden h2 { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.bestanden h3 { margin: 30px 0 8px; }
.bestanden-lede { margin: 0 0 14px; max-width: 78ch; color: var(--ink-2); font-size: .95rem; }
.bestanden .table-wrap { margin-bottom: 6px; }
/* de eerste kolom draagt de naam en eronder de wetenschappelijke naam; die mag
   niet afbreken, anders wordt de tabel drie keer zo hoog */
.bestanden td:first-child { min-width: 22ch; }
.bestanden td:nth-child(2) { min-width: 16ch; }
.bestanden td { white-space: normal; }
.bestanden th { white-space: nowrap; }

.zoek-bron { display: block; margin: 0 0 18px; max-width: 420px; }
.zoek-bron input {
  width: 100%; padding: 9px 12px; font: inherit; font-size: .95rem;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.zoek-bron input:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.bestanden-leeg { color: var(--ink-3); font-style: italic; }
/* alleen voor schermlezers */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* ---------- de loep: een foto groot op het scherm ----------
   Een klik op een vogelfoto zet hem over de bladzijde heen in de grootste maat
   die er is. Het bijschrift met maker en licentie gaat mee — die hoort bij de
   foto, waar hij ook staat. */
.loep {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw;
  background: rgba(10, 12, 16, .88);
  backdrop-filter: blur(2px);
}
.loep figure {
  margin: 0; max-width: 100%; max-height: 94vh;
  display: flex; flex-direction: column; align-items: center;
}
.loep img {
  max-width: 100%; max-height: 84vh; width: auto; height: auto;
  border-radius: 4px; display: block; background: #22262e;
}
.loep figcaption {
  color: #d7dbe3; font-family: var(--sans); font-size: .8rem; letter-spacing: 0;
  padding-top: 10px; text-align: center; max-width: 70ch;
}
.loep figcaption a { color: #d7dbe3; }
.loep figcaption strong { color: #fff; }
.loep-dicht {
  position: absolute; top: 12px; right: 16px;
  width: 40px; height: 40px; line-height: 1;
  font-size: 1.7rem; color: #d7dbe3;
  background: rgba(255, 255, 255, .1); border: 0; border-radius: 50%;
  cursor: pointer;
}
.loep-dicht:hover { background: rgba(255, 255, 255, .2); color: #fff; }
body.loep-open { overflow: hidden; }

/* Alleen aanwijzen waar er ook werkelijk iets te vergroten valt. */
figure.photo img, figure.extra-foto img { cursor: zoom-in; }

@media (prefers-reduced-motion: no-preference) {
  .loep img { animation: loep-in .18s ease-out; }
  @keyframes loep-in { from { opacity: 0; transform: scale(.98); } }
}

/* de maker, op de bronnenpagina */
/* de breedte van de alinea, zodat de foto onder het midden van de tekst valt */
.maker { margin: 10px 0 0; max-width: 62ch; }
.maker p { margin: 0; }
.maker-foto {
  display: block;
  width: 260px; height: 260px;
  margin: 22px auto 0;
  border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
@media (max-width: 640px) {
  .maker-foto { width: 220px; height: 220px; }
}


/* --- toevoegingen voor de verzamelbladzijde --- */
.portaal-hero { position: relative; margin: 0; }
.portaal-hero img { display: block; width: 100%; height: clamp(220px, 34vh, 380px);
  object-fit: cover; object-position: 50% 45%; }
.portaal-hero figcaption { position: absolute; right: 14px; bottom: 10px;
  font-size: .74rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.portaal-sectie { margin: 46px 0 0; }
.portaal-sectie h2 { font-family: var(--serif); font-weight: 600;
  font-size: 1.5rem; margin: 0 0 4px; }
.portaal-sectie.narrow { max-width: var(--measure); }

.gidsen { list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.gids { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); }
.gids h3 { font-family: var(--sans); font-weight: 600; font-size: 1.16rem;
  margin: 0; color: var(--ink); }
.gids-gebied { margin: 2px 0 0; font-size: .84rem; color: var(--ink-3); }
.gids-tekst { margin: 10px 0 0; color: var(--ink-2); font-size: .95rem; }
.gids-link { display: block; padding: 18px 20px 16px; text-decoration: none;
  color: inherit; height: 100%; }
/* De gids die online staat beslaat de hele rij: hij is waar de bezoeker voor
   komt, de andere vier zijn een aankondiging. */
.gids-open { box-shadow: var(--shadow); grid-column: 1 / -1;
  border-left: 3px solid var(--brass); }
.gids-open .gids-tekst { max-width: 62ch; }
.gids-open:hover { border-color: var(--brass); }
.gids-open:hover h3 { color: var(--brass-dark); }
.gids-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.gids-actie { display: inline-block; margin: 14px 0 0; font-family: var(--sans);
  font-size: .88rem; font-weight: 600; color: var(--brass-dark); }
.gids-actie::after { content: " \2192"; }
.gids-wacht { padding: 18px 20px 16px; background: transparent;
  border-style: dashed; }
.gids-wacht h3 { color: var(--ink-2); }
.gids-staat { display: inline-block; margin: 14px 0 0; padding: 2px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-3); }