@charset "UTF-8";
/* Must stay the first thing in this file. Pages declare their charset from
   header.js via document.write(), which the parser reaches too late to honour, so a
   page's encoding comes from its Content-Type header. Cloudflare Pages sends
   charset=utf-8 and production is fine, but `python3 -m http.server` -- the dev
   server this repo documents -- does not, so the page falls back to windows-1252 and
   the ▾ on .hide_show_button::after previews as "â–¾". A stylesheet's own @charset
   wins over the document's encoding, which fixes the preview for the CSS glyphs.
   Literal UTF-8 in the JS files (the search placeholder's …, the ☾ toggle) still
   mis-renders under that server; it is correct in production. */

/*This element makes sure there is no weird spacing as default */
* {
  margin: 0;
  padding: 0;
}

/* site variables */
:root {
  --base-text-color: #424242;
  --base-font-size: 18px;
  --section-toggle-active-bg: linear-gradient(90deg, #f5eee8 0%, #ece2da 100%);
  --section-toggle-active-text: #6e342d;
  --section-toggle-active-border: #c57d70;
  --section-toggle-active-accent: #b24f43;

  /* --- Distribution map palette -------------------------------------------
     The tokens the presence/absence maps read: the genus card in the keys, which
     draws its own SVG and picks these up in CSS, and the species hover card on the
     nomenclature pages, which draws a Leaflet layer and reads them through
     getComputedStyle.

     The values below are the keys' own. The species card overrides them for itself
     further down -- the two surfaces keep the reds they each had. What is shared is
     the vocabulary, not the palette: three weights, named the same on both, so a
     change of mind about either only has to be made in one place.

     "Present" is a record that names this exact place. "Coarse" is a country lit
     only because the record stopped at the country while other records name places
     inside it -- the same fact at lower resolution, not a second kind of fact.
     Filling those solid claimed every state in the country.

     The choropleths on the genus pages are a different job -- counts, not presence
     -- and keep their own sequential ramp. */
  --map-land: #ececec;
  --map-land-line: #b6b0a6;
  /* Borders of a subdivision that is drawn transparent over its own country. */
  --map-land-line-soft: #888888;
  --map-present: #b24f43;
  --map-present-line: #b24f43;
  --map-coarse: rgba(178, 79, 67, 0.28);
  --map-coarse-line: rgba(178, 79, 67, 0.45);
  /* Point records, which are observations rather than a claim about a region. */
  --map-occurrence: #2979ff;
}

/* Fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* -------------------------------------------------------- */
/* BASIC STYLING OF THE ENTIRE PAGE, TITLE AND NAVIGATION */

/* Prevent horizontal scroll on narrow viewports.
   Using clip instead of hidden so fixed-positioned overlays (backdrops, modals)
   are not confined to a scroll container and continue to cover the viewport. */
html {
  overflow-x: clip;
}

/* The whole site is drawn for roughly a 1450px measure: past that the content
   column outruns every max-width in this file at once -- the key's note, its
   citation and its couplets all stop at different places and the page looks
   unresolved. Rather than re-tune each cap, scale the page the way the reader's
   own zoom control would. 1.25 is the setting the site was being read at.
   Above 1500px only, so a 1366px laptop is left at 1:1. */
@media (min-width: 1500px) {
  html {
    zoom: 1.25;
  }

  /* Overlays that measure the viewport themselves have to be taken back out of
     the zoom. FancyBox is appended to <body>, so it inherits the root's 1.25,
     but it sizes its own container and content from window.innerWidth in
     unzoomed pixels -- the two multiply and the lightbox renders 25% larger
     than the screen, spilling off the right and bottom with the page still
     showing above it. 1.25 x 0.8 is exactly 1, so this restores 1:1 for these
     overlays alone and leaves the page scaled.

     The hover cards and popups used to be in this list for the same reason from
     the other direction, and it left them reading a fifth smaller than the page
     around them. They scale with everything else now, because the two things the
     0.8 was compensating for are fixed where they happen instead:

       - JS divides a measured rect by the element's own zoom before writing it
         back as a left/top (JS/overlay-zoom.js). A rect is in viewport pixels,
         already through the zoom, and a left/top is scaled by it a second time.
       - Their viewport-relative sizing is written as a percentage, not in vw/vh.
         They are all position:fixed, so a percentage is a share of the viewport
         whatever the zoom, while vw/vh are left unscaled and paint 25% larger
         inside the zoomed page.

     Anything else appended to <body> and sized or positioned from the viewport
     wants the same two treatments, not this list. */
  .fancybox-container {
    zoom: 0.8;
  }
}

body {
  position: relative;
  background-color: white;
  /* light grey DCDCDC */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

#footer_empty {
  margin-top: auto;
}

/* (no global serif font) */

/* keep `body` layout settings only; typography for main content set below */
/* (body already defined earlier in file for layout) */

#TEST_DIV {
  min-width: 1000px;
  /* background-color: blue; */
  font-size: 20px;
}


/* CHANGES THE HIGHLIGHTING AND SELECTION */
::selection {
  background-color: #1a1a2e;
  color: white
}

/* STYLE ANY SCROLLBARS */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: white;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 px grey;
  border-radius: 1px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #959595;
  border-radius: 4px;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #a83232;
}




.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* ---------------------------------------------------- */
/* HEADER STYLING */

/* STYLES THE LOGO */

#TEST_DIV {
  max-width: 100px;
}


#title_link {
  text-decoration: none;
  color: black;
  /* color: hsl(0, 0%, 88%);
  text-shadow: #000000; */
}

.navigation_empty {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  /* background-color: #0633bb; */

}

hr {
  border: none;
  border-top: 1px solid #000000;
  margin: 0px 15px;
}

.titles_navigation {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  border-bottom: 3px solid #3d3c36d7;
  padding-bottom: 5px;
}

/* TITLES */
.titles_logo {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: left;
}

.logo {
  padding-left: 50px;
}

.titles {
  /* padding-left: 20px; */
  margin: 12px;
  min-width: 450px;
}

/* MAIN TITLE */
.main_title {
  font-size: 28px;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  text-align: center;

}

/* SUBTITLE */
.subtitle {
  font-style: italic;
  font-size: 14px;
  font-family: 'Playfair Display', serif;
  text-align: center;
  color: #666;
  letter-spacing: 0.02em;
}


/* NAVIGATION  */
.navigation {
  margin: 0 auto;
  min-width: 250px;

}


/* Style the links themselves */
.ul_navigation li {
  list-style: none;
  display: inline-block;
}

.ul_navigation li a:hover {
  color: #c83f3f;
  font-size: 15px;
}

/* Mobile elements hidden by default on desktop */
.mobile_nav {
  display: none;
}

.mobile_nav_options {
  display: none;
}

.mobile_nav_close_button {
  display: none;
}

.mobile_header {
  display: none;
}

.mobile_filter {
  display: none;
}

.ul_navigation li a {
  text-decoration: none;
  font-size: 15px;
  font-family: sans-serif;
  color: black; /* default nav text color */
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
}

.ul_navigation li a.active {
  color: #c83f3f;
}

/* Navigation underline animation and focus/active states */
.ul_navigation li a {
  position: relative;
}

.ul_navigation li a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 2px;
  background: #c83f3f;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease, opacity .18s ease;
  opacity: 0;
}

.ul_navigation li a:hover::after,
.ul_navigation li a:focus::after,
.ul_navigation li a.active::after {
  transform: scaleX(1);
  opacity: 1;
}

.ul_navigation li a:focus-visible {
  outline: 3px solid rgba(200,63,63,0.12);
  outline-offset: 4px;
}


/* BASIC CONTENT STYLING */
/* ----------------------------------------- */

.main_content_wo_sidebar {
  font-size: 1.12em;
  text-align: left;
  line-height: 1.25;
  padding-top: 60px;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 550px;
  min-width: 450px;
}


.main_content_wo_sidebar_blog_pages {
  font-size: 1.12em;
  text-align: left;
  line-height: 1.25;
  padding-top: 60px;
  margin-left: auto;
  margin-right: auto;
  font-family: Arial, Helvetica, sans-serif;
  max-width: 800px;
  min-width: 450px;
  background-color: white;
  padding: 20px;
  border-style: solid;
  border-width: thin;
  margin-top: 15px;
  margin-bottom: 15px;
  border-color: #D6D6D6;
  margin-top: 15px;
}

.main_content_wo_sidebar_blog_pages h2 {
  justify-content: center;
  text-align: center;
}

.main_content_guide {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.04em;
  justify-content: center;
  text-align: left;
  line-height: 1.25;
  padding-top: 60px;
  font-family: Arial, Helvetica, sans-serif;
  min-width: 300px;
  background-color: white;
  /* padding: 20px; */
  padding-top: 20px;
}

.main_content_guide h1 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: #333;
}

.title_genus_page {
  text-align: left;
  border-bottom: 2px solid #1b2d38;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  line-height: 1.3;
  font-size: 18px;
}

.title_genus_page em {
  font-size: 38px;
  font-style: italic;
  color: #1a1a2e;
}

.genus-authorship {
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  color: #777;
  margin-left: 6px;
  letter-spacing: 0.01em;
  font-family: var(--site-body-font);
}


#output_image_viewer {
  max-width: 200px;

}


/* Overlay styling */
#predictions_results_div {
  position: absolute;
  display: none;
  /* Hidden by default */
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.785);
  /* Semi-transparent overlay */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: row;
}

/* Close button styling */
#predictions_results_div .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
}


#AI_close_button {
  position: absolute;
  width: 125px;
  right: 0;
  height: 125px;
  top: 0;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  border: none;
}

#bar_chart_image_div {
  display: flex;
  background: white;
  justify-content: space-between;
  align-items: center;
  padding-left: 2%;
}





















/* ------------------------------------------------------- */
/* SIDE BAR */

/* SIDE BAR DIV */
.side-bar {
  display: block;
  position: sticky;
  top: 0px;
  height: 100vh;
  width: 200px;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
  padding-top: 10px;
  padding-bottom: 20px;
}

/* BASIC STYLING OF LINKS */
.side-bar a {
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  display: block;
  font-family: var(--site-body-font) !important;
  padding: 8px 12px 8px 20px;
  margin: 0;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

/* HEADER TAXA (Tribes) */
.side-bar h2 {
  margin: 0;
  padding: 16px 12px 8px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.side-bar h2 a {
  color: rgba(255, 255, 255, 0.5);
  padding: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.side-bar h2 a:hover {
  color: #fff;
  background: transparent;
  border-left-color: transparent;
}

/* SUBTAXA (Genera) */
.side_bar_link {
  padding-left: 24px;
}

.side-bar-links {
  font-style: italic;
  padding-bottom: 20px;
}

/* STYLE THE TAXA WHEN HOVERING */
.side-bar a:hover {
  color: #fff;
  background-color: rgba(200, 63, 63, 0.3);
  border-left-color: #c83f3f;
}

/* Active/current page indicator */
.side-bar a.active {
  color: #fff;
  background-color: rgba(200, 63, 63, 0.2);
  border-left-color: #c83f3f;
}

/* Nearctic / Worldwide scope toggle inside the Campopleginae sidebar */
.sidebar-scope-toggle {
  display: flex;
  gap: 5px;
  padding: 8px 12px 10px 12px;
  flex-wrap: wrap;
}

.scope-btn {
  padding: 4px 10px;
  font-size: 0.78em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  font-family: var(--site-body-font);
  letter-spacing: 0.02em;
}

.scope-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.85);
}

.scope-btn.is-active {
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a2e;
  border-color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

.scope-btn.is-active:hover {
  background: #fff;
  border-color: #fff;
}

.gallery-scope-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Sits inside .gallery-container, stacked above the image-size controls, so it
     is centred over the grid the same way they are. Wrapping matters: a
     subfamily spanning every realm renders seven pills. */
  justify-content: center;
  margin: 0;
  padding: 12px 0 0 0;
}

.gallery-scope-toggle .scope-btn {
  border-color: rgba(66, 66, 66, 0.24);
  color: #555;
}

.gallery-scope-toggle .scope-btn:hover {
  background: rgba(200, 63, 63, 0.08);
  border-color: rgba(200, 63, 63, 0.45);
  color: #222;
}

.gallery-scope-toggle .scope-btn.is-active {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
}

.gallery-scope-toggle .scope-btn.is-active:hover {
  background: #1a1a2e;
  border-color: #1a1a2e;
}

.sidebar-load-error {
  padding: 8px 16px;
  font-size: 0.82em;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Sidebar toggle button - tab style that sticks out from the left edge */
.close_side-bar {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;

  /* Tab shape - rounded on the right side only */
  width: 36px;
  height: 80px;
  padding: 0;
  border: none;
  border-radius: 0 12px 12px 0;

  /* Styling */
  background: linear-gradient(135deg, #2e2e3a 0%, #3d3d4d 100%);
  box-shadow: 3px 0 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;

  /* Smooth transitions */
  transition: all 0.3s ease;
}

.close_side-bar:hover {
  width: 42px;
  background: linear-gradient(135deg, #c83f3f 0%, #a83232 100%);
  box-shadow: 4px 0 16px rgba(200, 63, 63, 0.3);
}

.close_side-bar:active {
  width: 38px;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}

/* Hide the old image icon */
#side-bar-sammy {
  display: none;
}

/* CSS-based menu icon (three lines) */
.close_side-bar::before,
.close_side-bar::after,
.close_side-bar .menu-icon {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.close_side-bar::before {
  top: 32px;
}

.close_side-bar::after {
  bottom: 32px;
}

.close_side-bar .menu-icon {
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Arrow indicator on the side */
.close_side-bar .arrow-icon {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.close_side-bar:hover .arrow-icon {
  border-left-color: #fff;
  right: 4px;
}






.file-input-label {
  background-color: #e40d0d;
  color: white;
  padding: 12px 24px;
  margin-top: 25px;
  font-family: Arial, sans-serif;
  font-size: 21px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s;
  box-shadow: 2px 2px 4px 1px #1A1A1A;
}

.file-input-label:hover {
  background-color: #a60000;
  /* Darker green background on hover */
}

.file-input-label span {
  pointer-events: none;
  /* Prevents interaction with the span, directing all interaction to the label */
}


#output_image_viewer img {
  height: auto;
  width: 200px;
  border-radius: 5px;
}


#classifier_top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
  min-height: calc(100vh - 150px);
}

#classifier_top h1 {
  justify-content: center;
  text-align: center;
  padding-top: 30px;
}

#classifier_top p {
  max-width: 65vw;
  font-size: 18px;
  text-align: left;
}

#bar_chart {
  background-color: white;
  padding: 1vw;
  margin-bottom: 20px;

}


/* HIDE SIDEBAR WHEN SCREEN IS MEDIUM NARROW */
@media screen and (max-width: 1280px) {

  #predictions_results_div {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
  }

  #output_image_viewer img {
    width: 40vw;
    margin-top: 1vw;
  }

  #bar_chart {
    /* width: 40vw; */
  }

  #bar_chart_image_div {
    display: flex;
    padding-left: 0%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
  }





}



.main_content_index a {
  color: #ce0f0f;
  text-decoration: underline;
  /* font-weight: 600; */
  padding: 1px 2px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}



@media screen and (max-width: 750px) {

  #classifier_top p {
    max-width: 750px;
    font-size: 13px;
    text-align: left;
  }


}


#side_bar_close_button {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 11;
  background-color: transparent;
  background-image: url('https://img.ichsofna.org/close_button.png');
  border: none;
  padding: 0;
}




/* --------------------------------------------------------- */
/*CONTAINER FOR BOTH THE GENUS INFO, DIAGNOSIS AND
THE DIAGNOSIS IMAGES WHICH SHOULD MOVE BELOW THE TEXT AS THE WINDOW
GET SMALLER  */
.genus_container {
  display: flex;
}

/* BIGGER WRAPPER FOR GENUS_CONTAINER */
.top_content {
  flex: 1;
  min-width: 0;
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 48px;
}


/* GENERAL TEXT BUT SPECIFICALLY USED FOR THE GENERIC
TREATMENTS */
.main_content {
  display: block;
  margin: 0 15px;
  color: black;
  font-size: 1em;
  text-align: left;
  text-decoration: none;
  font-family: "apercu-pro", sans-serif;
  max-width: 700px;
  min-width: 100px;
  justify-content: center;
}

/* CONTAINS THE GENERIC DIAGNOSTIC IMAGES */
.genus_figure {
  padding-top: 110px;
  padding-right: 50px;
  padding-left: 50px;
}


/* STYLE THE DIAGNOSIS LIST */
.ul_diagnosis {
  display: block;
  line-height: normal;
  padding-left: 18px;
  margin-top: 20px;
}

/* STYLE THE DIAGNOSIS LIST */
.ul_diagnosis li {
  margin-top: 10px;
}

/* SPACING FOR AUTO-LOADED GENUS CONTENT */
#dynamic_genus_content {
  font-size: var(--base-font-size); /* 18px — larger, more readable body copy */
  line-height: 1.6;
}

#dynamic_genus_content p {
  margin-top: 0.8em;
  margin-bottom: 0;
}

#dynamic_genus_content h3 {
  margin-top: 1.4em;
  margin-bottom: 0.2em;
}

#dynamic_genus_content ul {
  margin-top: 0.4em;
}








/* ---------------------------------------------*/
/* GALLERY AND IMAGES STYLING */


/* GALLERY GRID SET UP AT FULL SCREEN */
.gallery_small {
  display: flex;
  flex-wrap: wrap;
  gap: 5.5px;
  justify-content: left;
  align-items: center;
  margin-top: 20px;
  margin: 0 auto;
  padding-top: 10px;
}


/* GALLERY IMAGES STYLING */
.gallery_image {
  overflow: hidden;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.fig_small_gallery {
  width: 175px;
  height: 155px;
}


/* GALLERY IMAGES BASIC STYLING */
.gallery_image_small {
  width: 175px;
  max-width: 175px;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}


/* Diagnostic images injected from genus_content.html into the right column */
.genus-diagnostic-images {
  margin-top: 20px;
}

.genus-diagnostic-images img {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto 15px;
  cursor: pointer;
}

.genus-diagnostic-images a {
  display: block;
  text-align: center;
}

/* GALLERY IMAGES STYLING */
.genus_image {
  width: 500px;
  height: auto;
  border-radius: 10px;
}

/* ACTUAL IMAGE CARDS */
.fig_small_gallery {
  overflow-x: hidden;
  width: 50vw;
  max-width: 175px;
  border-radius: 8px;
}

/* "more images" mark -- the card's only signal that the lightbox holds detail
   shots as well as the habitus. The count comes from data/image_manifest.json,
   so it is known when the card is built.

   Deliberately not a filled pill: the specimen plate is the data, so this is a
   bare glyph and number. Plate backgrounds sit around mid grey (~148/255), too
   light for black type and too dark for plain white, so legibility comes from a
   tight dark halo rather than from a block of background colour -- the same
   trick subtitles use to survive arbitrary footage. */
.image_box {
  position: relative;
}

.gallery-image-count {
  position: absolute;
  /* Inset off both edges rather than tucked into the corner: the card is
     border-radius 8px, so a tighter inset crowds the curve, and the caption
     sits immediately under the plate. */
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.65);
  /* The thumbnail is the click target; the mark must never eat a click on it. */
  pointer-events: none;
}

.gallery-image-count svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
}

/* The large-card toggle more than doubles the plate (175px -> 375px), so scale
   the mark with it or it shrinks into nothing. */
.fig_small_gallery.gallery-large .gallery-image-count {
  right: 11px;
  bottom: 11px;
  gap: 5px;
  font-size: 14px;
}

.fig_small_gallery.gallery-large .gallery-image-count svg {
  width: 13px;
  height: 13px;
}

.fig_small_gallery:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  outline: 1px solid #70cdff;
  outline-offset: -1px;
}


.filter_panel {
  width: 200px;
  min-width: 200px;
  display: block;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}


#filter_gallery_div>* {
  align-self: flex-start;
}



/* ---------------------------------------------*/
/* GALLERY AND IMAGES STYLING */


/* GALLERY GRID SET UP AT FULL SCREEN */

/* GALLERY IMAGES STYLING */

/* LARGE IMAGE SIZE (toggled via segmented button) */
.fig_small_gallery.gallery-large {
  overflow-x: hidden;
  width: 50vw;
  max-width: 375px;
  height: auto;
}

.gallery_image_small.gallery-large {
  width: 100%;
  max-width: 375px;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.gallery_image_caption.gallery-large {
  font-size: 16px;
}

/* The notes column carries remarks about the name -- status wording, working
   comments -- rather than authorship, so it sits under the caption line and
   stays out of the way of the name it annotates. */
.gallery_caption_note {
  display: block;
  font-size: 0.85em;
  color: #6d675e;
  line-height: 1.35;
  margin-top: 2px;
}


/* Published figures -- plates reproduced from the literature, under the
   specimen gallery on a genus page (JS/published-figures.js). Same card as a
   specimen, but these are multi-panel plates of every shape, so cropping them
   to one window hid the wing panel at the bottom of most of them. Instead the
   whole plate shows in a plain grid of fixed-width columns: each row is as
   tall as its tallest card and the shorter ones leave a gap below. A masonry
   was tried and reverted -- it packed tighter but the alphabetical order
   drifted across rows, which for a species list is the wrong trade. */
.published-figures-intro {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 0.92em;
  line-height: 1.45;
  color: #6d675e;
}

.publications-list.published-figures-sources {
  margin: 0 0 18px;
  max-width: 100%;
}

.published-figures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 230px);
  gap: 12px;
  align-items: start;
  justify-content: start;
  margin-top: 0;
  padding-top: 0;
}

.fig_small_gallery.published-figure {
  width: 230px;
  max-width: 230px;
  height: auto;          /* the specimen card's 155px would clip a portrait plate */
}

.fig_small_gallery.published-figure .gallery_image_small {
  width: 230px;
  max-width: 230px;
  height: auto;          /* aspect-ratio is set inline from the plate's pixel size */
  display: block;
}

@media screen and (max-width: 750px) {
  .published-figures-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .fig_small_gallery.published-figure,
  .fig_small_gallery.published-figure .gallery_image_small {
    width: 100%;
    max-width: 100%;
  }
}

.published-figures-subhead {
  margin: 24px 0 4px;
  font-size: 1em;
  font-weight: 600;
}

.fancybox-caption .published-figure-source {
  display: block;
  margin-top: 4px;
  opacity: 0.8;
}


/* GALLERY IMAGES STYLING */
#genus_image_TOGGLED {
  width: 975px;
  height: auto;
  border-radius: 10px;
}


.gallery_image_TOGGLED {
  height: auto;
  overflow: hidden;
  height: auto;
}

.fig_small_gallery_TOGGLED {
  width: 5px;
  height: 255px;
}


/* GALLERY IMAGES BASIC STYLING */
.gallery_image_small_TOGGLED {
  width: 275px;
  max-width: 375px;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}




/* ACTUAL IMAGE CARDS */
.fig_small_gallery_TOGGLED {
  overflow-x: hidden;
  width: 50vw;
  max-width: 275px;
  border-radius: 8px;
}

.fig_small_gallery:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  outline: 1px solid #70cdff;
  outline-offset: -1px;
}


.filter_panel {
  width: 200px;
  min-width: 200px;
  display: block;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}


#filter_gallery_div>* {
  align-self: flex-start;
}
































/* Key IMAGES STYLING */
.key_image {
  margin-top: 1rem;
  margin-bottom: 1.3rem;
  max-width: 250px;

  /* KEEP HEIGHT TO AUTO TO KEEP THE PROPER ASPECT RATIO */
  height: auto;
  border-radius: 10px;
}


figure {
  background-color: white;
  margin: 0.1em;
  padding-top: 0.001em;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35);
  max-width: 250px;
  border-radius: 10px;
}


.figure_genus {
  background-color: white;
  margin: 0.1em;
  padding-top: 0.001em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);
  max-width: 300px;
  border-radius: 1000px;
}



figcaption {
  text-align: center;
  font-size: 12px;
}



/* BASIC IMAGES IN THE BLOG */
.blog_images {
  padding-top: 20px;
  padding-bottom: 30px;
  width: 400px;
  height: auto;
}

/* WIDER BLOG IMAGE THAT STILL SHRINKS ON NARROW SCREENS */
.blog_images_wide {
  padding-top: 20px;
  padding-bottom: 30px;
  width: 500px;
  max-width: 100%;
  height: auto;
}


.genus_figure {
  justify-content: left;
  padding-left: 50px;
  padding-right: 25px;
  padding-top: 20px;
  border-width: 3px;
}


.side_bar_content {
  display: flex;
}

.btn {
  background: blue;
  -webkit-border-radius: 40px;
  -moz-border-radius: 28px;
  border-radius: 28px;
  font-size: 26;
  padding: 5px;
  color: white;
}

.footer {
  background-color: #2e2e3a;
  color: #b0b5c3;
  border-top: 3px solid #c17b2a;
  padding-top: 3.5rem;
  font-size: 16px;
  line-height: 1.6;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-org-name {
  font-size: 22px;
  font-weight: 700;
  color: #f0f0f5;
  letter-spacing: 0.015em;
  margin-bottom: 0.6rem;
  font-family: 'Noto Serif', serif;
}

.footer-tagline {
  color: #787d8c;
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 320px;
}

.footer-section-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: #c17b2a;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

.footer-citation {
  color: #888e9f;
  font-size: 15.5px;
  line-height: 1.7;
  font-style: italic;
}

.footer-citation a {
  color: #9da3b0;
  text-decoration: none;
}

.footer-citation a:hover {
  color: #f0f0f5;
}

.footer-social-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.footer-social-link,
.footer-email-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #9da3b0;
  text-decoration: none;
  font-size: 15.5px;
  transition: color 0.15s ease;
}

.footer-social-link:hover,
.footer-email-link:hover {
  color: #f0f0f5;
}

.footer-social-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.footer-social-link:hover .footer-social-icon,
.footer-email-link:hover .footer-social-icon {
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 1.1rem 2rem;
  text-align: center;
  font-size: 14px;
  color: #555a67;
  letter-spacing: 0.02em;
}

.blog_content {
  text-align: center;
  align-items: center;
}

.bio_content_flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.bio_content {
  justify-content: center;

  font-size: 1.25rem;
  text-align: left;
  text-indent: 0px;
  line-height: 1.6;
  padding-top: 60px;
  font-family: "apercu-pro";
  max-width: 680px;
  /* min-width: 450px; */
  padding-right: 60px;
  padding-bottom: 50px;
  text-align: left;
}

.bio_content h2 {
  font-size: 26px;
  padding-bottom: 8px;
  border-bottom: 3px solid #c83f3f;
  display: inline-block;
  margin-bottom: 5px;
}

/* Inline text links in bio */
.bio_content a:not(li a) {
  color: #c83f3f;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.bio_content a:not(li a):hover {
  color: #a83232;
  text-decoration-style: solid;
}

.bio_content > li {
  display: inline-block;
  list-style: none;
  margin: 4px 6px 4px 0;
}

.bio_content > li a {
  display: inline-block;
  padding: 6px 14px;
  background: #fdf5f5;
  border: 1px solid #c83f3f;
  border-radius: 20px;
  color: #a33;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.bio_content > li a:hover {
  background: #c83f3f;
  border-color: #a83232;
  color: #fff;
  transform: translateY(-1px);
}

.bio_content > li:not(:has(a)) {
  padding: 6px 14px;
  background: #f8f8f6;
  border: 1px solid #ddd;
  border-radius: 20px;
  color: #555;
  font-size: 14px;
}

/* Divider between bio sections */
.bio_content_flex + .bio_content_flex,
.bio_publications_section + .bio_content_flex {
  border-top: 1px solid #e0e0e0;
  padding-top: 20px;
}

.side_image {
  padding-top: 60px;

}


#bio_image {
  width: 300px;
  height: auto;
  animation: fadeIn 2s;
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12), 0 5px 18px 0 rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.hide_show_button {
  background: #f7f5f1;
  border: 1px solid #ded8ce;
  border-left: 4px solid #b98a39;
  width: 100%;
  height: auto;
  padding: 0.95rem 1rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: #333a40;
  margin-top: 2.25rem;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  font-family: var(--site-body-font);
  border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.hide_show_button::after {
  content: "▾";
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  opacity: 0.4;
}

.hide_show_button:hover {
  cursor: pointer;
  background: #fffaf0;
  border-color: #c7ad7f;
  box-shadow: 0 4px 14px rgba(80, 58, 28, 0.1);
  opacity: 1;
}

.hide_show_button:hover::after,
.hide_show_button:focus-visible::after {
  opacity: 0.85;
}

.hide_show_button:focus-visible {
  outline: 2px solid rgba(185, 138, 57, 0.35);
  outline-offset: 3px;
}

.hide {
  display: none;
  margin-top: 1.25rem;
  margin-bottom: 2.5rem;
}



























/* ----------------------------------------------- */
/* FILTER BAR OPTIONS STYLING */

/* .filter_menu {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-right: 10px;
  max-width: fit-content;
  margin-right: 10px;
} */


#color {
  transition: background-color 0.15s ease-in-out;
  /* Smooth transition for color change */
}

.filter_categories_holder {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #d0d8e8;
  color: #555;
  padding-bottom: 6px;
  overflow: hidden;
}

.filter_categories_holder h3 {
  display: flex;
  background: #1a1a2e;
  color: #fff;
  text-align: center;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin: 0;
}


/* BUTTON THAT SHOWS THE DIFFERENT OPTIONS PER CATEGORY */
.filter_category_button {
  width: 100%;
  background-color: transparent;
  display: flex;
  flex-direction: row;
  border: none;
  border-bottom: 1px solid #eee;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  height: 42px;
  font-weight: 600;
  color: #333;
  padding: 0 12px;
  transition: background-color 0.15s ease;
}

.filter_category_button:hover {
  background-color: #f5f5f5;
}

.filter_category_button::after {
  content: '\25B8';
  font-size: 12px;
  color: #999;
  transition: transform 0.2s ease;
}

.filter_category_button h4 {
  font-size: 16px;
  font-weight: 600;
  padding-left: 0;
  letter-spacing: 0.5px;
}

/* Make the filter category labels (the clickable category h4) use the
   site body sans-serif for clarity. Keep `.filter_option_header` as serif. */
.filter_category_button h4,
#filter_category {
  font-family: var(--site-body-font) !important;
}



.filter_category_button img {
  display: none;
  width: 10px;
}



/* .filter_category_button_2 {
  width: 100%;
  background-color: #e3e3e3;
  border: none;
  color: #585858;
  padding: 4px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-bottom: solid #bebebe;
} */


#color_options {
  /* display: block; */
}

.filter_category_button.checked {
  color: #222;
  background-color: #f0f0f0;
}

.filter_category_button.checked::after {
  transform: rotate(90deg);
}

#button_category {
  text-align: left;
  color: #dddddd;
}

.filter_options_holder {
  display: none;
  max-height: 500px;
  overflow-y: auto;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  padding: 4px 0;
  background: #fff;
  border-bottom: 1px solid #e0e5ef;
}

/* Category name */
.filter_option_header {
  margin: 8px 0 4px;
  padding: 0 12px;
  font-size: 13px;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  font-weight: 600;
  color: #222;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.radio_container {
  margin-bottom: 4px;
}

.radio_container .radio_label {
  display: block;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  margin: 0;
  width: 100%;
}

.radio_label {
  display: block;
  cursor: pointer;
  font-size: 15px;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  color: #333;
  padding: 6px 12px;
  border-radius: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.radio_container .radio_label:hover {
  background-color: #eae9f0;
  color: #1a1a2e;
}

.radio_input:checked+.radio_label {
  background-color: #1a1a2e;
  color: #fff;
}



.filter_category:disabled {
  /* background-color: #ccc; */
  /* color: #666; */
  cursor: not-allowed;
}

/* Ensuring the scroll bar is visually appealing and works well across browsers */
::-webkit-scrollbar {
  width: 8px;
  /* Scrollbar width */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  /* Track color */
}

::-webkit-scrollbar-thumb {
  background: #888;
  /* Thumb color */
}

::-webkit-scrollbar-thumb:hover {
  /* background: #555; */
  /* Thumb hover color */
}






/* Needed to make sure no space between radio_labels */
.radio_input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}




/* HIDE SIDEBAR WHEN SCREEN IS MEDIUM NARROW */
/* Only hide the sidebar on narrow viewports (match JS behavior) */
@media screen and (max-width: 1015px) {
  .side-bar {
    display: none;
    /* When toggled visible, show as fullscreen overlay */
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    overflow-y: auto;
    padding-top: 60px;
  }

  .side-bar a {
    font-size: 16px;
    padding: 12px 16px 12px 24px;
  }

  .side-bar h2 {
    font-size: 14px;
    padding: 20px 16px 10px 16px;
  }

  .side_bar_link {
    padding-left: 32px;
  }

  .side-bar-links {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }

  #side_bar_close_button {
    display: block;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 10001;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease;
  }

  #side_bar_close_button:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }

  #side_bar_close_button img {
    filter: brightness(0) invert(1);
    width: 24px;
    height: 24px;
  }

  .close_side-bar {
    display: block;
  }

  .filter_panel {
    width: 180px;
    min-width: 180px;
  }

}








/* ---------------------------------------------------------------------- */
/* SECOND NAVIGAYION WITH THE FILTER STUFF AND THE
NEW VERSION OF THE SIDE BAR */

.right_main {
  z-index: 2;
  justify-items: space-between;
  flex-grow: 1;
  min-height: 1000px;
}


/* Old close_side-bar styles removed - now using tab-style button defined above */

#close_button_img {
  max-width: 35px;
  opacity: 50%;
}

@media screen and (max-width: 650px) {
  /* Tab button adjustments for very narrow screens */
  .close_side-bar {
    height: 70px;
    width: 32px;
  }

  .close_side-bar::before {
    top: 26px;
  }

  .close_side-bar::after {
    bottom: 26px;
  }

  #close_button_img:hover {
    background-color: #bcbcbc;
    border-radius: 20px;
    cursor: pointer;
  }

  #side_bar_close_button {
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1;
    border: none;
    padding: 0;
  }
}



#filterable_list {
  padding-left: 20px;
}

.clear_button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border: 1px solid #c8c4bc;
  font-size: 12px;
  letter-spacing: 0.5px;
  font-weight: 600;
  width: calc(100% - 16px);
  margin: 8px auto 4px;
  color: #5a5650;
  height: 34px;
  background-color: #fff;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border-radius: 6px;
  cursor: pointer;
}

.clear_button::before {
  content: '\21BA';
  font-size: 16px;
}

.clear_button:hover {
  background-color: #f0ede8;
  border-color: #a09a90;
  color: #1a1a2e;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#map {
  margin: 25px auto 30px;
  height: 400px;
  width: 550px;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
  border-radius: 10px;
  overflow: hidden;
}

/* Auto-generated genus pages: the map is a float, not a column.

   As two flex columns the account was locked into 680px for its whole length,
   and everything below the map's bottom edge -- which is most of a Townes
   treatment -- ran down the left with 500px of empty page beside it. Floating
   the figure lets the prose set beside it and then close up underneath, so the
   page has one text block instead of a column and a hole. The figure has to
   come first in the source for that (a float only wraps content after it),
   which is why the h1 now sits above both rather than inside .main_content.

   The catch, and the reason for the flow-root rules further down: line boxes
   wrap around a float but block boxes do not. Anything in the account with a
   background or a border -- the treatment's summary bar, the citation card --
   would slide under the map unless it makes its own formatting context, which
   is what display: flow-root does. Backgroundless prose is left alone, because
   that is exactly the part that should flow. */
.genus-auto-layout {
  display: flow-root;
}

.genus-auto-layout > .title_genus_page {
  /* .main_content's own 15px, restated: the title used to live inside it. */
  margin-left: 15px;
  margin-right: 15px;
}

.genus-auto-layout > .main_content {
  /* No column width any more. Capped only so the lines that run full width
     under the map do not turn into 130-character measures on a wide screen. */
  max-width: 1100px;
  min-width: 0;
  margin: 0 15px;
}

.genus-auto-layout .genus_figure {
  float: right;
  width: min(48%, 760px);
  box-sizing: border-box;
  /* No top padding, and none on the map either: the float and the account both
     start at the same flow position, so anything above the map drops it below
     the first line of text it is meant to sit level with. */
  padding-top: 0;
  padding-right: 30px;
  padding-left: 30px;
}

/* The blocks that must not slide under the float. */
.genus-auto-layout .genus-monograph-details > summary,
.genus-auto-layout .genus-monograph-citation,
.genus-auto-layout table,
.genus-auto-layout figure,
.genus-auto-layout blockquote {
  display: flow-root;
}

/* The plate grid is left out of the list above on purpose: a grid container
   already refuses to overlap a float, and forcing display:flow-root on it
   dropped every thumbnail onto its own line. */

.genus-auto-layout #map {
  width: 100%;
  max-width: 700px;
  height: 420px;
  margin: 0 auto 30px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.13);
}

/* Under the map of an undescribed genus: the records are BRC's specimens, not
   the literature. The map keeps its bottom margin, so the note pulls up into it. */
.map-provenance-note {
  margin: -18px auto 30px;
  max-width: 700px;
  font-size: 13px;
  line-height: 1.45;
  color: #6b6b6b;
  text-align: center;
}

#map_point {
  /* cool way to center a div no matter what's
  goin on with the parent */
  margin: 0 auto;
  margin-top: 25px;
  height: 500px;
  width: 800px;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
}

#map_point_container {
  display: flex;
  flex-direction: row;
}

#map_radio_buttons {
  padding-left: 100px;
}

/* ================= GUIDE PAGE DISTRIBUTION MAP ================= */
/* Larger map for subfamily guide pages */
#distribution-panel #map {
  width: 90%;
  max-width: 900px;
  height: 500px;
  margin: 30px auto;
  border-radius: 8px;
}

/* Even larger on wide screens */
@media screen and (min-width: 1200px) {
  #distribution-panel #map {
    max-width: 1000px;
    height: 550px;
  }
}

/* Responsive for tablets */
@media screen and (max-width: 900px) {
  #distribution-panel #map {
    width: 95%;
    height: 450px;
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  #distribution-panel #map {
    width: 100%;
    height: 350px;
  }
}

/* ================= DISTRIBUTION INTEGRATED LAYOUT ================= */

.distribution-integrated {
  padding: 30px 3%;
  max-width: 1300px;
  margin: 0 auto;
}

.distribution-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3rem;
  align-items: start;
}

/* Left side - Map + Tabs */
.distribution-map-side {
  position: sticky;
  top: 20px;
  max-width: 550px;
}

.distribution-map-side #map {
  margin: 0;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

/* Right side - Text */
.distribution-text-side {
  padding-top: 10px;
}

.distribution-text-side h2 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 1rem;
  margin-top: 0;
}

.distribution-intro {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #424242;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.distribution-text-side p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #424242;
  margin-bottom: 1.25rem;
}

/* Region tabs */
.region-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.region-tab {
  padding: 0.6rem 1.2rem;
  border: 2px solid #4a7c59;
  background: white;
  color: #4a7c59;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.region-tab:hover {
  background: #f0f7f2;
}

.region-tab.active {
  background: #4a7c59;
  color: white;
}

/* Region detail panels */
.region-details {
  min-height: 140px;
}

.region-detail {
  display: none;
  animation: fadeInRegion 0.3s ease;
}

.region-detail.active {
  display: block;
}

.region-detail h4 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-bottom: 0.5rem;
}

.region-detail p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

@keyframes fadeInRegion {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Caveat banner */
.distribution-caveat {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: #fffbeb;
  border-radius: 8px;
  border: 1px solid #f0e6c8;
  font-size: 0.9rem;
  color: #6b5c3e;
  line-height: 1.5;
}

.caveat-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Responsive: Stack on smaller screens */
@media screen and (max-width: 1000px) {
  .distribution-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .distribution-map-side {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  .distribution-text-side h2 {
    text-align: center;
  }

  .distribution-intro {
    text-align: center;
  }

  .region-tabs {
    justify-content: center;
  }

  .region-details {
    text-align: center;
  }

  .distribution-caveat {
    justify-content: center;
    text-align: center;
  }
}

@media screen and (max-width: 500px) {
  .distribution-integrated {
    padding: 20px 2%;
  }

  .region-tab {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }

  .distribution-text-side h2 {
    font-size: 1.5rem;
  }
}

/* ================= END DISTRIBUTION INTEGRATED LAYOUT ================= */


@media screen and (max-width: 950px) {

  .genus_container {
    display: flex;
    flex-direction: column;
  }

  /* DIV BOX TO CONTAIN THE GENERIC DIAGNOSTIC IMAGES */
  .genus_figure {
    padding-top: 160px;
    margin: auto auto;
  }

  .main_content {
    padding-top: 20px;
    padding-left: 18px;
    margin-right: 18px;
    max-width: 90%;
  }

  .genus_figure {
    padding-left: 20px;
    padding-top: 20px;
    border-width: 2px;
  }

  .main_content_wo_sidebar {
    padding-top: 20px;
    max-width: 450px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
  }

  .main_content_wo_sidebar_blog_pages {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }



  /* EDIT BASIC IMAGES IN THE BLOG */
  .blog_images {
    padding-bottom: 30px;
    width: 200px;
    height: auto;
  }


  .genus_image {
    max-width: 350px;
    height: auto;
    border-radius: 10px;
    margin: 0 10px;
  }

  .genus-diagnostic-images img {
    max-width: 350px;
  }

  /* All genus pages: make figure + map full-width in stacked column layout */
  .genus_container .genus_figure {
    flex: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  .genus_container #map {
    width: 100% !important;
    max-width: 100% !important;
    height: 340px;
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Auto-generated genus pages: one column, so the map stops floating and the
     account simply follows it. */
  .genus-auto-layout .genus_figure {
    float: none;
    width: 100%;
  }
  .genus-auto-layout > .title_genus_page {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  .genus-auto-layout > .main_content {
    flex: none;
    max-width: 100%;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
  }
}
















/* ------------------------------------------------ */
/* ADJUST FOR BIO CONTENT */

@media screen and (max-width:1145px) {

  .bio_content_flex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .bio_content {
    text-align: left;
    font-family: "apercu-pro";
    max-width: 92%;
    padding: 0%;
    margin: 10% 2% 0 2%;
    align-items: center;

  }

  .bio_content .ul_diagnosis {
    font-size: 14px;
  }

  #bio_image {

    max-width: 90%;
    padding: 0 4%;
  }

  #side_bar_close_button {
    display: block;
    position: absolute;
    top: 0px;
    right: 5px;
    z-index: 11;
    background-color: transparent;
    border-radius: 30px;
    max-height: 35px;
  }

  #side_bar_close_button:hover {
    background-color: #c7c7c7;
  }
}


















/* FOOTER RESPONSIVE */
@media screen and (max-width: 640px) {
  .footer {
    padding-top: 1.75rem;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1.25rem 1.5rem;
  }

  #map {
    width: 350px;
  }
}




@media screen and (max-width: 460px) {

  body {
    background-color: rgb(255, 255, 255);
  }

  #map {
    width: 350px;

  }

  /* MAIN TITLE */
  .main_title {
    height: 80px;
    font-size: 35px;
    padding-top: 10px;
    /* background-color: #000; */
  }


  .side_bar_content {
    display: flex;
    flex-direction: column;

  }


  .main_content_wo_sidebar {
    /* Gives a little padding on the right and left so text
  isn't right at screen edges */
    max-width: 97%;
  }


}


@media screen and (max-width: 570px) {
  #side_bar_close_button {
    display: block;
  }

  .filterable_list:hover #structure_other {
    background-color: rgb(168, 168, 168);
    right: 50px;
    display: block;
    position: absolute;

  }

}


/* Necessary for changing the color of the clicked buttons */
.color-change {
  background-color: #112733;
  background-color: #737373;
  color: white;
}

/* Section header open state */
.hide_show_button.color-change {
  background: var(--section-toggle-active-bg);
  color: var(--section-toggle-active-text);
  border-color: var(--section-toggle-active-border);
  box-shadow: inset 4px 0 0 var(--section-toggle-active-accent);
  border-radius: 8px;
  opacity: 1;
}

.hide_show_button.color-change::after {
  content: "▴";
  color: var(--section-toggle-active-accent);
  opacity: 0.95;
}

.hide_show_button.color-change:hover {
  opacity: 1;
}

.color-change-2 {
  color: white;
  background-color: #737373;
  background-color: #112733;
}

s .side_bar_arrow {
  width: 15px;
}

h2 {
  color: #000;
  text-align: center;
  font-size: 26 px;
}

/* ============================================
   TABS - Modern underline indicator style
   ============================================ */

.warpper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 0 1rem;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 0;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: transparent;
  border: none;
  transition: color 0.15s ease, background-color 0.15s ease, font-weight 0.1s ease;
  white-space: nowrap;
  min-width: max-content;
}

/* Underline indicator - hidden by default */
.tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #c83f3f 0%, #a83232 100%);
  border-radius: 3px 3px 0 0;
  transition: width 0.15s ease;
}

.tab:hover {
  color: #333;
  background-color: rgba(200, 63, 63, 0.06);
}

.tab:hover::after {
  width: 60%;
}

/* Responsive: stack tabs on smaller screens */
@media screen and (max-width: 850px) {
  .tabs {
    gap: 2px;
    padding: 0 0.5rem;
  }

  .tab {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media screen and (max-width: 550px) {
  .tabs {
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
  }

  .tab {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 6px;
    background: #f5f5f5;
  }

  .tab::after {
    display: none;
  }

  .tab:hover {
    background: #e8e8e8;
  }
}

.panels {
  padding-top: 20px;
  min-height: 200px;
  width: 100%;
}

.panel {
  padding-top: 10px;
  display: none;
  margin: 0 15px;
  animation: fadein 0.2s ease-out;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-title {
  font-size: 1.5em;
  font-weight: bold;
}

.radio {
  display: none;
}

/* Display the right panel if button checked */
#four:checked~.panels #four-panel,
#gallery:checked~.panels #gallery-panel,
#introduction:checked~.panels #introduction-panel,
#morphology:checked~.panels #morphology-panel,
#distribution:checked~.panels #distribution-panel,
#diagnosis:checked~.panels #diagnosis-panel,
#five:checked~.panels #five-panel,
#genericKey:checked~.panels #genericKey-panel,
#six:checked~.panels #six-panel,
#seven:checked~.panels #seven-panel,
#eight:checked~.panels #eight-panel,
#nine:checked~.panels #nine-panel,
#ten:checked~.panels #ten-panel,
#publications:checked~.panels #publications-panel,
#twelve:checked~.panels #twelve-panel {
  display: block;
}

/* Active tab styling - full underline indicator */
#four:checked~.tabs #four-tab,
#gallery:checked~.tabs #gallery-tab,
#introduction:checked~.tabs #introduction-tab,
#morphology:checked~.tabs #morphology-tab,
#distribution:checked~.tabs #distribution-tab,
#three:checked~.tabs #three-tab,
#diagnosis:checked~.tabs #diagnosis-tab,
#five:checked~.tabs #five-tab,
#genericKey:checked~.tabs #genericKey-tab,
#six:checked~.tabs #six-tab,
#seven:checked~.tabs #seven-tab,
#eight:checked~.tabs #eight-tab,
#nine:checked~.tabs #nine-tab,
#ten:checked~.tabs #ten-tab,
#publications:checked~.tabs #publications-tab,
#twelve:checked~.tabs #twelve-tab,
#thirteen:checked~.tabs #thirteen-tab {
  color: #c83f3f;
  font-weight: 600;
}

#four:checked~.tabs #four-tab::after,
#gallery:checked~.tabs #gallery-tab::after,
#introduction:checked~.tabs #introduction-tab::after,
#morphology:checked~.tabs #morphology-tab::after,
#distribution:checked~.tabs #distribution-tab::after,
#three:checked~.tabs #three-tab::after,
#diagnosis:checked~.tabs #diagnosis-tab::after,
#five:checked~.tabs #five-tab::after,
#genericKey:checked~.tabs #genericKey-tab::after,
#six:checked~.tabs #six-tab::after,
#seven:checked~.tabs #seven-tab::after,
#eight:checked~.tabs #eight-tab::after,
#nine:checked~.tabs #nine-tab::after,
#ten:checked~.tabs #ten-tab::after,
#publications:checked~.tabs #publications-tab::after,
#twelve:checked~.tabs #twelve-tab::after,
#thirteen:checked~.tabs #thirteen-tab::after {
  width: 100%;
}

/* Mobile active state - filled background instead of underline */
@media screen and (max-width: 550px) {
  #four:checked~.tabs #four-tab,
  #gallery:checked~.tabs #gallery-tab,
  #introduction:checked~.tabs #introduction-tab,
  #morphology:checked~.tabs #morphology-tab,
  #distribution:checked~.tabs #distribution-tab,
  #three:checked~.tabs #three-tab,
  #diagnosis:checked~.tabs #diagnosis-tab,
  #five:checked~.tabs #five-tab,
  #genericKey:checked~.tabs #genericKey-tab,
  #six:checked~.tabs #six-tab,
  #seven:checked~.tabs #seven-tab,
  #eight:checked~.tabs #eight-tab,
  #nine:checked~.tabs #nine-tab,
  #ten:checked~.tabs #ten-tab,
  #publications:checked~.tabs #publications-tab,
  #twelve:checked~.tabs #twelve-tab,
  #thirteen:checked~.tabs #thirteen-tab {
    background: linear-gradient(135deg, #c83f3f 0%, #a83232 100%);
    color: #fff;
  }
}

.hidden {
  display: none;
}

#five-panel,
#three-panel,
#introduction-panel,
#seven-panel {
  max-width: 80vw;
  margin: 0 auto;
  font-size: 18px;
  color: #424242;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 10px;
}


@media screen and (max-width: 880px) {
  .tabs {
    justify-content: center;
    align-content: center;
  }
}


/* --------------------------------------------------------------------------------- */
/* MAP SYTLING */

.info {
  position: relative;
  padding: 6px 8px;
  /* font: 14px/16px Arial, Helvetica, sans-serif; */
  font-family: "apercu-pro";
  background: white;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  max-height: 300px;
  overflow-y: auto;
}

/* Larger info panel for guide page maps */
#distribution-panel .info {
  max-height: 400px;
  min-width: 220px;
}

.info h4 {
  margin: 0 0 5px;
  color: #1a1a1a;
}

.species-list {
  margin: 5px 0;
  padding-left: 20px;
  font-size: 0.9em;
}

.species-list li {
  margin: 2px 0;
}

/* Nomenclature species list styles */
.nomenclature-species {
  margin-bottom: 0.5em;
  padding-left: 0;
}

.nomenclature-species-name {
  font-size: 1em;
}

.nomenclature-orig-genus {
  color: #666;
  font-size: 0.9em;
}

.nomenclature-annotation {
  color: #888;
  font-size: 0.85em;
  font-style: italic;
}
.nomenclature-annotation-plazi {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
  color: #fff;
  background: #4a6ea8;
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  line-height: 1.6;
  cursor: default;
  text-transform: uppercase;
}

/* Species list data indicator badges */
.nom-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.05em;
  border-radius: 3px;
  padding: 1px 5px;
  vertical-align: middle;
  line-height: 1.6;
  cursor: default;
  text-transform: uppercase;
  margin-left: 4px;
  opacity: 0.85;
}
.nom-badge--plazi {
  color: #fff;
  background: #6b5ea8;
}
.nom-badge--gbif {
  color: #fff;
  background: #2e7d32;
}
.nom-badge--zoobank {
  color: #fff;
  background: #b5651d;
  text-decoration: none;
}
.nom-badge--pensoft {
  color: #fff;
  background: #2a7db5;
}
.nom-badge--holotype {
  color: #fff;
  background: #a33a3a;
}

.nomenclature-synonyms {
  list-style: none;
  margin: 0.2em 0 0.3em 1.5em;
  padding: 0;
  font-size: 0.9em;
  color: #555;
}

.nomenclature-synonym {
  margin: 0.1em 0;
}

.nomenclature-subspecies-list {
  list-style: none;
  margin: 0.2em 0 0 1.5em;
  padding: 0;
}

.nomenclature-subspecies {
  margin: 0.2em 0;
  font-size: 0.95em;
}

.nomenclature-genus-synonyms {
  margin-bottom: 1em;
  padding: 0.5em;
  background: #f8f8f8;
  border-left: 3px solid #ccc;
}

.nomenclature-genus-synonyms h4 {
  margin: 0 0 0.3em 0;
  font-size: 0.95em;
  color: #555;
}

.nomenclature-genus-synonyms ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nomenclature-genus-synonyms li {
  margin: 0.2em 0;
  font-size: 0.9em;
  color: #555;
}

.nomenclature-subgenus {
  margin: 1.5em 0 0.5em 0;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #ddd;
  color: #444;
}

.nomenclature-region-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.nomenclature-region-btn {
  padding: 5px 14px;
  font-size: 0.88em;
  border: 1px solid #d0d0d0;
  border-radius: 20px;
  background: #fff;
  color: #555;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.nomenclature-region-btn:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

.nomenclature-region-btn.is-active {
  background: #2e2e2e;
  color: #fff;
  border-color: #2e2e2e;
}

.nomenclature-region-btn.is-active:hover {
  background: #444;
  border-color: #444;
}

/* Region search filter */
.nomenclature-region-search-wrapper {
  position: relative;
  margin-bottom: 16px;
  background: #eef3f8;
  border: 1px solid #c4d0dc;
  border-radius: 8px;
  padding: 8px;
}

.nomenclature-region-search-row {
  display: flex;
  align-items: center;
  border: 1.5px solid #8aaabf;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Magnifying-glass icon prefix */
.nomenclature-region-search-row::before {
  content: '\229d';
  font-size: 1.05em;
  color: #8aaabf;
  padding: 0 4px 0 9px;
  flex-shrink: 0;
  line-height: 1;
  pointer-events: none;
}

.nomenclature-region-search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px 8px;
  font-size: 0.88em;
  font-family: var(--site-body-font, inherit);
  background: transparent;
  color: #333;
  min-width: 0;
}

.nomenclature-region-search-input::placeholder {
  color: #9aacb8;
}

.nomenclature-region-search-clear {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px 9px;
  color: #9aacb8;
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}

.nomenclature-region-search-clear:hover {
  color: #4a6a80;
}

/* Dropdown aligns with input row, inside wrapper padding */
.nomenclature-region-search-dropdown {
  position: absolute;
  top: calc(100% - 8px);
  left: 8px;
  right: 8px;
  background: #fff;
  border: 1.5px solid #8aaabf;
  border-top: none;
  border-radius: 0 0 5px 5px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.nomenclature-region-search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.88em;
  font-family: var(--site-body-font, inherit);
}

.nomenclature-region-search-item:hover,
.nomenclature-region-search-item:focus {
  background: #e8f2f8;
  outline: none;
}

.nrs-item-name {
  color: #333;
}

.nrs-item-count {
  color: #8aaabf;
  font-size: 0.9em;
  flex-shrink: 0;
  margin-left: 8px;
}

@media (max-width: 750px) {
  .nomenclature-region-search-input {
    font-size: 0.92em;
    padding: 8px 8px;
  }
}

.nomenclature-species-trigger {
  cursor: pointer;
  width: fit-content;
  padding: 3px 6px;
  margin: -3px -6px;
  border-radius: 4px;
  transition: background-color 120ms ease;
  touch-action: manipulation; /* prevent 300ms tap delay on mobile */
}

.nomenclature-species-trigger:hover {
  background-color: #f5f5f5;
}

.nomenclature-species-name-link {
  border-bottom: 1px dotted #888;
}

.nomenclature-species-name-link.has-image {
  color: #2f6f6a;
}

.nomenclature-species-name-link.has-image em {
  color: #2f6f6a;
}

.nomenclature-species-citation.has-image {
  color: #2f6f6a;
}

.nomenclature-species-trigger:focus {
  outline: 2px solid #91b7ff;
  outline-offset: 2px;
}

.nomenclature-hover-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3200;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.nomenclature-hover-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.nomenclature-hover-card {
  /* This card's own map palette, overriding the site defaults for its subtree.
     nomenclature.js reads these off the card, so the Leaflet layer and the keys'
     SVG card can differ in colour while sharing one vocabulary. The crimson, the
     near-black outlines that keep two lit states apart, and the white land are the
     values this map has always used, in both themes. */
  --map-land: #efefef;
  --map-land-line: #5f5f5f;
  --map-present: #cf3e4c;
  --map-present-line: #303030;

  /* The card's own type scale. Everything inside it is sized from this one
     number -- the em-based rules inherit it, and the rules that want a fixed
     step down (the nomenclature apparatus, the Plazi and monograph blocks) say
     so as a multiple of it rather than in bare px. The card is a reading
     surface, not a tooltip, so it is set a little larger than the page's own
     body copy, and there is a single value to change if that is ever wrong. */
  --hover-fs: 20px;
  font-size: var(--hover-fs);

  position: fixed;
  z-index: 2500;
  /* Percentages, not vw: this card is position:fixed, so a percentage is a share
     of the viewport at any zoom -- see the note beside the root zoom above. */
  width: min(50%, 700px);
  max-width: calc(100% - 24px);
  padding: 0 12px 12px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  max-height: calc(100% - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease, border-color 150ms ease;
}

.nomenclature-hover-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nomenclature-hover-card.is-pinned {
  pointer-events: auto;
  z-index: 3500;
  border-color: #a0a0a0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

/* A pinned card is a reading surface, not a tooltip: habitus plates, a
   distribution map, the nomenclature and a monograph treatment all stacked in
   it. At 800px the plates came out postage-stamp sized and everything below
   the fold was scroll. */
@media screen and (min-width: 751px) {
  .nomenclature-hover-card.is-pinned {
    width: min(78%, 1080px);
    max-width: calc(100% - 48px);
    max-height: 92%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.32);
  }
  .nomenclature-hover-card.is-pinned.is-large {
    width: min(86%, 1240px);
  }
}

.nomenclature-hover-card.is-large {
  width: min(50%, 700px);
  max-width: calc(100% - 24px);
}

/* The card scrolls internally, and the title used to scroll away with it —
   leaving a long species card with no visible indication of which species you
   were reading, right above the page's own list of other species. Pinning it
   to the top of the scrollport keeps the name on screen.

   The negative margins bleed the header over the card's 12px padding so
   content scrolling underneath is fully covered. */
.nomenclature-hover-header {
  position: sticky;
  top: 0;
  /* Above anything inside the card that ships its own stacking order. The map
     is contained separately, but Leaflet-style z-indexes are common enough in
     embedded widgets that the header should not depend on that alone. */
  z-index: 1100;
  /* Horizontal bleed only. A negative top margin would shift the sticky
     margin box and leave a 12px strip of card padding above the header for
     content to scroll through. */
  margin: 0 -12px;
  padding: 12px 12px 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #ececec;
}

[data-theme="dark"] .nomenclature-hover-header {
  background: #1a1c2e;
  border-bottom-color: #282a44;
}

.nomenclature-hover-title {
  font-size: 1.05em;
  padding-right: 40px;
}

.nomenclature-hover-count {
  margin-top: 4px;
  font-size: 0.95em;
  color: #5a5a5a;
  padding-right: 40px;
}

/* --- Habitus images (now above map) --- */

.nomenclature-hover-images {
  margin-top: 8px;
}

.nomenclature-hover-images h5 {
  margin: 0 0 4px 0;
  font-size: 0.98em;
  color: #2e2e2e;
}

.nomenclature-habitus-grid {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.nomenclature-habitus-card {
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  /* Grow to share the row rather than sitting at a fixed width -- these are
     the determination images, and on a pinned card there is width going spare
     beside them. Capped so a species with only a female does not blow one
     plate up to the full card. */
  flex: 1 1 0;
  min-width: 0;
  max-width: 420px;
}

.nomenclature-habitus-card a {
  display: block;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background: #e8e8e8;
}

.nomenclature-habitus-card img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  border-radius: 6px 6px 0 0;
  transition: filter 200ms ease, transform 200ms ease;
}

.nomenclature-habitus-card a:hover img {
  filter: brightness(1.06);
  transform: scale(1.03);
}

.nomenclature-habitus-card figcaption {
  margin: 0;
  padding: 4px 0;
  text-align: center;
  font-size: 0.75em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #777;
  background: #f7f7f7;
  border-radius: 0 0 6px 6px;
}

.nomenclature-habitus-extra {
  display: none;
}

/* --- Map --- */

.nomenclature-hover-map {
  position: relative;
  z-index: 0;
  margin-top: 8px;
  width: 100%;
  /* Golden-ratio proportions: height = width ÷ 1.6 */
  aspect-ratio: 8 / 5;
  height: auto;
  max-height: 420px;
  min-height: 160px;
  border: 1px solid #dbdbdb;
  border-radius: 8px;
  overflow: hidden;
  touch-action: pan-y;
}

.nomenclature-hover-card.is-large .nomenclature-hover-map {
  max-height: 470px;
}

.nomenclature-hover-map-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-size: 0.85em;
  background: #f4f4f4;
}

/* --- GBIF occurrence map dots --- */

.gbif-occurrence-dot {
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.5));
}

/* --- GBIF occurrence toggle row --- */

.nomenclature-hover-gbif-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 2px;
    font-size: 0.82em;
    flex-wrap: wrap;
}

.nomenclature-hover-gbif-toggle-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #444;
    user-select: none;
}

.nomenclature-hover-gbif-toggle-warning {
    color: #9a6b00;
    font-style: italic;
}

/* --- Distribution pills --- */

.nomenclature-hover-regions {
  margin-top: 8px;
  max-height: 205px;
  overflow-y: auto;
  font-size: 0.92em;
  color: #4a4a4a;
}

.nomenclature-hover-regions h5 {
  margin: 0 0 6px 0;
  font-size: 0.98em;
  color: #2e2e2e;
}

.nomenclature-hover-card.is-large .nomenclature-hover-regions {
  max-height: 360px;
}

.nomenclature-hover-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.nomenclature-hover-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.82em;
  line-height: 1.4;
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  border-radius: 12px;
  color: #3a3a3a;
  white-space: nowrap;
}

/* A region pill backed by published records: dotted underline marks it as
   hoverable, the superscript counts the papers behind it. */
button.nomenclature-hover-pill {
  font: inherit;
  font-size: 0.82em;
  line-height: 1.4;
}

.nomenclature-hover-pill.has-refs {
  cursor: pointer;
  border-bottom-style: dashed;
  border-bottom-color: #a9a9b4;
}

.nomenclature-hover-pill.has-refs:hover,
.nomenclature-hover-pill.has-refs:focus-visible {
  background: #e4e8f0;
  border-color: #b6c0d2;
}

.nomenclature-hover-pill.is-open {
  background: #33465f;
  border-color: #33465f;
  color: #fff;
}

.nomenclature-hover-pill.is-open .nomenclature-pill-count {
  color: #c8d4e6;
}

.nomenclature-pill-refs {
  margin-top: 6px;
  padding: 7px 9px;
  font-size: 0.85em;
  line-height: 1.4;
  color: #55555f;
  background: #f6f7f9;
  border-left: 2px solid #d3dae6;
  border-radius: 0 4px 4px 0;
}

.nomenclature-pill-refs[hidden] {
  display: none;
}

.nomenclature-pill-refs-head {
  font-weight: 600;
  color: #3a3a44;
  margin-bottom: 3px;
}

.nomenclature-pill-refs ul {
  margin: 0;
  padding-left: 15px;
}

.nomenclature-pill-refs li {
  margin: 0 0 3px 0;
}

[data-theme="dark"] .nomenclature-hover-pill.has-refs:hover,
[data-theme="dark"] .nomenclature-hover-pill.has-refs:focus-visible {
  background: #262a45;
  border-color: #40446a;
}

[data-theme="dark"] .nomenclature-hover-pill.is-open {
  background: #4a5480;
  border-color: #4a5480;
  color: #fff;
}

[data-theme="dark"] .nomenclature-pill-refs {
  color: #a8a8c0;
  background: #17192a;
  border-left-color: #343858;
}

[data-theme="dark"] .nomenclature-pill-refs-head {
  color: #c8c8da;
}

.nomenclature-pill-count {
  margin-left: 3px;
  font-size: 0.78em;
  vertical-align: super;
  line-height: 1;
  color: #7a7a86;
}

[data-theme="dark"] .nomenclature-hover-pill.has-refs {
  border-bottom-color: #4a4c68;
}

[data-theme="dark"] .nomenclature-pill-count {
  color: #8a8aa8;
}

.nomenclature-hover-regions ul {
  margin: 0;
  padding-left: 18px;
}

.nomenclature-hover-regions li {
  margin: 0.1em 0;
}

.nomenclature-hover-regions p {
  margin: 0;
}

/* --- Hosts --- */

.nomenclature-hover-hosts {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e2e2;
  font-size: 0.9em;
  color: #3f3f3f;
}

.nomenclature-hover-hosts h5 {
  margin: 0 0 4px 0;
  font-size: 0.98em;
  color: #2e2e2e;
}

.nomenclature-hover-hosts p {
  margin: 2px 0;
  line-height: 1.3;
}

.nomenclature-hover-card.is-large .nomenclature-hover-hosts {
  font-size: 0.95em;
}

/* Host records: one row per record so each citation stays with its own
   record, grouped under the host family. */
.nomenclature-hover-hostcount {
  font-weight: normal;
  font-size: 0.85em;
  color: #7a7a7a;
}

.nomenclature-hostgroup {
  margin: 5px 0 0 0;
}

.nomenclature-hostgroup-name {
  font-weight: 600;
  font-size: 0.92em;
  color: #2e2e2e;
}

ul.nomenclature-hostrecords {
  margin: 1px 0 0 0;
  padding-left: 14px;
  list-style: none;
}

li.nomenclature-hostrecord {
  margin: 1px 0;
  line-height: 1.35;
  text-indent: -8px;
  padding-left: 8px;
}

li.nomenclature-hostrecord::before {
  content: "\2013\00a0";
  color: #b0b0b0;
}

.nomenclature-host-unnamed {
  color: #8a8a8a;
  font-style: italic;
}

.nomenclature-host-plant {
  font-size: 0.85em;
  color: #6f7f5f;
}

[data-theme="dark"] .nomenclature-host-plant {
  color: #8fa87f;
}

.nomenclature-cite {
  font-size: 0.85em;
  color: #6b6b6b;
  white-space: nowrap;
}

/* Hover preview of a full reference.  Fixed to the viewport so the card's
   own scroll container cannot clip it; never a hover target itself. */
.nomenclature-cite-tooltip {
  position: fixed;
  z-index: 2600;
  max-width: min(460px, calc(100% - 24px));
  padding: 8px 10px;
  font-size: 0.82em;
  line-height: 1.45;
  color: #3a3a44;
  background: #ffffff;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.nomenclature-cite-tooltip[hidden] {
  display: none;
}

.nomenclature-cite-tooltip ul {
  margin: 0;
  padding-left: 15px;
}

.nomenclature-cite-tooltip li {
  margin: 0 0 4px 0;
}

.nomenclature-cite-tooltip li:last-child {
  margin-bottom: 0;
}

button.nomenclature-cite {
  font: inherit;
  font-size: 0.85em;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-bottom: 1px dotted #b8b8c0;
  color: #6b6b6b;
  cursor: pointer;
  vertical-align: baseline;
}

button.nomenclature-cite:hover,
button.nomenclature-cite:focus-visible {
  color: #33465f;
  border-bottom-color: #33465f;
}

button.nomenclature-cite.is-open {
  color: #33465f;
  border-bottom-style: solid;
  border-bottom-color: #33465f;
}

[data-theme="dark"] button.nomenclature-cite {
  color: #9a9ab8;
  border-bottom-color: #4a4c68;
}

[data-theme="dark"] button.nomenclature-cite:hover,
[data-theme="dark"] button.nomenclature-cite:focus-visible,
[data-theme="dark"] button.nomenclature-cite.is-open {
  color: #cddcf5;
  border-bottom-color: #6a74a0;
}

[data-theme="dark"] .nomenclature-cite-tooltip {
  color: #c8c8da;
  background: #1a1c2e;
  border-color: #343858;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .nomenclature-cite[data-refs] {
  border-bottom-color: #4a4c68;
}

/* Expander for records with more than one reference. */
.nomenclature-cite-toggle {
  font: inherit;
  font-size: 0.85em;
  line-height: 1;
  padding: 1px 5px;
  margin-left: 2px;
  color: #5a6b8a;
  background: #eef1f6;
  border: 1px solid #d3dae6;
  border-radius: 9px;
  cursor: pointer;
  vertical-align: baseline;
}

.nomenclature-cite-toggle:hover,
.nomenclature-cite-toggle:focus-visible {
  background: #dde4f0;
  color: #33465f;
}

.nomenclature-cite-toggle.is-open {
  background: #33465f;
  border-color: #33465f;
  color: #fff;
}

ul.nomenclature-cite-refs {
  margin: 3px 0 5px 0;
  padding: 5px 8px;
  list-style: none;
  font-size: 0.85em;
  line-height: 1.4;
  color: #55555f;
  background: #f6f7f9;
  border-left: 2px solid #d3dae6;
  border-radius: 0 4px 4px 0;
  text-indent: 0;
}

ul.nomenclature-cite-refs li {
  margin: 0 0 3px 0;
}

ul.nomenclature-cite-refs li:last-child {
  margin-bottom: 0;
}

.nomenclature-ref-who {
  font-weight: 600;
  color: #3a3a44;
}

.nomenclature-ref-where {
  font-style: italic;
}

.nomenclature-ref-link {
  color: inherit;
  text-decoration: none;
}

.nomenclature-ref-link:hover {
  text-decoration: underline;
  text-decoration-color: #c83f3f;
}

.nomenclature-ref-doi {
  overflow-wrap: anywhere;
}

[data-theme="dark"] .nomenclature-cite-toggle {
  color: #a8b8d8;
  background: #232640;
  border-color: #343858;
}

[data-theme="dark"] .nomenclature-cite-toggle:hover,
[data-theme="dark"] .nomenclature-cite-toggle:focus-visible {
  background: #2e3252;
  color: #cddcf5;
}

[data-theme="dark"] .nomenclature-cite-toggle.is-open {
  background: #4a5480;
  border-color: #4a5480;
  color: #fff;
}

[data-theme="dark"] ul.nomenclature-cite-refs {
  color: #a8a8c0;
  background: #17192a;
  border-left-color: #343858;
}

[data-theme="dark"] .nomenclature-ref-who {
  color: #c8c8da;
}

[data-theme="dark"] .nomenclature-hover-hostcount {
  color: #8a8aa8;
}

[data-theme="dark"] .nomenclature-hostgroup-name {
  color: #c8c8da;
}

[data-theme="dark"] li.nomenclature-hostrecord::before {
  color: #4a4c68;
}

[data-theme="dark"] .nomenclature-host-unnamed {
  color: #7a7a96;
}

[data-theme="dark"] .nomenclature-cite {
  color: #9a9ab8;
}

.inat-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #74ac00;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.15s;
  position: relative;
}
.inat-link:hover {
  text-decoration-style: solid;
  text-decoration-color: #74ac00;
}
.inat-link:hover::after {
  content: "View on iNaturalist";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 0.75em;
  font-style: normal;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
  margin-bottom: 4px;
}

/* --- GBIF observation photo strip --- */

.nomenclature-hover-gbif {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 8px;
}
.nomenclature-hover-gbif h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}
@keyframes gbif-shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position: 300px 0; }
}
.nomenclature-hover-gbif-skeleton {
  flex: 0 0 90px;
  height: 94px;
  border-radius: 3px;
  background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
  background-size: 600px 100%;
  animation: gbif-shimmer 1.4s ease-in-out infinite;
}
.nomenclature-hover-gbif-badge {
  font-size: calc(var(--hover-fs) * 0.5625);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #4a9e6b;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  text-decoration: none;
}
.nomenclature-hover-gbif-badge:hover { background: #357a52; }
.nomenclature-hover-gbif-badge--loading { background: #aaa; cursor: default; }
.nomenclature-hover-gbif-badge--loading[href] { cursor: pointer; }
.nomenclature-hover-gbif-status {
  font-size: calc(var(--hover-fs) * 0.6875);
  color: #666;
  font-style: italic;
  margin: 2px 0 0;
}
.nomenclature-hover-gbif-status--none { color: #999; }
.nomenclature-hover-gbif-strip {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.nomenclature-hover-gbif-thumb {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
  transition: opacity 0.15s;
}
.nomenclature-hover-gbif-thumb:hover { opacity: 0.85; }
.nomenclature-hover-gbif-thumb.is-holotype {
  border: 2px solid #c0392b;
}
.nomenclature-hover-gbif-thumb.is-synonym-type {
  border: 2px dashed #8e6f3e;
}
.nomenclature-hover-gbif-type-badge--syn {
  background: #8e6f3e;
  text-transform: none;
  letter-spacing: 0;
}
.nomenclature-hover-gbif-type-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  font-size: calc(var(--hover-fs) * 0.4375);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #c0392b;
  color: #fff;
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.nomenclature-hover-gbif-thumb img {
  height: 130px;
  width: auto;
  max-width: 190px;
  object-fit: cover;
  display: block;
}
.nomenclature-hover-gbif-attr {
  font-size: calc(var(--hover-fs) * 0.5);
  color: #888;
  padding: 2px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 138px;
  background: #f7f7f7;
}

/* --- Plazi literature section --- */

/* Nomenclature section: original descriptions for the accepted name and for
   every name in its synonymy.  Matches the Plazi/Registry section framing. */
.nomenclature-hover-nomen {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 8px;
}
.nomenclature-hover-nomen:empty { display: none; }
.nomenclature-hover-nomen h5 {
  margin: 0 0 6px;
}
.nomenclature-hover-od {
  margin: 0 0 6px;
  line-height: 1.45;
}
.nomenclature-hover-od-label {
  display: block;
  font-size: calc(var(--hover-fs) * 0.625);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b6b7a;
  margin-bottom: 2px;
}
.nomenclature-hover-od-ref {
  font-size: calc(var(--hover-fs) * 0.75);
}
.nomenclature-hover-comb-list {
  margin: 2px 0 8px;
  padding-left: 0;
  list-style: none;
}
.nomenclature-hover-comb-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: calc(var(--hover-fs) * 0.75);
  line-height: 1.5;
  padding: 1px 0;
}
/* The genus column stays put while citations right-align, so a sequence of
   placements reads down the page as one column of names. */
.nomenclature-hover-comb-name { flex: 0 1 auto; }
.nomenclature-hover-comb-cite {
  flex: 0 0 auto;
  font-size: calc(var(--hover-fs) * 0.6875);
  color: #6b6b7a;
  white-space: nowrap;
}
.nomenclature-hover-comb-orig {
  font-size: calc(var(--hover-fs) * 0.5625);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a99;
  margin-left: 4px;
}

.nomenclature-hover-comb-more {
  font-weight: 600;
  opacity: 0.75;
}

.nomenclature-hover-tm-list {
  margin: 2px 0 8px;
  padding-left: 0;
  list-style: none;
}
.nomenclature-hover-tm-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 8px;
  align-items: baseline;
  font-size: calc(var(--hover-fs) * 0.75);
  line-height: 1.5;
  padding: 1px 0;
}
.nomenclature-hover-tm-label {
  font-size: calc(var(--hover-fs) * 0.625);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #8a8a99;
}
.nomenclature-hover-tm-cite {
  font-size: calc(var(--hover-fs) * 0.6875);
  color: #6b6b7a;
  white-space: nowrap;
}
.nomenclature-hover-tm-lost {
  font-weight: 600;
  color: #a2544f;
}
@media (max-width: 750px) {
  /* Three columns will not fit a 360px card; the citation drops beneath. */
  .nomenclature-hover-tm-item {
    grid-template-columns: 80px 1fr;
  }
  .nomenclature-hover-tm-cite { grid-column: 2; }
}

.nomenclature-hover-od-details {
  margin-top: 4px;
}
.nomenclature-hover-od-details > summary {
  cursor: pointer;
  font-size: calc(var(--hover-fs) * 0.6875);
  font-weight: 600;
  color: #5a6b8a;
  list-style: revert;
}
.nomenclature-hover-od-list {
  margin: 6px 0 0;
  padding-left: 16px;
}
.nomenclature-hover-od-item {
  margin-bottom: 6px;
  line-height: 1.4;
}
.nomenclature-hover-od-item:last-child { margin-bottom: 0; }
.nomenclature-hover-od-name {
  display: block;
  font-size: calc(var(--hover-fs) * 0.75);
  font-weight: 600;
}
.nomenclature-hover-od-item .nomenclature-hover-od-ref {
  font-size: calc(var(--hover-fs) * 0.6875);
  color: #55555f;
}

.nomenclature-hover-plazi {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 8px;
}
.nomenclature-hover-plazi:empty { display: none; }
.nomenclature-hover-plazi h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}
.nomenclature-hover-plazi-badge {
  font-size: calc(var(--hover-fs) * 0.5625);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #4a6ea8;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  text-decoration: none;
  white-space: nowrap;
}
.nomenclature-hover-plazi-badge:hover { background: #2f508a; }
.nomenclature-hover-plazi-badge--zoobank {
  background: #b5651d;
}
.nomenclature-hover-plazi-badge--zoobank:hover { background: #8b4513; }
.nomenclature-hover-source {
  padding: 4px 0 2px;
}
/* A morphospecies in the species card (key terminals like "Ichneumon AZ2"):
   its diagnosis stands where a described species shows its registry link. */
.nomenclature-hover-morpho-note {
  margin: 6px 0 0;
  font-size: calc(var(--hover-fs) * 0.625);
  color: #6b6b6b;
}
.nomenclature-hover-morpho-diagnosis {
  font-size: calc(var(--hover-fs) * 0.75);
  line-height: 1.5;
}
.nomenclature-hover-type-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nomenclature-hover-type-entry {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: calc(var(--hover-fs) * 0.6875);
  line-height: 1.4;
}
.nomenclature-hover-type-status {
  font-size: calc(var(--hover-fs) * 0.5625);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #8b3020;
  color: #fff;
  border-radius: 2px;
  padding: 1px 4px;
  white-space: nowrap;
}
.nomenclature-hover-type-inst {
  font-family: monospace;
  font-size: calc(var(--hover-fs) * 0.625);
  font-weight: 700;
  color: #333;
  background: #eaeaea;
  border-radius: 2px;
  padding: 1px 4px;
  white-space: nowrap;
}
.nomenclature-hover-type-loc {
  font-size: calc(var(--hover-fs) * 0.6875);
  color: #555;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nomenclature-hover-plazi-link {
  font-size: calc(var(--hover-fs) * 0.625);
  color: #4a6ea8;
  text-decoration: underline;
  text-underline-offset: 1px;
  white-space: nowrap;
}
.nomenclature-hover-plazi-link:hover { color: #2f508a; }
.nomenclature-hover-plazi-diag {
  font-size: calc(var(--hover-fs) * 0.625);
  line-height: 1.5;
  color: #444;
  margin: 4px 0 6px;
  font-style: italic;
}

/* --- Pensoft figures section (hover card) --- */

.nomenclature-hover-pensoft-figures {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 8px;
}
.nomenclature-hover-pensoft-figures:empty { display: none; }
.nomenclature-hover-pensoft-figures h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
}
.nomenclature-hover-pensoft-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.nomenclature-hover-pensoft-fig {
  flex: 0 0 auto;
  max-width: 180px;
}
.nomenclature-hover-pensoft-fig img {
  width: 100%;
  border-radius: 4px;
  cursor: zoom-in;
  display: block;
}
.nomenclature-hover-pensoft-fig figcaption {
  font-size: calc(var(--hover-fs) * 0.5625);
  line-height: 1.3;
  color: #666;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nomenclature-hover-plazi-badge--pensoft {
  background: #4a8f6a;
}
.nomenclature-hover-plazi-badge--pensoft:hover { background: #367a54; }

/* --- Pensoft treatment section (hover card) --- */

.nomenclature-hover-treatment {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 8px;
}
.nomenclature-hover-treatment:empty { display: none; }
.nomenclature-hover-treatment h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.nomenclature-hover-treatment-badge--new_species {
  background: #2e7d32;
}
.nomenclature-hover-treatment-badge--redescription {
  background: #4a6ea8;
}
.nomenclature-hover-treatment-badge--new_combination {
  background: #6b5ea8;
}
.nomenclature-hover-treatment-locality {
  font-size: calc(var(--hover-fs) * 0.625);
  font-style: italic;
  color: #555;
  line-height: 1.4;
  margin: 2px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nomenclature-hover-treatment-details {
  font-size: calc(var(--hover-fs) * 0.75);
  line-height: 1.5;
  color: #444;
  margin: 4px 0;
}
.nomenclature-hover-treatment-details summary {
  font-weight: 600;
  cursor: pointer;
  color: #333;
  font-size: calc(var(--hover-fs) * 0.8125);
}
.nomenclature-hover-treatment-details[open] summary {
  margin-bottom: 3px;
}
.nomenclature-hover-treatment-details p {
  margin: 0;
  max-height: 120px;
  overflow-y: auto;
}

/* --- PDF treatment section (OCR'd historical descriptions, hover card) --- */

.nomenclature-hover-pdf-treatment {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
  margin-top: 8px;
}
.nomenclature-hover-pdf-treatment:empty { display: none; }
.nomenclature-hover-pdf-treatment h5 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  flex-wrap: wrap;
}
.nomenclature-hover-pdf-orig {
  font-size: calc(var(--hover-fs) * 0.625);
  color: #555;
  margin: 0 0 5px;
}
.nomenclature-hover-pdf-symbol {
  font-size: calc(var(--hover-fs) * 0.8125);
  color: #8a6a3a;
}
.nomenclature-hover-pdf-details p.nomenclature-hover-pdf-text {
  /* The transcription is verbatim, hyphenation closed up — let it wrap. */
  white-space: pre-wrap;
  /* Override the 120px cap inherited from the Pensoft details: these are whole
     descriptions, and cutting one mid-sentence is worse than a taller card. */
  max-height: 300px;
}
.nomenclature-hover-pdf-locality {
  font-size: calc(var(--hover-fs) * 0.6875);
  font-style: italic;
  color: #555;
  margin: 4px 0 0;
}
.nomenclature-hover-pdf-note {
  font-size: calc(var(--hover-fs) * 0.625);
  line-height: 1.4;
  color: #6b5a3a;
  background: rgba(138,106,58,0.08);
  border-left: 2px solid #8a6a3a;
  padding: 4px 6px;
  margin: 6px 0 0;
}

/* --- Details grid --- */

.nomenclature-hover-details {
  display: block;
}

.nomenclature-hover-card.is-large .nomenclature-hover-details {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}

.nomenclature-hover-card.is-large .nomenclature-hover-hosts {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

/* --- Close button --- */

.nomenclature-hover-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: calc(var(--hover-fs) * 1.125);
  line-height: 28px;
  text-align: center;
  background: transparent;
  color: #999;
  cursor: pointer;
  display: none;
  transition: background 120ms ease, color 120ms ease;
}

.nomenclature-hover-card.is-pinned .nomenclature-hover-close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nomenclature-hover-close:hover {
  background: #f0f0f0;
  color: #333;
}

/* --- Pin hint --- */

.nomenclature-hover-pin-hint {
  display: none;
  margin-top: 8px;
  text-align: center;
  font-size: 0.78em;
  color: #aaa;
}

.nomenclature-hover-card.is-visible:not(.is-pinned) .nomenclature-hover-pin-hint {
  display: block;
}

@media screen and (max-width: 980px) {
  .nomenclature-hover-card,
  .nomenclature-hover-card.is-large {
    width: min(620px, calc(100vw - 24px));
  }
}

/* ---- Mobile-specific species popup & list improvements ---- */
@media screen and (max-width: 750px) {
  /* Larger tap targets for species list items */
  .nomenclature-species-trigger {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    margin: -6px 0;
  }

  /* Slightly taller region filter buttons for touch */
  .nomenclature-region-btn {
    padding: 8px 16px;
    font-size: 0.92em;
  }

  /* On mobile, CSS fully controls the pinned card position.
     The JS positioning is disabled at this width (see positionPinnedSpeciesHoverCard),
     so these values don't fight with inline styles set by JS.
     Centered modal: left/top at 50%, then translate back by half. */
  .nomenclature-hover-card.is-pinned {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(88svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 12px;
  }
  /* Centered: visible state (overrides base translateY(0)) */
  .nomenclature-hover-card.is-pinned.is-visible {
    transform: translate(-50%, -50%);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 150ms ease;
  }
  /* Centered: pre-animation start — slightly below center */
  .nomenclature-hover-card.is-pinned:not(.is-visible) {
    transform: translate(-50%, calc(-50% + 24px));
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 150ms ease;
  }

  /* Popup map: let aspect-ratio govern, cap height for small screens */
  .nomenclature-hover-map {
    max-height: 240px;
  }
  .nomenclature-hover-card.is-large .nomenclature-hover-map {
    max-height: 240px;
  }

  /* Habitus images get a bit smaller in the pinned card */
  .nomenclature-habitus-card img {
    max-height: 130px;
  }

  /* Show close button always on touch (not just when pinned) so users can dismiss */
  .nomenclature-hover-card.is-visible .nomenclature-hover-close {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide "Click to pin" hint on touch — tapping already pins */
  .nomenclature-hover-pin-hint {
    display: none !important;
  }
}

.info-close-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background: none;
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  border-radius: 3px;
}

.info-close-btn:hover {
  color: #333;
  background: #eee;
}

#filter_gallery_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
  /* Separates the filter panel from the gallery. Without it the cards -- and
     the tribe headings, whose first letter and underline ran right up to the
     panel edge -- sit flush against it. On mobile the container switches to a
     column, where the same gap becomes the vertical space above the gallery. */
  gap: 20px;
}


#filter_gallery {
  width: 100%;
  margin: 0 auto;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

/* TRIBE GROUPING
   The .is-grouped class is set only when the CSV's tribe column holds real
   -ini names; subfamilies that fill it with "any" keep the flat gallery. JS
   still toggles the class -- it is the hook a future rule would use -- but no
   CSS reads it, because the width below now does the whole job.

   There was a `#filter_gallery.is-grouped { display: block }` here, to stop
   the sections being laid out as flex items. It worked, but it was not
   enough: as flex items the sections still sized to their content, so a tribe
   that did not fill a row -- Pimplini's three cards against Ephialtini's
   nine -- sat centred, indented by half the leftover space with its heading.
   A full-width section fixes that AND stacks on its own, since a 100%-wide
   flex item takes a line to itself. That holds in block, flex and grid, at
   every width, so the display override became redundant and was removed. */
.gallery-tribe {
  width: 100%;
}

.gallery-tribe + .gallery-tribe {
  margin-top: 26px;
}

.gallery-tribe-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #ddd8cf;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6d675e;
}

.gallery-tribe-count {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: #918a7e;
}

.gallery-tribe-cards {
  margin-top: 0;
}

/* A genus belongs to one tribe, so its gallery is a single group -- and a single
   group's cards can be centred, which the pills and the size toggle above them
   already are. The leftover space was all landing on the right, so the plate of
   cards read as pushed left of everything above it.

   Only when the section is alone. On a subfamily page, where tribes of three and
   of nine sit one above the other, centring each row indents every tribe by a
   different amount -- that is the fault the full-width .gallery-tribe above was
   written to fix, and it stays fixed. */
#filter_gallery:has(> .gallery-tribe:only-child) .gallery-tribe-cards {
  justify-content: center;
}





/* ------------------------------------------------------------------- */
/* CAPTION STYLING FOR FANCYBOX */
/* The published-figures lightbox (JS/published-figures.js) still labels its
   slides with these two ids. The specimen gallery has its own label markup
   further down. */
#caption_title {
  font-family: Baskerville, serif;
  font-size: 30px;
  font-style: italic;
}

#caption_notes {
  font-size: 20px;
  max-width: 1000px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding-left: 90px;
}

.thumb_image {
  width: 100px;
}

.thumb_button {
  z-index: 20000000;
}

.thumb_button:hover {
  cursor: pointer;
  z-index: 20000000;
}

.fancybox-caption,
.fancybox-caption__body {
  text-align: left !important;
}

/* FancyBox's own 14px, set against a full-screen photograph, reads as a
   footnote to the plate rather than as its label. These are determination
   labels, so they have to be readable at a glance.

   The container is in the selector because header.js links style.css before
   FancyBox's own sheet: a bare .fancybox-caption ties on specificity and loses
   on source order, which is why the text-align above needed !important too. */
.fancybox-container .fancybox-caption,
.fancybox-container .fancybox-caption__body {
  font-size: 22px;
  line-height: 1.45;
}

/* Above 1500px the container is held at 1:1 by a zoom of 0.8, and that shrinks
   its type along with everything else, so the declared size is divided by it to
   land back on 22px on screen. It has to sit here rather than beside the zoom
   itself: a media query adds no specificity, and up there it would tie with the
   rule above and lose on source order. */
@media (min-width: 1500px) {
  .fancybox-container .fancybox-caption,
  .fancybox-container .fancybox-caption__body {
    font-size: calc(22px / 0.8);
  }
}

/* A grouped plate's caption is a table of figure number / species pairs, three
   columns as Townes set it. Without a gutter the number of one column runs
   straight into the name of the last, which is exactly the pairing the reader
   is there to make. */
.fancybox-container .fancybox-caption table {
  border-collapse: collapse;
  margin-top: 6px;
}
.fancybox-container .fancybox-caption th,
.fancybox-container .fancybox-caption td {
  padding: 1px 22px 1px 0;
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

/* ------------------------------------------------------------------- */
/* SPECIMEN GALLERY LIGHTBOX: the label panel.

   test.js gives every gallery anchor baseClass "iona-lightbox", so all of this
   is scoped to the specimen plates and the other lightboxes (published figures,
   key figures, monograph plates) keep FancyBox's bottom caption above.

   On a wide screen the caption is not a strip under the plate but a column to
   its right, the way a drawer label sits beside the specimen. FancyBox reads
   the slide's own padding when it fits the image, so reserving the column is
   just padding-right on the slide, and the plate keeps its full height however
   long the diagnosis runs. The anchors also switch preventCaptionOverlap off
   (it would pad the slide by the caption's height, which is the old shrinking)
   and idleTime off (with overlap prevention off FancyBox hides the caption
   with the toolbar after three idle seconds).

   Two tokens size it. Above 1500px the container is zoomed 0.8 like the rest
   of the page, so both are divided by it there, same as the caption size
   above. */
.fancybox-container.iona-lightbox {
  --lb-panel: 360px;
  --lb-fs: 17px;
}

@media (min-width: 1500px) {
  .fancybox-container.iona-lightbox {
    --lb-panel: calc(360px / 0.8);
    --lb-fs: calc(17px / 0.8);
  }
}

.fancybox-container.iona-lightbox .fancybox-caption,
.fancybox-container.iona-lightbox .fancybox-caption__body {
  font-size: var(--lb-fs);
  line-height: 1.55;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  color: #dcdcdc;
}

/* The label is set in the same face as the card caption under the thumbnail,
   only larger: the lightbox is that caption brought up to reading size, not a
   different voice. Name in italics, authorship plain beside it, as the cards
   and the species lists print them. */
.fancybox-container.iona-lightbox .lb-name {
  font-size: 1.35em;
  line-height: 1.3;
  color: #f2f2f2;
}

.fancybox-container.iona-lightbox .lb-name em {
  font-style: italic;
}

.fancybox-container.iona-lightbox .lb-author {
  font-size: 0.85em;
  color: #c4c4c4;
}

/* Sex, and on a detail slide the view, under the name, closed by a hairline so
   the determination reads as one block and the diagnosis as another. */
.fancybox-container.iona-lightbox .lb-meta {
  margin-top: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.95em;
  color: #b0b0b0;
}

/* The manifest capitalises its view labels ("Head", "Propodeum"); on this
   line they follow the sex, which is lowercase, so they match it. */
.fancybox-container.iona-lightbox .lb-view {
  text-transform: lowercase;
}

.fancybox-container.iona-lightbox .lb-view::before {
  content: "\00b7";
  margin: 0 0.6em;
}

.fancybox-container.iona-lightbox .lb-note {
  margin-top: 12px;
  font-size: 0.9em;
  color: #c4c4c4;
}

.fancybox-container.iona-lightbox .lb-body {
  margin-top: 14px;
}

.fancybox-container.iona-lightbox .lb-body em {
  font-style: italic;
}

.fancybox-container.iona-lightbox .lb-credit {
  padding-top: 16px;
  font-size: 0.8em;
  color: #8f8f8f;
}

@media (min-width: 951px) {
  /* The column is taken off the whole inner frame, not padded onto the slide:
     zoom and pan measure the slide's full box, so a padded slide let a zoomed
     plate run under the panel with no way to drag it back out. Shrinking the
     frame is how FancyBox's own thumbnail strip makes room, and the caption,
     toolbar and thumbs are then pushed back out past its right edge. */
  .fancybox-container.iona-lightbox .fancybox-inner {
    right: var(--lb-panel);
  }

  .fancybox-container.iona-lightbox .fancybox-toolbar {
    right: calc(-1 * var(--lb-panel));
  }

  .fancybox-container.iona-lightbox.fancybox-show-thumbs .fancybox-inner {
    right: calc(var(--lb-panel) + 212px);
  }

  .fancybox-container.iona-lightbox .fancybox-thumbs {
    right: var(--lb-panel);
  }

  .fancybox-container.iona-lightbox .fancybox-caption {
    top: 0;
    bottom: 0;
    left: auto;
    right: calc(-1 * var(--lb-panel));
    width: var(--lb-panel);
    box-sizing: border-box;
    margin: 0;
    /* The top clears the toolbar buttons, which float over the panel's head. */
    padding: 64px 28px 24px 28px;
    background: #161616;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
  }

  .fancybox-container.iona-lightbox .fancybox-caption__body {
    flex: 1 1 auto;
    display: flex;
    max-height: none;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  /* The label fills the panel so the credit can sit at its foot whatever the
     diagnosis leaves above it. */
  .fancybox-container.iona-lightbox .lb-label {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
  }

  .fancybox-container.iona-lightbox .lb-credit {
    margin-top: auto;
  }
}

/* Narrow screens keep the caption under the plate, over FancyBox's gradient,
   but set left and capped so a long diagnosis scrolls instead of climbing the
   plate. */
@media (max-width: 950px) {
  .fancybox-container.iona-lightbox .fancybox-caption {
    padding: 48px 20px 16px 20px;
    /* Denser than FancyBox's own gradient: the page still shows through the
       backdrop, and the label has to stay legible over it. */
    background: linear-gradient(to top,
      rgba(12, 12, 12, 0.96) 0%,
      rgba(12, 12, 12, 0.92) 60%,
      rgba(12, 12, 12, 0) 100%);
  }

  .fancybox-container.iona-lightbox .fancybox-caption__body {
    max-height: 40vh;
    overflow: auto;
  }

  .fancybox-container.iona-lightbox .lb-name {
    font-size: 1.2em;
  }

  .fancybox-container.iona-lightbox .lb-meta {
    padding-bottom: 8px;
  }
}

#caption_box {
  width: 400px;
  max-height: 200px;
  margin: auto auto;
  align-items: center;
  text-align: left;
  justify-content: center;
}

#hidden_extra_images {
  display: none;
}



.main_content_index {
  padding-top: 40px;
  padding-left: 5%;
  text-align: left;
  padding-right: 5%;
  max-width: 1000px;
  /* min-height: 800px; */
}

.main_content_index p {
  font-size: 18px;
  color: #424242;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 10px;
}

.main_content_index h1 {
  color: #000000;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: lighter;
}

#index_upper {
  display: flex;
  flex-direction: row;
  padding-right: 5%;
  align-items: flex-start;
  gap: 4%;

  @media (max-width: 1000px) {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0;
    gap: 0;
  }
}

#image_w_credit {
  position: relative;
  flex: 0 1 480px;
  min-width: 360px;
  max-width: 480px;
  /* line up with the top of the "Welcome" heading, not the middle of the text */
  margin: 96px 0 0;
  overflow: hidden;
  align-self: flex-start;

  @media (max-width: 1000px) {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 24px;
  }
}

#Trogus {
  display: block;
  width: 100%;
  /* margin-top: 4%; */
  height: auto;
  animation: fadeIn 2s;
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12), 0 5px 18px 0 rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 1000px) {
  #Trogus {
    padding-right: auto;
  }
}

@media screen and (max-width: 500px) {
  #Trogus {
    height: auto;
  }

  #image_w_credit {
    overflow: hidden;
    min-width: 200px;
    width: 200px;
  }
}


#text_images {
  display: flex;
  flex-direction: row;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
}



#caption_overlay {
  /* border-radius: 0px; */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: left;
  padding-left: 4px;
  /* Adjust padding as needed */
  align-items: center;
  font-size: 18px;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0,60.3); Adjust shadow properties */
  color: rgb(235, 235, 235);
  /* Adjust transparency here */
  background: rgba(0, 0, 0, 0.219);
  /* Adjust background color and transparency */
}

#text_image_w_caption {
  width: 100%;
  /* Make sure the image takes up the full width of the container */
  height: auto;
  /* Make sure the image takes up the full height of the container */
  object-fit: cover;
  position: relative;
  min-width: 300px;
  overflow: hidden;

}

#text_image {
  width: 350px;
  width: 100%;
  /* Make sure the image takes up the full width of the container */
  height: 200px;
  /* Make sure the image takes up the full height of the container */
  object-fit: cover;
  /* Crop the image to cover the entire container */
  display: block;
  /* height: fit-content; */
  animation: fadeIn 1s;
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12), 0 5px 18px 0 rgba(0, 0, 0, 0.15);

}

#species {
  margin-top: 30px;
}


.noMatchesText {
  margin-top: 25%;
  font-size: clamp(24px, 6vw, 48px);
  text-align: center;
  width: 100%;
  max-width: 1000px;
}

.apply_filter_button {
  display: none;
}

#clear_button_mobile {
  display: none;
}



/* IMAGE SIZE SEGMENTED BUTTONS */
.image-size-toggle {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.image-size-btn {
  padding: 8px 16px;
  border: none;
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.image-size-btn:first-child {
  border-right: 1px solid #ccc;
}

.image-size-btn:hover {
  background-color: #e0e0e0;
}

.image-size-btn.active {
  background-color: #1a1a2e;
  color: white;
}

.image-size-btn:focus {
  outline: 2px solid #1a1a2e;
  outline-offset: 2px;
}

/* GALLERY CONTAINER - wraps view controls and gallery grid */
.gallery-container {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* GALLERY VIEW CONTROLS - positioned above gallery */
.gallery-view-controls {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

/* The two controls read as one cluster, centred together over the grid. Pushed
   to opposite ends the toggle ends up stranded: the gallery's own right edge is
   ragged (the last column of cards stops short of the container), so an
   end-aligned toggle looks misaligned against the thumbnails rather than tidy. */
.gallery-view-controls.has-search {
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.gallery-view-controls.has-search .gallery-search {
  flex: 0 1 300px;
}

/* Narrow enough and the box takes whatever room is left beside the toggle. */
@media (max-width: 950px) {
  .gallery-view-controls.has-search .gallery-search {
    flex: 1 1 200px;
  }
}

/* ---- GALLERY SEARCH (taxa + places, with tab-completed suggestion) ---- */
.gallery-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Matched to the size toggle's height so the two sit on one baseline. */
  padding: 9px 12px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gallery-search:focus-within {
  border-color: rgba(200, 63, 63, 0.55);
  box-shadow: 0 1px 4px rgba(200, 63, 63, 0.18);
}

.gallery-search.is-applied {
  border-color: rgba(200, 63, 63, 0.45);
}

.gallery-search-icon {
  flex: none;
  color: #999;
}

/* The ghost is a second copy of the text sitting exactly under the real one:
   same font, same box, typed part invisible, completion in grey. */
.gallery-search-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.gallery-search-input,
.gallery-search-ghost {
  font-family: inherit;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: normal;
  padding: 0;
  border: 0;
}

.gallery-search-input {
  width: 100%;
  background: transparent;
  color: #222;
  outline: none;
  position: relative;
  z-index: 1;
}

.gallery-search-input::placeholder {
  color: #999;
}

.gallery-search-ghost {
  position: absolute;
  inset: 0;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  color: #aaa;
  z-index: 0;
}

.gallery-search-ghost [data-ghost-typed] {
  color: transparent;
}

.gallery-search-kind {
  flex: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
}

.gallery-search-clear {
  flex: none;
  border: none;
  background: transparent;
  color: #888;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.gallery-search-clear:hover {
  color: #333;
}

/* ---- APPLIED SEARCH FILTERS (chips under the box) ---- */
.gallery-search-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 0 4px 0;
}

.gallery-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: rgba(200, 63, 63, 0.07);
  border: 1px solid rgba(200, 63, 63, 0.35);
  border-radius: 999px;
  font-size: 13px;
  color: #333;
  line-height: 1.3;
}

.gallery-search-chip-kind {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a05252;
}

.gallery-search-chip-remove {
  border: none;
  background: transparent;
  color: #a05252;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  border-radius: 50%;
}

.gallery-search-chip-remove:hover {
  background: rgba(200, 63, 63, 0.18);
  color: #7a2f2f;
}

.gallery-search-chips-clear {
  border: none;
  background: transparent;
  color: #777;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
}

.gallery-search-chips-clear:hover {
  color: #222;
}

@media (max-width: 750px) {
  /* The completion is a keyboard affordance; on a touch keyboard there is no
     Tab, so the box stays a plain search field. */
  .gallery-search-ghost [data-ghost-rest] {
    display: none;
  }
}

.gallery-view-controls .image-size-toggle {
  background: #e8e8e8;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.gallery-view-controls .image-size-btn {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-view-controls .image-size-btn:first-child {
  border-right: none;
}

.gallery-view-controls .image-size-btn:hover {
  color: #333;
  background: #d8d8d8;
}

.gallery-view-controls .image-size-btn.active {
  background: #fff;
  color: #333;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.gallery-view-controls .image-size-btn svg {
  display: block;
}


/* SKELETON LOADING CARDS */
.skeleton-card {
  pointer-events: none;
  overflow: hidden;
}

.skeleton-image {
  width: 100%;
  height: 130px;
  background: #e0e0e0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text {
  width: 70%;
  height: 14px;
  margin: 10px auto;
  background: #e0e0e0;
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* STYLE THE HEADER AT MINIMUM WIDTH */
@media screen and (max-width: 750px) {

  /* Reduce excessive horizontal padding on narrow screens */
  .top_content {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
  }

  /* Genus name is too large on mobile — scale down */
  .title_genus_page em {
    font-size: 26px;
  }

  /* SIDE BAR POP-UP STYLING - inherits dark theme from 1015px breakpoint */
  .side-bar {
    /* Dark theme already applied at 1015px breakpoint */
  }

  .image_w_credit {
    display: none;
  }

  #text_images {
    display: flex;
    flex-direction: column;
  }

  .titles_navigation {
    display: none;
  }

  .logo {
    display: none;
  }

  #classifier_top {
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5%;
    padding-right: 5%
  }

  #classifier_top p {
    text-align: center;
  }

  .mobile_nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 62px;
    padding: 8px 12px;
    border-bottom: 2px solid #3d3c36d7;
    background-color: #fff;
  }

  /* Mobile nav logo - constrain the size */
  .mobile_nav > img {
    height: 46px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
  }

  .mobile_title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav_hamburger_button {
    border: none;
    padding: 8px 12px;
    background-color: #2e2e3a;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
  }

  .nav_hamburger_button:hover {
    background-color: #c83f3f;
  }

  .nav_hamburger_button img {
    width: 20px;
    height: auto;
    filter: brightness(0) invert(1);
  }

  .footer {
    font-size: 12px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 0 1rem 1.25rem;
  }



  .mobile_nav_backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile_nav_backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile_nav_options {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    flex-direction: column;
    height: 100vh;
    width: 75vw;
    max-width: 300px;
    display: flex;
    background-color: #fff;
    color: black;
    font-family: var(--site-body-font);
    padding-top: 60px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .mobile_nav_options.open {
    transform: translateX(0);
  }

  .mobile_nav_options ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .mobile_nav_close_button {
    position: fixed;
    z-index: 1001;
    right: 12px;
    top: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background-color: #f0f0f0;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile_nav_close_button.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile_nav_close_button:hover {
    background-color: #e0e0e0;
  }

  .mobile_nav_close_button img {
    width: 20px;
    height: 20px;
  }

  .mobile_nav_options li {
    border-bottom: 1px solid #e0e0e0;
  }

  .mobile_nav_options li:first-child {
    border-top: 1px solid #e0e0e0;
  }

  .mobile_nav_options a {
    display: block;
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: 500;
    padding: 16px 24px;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .mobile_nav_options a:hover {
    background-color: rgba(200, 63, 63, 0.08);
    color: #c83f3f;
  }

  /* .mobile_title styles moved up to .mobile_nav section */

  .mobile_header img {
    width: 100vw;
    opacity: 0.7;
  }

  .panel {
    animation: none;
  }

  .filter_panel {
    position: fixed;
    left: 0;
    top: 0;
    width: 80vw;
    max-width: 320px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .filter_panel.open {
    transform: translateX(0);
  }

  #clear_button_desktop {
    display: none;
  }

  #clear_button_mobile {
    display: flex;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .radio_button_2 {
    width: 100%;
    height: 20vh;

  }

  .filter_options_holder {
    width: 100%;
    display: none;
    height: 40vh;
  }

  #button_category {
    width: 100%;

  }

  .radio_container {
    width: 100%;
  }

  #color_options {
    display: none;
  }

  #color_button {
    background-color: whites;
  }

  .filter_category_button {
    width: 100%;
    height: 7vh;
    font-size: 20px;
  }

  .mobile_filter {
    display: flex;
    width: 92vw;
    max-height: 30px;
    margin-bottom: 2vh;
    background-color: #c83f3f;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12), 0 5px 18px 0 rgba(0, 0, 0, 0.15);
    justify-content: center;
    align-items: center;
    border-radius: 0px;
  }

  .mobile_filter img {
    width: 15px;
    height: auto;
    margin-right: 5vw;

  }

  .apply_filter_button {
    display: block;
    background-color: #b3ab94;
    color: white;
    border: none;
    padding: 10px 20px;
    /* border-radius: 5px; */
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12), 0 5px 18px 0 rgba(0, 0, 0, 0.15);
    width: 100%;
  }

  .apply_filter_button:hover {
    opacity: 0.8;

  }

  #filter_gallery_div {
    display: flex;
    flex-direction: column;
  }

  #filter_gallery {
    display: flex;
    flex-wrap: wrap;
    width: 95vw;
    margin: auto auto;
    align-content: center;
  }



  @media screen and (max-width: 380px) {
    .fig_small_gallery {
      width: 160px;
    }

    /* GALLERY IMAGES BASIC STYLING */
    .gallery_image_small {
      width: 160px;
      max-width: 160px;
    }



  }

}

#AI_banner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  /* Allow height to adjust based on content */
}

#AI_banner img {
  width: 100vw;
  height: auto;

}

#AI_banner h4 {
  position: absolute;
  font-family: sans-serif;
  font-size: 4em;
  text-shadow: 2px 2px 3px rgba(253, 245, 0, 0.6);
  color: white;
  z-index: 4;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  #AI_banner h4 {
    font-size: 3em;
  }

}

@media screen and (max-width: 700px) {
  #AI_banner h4 {
    font-size: 6vw;
  }

}



#AI_banner .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 100% of the parent container's height */
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

/* ------------------ Site typography normalization ------------------ */
/* Headings: nice serif; Body: readable sans-serif. Avoid changing nav/title/footer. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  --site-heading-font: 'Noto Serif', serif;
  --site-body-font: Arial, Helvetica, sans-serif;
  --site-text-color: #424242;
}

/* Apply body font to main content areas */
.main_content_wo_sidebar,
.main_content_wo_sidebar_blog_pages,
.main_content_index,
.main_content_guide,
.main_content,
.bio_content,
.apply_filter_button,
.panels .panel,
.morphology_sections,
.characterGrid,
.characterState,
.characterDefinition,
.name_species,
.gallery_small,
.info,
.figure_genus,
.figure,
article,
section,
.panel p,
.main_content_index p,
.main_content_wo_sidebar p,
.main_content p,
.bio_content p {
  font-family: var(--site-body-font) !important;
  color: var(--site-text-color);
}

/* Apply heading font to semantic headings and panel/section titles
   but do NOT override `.main_title`, `.subtitle`, or nav/link fonts */
h1, h2, h3, h4, h5, h6,
.main_content_guide h1,
.morphologySubSection>h3,
.panel-title,
.name_species h2,
.title_genus_page {
  font-family: var(--site-heading-font) !important;
  color: #222;
}

/* Keep nav/title/footer fonts unchanged by not including their selectors here */
/* End typography normalization */

/* Footer donate column */
.footer-donate-blurb {
  font-size: 0.85rem;
  color: #a0a0b8;
  line-height: 1.55;
  margin-bottom: 1rem;
}

.footer-donate-btn {
  display: inline-block;
  background: #c17b2a;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}

.footer-donate-btn:hover {
  background: #a0621e;
  color: #fff;
}

.imageSize {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

}

.imageSize p {
  font-family: sans-serif;
  padding-right: 4px;
  font-size: 1.2em;
  font-weight: 300;

}


.apply_filter_button {
  justify-content: center;

  font-size: 1.12rem;
  text-align: left;
  text-indent: 0px;
  line-height: 1.25;
  padding-top: 60px;
  font-family: "apercu-pro";
  max-width: 550px;
  /* min-width: 450px; */
  padding-right: 50px;
  padding-bottom: 50px;
  text-align: left;
}

.name_species h2 {
  font-size: 2.5em;
  font-family: sans-serif;
  padding-bottom: 50px;
}

.name_species {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
  max-width: 750px;
  text-indent: 0px;
  /* background-color: yellow; */
  font-family: "apercu-pro";
}

.name_species p {
  line-height: 1.5em;
  color: #112733;
  font-family: sans-serif;
  font-size: 1.2em;
}

.new_species_box {
  margin-top: 65px;
  width: 400px;
  height: 400px;
  background-color: rgb(240, 240, 240);
  border: solid;
  border-width: 1px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

.new_species_box header {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 30px;
  text-align: center;
  background-color: #b4bbd4;
}

.new_species_box h2 {
  text-align: left;
  padding-left: 15px;
}

.new_species_box ul {
  padding-top: 15px;
  padding-left: 25px;
  font-size: 20px;
  font-family: sans-serif;
  padding-right: 5px;
}

.new_species_box li {
  padding-top: 8px;
}

.species_card_gallery {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
  justify-content: left;
  margin-left: auto;
  margin-right: auto;
  align-items: flex-start;
}

.new_species_card {
  line-height: 1.4;
}



/* --------------------------------------------------------------------------
   TAXONOMIC KEYS — bracket layout

   A dichotomous couplet is a fork, so the layout draws one: a hairline spine
   with a tick into each lead, the couplet number seated at the vertex, and the
   result reached by a dot leader. No cards, no panels. Palette is taken from
   the section-toggle tokens so the key belongs to its own warm header bar.
   -------------------------------------------------------------------------- */

.key-couplets-wrapper {
  --key-numeral: #6e342d;
  --key-accent: #b24f43;
  --key-rule: #dcd3c4;
  --key-ink: #33302b;
  --key-ink-soft: #7c7268;
  --key-paper: #fcfaf6;

  /* The gutter the couplet number and the em dash share. Two lengths, because
     three rules have to agree on them: the couplet's own indent, the number's
     absolute box, and the dash's, which hangs back out of the lead by exactly one
     gutter. They had drifted apart at the mobile breakpoint, where the couplet
     indent was narrowed but the dash's -3.2rem offset was not -- putting the dash
     a full 1.1rem left of the number it lines up with, and outside the couplet. */
  --key-gutter: 3.2rem;
  --key-marker-w: 2.1rem;

  /* No measure cap here, deliberately, and this is the second time it has been
     tried and dropped. Capping the prose alone leaves the text stopping halfway
     while the plate below runs on. Capping it and moving the figures into the
     freed column fixes that but costs the figures their size -- they fall from
     250px to about 158px, and on a key whose habitus photographs are the evidence
     that is the wrong thing to spend width on. The full-measure lead with a
     four-across plate underneath is worth more than a short line is. */

  /* The only fill in the key: the wash under a lead you can click. Everything
     else is set with rules, indent and space. Mirrored in the
     [data-theme="dark"] block near the end of this file. */
  --key-lead-surface-hover: #f2ede2;

  /* One column for the whole key. Everything inside -- lead text, the plate of
     figures, the dot leader and its destination -- runs to these same two edges.
     Capping the prose instead (max-width on .lead-statement) left the text
     stopping halfway while the figures ran on to the right, which is what made
     the block look unbalanced. */
  max-width: 68rem;
  margin: 22px 0 0;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  color: var(--key-ink);
}

/* Keys that reach three-digit couplets need a wider number column -- Gauld 1988 on
   Enicospilus goes to 135, and every earlier key on the site stopped in the fifties,
   so 2.1rem was enough until now. key.js adds .key-wide-numbers to the key container
   after measuring the CSV, so no other key pays the extra indent. Both tokens move
   together; the couplet indent, the number's box and the dash's offset all read them. */
.key-wide-numbers .key-couplets-wrapper {
  --key-gutter: 4.2rem;
  --key-marker-w: 3.1rem;
}

/* Note applying to the whole key, from the key_note CSV column. */
.key-note {
  max-width: 100%;
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 2px solid var(--key-rule, #dcd3c4);
  background: none;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  font-size: 0.92rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--key-ink-soft, #7c7268);
}

.key-publications-list {
  max-width: 100%;
  margin: 14px 0 0;
}

.key-publication-card {
  margin-bottom: 0;
}

.key-publication-card.is-missing {
  border-color: var(--key-accent, #b24f43);
}

/* --- Lead-level notes: inline badge + numbered footnote --- */

/* Boilerplate "described as new here" collapses to a badge on the taxon. */
.key-note-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid var(--key-rule, #dcd3c4);
  border-radius: 9px;
  font-size: 0.72rem;
  font-style: normal;
  font-variant: all-small-caps;
  letter-spacing: 0.04em;
  white-space: nowrap;
  vertical-align: 1px;
  color: var(--key-ink-soft, #7c7268);
}

.key-note-ref {
  margin-left: 3px;
  padding: 0 1px;
  font-size: 0.7em;
  font-weight: 600;
  cursor: pointer;
  color: var(--key-accent, #6b8fb0);
}

.key-note-ref:hover,
.key-note-ref:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* Genus card: same construction as the note popup, one element refilled per genus.
   Sized to match the species card on the nomenclature pages -- the two do the same
   job on either side of the site and a 320px genus card next to a 700px species one
   read as an afterthought. The width is spent on the two things a reader hovers a
   genus for: the specimens and the range. */
.key-genus-card {
  position: fixed;
  z-index: 2550;
  left: 0;
  top: 0;
  /* The key's own palette, restated here because the card is a child of <body> --
     it has to be, or the couplet panel's overflow would clip it -- and so sits
     outside .key-couplets-wrapper where these tokens are declared. Without this the
     card silently took the light fallbacks in both themes. */
  --key-rule: #dcd3c4;
  --key-ink: #33302b;
  --key-ink-soft: #7c7268;
  --key-accent: #b24f43;

  /* The height ceiling for a photo row, shared with layoutGenusThumbs() in key.js,
     which reads this property. Kept here so there is one number, not two that drift. */
  --key-thumb-max-h: 150px;
  --key-thumb-gap: 7px;
  width: min(50%, 700px);
  max-width: calc(100% - 24px);
  padding: 15px 17px 15px;
  border: 1px solid var(--key-rule, #dcd3c4);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  color: var(--key-ink, #3d3730);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;

  /* Name across the top, photographs across the width beneath it, then the map and
     the places it was recorded from side by side. Column gap only: the rows space
     themselves with margins, so a row that is absent (a genus with no photographs)
     leaves no gap behind it. */
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "thumbs thumbs"
    "map regions";
  column-gap: 20px;
  align-items: start;
}

.key-genus-card-head { grid-area: head; }
.key-genus-card-thumbs { grid-area: thumbs; }
.key-genus-card-map { grid-area: map; }
.key-genus-card-regions { grid-area: regions; }

/* Nothing to put in the left column, so the text takes the whole width rather than
   sitting in a half-card column beside an empty one. */
.key-genus-card:not(.has-map) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "thumbs"
    "map"
    "regions";
}

.key-genus-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.key-genus-card-name {
  display: block;
  font-size: 1.34rem;
  line-height: 1.2;
}

.key-genus-card-author {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--key-ink-soft, #7c7268);
}

/* all-small-caps, so it reads as a caption under the name rather than competing
   with it. */
.key-genus-card-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--key-ink-soft, #7c7268);
}

.key-genus-card-thumbs {
  display: flex;
  gap: var(--key-thumb-gap);
  align-items: flex-start;
  margin: 13px 0 0;
}

.key-genus-card-thumbs:empty,
.key-genus-card-thumbs.is-empty {
  display: none;
}

/* Fixed height, automatic width: each photo keeps its own proportions, so it is
   neither stretched nor cropped. These specimen shots are landscape (~3:2), and a
   square cell cropped the head and the tip of the metasoma straight off.
   layoutGenusThumbs() then justifies the row to the card's width, the way a photo
   gallery does -- equal heights, widths in proportion to each image. This rule is
   what that falls back to, so the row is still correct if it never runs.
   object-fit: contain is the belt and braces: whatever box an image ends up in,
   it can letterbox but it can never distort or crop. */
.key-genus-card-thumbs img {
  height: var(--key-thumb-max-h);
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  object-fit: contain;
  border-radius: 3px;
  background: #f2f2f2;
}

.key-genus-card-map {
  margin: 14px 0 0;
}

/* The frame is fitted to the genus, so its proportions vary. A ceiling keeps a
   tall range (the Americas end to end) from running the card off the screen. */
.key-genus-card-map .key-genus-map-svg {
  max-height: 330px;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}

.key-genus-card-map.is-unavailable {
  display: none;
}

/* Nothing to show for this genus: the outline stays as context, faded. */
.key-genus-card-map.is-dim {
  opacity: 0.45;
}

.key-genus-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

.key-genus-map-region {
  fill: var(--map-land);
  stroke: var(--map-land-line);
  stroke-width: 0.3;
  vector-effect: non-scaling-stroke;
}

.key-genus-map-region.is-present {
  fill: var(--map-present);
  stroke: var(--map-present-line);
}

/* Recorded from the country but not resolved to a subdivision. Same hue, so it
   reads as the same fact at lower confidence rather than as a second category. */
.key-genus-map-region.is-coarse {
  fill: var(--map-coarse);
  stroke: var(--map-coarse-line);
}

.key-genus-card-regions {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--key-ink, #3d3730);
}

/* Beside a map, the names have a column to themselves and are set one per line --
   a run of middots in a narrow column wraps into an unreadable ribbon. Under a
   card with no map at all they stay inline, where a single line is the right shape
   for "No distribution data". */
.key-genus-card.has-map .key-genus-card-regions::before {
  content: 'Recorded from';
  display: block;
  margin-bottom: 5px;
  font-size: 0.72rem;
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
  color: var(--key-ink-soft, #7c7268);
}

.key-genus-card.has-map .key-genus-region { display: block; }

.key-genus-region-more {
  color: var(--key-ink-soft, #7c7268);
}

@media (max-width: 750px) {
  .key-genus-card {
    /* The card already spans the viewport here, so map and list stack. */
    --key-thumb-max-h: 110px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "thumbs"
      "map"
      "regions";
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 12px;
    width: auto;
  }

  .key-genus-card-map .key-genus-map-svg {
    max-height: 240px;
  }
}

/* Notes read in place, in a popup anchored to their marker. Fixed and on <body>
   so the tab panel's overflow cannot clip it. */
.key-note-popup {
  position: fixed;
  z-index: 2600;
  left: 0;
  top: 0;
  width: max-content;
  max-width: min(420px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid var(--key-rule, #dcd3c4);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--key-ink, #3d3730);
  max-height: min(60%, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.key-note-popup.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Only a pinned note takes the pointer, so a hovered one can never sit between
   the cursor and the marker it belongs to. */
.key-note-popup.is-pinned {
  pointer-events: auto;
}

@media (max-width: 750px) {
  .key-note-popup {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 12px;
    width: auto;
    max-width: none;
  }
}

.key-note-ref[aria-expanded="true"] {
  text-decoration: underline;
}

/* The popup cannot print, so the list returns for print only and the markers
   keep something to refer to. */
.key-footnotes-print-only {
  display: none;
}

@media print {
  .key-footnotes-print-only {
    display: block;
  }
  .key-note-popup {
    display: none;
  }

  /* The screen design is already almost all rules and space, so it prints close
     to as-is. Only the hover fill needs suppressing, and couplets should not be
     split across a page. */
  .couplet {
    break-inside: avoid;
  }
  .key-line,
  .key-line.couplet-link:hover {
    background: none !important;
  }
}

.key-footnotes {
  max-width: 1180px;
  margin: 18px 0 4px;
  padding: 12px 0 0;
  border-top: 1px solid var(--key-rule, #dcd3c4);
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--key-ink-soft, #7c7268);
}

.key-footnotes-heading {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-variant: all-small-caps;
  letter-spacing: 0.06em;
}

.key-footnotes ol {
  margin: 0;
  padding-left: 1.6em;
}

.key-footnotes li {
  margin: 0 0 5px;
  padding: 1px 4px;
  border-radius: 3px;
}

/* Same flash the couplet targets use, so a marker and its note connect. */
.key-footnotes li.is-target {
  animation: keyCoupletTarget 1.1s ease-out;
}

/* The couplet is the sheet: one surface per couplet, leads set as plain text
   on it. The shadow does the separating, so nothing needs a border. */
/* A couplet is one decision point and has to read as a single object down a key
   82 of them long -- but grouping by nesting surfaces (card > tinted lead > white
   figure card) stacked three backgrounds on each other and looked like a form.
   The number and the rail beside it do the same job with no boxes at all. */
/* Couplets are grouped by space, not by boxes or rules. The gap between two
   couplets is about three times the gap between the leads inside one, and that
   ratio alone is what makes a couplet read as a unit -- lines between leads cut
   the couplet up instead of holding it together. */
.couplet {
  position: relative;
  margin: 0 0 46px;
  padding: 0 0 0 var(--key-gutter);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The couplet number labels the group, so it sits at the top of the card rather
   than beside its middle. It is left in normal flow -- a generated ::before is
   the card's first child -- instead of absolutely positioned in a 3.25rem
   gutter: on a tall couplet the old `top: 50%` put the number nowhere near the
   text it numbers, and the gutter cost every lead 3.25rem of measure. */
/* The number marks the couplet and sits beside its first lead; every later lead
   is marked with a dash in the same column. That is how a printed key tells a
   decision point from one of its alternatives, and it needs no rules at all. */
.couplet[data-couplet]::before {
  content: attr(data-couplet);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--key-marker-w);
  text-align: right;
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  font-size: 1.55rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--key-numeral);
}

.couplet:last-child {
  margin-bottom: 6px;
}

/* Each lead is one alternative, and gets its own surface so two 400-character
   leads cannot run together. The left bar is the affordance: it lights up on
   hover, which on a lead that points to another couplet is also a click target. */
/* A lead is prose, so it is set as prose: no fill, no outline, no rule. */
.key-line {
  position: relative;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The second and later leads of a couplet. The general sibling combinator so it
   still matches across an intervening plate of figures, and so a polytomous
   couplet's third lead is marked too. */
.key-line ~ .key-line {
  margin-top: 15px;
}

.key-line ~ .key-line::before {
  content: "\2014";
  position: absolute;
  left: calc(-1 * var(--key-gutter));
  top: 0;
  width: var(--key-marker-w);
  text-align: right;
  color: var(--key-ink-soft);
  font-size: 1.1rem;
  line-height: 1.55;
}

/* Only a lead that goes somewhere is clickable, so only that one reacts -- and it
   reacts in the ink rather than behind it, since a fill would put the boxes back. */
.key-line.couplet-link:hover .lead-statement,
.key-line.couplet-link:focus-visible .lead-statement {
  color: var(--key-numeral);
}

.key-line.couplet-link:hover::before,
.key-line.couplet-link:focus-visible::before {
  color: var(--key-accent);
}

.lead {
  display: block;
  color: var(--key-ink);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: break-word;
}

.lead.lead-structured {
  display: block;
}

/* The bracket tick is the marker now */
.lead-marker {
  display: none;
}

/* The measure is set once, by the key's own column. Capping the prose here as
   well made it stop short of the figures and the leader beside it. */
.lead-statement {
  display: block;
  min-width: 0;
}

.leader-row {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto;
  align-items: baseline;
  gap: 0.6em;
  min-width: 0;
  margin-top: 4px;
}

/* A plate of four is the common case, so the cell is whatever divides the column
   into four -- a fixed 250px overflowed it by 17px and dropped the fourth figure
   onto a line of its own with a hole beside it. */
.keyImagesContainer {
  --key-fig-w: min(250px, calc((100% - 3 * 18px) / 4));
}

/* Dot leader, as a printed key sets it */
.leader {
  border-bottom: 1px dotted var(--key-rule);
  height: 0.55em;
  width: 100%;
}

.result {
  color: var(--key-ink);
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
}

/* key.js nests the figures inside their own lead, so nothing here has to tie them
   to it -- they are already inside the block the rule and the rail delimit. */
.keyImagesContainer {
  /* Height of the image area itself, before a figure card's padding. Named so the
     captioned and uncaptioned cases can stay the same size while only one of them
     carries that padding. */
  --key-fig-h: 190px;
  padding: 12px 0 4px;
  background: none;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  /* Top-aligned, not bottom-aligned: figure boxes differ in height whenever one
     caption wraps and its neighbour does not, and bottom-aligning then pushes the
     images themselves out of line. */
  align-items: flex-start;
  gap: 14px 18px;
}

/* Figures sit in equal-width columns with an image area of fixed height, so a row
   of them lines up: tops level, captions starting on the same baseline, whatever
   each picture's aspect ratio. Heinrich's plates run from 3.2:1 femora to 0.75:1
   heads, and habitus photos are wider again, so sizing to the content alone is
   always ragged. Images are bottom-aligned in that area, which keeps a short wide
   femur sitting on the same line as the caption below it. */
.keyImagesContainer .key-figure-link {
  display: flex;
  height: var(--key-fig-h);
  align-items: flex-end;
  justify-content: center;
}

/* A lone figure has nothing to line up with, so the fixed cell buys nothing and
   -- now that the figure has a visible card around it -- shows as dead space
   above a short, wide drawing. Sizing to the image is safe here because the
   ceiling below is an absolute length, not the percentage that once let a
   4500 px photo escape. */
.keyImagesContainer:has(> :only-child) .key-figure-link,
.keyImagesContainer > .key-figure-link:only-child {
  height: auto;
}

.keyImagesContainer img {
  /* The absolute ceiling is the belt to `100%`'s braces: a percentage max-height
     silently resolves to none if an ancestor ever loses its definite height, and
     the source images are up to 4500 px wide. */
  max-height: var(--key-fig-h);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* key.js emits a bare link when a figure has no caption, so that case needs the
   same cell as a captioned one — both to line up with its neighbours, and because
   a link with `height: auto` leaves the image's `max-height: 100%` with no definite
   parent to resolve against, which lets a 4500 px photo render at full size. */
.keyImagesContainer > .key-figure-link {
  width: var(--key-fig-w);
  height: var(--key-fig-h);
}

/* Key figures open full size in FancyBox, so they have to read as clickable.
   The lift is deliberately smaller than the gallery's: these sit inline in a
   dense key and a large movement would jitter the surrounding text.

   It is applied to the image rather than to the link, because the link is a
   fixed 190px cell with the picture standing on its floor. On the link, the
   shadow drew the whole cell -- a lit rectangle of empty white above every
   figure shorter than the cell, which is most of them. */
.key-figure-link {
  display: inline-block;
  line-height: 0;
}

.key-figure-link img {
  border-radius: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.key-figure-link:hover img,
.key-figure-link:focus-visible img {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
}

/* FancyBox returns focus to the thumbnail it was opened from, so closing the
   lightbox left Chrome's default ring drawn around the whole 190px cell: a
   black box standing well off the picture with empty space inside it, on a
   figure the reader had only clicked. The link keeps no ring of its own; the
   indicator moves onto the image and takes the key's own focus colour, so it
   marks the figure you just came back from instead of boxing its cell. */
.key-figure-link:focus,
.key-figure-link:focus-visible {
  outline: none;
}

.key-figure-link:focus-visible img {
  outline: 2px solid rgba(178, 79, 67, 0.45);
  outline-offset: 3px;
}

/* No card around a figure. A specimen photograph already carries its own frame
   of grey studio background; boxing that in white on a tinted tray put three
   backgrounds in a row and made a plate of four photographs look like a form.
   Overrides the global `figure` rule, which paints a white card with a shadow. */
.keyImagesContainer .key-figure,
.keyImagesContainer > .key-figure-link {
  background: none;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

.keyImagesContainer .key-figure {
  box-shadow: none;
  margin: 0;
  /* A set width, not just a maximum: equal columns are what make the captions
     align. min() keeps it from overflowing a narrow screen. */
  width: var(--key-fig-w);
  max-width: 100%;
  border-radius: 0;
}

.keyImagesContainer .key-figure figcaption {
  margin-top: 4px;
  font-size: 0.82rem;
  line-height: 1.3;
  font-style: italic;
  opacity: 0.75;
}

/* Bitonal line art on a dark ground would glare, so the plate scans are dimmed
   slightly and lifted back to full strength on hover. */
/* Inverting is what makes a black-on-white scanned plate readable on a dark
   ground, but it turns a photograph into a negative -- the tribal key's habitus
   shots came out as light wasps on white. The scanned line-art sets are served
   from a `*_figs/` directory (Heinrich_1960_partII_figs, _1961_partIII_figs,
   _partIV_figs, Heinrich_1977_figs, Townes_1959_figs, Townes_1960_figs), so the
   path stands in for "this is line art".

   Gauld_1988_figs is the exception that breaks that rule, and it holds all 352 of
   that paper's figures. Splitting the line drawings out into a sibling directory
   so they would invert was considered and rejected: Gauld's plates MIX the two
   kinds -- figs 19, 20, 65-70, 86 and 87 are halftones sitting among the drawings
   -- so no directory split is clean. Not inverting a line drawing is cosmetic.
   Inverting a photograph is a bug. Excluded by name rather than by loosening the
   match, so any line-art set added later still inverts by default. */
/* Gauld_1976_figs is excluded for the same reason. That paper's plates mix line
   drawings with halftones -- the fore coxae (figs 222-224), the propodea (226-230)
   and the two pronota drawn from electronmicrographs (208, 209) are tonal -- and its
   crops are grey-ground scans rather than bitonal, so inversion buys little even on
   the drawings. */
[data-theme="dark"] .keyImagesContainer img[src*="_figs/"]:not([src*="Gauld_1988_figs/"]):not([src*="Gauld_1976_figs/"]) {
  filter: invert(1) hue-rotate(180deg);
  opacity: 0.88;
}

[data-theme="dark"] .key-figure-link:hover img,
[data-theme="dark"] .key-figure-link:focus-visible img {
  opacity: 1;
}

/* A lead that points to another couplet is clickable, so it has to look it:
   the row washes rust, the leader inks in, and the arrow steps toward its
   destination. Terminal leads are not clickable and get none of this. */
.couplet-link {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

/* The lead's own :hover rule already carries the surface and bar change. */
.couplet-link:hover .leader,
.couplet-link:focus-visible .leader {
  border-bottom-color: var(--key-accent);
}

/* Destination | count, in two tracks of fixed length. Fixed, not `auto`: every
   result is its own grid, so an `auto` track sizes to its own row and the numbers
   wander instead of forming a column down the key.

   The first track has to hold an interpolated label -- Heinrich inserts "11a" and
   "39a" rather than renumbering a key behind them -- which at 1.7em was narrower
   than the label and broke it onto a second line, stranding a digit at the margin.

   The count's track is set in rem so it does not scale with the numeral beside it,
   and is sized snugly to the longest count the keys actually produce ("95 spp").
   At 5em it ran a third wider than its own text, and because the count sat at the
   start of it the block stopped short of the right edge that terminal taxa run to. */
.couplet-link .result {
  display: inline-grid;
  grid-template-columns: 2.6em 4rem;
  align-items: baseline;
  gap: 0 0.5em;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--key-numeral);
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
}

/* A lead reaching a single taxon carries no count, so the block is the numeral on
   its own -- and still has to finish on the same right edge as every other one. */
.couplet-link .result:not(:has(.key-taxa-badge)) {
  grid-template-columns: 2.6em;
}

.couplet-target {
  justify-self: end;
}

.couplet-link:hover .result {
  color: var(--key-accent);
}

/* The other outcome: this lead ends the identification. Given weight so a name
   reads as an answer rather than as more of the lead's prose. */
.key-line:not(.couplet-link) .result {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--key-ink);
}

.couplet-link:focus-visible {
  outline: 2px solid rgba(178, 79, 67, 0.45);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Pulse the destination numeral when a lead points you to it */
@keyframes keyCoupletTarget {
  0% { color: var(--key-numeral); }
  25% { color: var(--key-accent); }
  100% { color: var(--key-numeral); }
}

.couplet.is-target[data-couplet]::before {
  animation: keyCoupletTarget 1.1s ease-out;
}

/* Terminal taxa: set as names, not as links. The binomial carries the
   underline; the authority stays quiet beside it.

   Not scoped to .result: the same links are built inside .key-taxon-chip when a
   couplet's taxa panel is opened, and while these rules named .result only, those
   chip links matched nothing at all and fell back to the browser default -- blue,
   purple once visited, underlined, in a key that has no other blue in it. */
.result .key-species-link,
.result .key-genus-link,
.key-taxon-chip .key-species-link,
.key-taxon-chip .key-genus-link {
  display: inline;
  cursor: pointer;
  color: var(--key-ink-soft);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}
.result .key-species-link em,
.result .key-genus-link em,
.key-taxon-chip .key-species-link em,
.key-taxon-chip .key-genus-link em {
  font-style: italic;
  font-weight: 600;
  color: var(--key-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(178, 79, 67, 0.4);
  text-underline-offset: 0.16em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.result .key-species-link:hover,
.result .key-genus-link:hover,
.result .key-species-link:hover em,
.result .key-genus-link:hover em,
.key-taxon-chip .key-species-link:hover,
.key-taxon-chip .key-genus-link:hover,
.key-taxon-chip .key-species-link:hover em,
.key-taxon-chip .key-genus-link:hover em {
  color: var(--key-accent);
  text-decoration-color: var(--key-accent);
}
.result .key-species-link:focus-visible,
.result .key-genus-link:focus-visible,
.key-taxon-chip .key-species-link:focus-visible,
.key-taxon-chip .key-genus-link:focus-visible {
  outline: 2px solid rgba(178, 79, 67, 0.45);
  outline-offset: 2px;
}

/* --- Morphospecies terminals --------------------------------------------
   An undescribed or unidentified species, standing at the end of a lead under a
   working code. It is set exactly as a described species is -- same size, same
   weight, same underline -- because it is the same kind of answer: this is where
   the key ends. Only the pill beside it says the name is provisional. Making the
   name itself look tentative would be the wrong signal; the reader has still
   identified their specimen. */
.result .key-morphospecies-link {
  display: inline;
  cursor: pointer;
  color: var(--key-ink-soft);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.15s ease;
}

/* The genus is a real name and stays italic; the code is not Latin and does not.
   The underline sits under the pair, since together they are the name. */
.result .key-morphospecies-link em {
  font-style: italic;
  font-weight: 600;
  color: var(--key-ink);
}

.result .key-morphospecies-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(178, 79, 67, 0.4);
  text-underline-offset: 0.16em;
  font-weight: 600;
  color: var(--key-ink);
}

.result .key-morphospecies-link:hover,
.result .key-morphospecies-link:hover em {
  color: var(--key-accent);
  text-decoration-color: var(--key-accent);
}

.result .key-morphospecies-link:focus-visible {
  outline: 2px solid rgba(178, 79, 67, 0.45);
  outline-offset: 2px;
}

/* A code in the key with no row in the specimen CSV -- usually a typo in the
   code. Marked while a key is being written rather than failing silently. */
.result .key-morphospecies-link.is-unrecorded {
  text-decoration-style: wavy;
  text-decoration-color: rgba(178, 79, 67, 0.55);
}

/* Reuses .key-note-badge, which is now this badge's only user: the "new sp."
   pill that class was written for is no longer rendered. */
.key-status-badge {
  vertical-align: 1px;
}

/* The card. Same furniture as the genus card, at the size the described-species
   card uses, so moving between the two does not feel like moving between two
   different sites. */
.key-morpho-card {
  position: fixed;
  z-index: 2550;
  left: 0;
  top: 0;
  width: 330px;
  max-width: calc(100% - 24px);
  padding: 14px 16px;
  border: 1px solid var(--key-rule, #dcd3c4);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  font-family: var(--site-body-font, Arial, Helvetica, sans-serif);
  color: var(--key-ink, #33302b);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.key-morpho-card.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.key-morpho-card-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
}

.key-morpho-card-status {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  font-variant: all-small-caps;
  letter-spacing: 0.04em;
  color: var(--key-ink-soft, #7c7268);
}

.key-morpho-card-status.is-empty {
  display: none;
}

/* Photographs share the row at one height, whatever their proportions -- these
   are habitus shots at ~3:2 and a square cell would take the head off. */
.key-morpho-card-thumbs {
  display: flex;
  gap: 6px;
  margin: 10px 0 0;
}

.key-morpho-card-thumbs:empty {
  display: none;
}

.key-morpho-card-thumbs img {
  min-width: 0;
  flex: 1 1 0;
  height: 96px;
  object-fit: contain;
  border-radius: 3px;
  background: #f2f2f2;
}

.key-morpho-card-meta {
  margin-top: 8px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--key-ink-soft, #7c7268);
}

.key-morpho-card-meta:empty {
  display: none;
}

.key-morpho-card-meta-part {
  white-space: nowrap;
}

.key-morpho-card-diagnosis {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dotted var(--key-rule, #dcd3c4);
  font-size: 0.88rem;
  line-height: 1.45;
}

.key-morpho-card-diagnosis.is-empty {
  display: none;
}

/* On a phone the card is pinned to the bottom rather than anchored to a name a
   few characters wide, the way the note popup and species card already behave. */
@media (max-width: 750px) {
  .key-morpho-card {
    left: 12px !important;
    right: 12px;
    top: auto !important;
    bottom: 12px;
    width: auto;
  }
}

/* Count of taxa reachable through a lead — a quiet annotation on the pointer.
   Aligned to the end of its track, so the numeral, the count and a terminal taxon
   name all finish on one edge.

   Set in the soft ink rather than the gold it used to carry: gold on this paper is
   3.1:1, which is below the 4.5:1 the count needs at 0.82rem, and it also read as
   loud as the maroon numeral it annotates. The count is the smaller fact of the
   two. */
.key-taxa-badge {
  display: inline-block;
  justify-self: end;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--key-ink-soft);
  background: none;
  border-radius: 0;
  padding: 0;
  margin-left: 0;
  cursor: pointer;
  transition: color 0.15s ease;
  vertical-align: baseline;
  user-select: none;
}
.key-taxa-badge::before {
  content: "\00b7\00a0";
  color: var(--key-rule);
}
.key-taxa-badge:hover,
.key-taxa-badge.active {
  color: var(--key-accent);
}

.key-taxa-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 0 14px 1.5rem;
  border-top: 1px dotted var(--key-rule);
  border-bottom: 0;
  animation: keyTaxaFadeIn 0.15s ease;
}
@keyframes keyTaxaFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.key-taxon-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--key-paper);
  border: 1px solid var(--key-rule);
  border-radius: 4px;
  padding: 4px 10px 4px 4px;
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.3;
  color: var(--key-ink);
}
/* Inside a chip the pill already reads as a target, so the name drops the
   underline it carries when it sits bare at the end of a couplet. */
.key-taxon-chip .key-genus-link em,
.key-taxon-chip .key-species-link em {
  text-decoration: none;
}

.key-taxon-chip.clickable {
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.key-taxon-chip.clickable:hover {
  background: var(--key-paper);
  border-color: var(--key-accent);
  color: var(--key-accent);
}
.key-taxon-chip:not(.clickable) {
  padding-left: 10px;
}

.key-taxon-thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

@media (max-width: 750px) {
  .key-taxa-panel {
    flex-direction: column;
    padding-left: 1.1rem;
  }
  .key-taxon-chip {
    width: 100%;
    box-sizing: border-box;
  }
  /* The gutter survives on narrow screens, just narrower — it is what tells a
     couplet from one of its leads, and 2.7rem is cheap even at 360px. Narrowing it
     here is now the whole change: the number, the dash and the couplet indent all
     read it from the same two tokens. */
  .key-couplets-wrapper {
    --key-gutter: 2.7rem;
    --key-marker-w: 1.9rem;
  }
  /* Same allowance for a three-digit key, scaled to the narrower mobile number
     (1.35rem, not 1.55rem). Without this the desktop 4.2rem would win on
     specificity and spend width the 360px viewport does not have. */
  .key-wide-numbers .key-couplets-wrapper {
    --key-gutter: 3.6rem;
    --key-marker-w: 2.7rem;
  }
  /* Tighter than the desktop's 46px, but the ratio to the 15px between two leads
     is what groups a couplet, so it cannot close much further than this. */
  .couplet {
    margin-bottom: 38px;
  }
  .couplet[data-couplet]::before {
    font-size: 1.35rem;
  }
  /* Narrow screens stack the columns, so a shorter image area keeps a couplet
     with two figures from filling the whole viewport. */
  .keyImagesContainer .key-figure-link {
    height: 150px;
  }
  .keyImagesContainer img {
    max-height: 150px;
  }
  .lead {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .key-taxa-panel {
    animation: none;
  }
  .couplet.is-target[data-couplet]::before {
    animation: none;
  }
  .key-line::before,
  .couplet-link,
  .result .key-species-link,
  .result .key-genus-link,
  .key-taxa-badge,
  .key-taxon-chip.clickable {
    transition: none;
  }
}

/* --- Pensoft key styles --- */

.pensoft-key-container {
  margin-bottom: 4px;
}
/* Box metrics come from .key-publications-list / .key-publication-card, shared with
   key.js's citation cards. This rule is only a hook for the region badge below. */
.pensoft-key-citation .publication-authors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pensoft-key-region-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #6b5ea8;
  color: #fff;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}
.pensoft-key-lead-row {
  display: block;
}

.lead-copy {
  display: block;
  line-height: 1.48;
}

.pensoft-key-lead-row .lead {
  display: inline-block;
  width: 1.2em;
  margin-right: 0.4em;
  color: #8a97a4;
  font-weight: 600;
}

/* The marker belongs to the gutter -- the couplet number on a first lead, the
   ::before em dash on an alternate -- so pensoft-key.js empties the label the data
   carries. An empty inline-block still held its 1.2em + 0.4em open, which is what
   started every first line 1.6em in while its wrapped lines returned to the block
   edge: the second line began to the left of the first. */
.pensoft-key-lead-row .lead:empty {
  display: none;
}

/* A label the renderer keeps -- "1a"/"1b", or a primed couplet such as "34’" --
   hangs instead, so its continuation lines line up under the first rather than
   out-denting. Done with flex, not padding + negative text-indent: text-indent
   inherits, and it takes effect again inside every inline-block descendant, which
   dragged each figure chip's own text 1.6em left of its box and over the words
   before it. */
.pensoft-key-lead-row:has(.lead:not(:empty)) .lead-copy {
  display: flex;
  align-items: baseline;
}
.pensoft-key-lead-row:has(.lead:not(:empty)) .lead-text {
  flex: 1 1 auto;
}

.pensoft-key-figrefs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
}
.pensoft-key-figref {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(163, 87, 24, 0.28);
  background: rgba(163, 87, 24, 0.08);
  color: #7a3e0f;
  text-decoration: none;
  font-size: 0.83em;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.pensoft-key-figref:hover {
  background: rgba(163, 87, 24, 0.16);
  border-color: rgba(163, 87, 24, 0.42);
}
.pensoft-key-figure-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #8d4312;
  text-decoration: none;
  vertical-align: baseline;
}
.pensoft-key-figure-link__label {
  padding: 0.02em 0.3em 0.08em;
  border-radius: 0.35em;
  border: 1px solid rgba(163, 87, 24, 0.22);
  background: rgba(163, 87, 24, 0.09);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(141, 67, 18, 0.55);
  text-underline-offset: 0.14em;
  cursor: zoom-in;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pensoft-key-figure-link:hover .pensoft-key-figure-link__label,
.pensoft-key-figure-link:focus-visible .pensoft-key-figure-link__label {
  background: rgba(163, 87, 24, 0.18);
  border-color: rgba(163, 87, 24, 0.42);
  color: #6d2f08;
  text-decoration-color: rgba(109, 47, 8, 0.72);
}
.pensoft-key-figure-preview {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  /* --fig-preview-shift is set by pensoft-key.js when a chip sits near a window
     edge and the centred box would hang off it. */
  transform: translateX(calc(-50% + var(--fig-preview-shift, 0px))) translateY(4px);
  /* These are multi-panel plates -- a whole figure of six or eight lettered
     panels behind one "Fig. 38F" chip -- so 132px was small enough that the
     panel the lead actually cites could not be made out. */
  width: 340px;
  max-width: min(340px, 88vw);
  padding: 6px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 20;
}
.pensoft-key-figure-link:hover .pensoft-key-figure-preview,
.pensoft-key-figure-link:focus-visible .pensoft-key-figure-preview {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--fig-preview-shift, 0px))) translateY(0);
}

/* Flipped under the chip, for a couplet too near the top of the window to open
   upwards. pensoft-key.js adds the class after measuring; it rises into place from
   the other side so the motion still reads as coming out of the reference. */
.pensoft-key-figure-preview.is-below {
  bottom: auto;
  top: calc(100% + 12px);
  transform: translateX(calc(-50% + var(--fig-preview-shift, 0px))) translateY(-4px);
}
.pensoft-key-figure-link:hover .pensoft-key-figure-preview.is-below,
.pensoft-key-figure-link:focus-visible .pensoft-key-figure-preview.is-below {
  transform: translateX(calc(-50% + var(--fig-preview-shift, 0px))) translateY(0);
}
.pensoft-key-figure-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  /* contain, not cover: a cropped plate loses the very panels the couplet points
     at, and these figures are wider than they are tall about as often as not. */
  object-fit: contain;
  border-radius: 4px;
}
.lead-text {
  min-width: 0;
}

@media (max-width: 750px) {
  .key-couplets-wrapper {
    margin-top: 14px;
  }
  /* Narrow screens can't hold a leader across the row, so the result drops
     below its lead and hangs left. The bracket and numeral stay — they are
     set for mobile in the key block above. */
  .leader-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .leader {
    display: none;
  }
  .result {
    text-align: left;
  }
  .pensoft-key-figure-preview {
    display: none;
  }
}


/* ================= Base Layout ================= */

.morphology_sections {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  position: relative;
}

/* Alternating subtle backgrounds for body region sections */
.morphology_sections:nth-of-type(odd) {
  background: #ffffff;
}

.morphology_sections:nth-of-type(even) {
  background: linear-gradient(135deg, #f9fafb 0%, #f5f7f6 100%);
}

/* Visual divider between major sections */
.morphology_sections + .morphology_sections {
  border-top: 1px solid #e0e0e0;
}

.morphology_sections + .morphology_sections::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #c83f3f, #d46a6a);
  border-radius: 2px;
  margin-top: -1.5px;
}

/* Ensure morphology / panel body text uses a readable sans-serif */
.panels .panel p,
.panels .panel .sectionIntro,
.characterDefinition,
.characterState p,
.morphologySubSection p,
.morphology_sections p,
.characterGrid p {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--base-text-color, #424242);
  font-size: 18px;
  line-height: 1.5;
}


/* ================= Section Headers (Body Regions) ================= */

.morphology_sections>h2 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding: 0.75rem 1.5rem 0.75rem 1.5rem;
  background: linear-gradient(90deg, #c83f3f 0%, #c83f3f 6px, #f8f4f4 6px, #f8f4f4 100%);
  color: #1a1a1a;
  border-bottom: none;
  border-top: 1px solid #e8e0e0;
  letter-spacing: 0.02em;
}

.sectionIntro {
  font-size: 0.95rem;
  color: #555;
  max-width: 75ch;
  margin-bottom: 2rem;
  padding-left: 0;
}


/* ================= Subsections (Character Names) ================= */

.morphologySubSection {
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #d0d0d0;
}

.morphologySubSection:first-of-type {
  border-top: none;
  padding-top: 0;
}

.morphologySubSection>h3 {
  font-size: 1.35rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #a33;
  letter-spacing: 0.01em;
  display: inline-block;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid #c83f3f;
}


/* ================= Definitions ================= */

.characterDefinition {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
  max-width: 70ch;
  margin-bottom: 1.5rem;

}


/* ================= Character Grid ================= */

.characterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem 1.5rem;
  align-items: start;
}


/* ================= Character States =================
   Each state is a plate over a caption. The first image fills a
   fixed 3:2 box so every state in a row is the same height whatever
   the photo's proportions are; any further images for the same state
   drop to a thumb strip beneath it, so a four-photo state is no taller
   than a one-photo state. Images are never cropped in the plate box,
   only in the thumbs. main.js wires every one of them to Fancybox.
   ==================================================== */

.characterState {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem;
  align-self: start;
}

/* Primary plate */
.characterState > a:first-of-type,
.characterState > .noPlate {
  order: 0;
  flex: 0 0 100%;
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #f4f4f2;
  border: 1px solid #e6e4dd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
}

.characterState > a:first-of-type img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  display: block;
  border-radius: 0;
  background: none;
}

/* Extra plates for the same state */
.characterState > a:not(:first-of-type) {
  order: 1;
  flex: 0 0 auto;
  display: block;
  width: 78px;
  height: 58px;
  overflow: hidden;
  background: #f4f4f2;
  border: 1px solid #e6e4dd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
}

.characterState > a:not(:first-of-type) img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: none;
}

/* States with no photograph yet */
.characterState > .noPlate {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px dashed #dcd9d0;
  box-shadow: none;
  color: #b3aea4;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Caption below the plate */
.characterState p {
  order: 2;
  flex: 0 0 100%;
  margin: 0;
  padding: 0.55rem 0 0;
  border-bottom: 0;
  font-size: 16px;
  line-height: 1.45;
  color: #5c5c5c;
}

/* State name reads as a label, not as a repeat of the heading */
.characterState p b {
  display: block;
  margin-bottom: 0.3rem;
  color: #2c2c2c;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}


/* ================= Hover =================
   Same treatment as gallery thumbnails and habitus cards, so an
   image behaves the same way everywhere on the site.
   ========================================== */

.characterState > a:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  outline: 1px solid #70cdff;
  outline-offset: -1px;
}


/* ================= Responsive Tweaks ================= */

@media (max-width: 600px) {
  .morphology_sections>h2 {
    font-size: 1.6rem;
  }

  .morphologySubSection>h3 {
    font-size: 1.2rem;
  }
}

/* =========================== SUBFAMILY GUIDE PAGE ========================================== */

/* Hero intro section */
.guide-intro {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  padding: 3rem 2rem;
  border-radius: 16px;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.guide-intro::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><linearGradient id="g" x1="0%%" y1="0%%" x2="100%%" y2="100%%"><stop offset="0%%" stop-color="%23c83f3f" stop-opacity="0.1"/><stop offset="100%%" stop-color="%23c83f3f" stop-opacity="0.02"/></linearGradient></defs><polygon fill="url(%23g)" points="100,0 100,100 30,100 70,0"/></svg>');
  background-size: cover;
  pointer-events: none;
}

.guide-intro h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #fff !important;
  text-align: left;
  letter-spacing: -0.02em;
}

.guide-intro p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
}

.guide-intro a {
  color: #e87878;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 63, 63, 0.4);
  transition: all 0.2s ease;
}

.guide-intro a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* Resource links as pills */
.guide-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.guide-resources a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

[data-theme="dark"] .guide-resources a {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #e8e8f8;
}

.guide-resources a:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.guide-resources a::before {
  content: '→';
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Section divider with count */
.subfamily-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #e0e0e0;
}

.subfamily-section-header h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.subfamily-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #c83f3f 0%, #a83232 100%);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 100px;
}

/* Subfamily list container */
.subfamilyList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.subfamilyList a {
  text-decoration: none;
  display: inline-block; /* Allow card to shrink to content */
}

/* Active subfamily cards */
.subfamilyList h3 {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  padding: 1rem 0 0.75rem;
  color: #1a1a2e;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s ease;
}

.subfamilyList h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.3rem;
  background: linear-gradient(180deg, #c83f3f 0%, #a83232 100%);
  border-radius: 2px;
  flex-shrink: 0;
}

/* No automatic h3 color change on hover - the h3 is before the link, not inside it */

/* Subfamily selection card */
.subfamilySelection {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: inline-block; /* Shrink to fit content */
  width: auto;
  max-width: 100%;
}

.subfamilySelection:hover {
  border-color: #c83f3f;
  box-shadow: 0 8px 24px rgba(200, 63, 63, 0.12);
  transform: translateY(-4px);
  cursor: pointer;
}

/* Image gallery within cards */
.subfamilyGallery {
  display: inline-flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.subfamilyGallery img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.3s ease;
  filter: brightness(0.95);
}

.subfamilySelection:hover .subfamilyGallery img {
  filter: brightness(1);
}

.subfamilyGallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1;
  position: relative;
}

/* Inactive subfamily styling */
.inactiveSubfamily {
  font-size: 1.1rem;
  font-weight: 500;
  color: #999;
  padding: 0.75rem 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-style: italic;
}

.inactiveSubfamily::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1rem;
  background: #ddd;
  border-radius: 2px;
  flex-shrink: 0;
}

.inactiveSubfamily::after {
  content: 'Coming soon';
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  background: #f0f0f0;
  color: #888;
  border-radius: 4px;
  margin-left: 0.5rem;
}

/* Special styling only for the main subfamily listing page (guide.html) */
#subfamilyMainContent {
  padding-top: 2rem;
  padding-left: 5%;
  padding-right: 5%;
  background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
  min-height: 100vh;
}

.main_content_index a {
  color: #c83f3f;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 63, 63, 0.3);
  padding: 1px 2px;
  border-radius: 2px;
  transition: all 0.2s ease;
}

.main_content_index a:hover {
  background-color: rgba(200, 63, 63, 0.1);
  border-bottom-color: #c83f3f;
}

#subfamilyMainContent {
  padding-left: 2rem;
  padding-right: 2rem;
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hide old title - now in hero */
#subfamilyMainContent > h1#index_titles {
  display: none;
}

/* Hide old paragraph - now in hero */
#subfamilyMainContent > p {
  display: none;
}

#subfamilyMainContent > br {
  display: none;
}

/* Responsive adjustments */
@media screen and (max-width: 900px) {
  .guide-intro {
    padding: 2rem 1.5rem;
  }

  .guide-intro h1 {
    font-size: 2rem;
  }

  .guide-intro p {
    font-size: 1rem;
  }

  .subfamilyGallery img {
    width: 150px;
    height: 100px;
  }
}

@media screen and (max-width: 600px) {
  .guide-intro {
    padding: 1.5rem 1rem;
    border-radius: 12px;
    margin-bottom: 2rem;
  }

  .guide-intro h1 {
    font-size: 1.6rem;
  }

  .guide-intro p {
    font-size: 0.95rem;
  }

  .guide-resources {
    flex-direction: column;
  }

  .guide-resources a {
    justify-content: center;
  }

  .subfamilyList h3 {
    font-size: 1.1rem;
  }

  .subfamilyGallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .subfamilyGallery img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/2;
  }

  .subfamilyList a {
    display: block; /* Full width on mobile */
  }

  .subfamilySelection {
    display: block; /* Full width on mobile */
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .inactiveSubfamily::after {
    display: none;
  }
}

@media screen and (max-width: 460px) {
  #subfamilyMainContent {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .side-bar {
    display: none !important;
  }

  .close_side-bar {
    display: block !important;
  }

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


/* ============================================
   INTRODUCTION ARTICLE STYLES
   ============================================ */

.intro-article {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 3rem 4rem;
  font-family: var(--site-heading-font), Georgia, serif;
  line-height: 1.75;
  color: #2d2d2d;
}

/* Section styling */
.intro-section {
  margin-bottom: 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
}

.intro-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Section titles */
.intro-section-title {
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0 0 1.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #c83f3f;
  display: inline-block;
}

.intro-subsection-title {
  font-family: 'Roboto', 'Helvetica Neue', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: #333;
  margin: 2rem 0 1rem 0;
}

.intro-subsection-title:first-child {
  margin-top: 0;
}

/* Text content */
.intro-text {
  flex: 1;
  min-width: 300px;
}

.intro-text p {
  font-size: 1.1rem;
  margin: 0 0 1.25rem 0;
  text-align: justify;
  hyphens: auto;
}

.intro-text p:last-child {
  margin-bottom: 0;
}

.intro-text strong {
  font-weight: 600;
  color: #1a1a1a;
}

.intro-text em {
  font-style: italic;
}

.intro-text cite {
  font-style: italic;
}

.intro-text a {
  color: #c83f3f;
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 63, 63, 0.3);
  transition: all 0.2s ease;
}

.intro-text a:hover {
  background-color: rgba(200, 63, 63, 0.1);
  border-bottom-color: #c83f3f;
}

/* Content blocks with text and images */
.intro-content-block {
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.intro-content-reverse {
  flex-direction: row-reverse;
}

/* Image galleries */
.intro-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}

.intro-gallery-pair {
  width: 380px;
}

.intro-gallery-single {
  width: 340px;
}

/* Figure styling */
.intro-figure {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #f5f5f5;
}

.intro-figure img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.intro-figure:hover img {
  transform: scale(1.03);
}

.intro-figure-featured img {
  height: 260px;
}

.intro-figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.85rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

/* Callout boxes */
.intro-callout {
  background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
  border-left: 4px solid #c83f3f;
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  border-radius: 0 6px 6px 0;
}

.intro-callout h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #c83f3f;
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.intro-callout p {
  font-size: 1rem;
  margin: 0;
  color: #444;
}

.intro-callout-warning {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border-left-color: #d4a017;
}

.intro-callout-warning h4 {
  color: #b8860b;
}

/* Responsive design */
@media screen and (max-width: 900px) {
  .intro-article {
    padding: 1.5rem 1.5rem 3rem;
  }

  .intro-content-block,
  .intro-content-reverse {
    flex-direction: column;
  }

  .intro-gallery-pair,
  .intro-gallery-single {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }

  .intro-gallery-pair {
    flex-direction: row;
  }

  .intro-figure img {
    height: 180px;
  }

  .intro-figure-featured img {
    height: 220px;
  }
}

@media screen and (max-width: 600px) {
  .intro-article {
    padding: 1rem 1rem 2rem;
  }

  .intro-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
  }

  .intro-section-title {
    font-size: 1.5rem;
  }

  .intro-text p {
    font-size: 1rem;
    text-align: left;
  }

  .intro-gallery-pair {
    flex-direction: column;
  }

  .intro-figure img,
  .intro-figure-featured img {
    height: 200px;
  }

  .intro-callout {
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
  }
}


/* --------------------------------------------------------------------------------- */
/* PUBLICATION CARDS STYLING */

.publications-list {
  list-style: none;
  padding: 0;
  margin: 20px auto;
  /* Wider and flatter than the original 900px card: a citation is three short
     lines, so the height was mostly padding. Widening lets the title and journal
     sit on one line each instead of wrapping, which is most of the saving. */
  max-width: 1180px;
}

.publication-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  padding: 12px 20px;
  margin-bottom: 10px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.publication-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.publication-authors {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  margin-bottom: 2px;
}

.publication-year {
  font-weight: 400;
  color: #666;
}

.publication-title {
  font-size: 17px;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 4px;
}

.publication-title em {
  font-style: italic;
}

.publication-journal {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.publication-journal .journal-name {
  font-style: italic;
}

.publication-journal .journal-details {
  color: #777;
}

.publication-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.publication-link:hover .publication-title {
  color: #c83f3f;
}

.publication-link:focus-visible {
  outline: 2px solid #c83f3f;
  outline-offset: 4px;
  border-radius: 2px;
}

/* The DOI prints after the journal details, as in a reference list. */
.publication-doi {
  overflow-wrap: anywhere;
}

#publications-panel {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px;
}

/* Abstract popup on hover */
.publication-card {
  position: relative;
}

.publication-card.has-abstract {
  cursor: pointer;
  /* The "Abstract available" marker is absolutely placed at bottom: 8px. With the
     card's padding cut to 12px it would sit on the Source button, so these cards
     keep the room the marker needs. */
  padding-bottom: 26px;
}

.publication-abstract-popup {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  z-index: 100;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 8px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  line-height: 1.6;
  color: #444;
  max-height: 300px;
  overflow-y: auto;
}

.publication-abstract-popup strong {
  color: #1a1a1a;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 6px;
}

/* Close button for abstract popup */
.abstract-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: #f0f0f0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.abstract-close:hover {
  background: #e0e0e0;
  color: #333;
}

/* Desktop: show on hover */
.publication-card.has-abstract:hover .publication-abstract-popup {
  display: block;
}

/* Click/tap to open (works on both mobile and desktop) */
.publication-card.has-abstract.abstract-open .publication-abstract-popup {
  display: block;
}

/* Small indicator that abstract is available */
.publication-card.has-abstract::after {
  content: 'Abstract available';
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 11px;
  color: #999;
  font-style: italic;
}

@media screen and (max-width: 600px) {
  .publication-card {
    padding: 16px 18px;
  }

  .publication-title {
    font-size: 15px;
  }

  .publication-authors {
    font-size: 14px;
  }

  .publication-journal {
    font-size: 13px;
  }

  /* On mobile, disable hover - only show when tapped open */
  .publication-card.has-abstract:hover .publication-abstract-popup {
    display: none;
  }

  .publication-card.has-abstract.abstract-open .publication-abstract-popup {
    display: block;
  }

  .publication-abstract-popup {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    max-height: 50vh;
  }

  .publication-card.has-abstract::after {
    display: none;
  }
}

/* Full-width publications section (lifted out of the bio text column) */
.bio_publications_section {
  width: 100%;
  max-width: 900px;
  align-self: center;
  margin: 0 auto 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Collapsible publications on bio page */
.publications-collapsible {
  margin-top: 10px;
}

.publications-collapsible summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fdf5f5;
  border: 1px solid #c83f3f;
  border-radius: 8px;
  padding: 18px 28px;
  color: #a33;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.publications-collapsible summary::-webkit-details-marker {
  display: none;
}

.publications-collapsible summary h3 {
  display: inline;
  margin: 0;
  font-size: 22px;
  letter-spacing: 0.01em;
}

.publications-collapsible summary::after {
  content: '\25BC';
  font-size: 13px;
  transition: transform 0.2s ease;
}

.publications-collapsible[open] summary::after {
  transform: rotate(180deg);
}

.publications-collapsible summary:hover {
  background: #c83f3f;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.publications-collapsible summary:hover h3 {
  color: #fff;
}

/* --------------------------------------------------------------------------------- */
/* ══════════════════════════════════════════════════════════════════════
   BLOG  --  blog.html and the generated blog/*.html
   Three faces, each with one job: Playfair Display for titles, Source Serif 4
   for reading, Source Sans 3 for labels and metadata. The blog pages inline
   their own <head> and load these three families themselves -- they do not go
   through JS/header.js, so nothing here can rely on its font links.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --blog-measure: 680px;
  --blog-title-font: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --blog-body-font: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --blog-label-font: 'Source Sans 3', Arial, Helvetica, sans-serif;
  --blog-ink: #33312e;
  --blog-ink-soft: #5c574f;
  --blog-muted: #8a8279;
  --blog-rule: #e2ddd5;
  --blog-accent: #b24f43;
  --blog-accent-soft: rgba(178, 79, 67, 0.35);
}

.blog-post,
.blog-index {
  max-width: var(--blog-measure);
  margin: 0 auto;
  padding: 56px 24px 80px;
  /* .blog_content centres everything on the legacy pages -- prose must not
     inherit that, and .main_content_wo_sidebar's min-width would overflow a
     360px phone, so neither container is used for the blog any more. */
  text-align: left;
  font-family: var(--blog-body-font);
  color: var(--blog-ink);
}

.blog-post {
  font-size: 19px;
  line-height: 1.75;
}

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

.blog-post-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--blog-rule);
}

.blog-post h1 {
  font-family: var(--blog-title-font);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blog-ink);
  margin: 0 0 0.9rem;
}

.blog-post-meta {
  font-family: var(--blog-label-font);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blog-muted);
  margin: 0;
}

.blog-post-meta .blog-sep {
  margin: 0 0.6em;
  opacity: 0.45;
}

.blog-post-draft {
  margin-left: 0.7em;
  padding: 2px 8px;
  border: 1px solid var(--blog-accent);
  border-radius: 2px;
  color: var(--blog-accent);
}

/* ── Post body ────────────────────────────────────────────── */

.blog-post p {
  margin: 0 0 1.35rem;
}

.blog-post p.lede {
  font-size: 1.15em;
  line-height: 1.6;
  color: var(--blog-ink-soft);
}

.blog-post h2 {
  font-family: var(--blog-title-font);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--blog-ink);
  margin: 2.8rem 0 0.9rem;
}

.blog-post h3 {
  font-family: var(--blog-label-font);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blog-accent);
  margin: 2.2rem 0 0.7rem;
}

.blog-post a {
  color: var(--blog-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--blog-accent-soft);
  transition: text-decoration-color 0.15s ease;
}

.blog-post a:hover {
  text-decoration-color: var(--blog-accent);
}

.blog-post ul,
.blog-post ol {
  margin: 0 0 1.35rem;
  padding-left: 1.4rem;
}

.blog-post li {
  margin-bottom: 0.5rem;
}

.blog-post li::marker {
  color: var(--blog-muted);
}

.blog-post blockquote {
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--blog-accent);
  font-size: 1.05em;
  font-style: italic;
  color: var(--blog-ink-soft);
}

.blog-post blockquote p:last-child {
  margin-bottom: 0;
}

.blog-post hr {
  border: none;
  border-top: 1px solid var(--blog-rule);
  margin: 3rem 0;
}

.blog-post code {
  font-size: 0.9em;
  background: #f3efe9;
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

/* ── Figures ──────────────────────────────────────────────── */

.blog-post figure {
  margin: 2.5rem 0;
}

.blog-post figure img {
  max-width: 100%;
  height: auto;
  /* .blog_images / .blog_images_wide carry their own padding for the legacy
     pages; inside a figure the margins already do that work. */
  padding: 0;
}

.blog-post figcaption {
  font-family: var(--blog-label-font);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--blog-muted);
  margin-top: 0.8rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--blog-rule);
}

.blog-post-back {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--blog-rule);
  font-family: var(--blog-label-font);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.blog-post-back a {
  color: var(--blog-muted);
  text-decoration: none;
}

.blog-post-back a:hover {
  color: var(--blog-accent);
}

/* ── Index (blog.html) ────────────────────────────────────── */

.blog-index-header {
  margin-bottom: 1rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--blog-rule);
}

.blog-index h1 {
  font-family: var(--blog-title-font);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blog-ink);
  margin: 0 0 0.7rem;
}

.blog-index-tagline {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--blog-ink-soft);
  margin: 0 0 1.2rem;
}

.blog-index-feed {
  font-family: var(--blog-label-font);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0;
}

.blog-index-feed a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--blog-muted);
  text-decoration: none;
}

.blog-index-feed a:hover {
  color: var(--blog-accent);
}

.blog-index-feed svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.blog-index-entry {
  padding: 2.1rem 0;
  border-bottom: 1px solid var(--blog-rule);
}

.blog-index-entry:last-child {
  border-bottom: none;
}

.blog-index-date {
  font-family: var(--blog-label-font);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blog-muted);
  margin: 0 0 0.5rem;
}

.blog-index-entry h2 {
  font-family: var(--blog-title-font);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 0.6rem;
}

.blog-index-entry h2 a {
  color: var(--blog-ink);
  text-decoration: none;
}

.blog-index-entry h2 a:hover {
  color: var(--blog-accent);
}

.blog-index-summary {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--blog-ink-soft);
  margin: 0;
}

@media screen and (max-width: 700px) {
  .blog-post,
  .blog-index {
    padding: 32px 18px 56px;
  }

  .blog-post {
    font-size: 17px;
  }

  .blog-post h1,
  .blog-index h1 {
    font-size: 1.9rem;
  }

  .blog-post h2 {
    font-size: 1.35rem;
  }

  .blog-index-entry h2 {
    font-size: 1.3rem;
  }
}

/* ── Diversity panel (subfamily guide pages) ──────────────── */
#eight-panel {
  padding: 10px 18px 52px;
  background-color: #f5f1eb;
}

/* Stats cards — inverted dark treatment */
.diversity-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 38px;
}

.diversity-stat-card {
  background: #112733;
  border: none;
  border-radius: 2px;
  padding: 16px 16px 14px;
  box-shadow: 0 4px 16px rgba(17, 39, 51, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Corner triangle accent */
.diversity-stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(200, 146, 42, 0.2);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

.diversity-stat-card:hover {
  box-shadow: 0 8px 26px rgba(17, 39, 51, 0.34);
  transform: translateY(-3px);
}

.stat-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: #c8922a;
  line-height: 1.0;
  font-family: var(--site-body-font);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.62rem;
  color: #90adb5;
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.stat-subdued {
  font-weight: 400;
  opacity: 0.65;
}

/* Section blocks */
.diversity-section {
  margin-bottom: 36px;
}

.diversity-section-title {
  margin: 0 0 14px;
  font-size: 1.3rem;
  font-weight: 700;
  font-style: normal;
  padding: 9px 16px 9px 18px;
  border-left: 4px solid #c07a20;
  background: linear-gradient(to right, rgba(192, 122, 32, 0.09), transparent 70%);
  color: #0d1f25;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.01em;
}

.chart-note {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: #8a8078;
  font-style: normal;
}

/* Treemap */
.diversity-treemap {
  position: relative;
  width: 100%;
  min-height: 340px;
  background: #ddd8cf;
  border: 1px solid #c2bbb0;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.diversity-node {
  position: absolute;
  display: block;
  overflow: hidden;
  padding: 0.22rem 0.35rem;
  box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  color: #0b2b33;
  text-decoration: none;
  transition: filter 120ms ease;
}

.diversity-node:hover {
  filter: brightness(0.82);
  z-index: 1;
}

.diversity-node-name {
  font-size: clamp(0.64rem, 0.88vw, 1rem);
  line-height: 1.15;
  font-weight: 600;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diversity-node-count {
  margin-top: 0.12rem;
  font-size: clamp(0.6rem, 0.72vw, 0.85rem);
  opacity: 0.72;
}

.diversity-empty {
  padding: 0.5rem 0;
  color: #8a8078;
  font-style: italic;
}

/* Chart containers */
.diversity-chart {
  background: #fdfcf9;
  border: 1px solid #d5cfc6;
  border-radius: 2px;
  padding: 8px 4px 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.diversity-chart-hbar {
  /* height determined by JS */
}

.diversity-chart-region {
  /* height determined by JS */
  padding: 8px 4px;
}

/* Two-column timeline grid */
.diversity-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 36px;
}

.diversity-chart-block h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  font-style: normal;
  color: #0d1f25;
  padding: 7px 0 7px 12px;
  border-left: 3px solid #c07a20;
  background: linear-gradient(to right, rgba(192, 122, 32, 0.07), transparent 60%);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  letter-spacing: 0.01em;
}

[data-theme="dark"] .diversity-chart-block h4 {
  color: #c8b880;
  background: linear-gradient(to right, rgba(192, 122, 32, 0.12), transparent 60%);
}

.diversity-chart-block .chart-note {
  margin: 0 0 8px;
  padding-left: 15px;
}

/* Region filter bar */
.diversity-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 28px;
  background: #1b2d38;
  border-radius: 4px;
  padding: 8px;
}

.div-region-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 3px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(180, 210, 220, 0.65);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
  letter-spacing: 0.03em;
  font-family: var(--site-body-font);
}

.div-region-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(220, 235, 240, 0.95);
}

.div-region-btn.active[data-region=""] {
  background: #e8e2d8;
  border-color: transparent;
  color: #112733;
  font-weight: 700;
}

.div-region-btn.active[data-region]:not([data-region=""]) {
  background: var(--btn-color, #555);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}

.dfb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--btn-color, rgba(200, 225, 235, 0.45));
  flex-shrink: 0;
}

.div-region-btn.active .dfb-dot {
  background: rgba(255, 255, 255, 0.5);
}

.diversity-chart-scatter {
  /* height determined by JS based on container width */
  padding: 6px 4px 2px;
}

.diversity-chart-scatter svg text {
  pointer-events: none;
  user-select: none;
}


/* ══════════════════════════════════════════════════════════════════════
   DARK MODE  —  applied when [data-theme="dark"] on <html>
   The sidebar and footer are already dark-themed and need no changes.
   ══════════════════════════════════════════════════════════════════════ */

/* — CSS custom property overrides (inherit to all descendants) — */
[data-theme="dark"] {
  --site-text-color: #c8c8da;
  --base-text-color: #c8c8da;

  /* The keys' map palette in the dark. The species card does not follow the theme
     here -- its map is the same in both, as it always has been. */
  --map-land: #3a342d;
  --map-land-line: #5c5447;
  --map-present: #c9705f;
  --map-present-line: #c9705f;
  --map-coarse: rgba(201, 112, 95, 0.3);
  --map-coarse-line: rgba(201, 112, 95, 0.5);
}

/* — Page base — */
[data-theme="dark"] body {
  background-color: #10121e;
  color: #c8c8da;
}

[data-theme="dark"] ::selection {
  background-color: #4a4c70;
  color: #e8e8f8;
}

[data-theme="dark"] ::-webkit-scrollbar {
  background-color: #10121e;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a3c58;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #c83f3f;
}

/* — HR divider — */
[data-theme="dark"] hr {
  border-top-color: #282a44;
}

/* — Navigation header (desktop) — */
[data-theme="dark"] .navigation_empty {
  background-color: #141628;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .titles_navigation {
  background-color: #141628;
  border-bottom-color: #282a44;
}

[data-theme="dark"] #title_link {
  color: #dde0f0;
}

[data-theme="dark"] .main_title {
  color: #dde0f0;
}

[data-theme="dark"] .subtitle {
  color: #7878a0;
}

[data-theme="dark"] .ul_navigation li a {
  color: #b8bcd4;
}

/* — Mobile navigation — */
[data-theme="dark"] .mobile_nav {
  background-color: #141628;
  border-bottom-color: #282a44;
}

[data-theme="dark"] .mobile_title {
  color: #dde0f0;
}

[data-theme="dark"] .mobile_nav_options {
  background-color: #1a1c30;
  color: #c8c8da;
}

[data-theme="dark"] .mobile_nav_options a {
  color: #c0c4dc;
}

[data-theme="dark"] .mobile_nav_options li,
[data-theme="dark"] .mobile_nav_options li:first-child {
  border-color: #282a44;
}

[data-theme="dark"] .mobile_nav_close_button {
  background-color: #282a44;
}

[data-theme="dark"] .mobile_nav_close_button:hover {
  background-color: #383a58;
}

/* — Generic heading overrides (typography normalizer sets color: #222) — */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: #dde0f0;
}

/* — Main content areas — */
[data-theme="dark"] .main_content {
  color: #c8c8da;
}

[data-theme="dark"] .main_content_guide {
  background-color: transparent;
  color: #c8c8da;
}

[data-theme="dark"] .main_content_guide h1 {
  color: #dde0f0;
}

[data-theme="dark"] .main_content_wo_sidebar_blog_pages {
  background-color: #1a1c2e;
  border-color: #282a44;
  color: #c8c8da;
}

[data-theme="dark"] .title_genus_page {
  border-bottom-color: #2c2e48;
}

[data-theme="dark"] .title_genus_page em {
  color: #8898c8;
}

[data-theme="dark"] .genus-authorship {
  color: #7878a0;
}

/* — Genus body content: soften paragraph text, accent italic taxa — */
[data-theme="dark"] .top_content .main_content p,
[data-theme="dark"] .top_content .main_content li,
[data-theme="dark"] #dynamic_genus_content p,
[data-theme="dark"] #dynamic_genus_content li {
  color: #a8acc4;
}

[data-theme="dark"] .top_content .main_content h1,
[data-theme="dark"] .top_content .main_content h2,
[data-theme="dark"] .top_content .main_content h3,
[data-theme="dark"] .top_content .main_content h4,
[data-theme="dark"] #dynamic_genus_content h2,
[data-theme="dark"] #dynamic_genus_content h3,
[data-theme="dark"] #dynamic_genus_content h4 {
  color: #f4f6ff;
}

[data-theme="dark"] .top_content .main_content p em,
[data-theme="dark"] .top_content .main_content li em,
[data-theme="dark"] #dynamic_genus_content p em,
[data-theme="dark"] #dynamic_genus_content li em {
  color: #c4b0ec;
  font-style: italic;
}

/* — Distribution integrated layout — */
[data-theme="dark"] .distribution-text-side h2 {
  color: #dde0f0;
}

[data-theme="dark"] .distribution-intro {
  color: #c0c0d8;
  border-bottom-color: #282a44;
}

[data-theme="dark"] .distribution-text-side p {
  color: #c0c0d8;
}

/* — Region tabs (guide pages) — */
[data-theme="dark"] .region-tab {
  border-color: #4a6888;
  background: transparent;
  color: #7088b0;
}

/* — Tabs — */
[data-theme="dark"] .tabs {
  border-bottom-color: #282a44;
}

[data-theme="dark"] .tab {
  color: #7878a0;
}

[data-theme="dark"] .tab:hover {
  color: #c0c0d8;
  background-color: rgba(200, 63, 63, 0.07);
}

/* Active tab — must match the long checked-radio selector chain with [data-theme] prefix */
[data-theme="dark"] #four:checked ~ .tabs #four-tab,
[data-theme="dark"] #gallery:checked ~ .tabs #gallery-tab,
[data-theme="dark"] #introduction:checked ~ .tabs #introduction-tab,
[data-theme="dark"] #morphology:checked ~ .tabs #morphology-tab,
[data-theme="dark"] #distribution:checked ~ .tabs #distribution-tab,
[data-theme="dark"] #diagnosis:checked ~ .tabs #diagnosis-tab,
[data-theme="dark"] #five:checked ~ .tabs #five-tab,
[data-theme="dark"] #genericKey:checked ~ .tabs #genericKey-tab,
[data-theme="dark"] #six:checked ~ .tabs #six-tab,
[data-theme="dark"] #seven:checked ~ .tabs #seven-tab,
[data-theme="dark"] #eight:checked ~ .tabs #eight-tab,
[data-theme="dark"] #nine:checked ~ .tabs #nine-tab,
[data-theme="dark"] #ten:checked ~ .tabs #ten-tab,
[data-theme="dark"] #publications:checked ~ .tabs #publications-tab,
[data-theme="dark"] #twelve:checked ~ .tabs #twelve-tab {
  color: #e0e0f0;
}

@media screen and (max-width: 550px) {
  [data-theme="dark"] .tab {
    background: #1e2038;
  }

  [data-theme="dark"] .tab:hover {
    background: #282a48;
  }
}

/* — Section collapse buttons — */
[data-theme="dark"] .hide_show_button {
  background: #181b2a;
  color: #d7dbf4;
  border-color: #303452;
  border-left-color: #b88742;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 22px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .hide_show_button::after {
  color: #d8c39b;
  opacity: 0.65;
}

[data-theme="dark"] .hide_show_button:hover {
  background: #20243a;
  border-color: #4a4f78;
  border-left-color: #d1a250;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.26);
}

[data-theme="dark"] .hide_show_button.color-change {
  background: linear-gradient(90deg, rgba(162, 82, 72, 0.24) 0%, rgba(79, 42, 51, 0.32) 100%);
  color: #f0dfdb;
  border-color: #7f4c4f;
  box-shadow: inset 4px 0 0 #d07668;
}

[data-theme="dark"] .hide_show_button.color-change::after {
  color: #f2afa1;
  opacity: 0.95;
}

/* — Filter panel — */
[data-theme="dark"] .filter_categories_holder {
  background-color: #1a1c30;
  border-color: #282a44;
  color: #c0c0d8;
}

[data-theme="dark"] .filter_category_button {
  color: #c0c0d8;
  border-bottom-color: #282a44;
}

[data-theme="dark"] .filter_category_button:hover {
  background-color: #222438;
}

[data-theme="dark"] .filter_category_button.checked {
  color: #e0e0f0;
  background-color: #1e2038;
}

[data-theme="dark"] .filter_options_holder {
  background: #1a1c30;
  border-bottom-color: #282a44;
}

[data-theme="dark"] .filter_option_header {
  color: #dde0f0;
}

[data-theme="dark"] .radio_label {
  color: #c0c0d8;
}

[data-theme="dark"] .radio_container .radio_label:hover {
  background-color: #252840;
  color: #e0e0f0;
}

[data-theme="dark"] .clear_button {
  background-color: #1a1c30;
  border-color: #2e3050;
  color: #8888a8;
}

[data-theme="dark"] .clear_button:hover {
  background-color: #232540;
  border-color: #4a4c70;
  color: #e0e0f0;
}

[data-theme="dark"] .filter_panel {
  background-color: #1a1c30;
}

/* — Skeleton loaders — */
[data-theme="dark"] .skeleton-image,
[data-theme="dark"] .skeleton-text {
  background: #282a44;
  animation: none;
}

/* — Nomenclature species list — */
[data-theme="dark"] .nomenclature-orig-genus {
  color: #8080a0;
}

[data-theme="dark"] .nomenclature-annotation {
  color: #7070a0;
}

[data-theme="dark"] .nomenclature-synonyms {
  color: #9090b0;
}

[data-theme="dark"] .nomenclature-subgenus {
  border-bottom-color: #282a44;
  color: #c0c0d8;
}

[data-theme="dark"] .nomenclature-genus-synonyms {
  background: #1c1e32;
  border-left-color: #4a4c70;
}

[data-theme="dark"] .nomenclature-genus-synonyms h4,
[data-theme="dark"] .nomenclature-genus-synonyms li {
  color: #9090b0;
}

[data-theme="dark"] .nomenclature-region-btn {
  background: #1a1c30;
  border-color: #2e3050;
  color: #9090b0;
}

[data-theme="dark"] .nomenclature-region-btn:hover {
  background: #222438;
  border-color: #4a4c70;
}

[data-theme="dark"] .nomenclature-region-btn.is-active {
  background: #e0e0f0;
  color: #10121e;
  border-color: #e0e0f0;
}

[data-theme="dark"] .nomenclature-region-search-wrapper {
  background: #0d1020;
  border-color: #262a44;
}

[data-theme="dark"] .nomenclature-region-search-row {
  border-color: #404878;
  background: #141628;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .nomenclature-region-search-row::before {
  color: #505888;
}

[data-theme="dark"] .nomenclature-region-search-input {
  color: #b0b4d8;
}

[data-theme="dark"] .nomenclature-region-search-input::placeholder {
  color: #505878;
}

[data-theme="dark"] .nomenclature-region-search-clear {
  color: #505878;
}

[data-theme="dark"] .nomenclature-region-search-clear:hover {
  color: #9090b8;
}

[data-theme="dark"] .nomenclature-region-search-dropdown {
  background: #141628;
  border-color: #404878;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .nomenclature-region-search-item:hover,
[data-theme="dark"] .nomenclature-region-search-item:focus {
  background: #1c1e38;
}

[data-theme="dark"] .nrs-item-name {
  color: #b0b4d8;
}

[data-theme="dark"] .nrs-item-count {
  color: #505878;
}

[data-theme="dark"] .nomenclature-species-trigger:hover {
  background-color: #1e2038;
}

/* — Nomenclature hover card — */
[data-theme="dark"] .nomenclature-hover-card {
  background: #1a1c2e;
  border-color: #2e3050;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .nomenclature-hover-card.is-pinned {
  border-color: #4a4c70;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .nomenclature-hover-count {
  color: #8080a0;
}

[data-theme="dark"] .nomenclature-hover-images h5,
[data-theme="dark"] .nomenclature-hover-regions h5,
[data-theme="dark"] .nomenclature-hover-hosts h5,
[data-theme="dark"] .nomenclature-hover-gbif h5,
[data-theme="dark"] .nomenclature-hover-plazi h5 {
  color: #c8c8da;
}

[data-theme="dark"] .nomenclature-habitus-card a {
  background: #2a2c42;
}

[data-theme="dark"] .nomenclature-habitus-card figcaption {
  color: #7878a0;
  background: #222438;
}

[data-theme="dark"] .nomenclature-hover-map {
  border-color: #2e3050;
}

[data-theme="dark"] .nomenclature-hover-map-unavailable {
  background: #1c1e32;
  color: #6060a0;
}

[data-theme="dark"] .nomenclature-hover-gbif-toggle-label {
  color: #a0a0c0;
}

[data-theme="dark"] .nomenclature-hover-regions {
  color: #b8b8d8;
}

[data-theme="dark"] .nomenclature-hover-regions h5 {
  color: #c8c8da;
}

[data-theme="dark"] .nomenclature-hover-pill {
  background: #1a1c2e;
  border-color: #2e3050;
  color: #e8e8f8;
}

[data-theme="dark"] .nomenclature-hover-hosts {
  border-top-color: #282a44;
  color: #b0b0cc;
}

[data-theme="dark"] .nomenclature-hover-gbif {
  border-top-color: #282a44;
}

[data-theme="dark"] .nomenclature-hover-gbif-skeleton {
  background: linear-gradient(90deg, #282a42 25%, #323454 50%, #282a42 75%);
  background-size: 600px 100%;
}

[data-theme="dark"] .nomenclature-hover-gbif-status {
  color: #8080a0;
}

[data-theme="dark"] .nomenclature-hover-gbif-attr {
  color: #7070a0;
  background: #222438;
}

[data-theme="dark"] .nomenclature-hover-plazi {
  border-top-color: #282a44;
}

[data-theme="dark"] .nomenclature-hover-type-inst {
  color: #c8c8da;
  background: #2a2c42;
}

[data-theme="dark"] .nomenclature-hover-type-loc {
  color: #9090b0;
}

[data-theme="dark"] .nomenclature-hover-pensoft-figures {
  border-top-color: #282a44;
}
[data-theme="dark"] .nomenclature-hover-pensoft-figures h5 {
  color: #c8c8da;
}
[data-theme="dark"] .nomenclature-hover-pensoft-fig figcaption {
  color: #7878a0;
}
[data-theme="dark"] .nomenclature-hover-treatment {
  border-top-color: #282a44;
}
[data-theme="dark"] .nomenclature-hover-treatment h5 {
  color: #c8c8da;
}
[data-theme="dark"] .nomenclature-hover-treatment-locality {
  color: #9090b0;
}
[data-theme="dark"] .nomenclature-hover-treatment-details {
  color: #b0b0cc;
}
[data-theme="dark"] .nomenclature-hover-treatment-details summary {
  color: #c8c8da;
}

[data-theme="dark"] .nomenclature-hover-pdf-treatment {
  border-top-color: #282a44;
}
[data-theme="dark"] .nomenclature-hover-pdf-treatment h5 {
  color: #c8c8da;
}
[data-theme="dark"] .nomenclature-hover-pdf-orig,
[data-theme="dark"] .nomenclature-hover-pdf-locality {
  color: #9090b0;
}
[data-theme="dark"] .nomenclature-hover-pdf-symbol {
  color: #d3ab6f;
}
[data-theme="dark"] .nomenclature-hover-pdf-note {
  color: #cdb489;
  background: rgba(211,171,111,0.10);
  border-left-color: #a5814a;
}

/* — Map info panel (Leaflet popup) — */
[data-theme="dark"] .info {
  background: #1a1c2e;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
  color: #c8c8da;
}

[data-theme="dark"] .info h4 {
  color: #dde0f0;
}

[data-theme="dark"] .species-list {
  color: #b8b8d8;
}

[data-theme="dark"] .nomenclature-orig-genus {
  color: #a0a0c0;
}

[data-theme="dark"] .nomenclature-annotation {
  color: #707090;
}

[data-theme="dark"] .nomenclature-annotation-plazi {
  color: #1a1c2e;
  background: #5a7eb8;
}

/* — Blog — the palette lives in tokens, so dark mode only restates those,
   plus the one literal (inline code) that is not worth a token. — */
[data-theme="dark"] {
  --blog-ink: #ccccdd;
  --blog-ink-soft: #a8a8c0;
  --blog-muted: #85859c;
  --blog-rule: #2c2f3c;
  --blog-accent: #e07a6a;
  --blog-accent-soft: rgba(224, 122, 106, 0.4);
}

[data-theme="dark"] .blog-post code {
  background: #1c1f2b;
}

/* — Diversity panel (eight-panel) — */
[data-theme="dark"] #eight-panel {
  background-color: #13151f;
}

[data-theme="dark"] .diversity-section-title {
  color: #c8b880;
  background: linear-gradient(to right, rgba(192, 122, 32, 0.12), transparent 70%);
}

[data-theme="dark"] .diversity-stat-card {
  background: #1d2f3b;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .diversity-stat-card::after {
  background: rgba(200, 146, 42, 0.15);
}

[data-theme="dark"] .diversity-stat-card:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .stat-value {
  color: #e0a84a;
}

[data-theme="dark"] .stat-label {
  color: #7e8c95;
}

[data-theme="dark"] .diversity-node {
  border-color: rgba(255, 255, 255, 0.25);
  /* Tiles keep the light YlOrRd palette in dark mode, so text stays dark */
  color: #0b2b33;
}

[data-theme="dark"] .diversity-node:hover {
  filter: brightness(1.15);
}

[data-theme="dark"] .diversity-node-name {
  color: #0b2b33;
}

[data-theme="dark"] .diversity-node-count {
  opacity: 0.8;
}

[data-theme="dark"] .diversity-treemap {
  background: #2a2c3e;
  border-color: #3a3c58;
}

[data-theme="dark"] .diversity-chart {
  background: #1c1e30;
  border-color: #2e3050;
}

[data-theme="dark"] .chart-note,
[data-theme="dark"] .diversity-empty {
  color: #7a7a98;
}

[data-theme="dark"] .diversity-filter-bar {
  background: #13212b;
}

[data-theme="dark"] .div-region-btn {
  color: rgba(160, 190, 210, 0.55);
}

[data-theme="dark"] .div-region-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(200, 215, 230, 0.9);
}

[data-theme="dark"] .div-region-btn.active[data-region=""] {
  background: #e0dad0;
  color: #13151f;
}

[data-theme="dark"] .div-region-btn.active .dfb-dot {
  background: rgba(0, 0, 0, 0.4);
}

/* — Small screen body bg re-assertion — */
@media screen and (max-width: 460px) {
  [data-theme="dark"] body {
    background-color: #10121e;
  }
}

/* ══════════════════════════════════════════════════
   DARK MODE TOGGLE BUTTON
   ══════════════════════════════════════════════════ */

/* Desktop toggle — sits inside .titles_navigation (position: relative) */
.dark-mode-toggle {
  position: static;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #c8c8c8;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #555;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  z-index: 10;
  flex-shrink: 0;
  padding: 0;
  margin-right: 14px;
}

.dark-mode-toggle:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: #888;
  color: #222;
}

[data-theme="dark"] .dark-mode-toggle {
  border-color: #3a3c58;
  color: #c0c0d8;
}

[data-theme="dark"] .dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: #6060a0;
  color: #e0e0f0;
}

/* Hide desktop toggle on mobile — mobile nav has its own */
@media screen and (max-width: 750px) {
  .dark-mode-toggle {
    display: none;
  }
}

/* Mobile nav toggle — sits in .mobile-nav-actions alongside hamburger */
.mobile-dark-mode-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(60, 60, 80, 0.35);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  color: #555;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  padding: 0;
  flex-shrink: 0;
}

.mobile-dark-mode-toggle:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: #888;
  color: #222;
}

[data-theme="dark"] .mobile-dark-mode-toggle {
  border-color: rgba(180, 180, 220, 0.3);
  color: #c0c0d8;
}

[data-theme="dark"] .mobile-dark-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(180, 180, 220, 0.6);
  color: #e0e0f0;
}

/* Wrapper for hamburger + dark toggle in mobile nav */
.mobile-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   TAXA SEARCH BAR — desktop
   ══════════════════════════════════════════════════ */

.nav-search-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: 0;
  flex-shrink: 1;
  align-self: center;
}

.nav-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-search-input {
  width: 180px;
  padding: 5px 30px 5px 12px;
  border: 1.5px solid #ccc;
  border-radius: 16px;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  background: #f8f8f8;
  color: #333;
  outline: none;
  transition: border-color 0.18s ease, width 0.2s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.nav-search-input::-webkit-search-cancel-button,
.nav-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.nav-search-input:focus {
  border-color: #c83f3f;
  width: 220px;
  box-shadow: 0 0 0 3px rgba(200, 63, 63, 0.12);
  background: #fff;
}

.nav-search-icon {
  position: absolute;
  right: 9px;
  font-size: 13px;
  color: #aaa;
  pointer-events: none;
  line-height: 1;
}

.nav-search-results {
  position: fixed;
  min-width: 280px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  list-style: none;
  padding: 4px 0;
  margin: 0;
  z-index: 2000;
  max-height: 320px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  transition: background 0.1s ease;
}

.search-result-item:hover,
.search-result-item.is-active {
  background: rgba(200, 63, 63, 0.07);
}

.search-result-name {
  font-size: 14px;
  color: #222;
  flex: 1;
}

.search-result-name em {
  font-style: italic;
}

.search-result-meta {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  flex-shrink: 0;
}

.search-result-item[data-type="subfamily"] .search-result-meta::before { content: "subfamily · "; }
.search-result-item[data-type="genus"] .search-result-meta::before     { content: "genus · "; }
.search-result-item[data-type="species"] .search-result-meta::before   { content: "species · "; }

/* Hide desktop search on mobile */
@media screen and (max-width: 750px) {
  .nav-search-wrapper {
    display: none;
  }
}

/* ── Mobile search (inside .mobile_nav_options panel) ── */
.mobile-search-wrapper {
  padding: 12px 16px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mobile-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 14px;
  border: 1.5px solid #ccc;
  border-radius: 20px;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f4f4;
  color: #333;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-search-input::-webkit-search-cancel-button,
.mobile-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.mobile-search-input:focus {
  border-color: #c83f3f;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(200, 63, 63, 0.12);
}

.mobile-search-results {
  position: static;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-top: 6px;
  box-shadow: none;
  max-height: 240px;
  overflow-y: auto;
}

/* — Gallery image cards (figure element) — */
[data-theme="dark"] figure {
  background-color: #1c1e2e;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .figure_genus {
  background-color: #1c1e2e;
}

[data-theme="dark"] figcaption {
  color: #9090b0;
}

/* — Subfamily guide page (guide.html) — */
[data-theme="dark"] #subfamilyMainContent {
  background: linear-gradient(180deg, #12141e 0%, #10121e 100%);
}

[data-theme="dark"] .subfamily-section-header {
  border-bottom-color: #282a44;
}

[data-theme="dark"] .subfamily-section-header h2 {
  color: #dde0f0;
}

[data-theme="dark"] .subfamily-count {
  background: linear-gradient(135deg, #d85a5a 0%, #b84a4a 100%);
}

[data-theme="dark"] .subfamilyList h3 {
  color: #c8cce8;
}

[data-theme="dark"] .subfamilySelection {
  background: #1a1c2e;
  border-color: #2c2e48;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .subfamilySelection:hover {
  border-color: #c83f3f;
  box-shadow: 0 8px 24px rgba(200, 63, 63, 0.2);
}

[data-theme="dark"] .inactiveSubfamily {
  color: #5a5a78;
}

[data-theme="dark"] .inactiveSubfamily::before {
  background: #3a3a58;
}

[data-theme="dark"] .inactiveSubfamily::after {
  background: #1e2038;
  color: #5a5a78;
}

/* — Morphology tab — */
[data-theme="dark"] .morphology_sections:nth-of-type(odd) {
  background: #10121e;
}

[data-theme="dark"] .morphology_sections:nth-of-type(even) {
  background: #13151f;
}

[data-theme="dark"] .morphology_sections + .morphology_sections {
  border-top-color: #282a44;
}

[data-theme="dark"] .morphology_sections > h2 {
  background: linear-gradient(90deg, #c83f3f 0%, #c83f3f 6px, #1e1a1a 6px, #1e1a1a 100%);
  color: #dde0f0;
  border-top-color: #2e2030;
}

[data-theme="dark"] .sectionIntro {
  color: #9090b0;
}

[data-theme="dark"] .morphologySubSection {
  border-top-color: #2a2a44;
}

[data-theme="dark"] .characterDefinition {
  color: #9090b0;
}

[data-theme="dark"] .characterState {
  background: none;
  border: 0;
  box-shadow: none;
}

[data-theme="dark"] .characterState > a:first-of-type,
[data-theme="dark"] .characterState > a:not(:first-of-type) {
  background: #222438;
  border-color: #2c2e48;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .characterState > .noPlate {
  background: none;
  border-color: #33354f;
  color: #6f7090;
}

[data-theme="dark"] .characterState p {
  color: #c8c8da;
  border-bottom-color: transparent;
}

[data-theme="dark"] .characterState p b {
  color: #e6e6f2;
}

[data-theme="dark"] .characterState > a:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  outline-color: #70cdff;
}

[data-theme="dark"] .characterState img {
  background: none;
}

/* — Gallery view controls (image size toggle) — */
[data-theme="dark"] .gallery-search {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: none;
}

[data-theme="dark"] .gallery-search-input {
  color: #e8e8e8;
}

[data-theme="dark"] .gallery-search-input::placeholder,
[data-theme="dark"] .gallery-search-icon,
[data-theme="dark"] .gallery-search-kind,
[data-theme="dark"] .gallery-search-clear {
  color: #8a8a8a;
}

[data-theme="dark"] .gallery-search-ghost {
  color: #777;
}

[data-theme="dark"] .gallery-search-clear:hover {
  color: #ddd;
}

[data-theme="dark"] .gallery-search-chip {
  background: rgba(214, 106, 106, 0.14);
  border-color: rgba(214, 106, 106, 0.45);
  color: #e8e8e8;
}

[data-theme="dark"] .gallery-search-chip-kind,
[data-theme="dark"] .gallery-search-chip-remove {
  color: #d68a8a;
}

[data-theme="dark"] .gallery-search-chip-remove:hover {
  background: rgba(214, 106, 106, 0.28);
  color: #fff;
}

[data-theme="dark"] .gallery-search-chips-clear {
  color: #999;
}

[data-theme="dark"] .gallery-search-chips-clear:hover {
  color: #eee;
}

[data-theme="dark"] .gallery-view-controls .image-size-toggle {
  background: #1e2038;
  border-color: #2e3050;
}

[data-theme="dark"] .gallery-view-controls .image-size-btn {
  color: #6060a0;
}

[data-theme="dark"] .gallery-view-controls .image-size-btn:hover {
  color: #c0c0d8;
  background: #282a44;
}

[data-theme="dark"] .gallery-view-controls .image-size-btn.active {
  background: #2e3158;
  color: #dde0f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ── Dark mode: publications ──────────────────────────────── */
[data-theme="dark"] .publication-card {
  background: #1a1c2e;
  border-color: #2e3050;
  color: #c8c8da;
}
[data-theme="dark"] .publication-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
[data-theme="dark"] .publication-authors {
  color: #dde0f0;
}
[data-theme="dark"] .publication-year {
  color: #8888aa;
}
[data-theme="dark"] .publication-title {
  color: #eef0ff;
}
[data-theme="dark"] .publication-journal {
  color: #9999bb;
}
[data-theme="dark"] .publication-journal .journal-details {
  color: #7777aa;
}
[data-theme="dark"] .publication-link:hover .publication-title {
  color: #e08a8a;
}
[data-theme="dark"] .publication-abstract-popup {
  background: #13151f;
  border-color: #2e3050;
  color: #c8c8da;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
}
[data-theme="dark"] .publication-abstract-popup strong {
  color: #eef0ff;
}
[data-theme="dark"] .publications-collapsible summary {
  background: #1a1c2e;
  border-color: #2e3050;
  color: #dde0f0;
}
[data-theme="dark"] .publications-collapsible summary:hover {
  background: #1e2038;
}
[data-theme="dark"] .publications-collapsible summary h3 {
  color: #dde0f0;
}
[data-theme="dark"] .inat-link {
  text-decoration-color: #8cc800;
}
[data-theme="dark"] .inat-link:hover {
  text-decoration-color: #8cc800;
}
[data-theme="dark"] .inat-link:hover::after {
  background: #555;
}
/* Keys in dark mode: same warm ink, re-lit for the dark ground.
   Deep brown won't hold on #10121e, so the numeral goes to gold. */
[data-theme="dark"] .key-couplets-wrapper {
  --key-numeral: #d9a441;
  --key-accent: #d08a7d;
  --key-rule: #4a4234;
  --key-ink: #ded7cc;
  --key-ink-soft: #9a9080;
  --key-paper: rgba(255, 255, 255, 0.045);

  /* Translucent rather than a named colour, so the wash works over whatever
     ground the surrounding panel happens to use. */
  --key-lead-surface-hover: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .lead {
  color: var(--key-ink);
}
[data-theme="dark"] .key-note {
  background: none;
  border-left-color: #4a4234;
  color: #9a9080;
}
[data-theme="dark"] .key-note-badge {
  border-color: #4a4234;
  color: #9a9080;
}
[data-theme="dark"] .key-morpho-card {
  background: #191b2a;
  border-color: #4a4234;
  color: #ded7cc;
}
[data-theme="dark"] .key-morpho-card-status,
[data-theme="dark"] .key-morpho-card-meta {
  color: #9a9080;
}
[data-theme="dark"] .key-morpho-card-diagnosis {
  border-top-color: #4a4234;
}
[data-theme="dark"] .key-morpho-card-thumbs img {
  background: #23202a;
}
[data-theme="dark"] .key-note-ref {
  color: #7bb1e0;
}
[data-theme="dark"] .key-footnotes {
  border-top-color: #4a4234;
  color: #9a9080;
}
[data-theme="dark"] .key-genus-card {
  --key-rule: #4a4234;
  --key-ink: #ded7cc;
  --key-ink-soft: #9a9080;
  --key-accent: #d08a7d;
  background: #2a2521;
  color: var(--key-ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
/* The map itself needs no dark rules: it is drawn from the --map-* tokens, which
   the dark theme redefines at the root. */
[data-theme="dark"] .key-note-popup {
  border-color: #4a4234;
  background: #2a2521;
  color: #d8cfc2;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .couplet {
  background: none;
  border: 0;
}
[data-theme="dark"] .result {
  color: var(--key-ink);
}
[data-theme="dark"] .result .key-species-link,
[data-theme="dark"] .result .key-genus-link,
[data-theme="dark"] .key-taxon-chip .key-species-link,
[data-theme="dark"] .key-taxon-chip .key-genus-link {
  color: var(--key-ink);
  text-decoration-color: rgba(208, 138, 125, 0.5);
}
[data-theme="dark"] .result .key-species-link:hover,
[data-theme="dark"] .result .key-genus-link:hover {
  color: var(--key-accent);
  text-decoration-color: var(--key-accent);
}
[data-theme="dark"] .result .key-species-link:focus-visible,
[data-theme="dark"] .result .key-genus-link:focus-visible,
[data-theme="dark"] .couplet-link:focus-visible {
  outline-color: rgba(208, 138, 125, 0.55);
}
[data-theme="dark"] .couplet-link:hover,
[data-theme="dark"] .couplet-link:focus-visible {
  background-color: rgba(208, 138, 125, 0.10);
}
[data-theme="dark"] .key-taxon-chip {
  color: var(--key-ink);
}
[data-theme="dark"] .key-taxon-chip em {
  color: #f0eade;
}
[data-theme="dark"] .pensoft-key-region-badge {
  background: #5a4e96;
}
[data-theme="dark"] .pensoft-key-figref {
  border-color: rgba(208, 138, 70, 0.35);
  background: rgba(208, 138, 70, 0.12);
  color: #f0c28f;
}
[data-theme="dark"] .pensoft-key-figref:hover {
  background: rgba(208, 138, 70, 0.2);
  border-color: rgba(208, 138, 70, 0.48);
}
[data-theme="dark"] .pensoft-key-figure-link {
  color: #f0c28f;
}
[data-theme="dark"] .pensoft-key-figure-link__label {
  border-color: rgba(208, 138, 70, 0.3);
  background: rgba(208, 138, 70, 0.14);
  text-decoration-color: rgba(240, 194, 143, 0.65);
}
[data-theme="dark"] .pensoft-key-figure-link:hover .pensoft-key-figure-link__label,
[data-theme="dark"] .pensoft-key-figure-link:focus-visible .pensoft-key-figure-link__label {
  background: rgba(208, 138, 70, 0.24);
  border-color: rgba(208, 138, 70, 0.46);
  color: #ffd7b1;
  text-decoration-color: rgba(255, 215, 177, 0.85);
}
[data-theme="dark"] .pensoft-key-figure-preview {
  background: #1a1c2e;
  border-color: #2e3050;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}

/* ══════════════════════════════════════════════════
   TAXA SEARCH BAR — dark mode overrides
   ══════════════════════════════════════════════════ */

[data-theme="dark"] .nav-search-input {
  background: #1e2038;
  border-color: #3a3c58;
  color: #d0d0e8;
}

[data-theme="dark"] .nav-search-input:focus {
  border-color: #c83f3f;
  background: #22243c;
  box-shadow: 0 0 0 3px rgba(200, 63, 63, 0.18);
}

[data-theme="dark"] .nav-search-icon {
  color: #5a5a80;
}

[data-theme="dark"] .nav-search-results {
  background: #1a1c2e;
  border-color: #2e3050;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.is-active {
  background: rgba(200, 63, 63, 0.12);
}

[data-theme="dark"] .search-result-name {
  color: #d0d0e8;
}

[data-theme="dark"] .search-result-meta {
  color: #5a5a80;
}

[data-theme="dark"] .mobile-search-wrapper {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mobile-search-input {
  background: #1e2038;
  border-color: #3a3c58;
  color: #d0d0e8;
}

[data-theme="dark"] .mobile-search-input:focus {
  border-color: #c83f3f;
  background: #22243c;
  box-shadow: 0 0 0 3px rgba(200, 63, 63, 0.18);
}

[data-theme="dark"] .mobile-search-results {
  background: #1a1c2e;
  border-color: #2e3050;
}

/* Catalog */

.catalog-page {
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto 56px;
}

.catalog-hero {
  margin: 26px auto 22px;
  padding: 26px 0 24px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(104, 82, 42, 0.22);
  box-shadow: none;
}

.catalog-kicker {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9e4e1e;
}

.catalog-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
}

.catalog-intro {
  margin: 0;
  max-width: 860px;
  font-size: 1.08rem;
}

.catalog-shell {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.catalog-sidebar,
.catalog-main {
  background: #fff;
  border: 1px solid rgba(84, 84, 84, 0.12);
  border-radius: 24px;
  box-shadow: 0 14px 30px rgba(35, 35, 35, 0.06);
}

.catalog-sidebar {
  position: sticky;
  top: 120px;
  padding: 22px 18px 18px;
  max-height: calc(100vh - 140px);
  overflow: auto;
}

.catalog-main {
  padding: 22px;
}

.catalog-panel-heading,
.catalog-summary-bar,
.catalog-search-row,
.catalog-toggle-row,
.catalog-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.catalog-panel-heading h2 {
  margin: 0;
  font-size: 1.2rem;
}

.catalog-clear-selection,
.catalog-clear-filters,
.catalog-result-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  min-width: 112px;
  background: #8a2f2a;
  color: #fff;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.catalog-clear-selection:hover,
.catalog-clear-filters:hover,
.catalog-result-link:hover {
  background: #6e2521;
  transform: translateY(-1px);
}

.catalog-selected-node {
  margin: 12px 0 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f0eb;
  color: #5b4634;
  font-size: 0.95rem;
}

.catalog-tree {
  display: grid;
  gap: 6px;
}

.catalog-tree-node {
  display: grid;
  gap: 6px;
}

.catalog-tree-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.catalog-tree-row.is-selected .catalog-tree-label {
  background: #f1e1cf;
  border-color: rgba(138, 47, 42, 0.22);
}

.catalog-tree-toggle,
.catalog-tree-spacer {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

.catalog-tree-toggle {
  border: 1px solid rgba(86, 86, 86, 0.18);
  background: #f7f7f7;
  color: #54453a;
  cursor: pointer;
}

.catalog-tree-label {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  border: 1px solid rgba(86, 86, 86, 0.1);
  background: #fff;
  color: #312924;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
}

.catalog-tree-count {
  color: #7f6f61;
  font-size: 0.82rem;
  white-space: nowrap;
}

.catalog-tree-children {
  margin-left: 16px;
  display: grid;
  gap: 6px;
}

.catalog-controls {
  display: grid;
  gap: 14px;
}

.catalog-search-row {
  align-items: end;
}

.catalog-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.catalog-control {
  display: grid;
  gap: 6px;
  font-size: 0.94rem;
}

.catalog-autocomplete {
  position: relative;
}

.catalog-control-wide {
  flex: 1 1 auto;
}

.catalog-control span {
  font-weight: 600;
  color: #43362d;
}

.catalog-control input,
.catalog-control select {
  width: 100%;
  border: 1px solid rgba(88, 88, 88, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  background: #fbfbfb;
  color: #221f1b;
  font-size: 0.98rem;
}

.catalog-filter-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 100%;
  z-index: 80;
}

.catalog-filter-item .search-result-meta::before {
  content: "";
}

.catalog-control input:focus,
.catalog-control select:focus,
.catalog-tree-toggle:focus,
.catalog-tree-label:focus,
.catalog-clear-selection:focus,
.catalog-clear-filters:focus,
.catalog-result-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 47, 42, 0.18);
  border-color: rgba(138, 47, 42, 0.42);
}

.catalog-toggle-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.catalog-toggle-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 999px;
  font-size: 0.94rem;
}

.catalog-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  background: #eee5d4;
  color: #6a4424;
  font-size: 0.84rem;
}

.catalog-chip-muted {
  background: #f4f4f4;
  color: #666;
}

.catalog-summary-bar {
  margin: 18px 0 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f7f7f7;
  font-size: 0.95rem;
}

.catalog-status {
  color: #875626;
  font-weight: 600;
}

.catalog-results {
  display: grid;
  gap: 14px;
}

.catalog-result-card,
.catalog-empty-state {
  border: 1px solid rgba(92, 92, 92, 0.12);
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(252, 251, 247, 0.95) 0%, rgba(255, 255, 255, 1) 100%);
}

.catalog-rank-label {
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: #9a6324;
}

.catalog-result-card h3,
.catalog-empty-state h3 {
  margin: 0;
}

.catalog-result-meta {
  margin: 8px 0 0;
  color: #6b6258;
  font-size: 0.94rem;
}

.catalog-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin-top: 16px;
}

.catalog-result-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.catalog-result-side {
  display: grid;
  gap: 12px;
  align-self: start;
  justify-items: end;
}

.catalog-result-card.has-media .catalog-result-body {
  grid-template-columns: minmax(0, 1fr) 360px;
}

.catalog-result-card:not(.has-media) .catalog-result-link {
  align-self: start;
}

.catalog-result-media.is-empty {
  display: none;
}

.catalog-habitus-strip {
  padding: 0;
  background: transparent;
  border: 0;
}

.catalog-habitus-title {
  margin: 0 0 12px;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #8f5c28;
}

.catalog-habitus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-items: end;
}

.catalog-habitus-card {
  margin: 0;
  width: 100%;
  max-width: 160px;
  overflow-x: hidden;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(92, 92, 92, 0.08);
  box-shadow: 0 1px 2px rgba(35, 35, 35, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
}

.catalog-habitus-card:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  outline: 1px solid #70cdff;
  outline-offset: -1px;
}

.catalog-habitus-card a {
  display: block;
}

.catalog-habitus-card img {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #f3f3f3;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.catalog-habitus-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 8px 8px;
  text-align: center;
}

.catalog-habitus-sex {
  font-size: 0.98rem;
  font-weight: 600;
  color: #32271f;
  text-transform: lowercase;
}

.catalog-habitus-source {
  font-size: 0.78rem;
  color: #7a6d63;
}

.catalog-habitus-extra {
  display: none;
}

.catalog-result-grid p,
.catalog-empty-state p {
  margin: 0;
}

@media (max-width: 1100px) {
  .catalog-shell {
    grid-template-columns: 1fr;
  }

  .catalog-sidebar {
    position: static;
    max-height: none;
  }

}

@media (max-width: 760px) {
  .catalog-page {
    width: min(100%, calc(100% - 24px));
  }

  .catalog-main,
  .catalog-sidebar {
    border-radius: 20px;
  }

  .catalog-hero {
    padding: 18px 0 20px;
  }

  .catalog-search-row,
  .catalog-panel-heading,
  .catalog-summary-bar,
  .catalog-result-top {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-result-body {
    grid-template-columns: 1fr;
  }

  .catalog-result-card.has-media .catalog-result-body {
    grid-template-columns: 1fr;
  }

  .catalog-filter-grid,
  .catalog-result-grid {
    grid-template-columns: 1fr;
  }

  .catalog-habitus-grid {
    grid-template-columns: repeat(2, minmax(0, 160px));
    justify-content: start;
    justify-items: start;
  }

  .catalog-clear-selection,
  .catalog-clear-filters,
  .catalog-result-link {
    text-align: center;
  }
}

[data-theme="dark"] .catalog-hero {
  background: none;
  border-bottom-color: rgba(121, 122, 164, 0.28);
  box-shadow: none;
}

[data-theme="dark"] .catalog-kicker {
  color: #efae79;
}

[data-theme="dark"] .catalog-intro,
[data-theme="dark"] .catalog-hero h1 {
  color: #d7d8e3;
}

[data-theme="dark"] .catalog-sidebar,
[data-theme="dark"] .catalog-main {
  background: #191b2b;
  border-color: rgba(93, 95, 127, 0.28);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .catalog-selected-node,
[data-theme="dark"] .catalog-summary-bar {
  background: #23263a;
  color: #c9cae0;
}

[data-theme="dark"] .catalog-control span,
[data-theme="dark"] .catalog-panel-heading h2,
[data-theme="dark"] .catalog-result-card h3,
[data-theme="dark"] .catalog-empty-state h3 {
  color: #e4e5ef;
}

[data-theme="dark"] .catalog-control input,
[data-theme="dark"] .catalog-control select,
[data-theme="dark"] .catalog-tree-label,
[data-theme="dark"] .catalog-tree-toggle {
  background: #222538;
  border-color: rgba(93, 95, 127, 0.45);
  color: #d7d8e3;
}

[data-theme="dark"] .catalog-tree-row.is-selected .catalog-tree-label {
  background: #2c3248;
  border-color: rgba(239, 174, 121, 0.34);
}

[data-theme="dark"] .catalog-tree-count {
  color: #a8abc7;
}

[data-theme="dark"] .catalog-toggle-row label {
  background: #23263a;
  color: #d1d2e5;
}

[data-theme="dark"] .catalog-chip {
  background: #3a2f26;
  color: #efc28c;
}

[data-theme="dark"] .catalog-chip-muted {
  background: #2a2d42;
  color: #b4b6cd;
}

[data-theme="dark"] .catalog-status {
  color: #efc28c;
}

[data-theme="dark"] .catalog-result-card,
[data-theme="dark"] .catalog-empty-state {
  background: linear-gradient(180deg, rgba(32, 34, 51, 0.98) 0%, rgba(25, 27, 43, 1) 100%);
  border-color: rgba(93, 95, 127, 0.3);
}

[data-theme="dark"] .catalog-habitus-strip {
  background: transparent;
}

[data-theme="dark"] .catalog-habitus-title {
  color: #efc28c;
}

[data-theme="dark"] .catalog-habitus-card {
  background: #222538;
  border-color: rgba(93, 95, 127, 0.28);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .catalog-habitus-card:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  outline-color: #70cdff;
}

[data-theme="dark"] .catalog-habitus-sex {
  color: #e4e5ef;
}

[data-theme="dark"] .catalog-habitus-source {
  color: #aeb1cb;
}

[data-theme="dark"] .catalog-result-meta,
[data-theme="dark"] .catalog-result-grid p,
[data-theme="dark"] .catalog-empty-state p {
  color: #c1c2d4;
}

/* --- Monograph treatments (Townes 1962 etc.) --- */

.nomenclature-hover-monograph {
  margin-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 8px;
}
.nomenclature-hover-monograph:empty { display: none; }

/* This summary is the only thing the reader sees until they open it, so it has
   to look like a control. `display: flex` suppresses the native disclosure
   triangle in Chrome, which left it reading as a plain heading -- hence the
   explicit marker below rather than a reliance on the default. */
/* Not flex. The card is narrow, and a flex row wraps the chevron onto a line
   of its own the moment the label plus badge overflow, which reads as three
   unrelated fragments. Block layout with an absolutely positioned marker keeps
   the chevron pinned to the first line at any width. */
.nomenclature-hover-monograph-details summary {
  display: block;
  position: relative;
  padding: 6px 8px 6px 22px;
  border: 1px solid #d8dced;
  border-radius: 6px;
  background: #f7f8fc;
  list-style: none;
  transition: background 0.15s, border-color 0.15s;
}
.nomenclature-hover-monograph-details summary::-webkit-details-marker {
  display: none;
}

.nomenclature-hover-monograph-details summary::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  opacity: 0.75;
  transition: transform 0.15s;
  transform-origin: 3px 50%;
}
.nomenclature-hover-monograph-details[open] summary::before {
  transform: rotate(90deg);
}

.nomenclature-hover-monograph-details summary:hover,
.nomenclature-hover-monograph-details summary:focus-visible {
  background: #eef1fa;
  border-color: #c3cbe6;
}

/* Says what opening it gets you, so the control is not just an arrow. Its own
   line: at card width it never shares one with the label and badge, and
   letting it wrap mid-list looked like a layout fault. */
.nomenclature-hover-monograph-hint {
  display: block;
  margin-top: 2px;
  font-size: calc(var(--hover-fs) * 0.625);
  font-weight: 500;
  color: #7a7f95;
}
.nomenclature-hover-monograph-details[open] .nomenclature-hover-monograph-hint {
  display: none;
}

.nomenclature-hover-monograph-badge {
  font-size: calc(var(--hover-fs) * 0.625);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f1f5ff;
  color: #1a3a8a;
  border: 1px solid #c9d6f5;
}

/* The name Townes printed, when it is not the name of this page. Without it
   the reader cannot tell the description was written against a different
   combination. */
.nomenclature-hover-monograph-as {
  font-size: calc(var(--hover-fs) * 0.625);
  color: #555;
  margin: 0 0 5px;
}

/* No inner scroller. The treatment is either closed or fully open -- the card
   itself already scrolls, so a nested one just traps the wheel and hides text
   behind a second scrollbar. */
.nomenclature-hover-monograph-body {
  margin-top: 6px;
}
.nomenclature-hover-monograph-body p {
  margin: 0 0 6px;
  font-size: calc(var(--hover-fs) * 0.75);
  line-height: 1.5;
  /* The shared .nomenclature-hover-treatment-details rule caps a paragraph at
     120px and scrolls it. That suits a one-paragraph Pensoft snippet; here it
     put a scrollbar on every paragraph of the treatment. */
  max-height: none;
  overflow: visible;
}
.nomenclature-hover-monograph-body p:last-child { margin-bottom: 0; }

/* Section headings from body_md ("## Description") and the subspecies names,
   as landmarks to scroll past.

   These were position:sticky, which does not work here: the headings are all
   siblings in one container, and sibling sticky elements do not push each
   other out of the way -- all three pinned at top:0 and overlapped into an
   unreadable stack. Making it work would mean wrapping every section in its
   own containing block, which is more structure than a landmark is worth. */
.nomenclature-hover-monograph-body .monograph-heading,
.nomenclature-hover-monograph-subsp-name {
  margin: 10px 0 4px;
  padding: 2px 0;
  font-size: calc(var(--hover-fs) * 0.6875);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #666;
}
.nomenclature-hover-monograph-body > .monograph-heading:first-child {
  margin-top: 0;
}

/* A subspecies opens a new treatment inside the same scroller, so it needs to
   read as a heavier break than the section headings under it. */
.nomenclature-hover-monograph-subsp-name {
  font-size: calc(var(--hover-fs) * 0.75);
  text-transform: none;
  letter-spacing: 0;
  color: #333;
  border-top: 1px solid rgba(0,0,0,0.10);
  padding-top: 8px;
  margin-top: 14px;
}

.nomenclature-hover-monograph-teaser {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5ff;
  color: #1a3a8a;
  font-size: calc(var(--hover-fs) * 0.75);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #c9d6f5;
  transition: background 0.15s, color 0.15s;
}

.nomenclature-hover-monograph-teaser:hover,
.nomenclature-hover-monograph-teaser:focus {
  background: #1a3a8a;
  color: #fff;
  border-color: #1a3a8a;
}

/* Genus page body — monograph section */
.genus-monograph-treatment {
  margin-top: 24px;
}

/* The closed control. Deliberately quiet: the treatment is borrowed text
   standing in for a genus account not yet written, so it should read as an
   offer rather than as the page's own content. It used to be an <h2>, which
   inherited the global `h2 { text-align: center }` and rendered as a second
   page title competing with the genus name. */
.genus-monograph-details > summary {
  display: block;
  position: relative;
  padding: 9px 12px 9px 28px;
  border: 1px solid #dcd8cf;
  border-radius: 7px;
  background: #faf9f6;
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: #4a453d;
  transition: background 0.15s, border-color 0.15s;
}
.genus-monograph-details > summary::-webkit-details-marker { display: none; }

.genus-monograph-details > summary::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 15px;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  opacity: 0.7;
  transition: transform 0.15s;
  transform-origin: 3px 50%;
}
.genus-monograph-details[open] > summary::before { transform: rotate(90deg); }

.genus-monograph-details > summary:hover,
.genus-monograph-details > summary:focus-visible {
  background: #f2efe8;
  border-color: #cfc9bd;
}

/* What opening it gets you. Its own line: at this width it would otherwise
   wrap mid-list and read as a layout fault. */
.genus-monograph-hint {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #8a8377;
}
.genus-monograph-details[open] .genus-monograph-hint { display: none; }

.genus-monograph-article {
  margin: 14px 0 20px;
}

/* The name Townes printed, when it is not this page's name. */
.genus-monograph-as {
  font-size: 13px;
  color: #6d675e;
  margin: 0 0 8px;
}

.genus-monograph-article .monograph-heading {
  font-family: var(--site-heading-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a736a;
  margin: 18px 0 5px;
}
.genus-monograph-article .monograph-heading:first-child { margin-top: 0; }

/* Heinrich 1977's specimen-scoring tables ("white on 54 males of Protichneumon
   radtkeorum"), which the treatment text carries as real table markup. Wrapped
   in its own scroller because the description column runs to a full clause and
   a narrow card must not push the page sideways. Sized down from the body text:
   a table this dense is reference matter, scanned rather than read. */
.monograph-table-wrap {
  overflow-x: auto;
  margin: 12px 0 14px;
}
.monograph-table-wrap table {
  border-collapse: collapse;
  font-size: 12px;
  line-height: 1.45;
  min-width: 100%;
}
.monograph-table-wrap th,
.monograph-table-wrap td {
  border-bottom: 1px solid #e2ddd4;
  padding: 5px 12px 5px 0;
  text-align: left;
  vertical-align: top;
}
.monograph-table-wrap th {
  font-family: var(--site-heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a736a;
  border-bottom-width: 2px;
}
/* The count column: narrow, and read against the description beside it. */
.monograph-table-wrap td:first-child,
.monograph-table-wrap th:first-child {
  white-space: nowrap;
  padding-right: 16px;
}

/* Plate figures cited by a treatment. A responsive grid rather than a fixed
   row: these are dense multi-panel plates, so a thumbnail wide enough to show
   which animal is on it is the difference between a signpost and a smudge.
   The lightbox is still where they are actually read. */
.monograph-figures {
  display: grid;
  /* min() so a very narrow column gets one full-width card instead of a
     horizontal overflow. */
  grid-template-columns: repeat(auto-fill, minmax(min(168px, 100%), 1fr));
  gap: 18px 16px;
  margin: 18px 0 10px;
  align-items: start;
}

.monograph-figure {
  margin: 0;
}

.monograph-figure a {
  display: block;
  border: 1px solid #ddd8cf;
  border-radius: 6px;
  overflow: hidden;
  background: #fbfaf7;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.monograph-figure a:hover,
.monograph-figure a:focus-visible {
  border-color: #9a9184;
  box-shadow: 0 6px 16px rgba(60, 50, 35, 0.16);
  transform: translateY(-2px);
}

.monograph-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* The plate scans are all 244x400; matching that means no letterboxing for
     them, while contain still protects any odd-sized figure from a crop that
     would cut off the panel a caption refers to. */
  aspect-ratio: 244 / 400;
  object-fit: contain;
  background: #fbfaf7;
}

.monograph-figure figcaption {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #7a736a;
  text-align: center;
}

@media (max-width: 750px) {
  .monograph-figures {
    grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
    gap: 14px 12px;
  }
}

/* In the hover card the thumbnails have less room. */
.nomenclature-hover-monograph-body .monograph-figures {
  grid-template-columns: repeat(auto-fill, minmax(min(86px, 100%), 1fr));
  gap: 10px 8px;
  margin: 10px 0 4px;
}
.nomenclature-hover-monograph-body .monograph-figure figcaption { font-size: calc(var(--hover-fs) * 0.625); }

/* A treatment's tables are shared with the genus page, where they are sized in
   px. Inside the card they follow the card's scale like everything else. */
.nomenclature-hover-monograph-body .monograph-table-wrap table {
  font-size: calc(var(--hover-fs) * 0.75);
}
.nomenclature-hover-monograph-body .monograph-table-wrap th {
  font-size: calc(var(--hover-fs) * 0.6875);
}

.genus-monograph-article p {
  line-height: 1.6;
}

/* Species page */
.species_container {
  max-width: 860px;
}

.species-breadcrumb {
  font-size: 13px;
  color: #666;
  margin-bottom: 8px;
}
.species-breadcrumb a {
  color: #1a3a8a;
  text-decoration: none;
}
.species-breadcrumb a:hover { text-decoration: underline; }
.species-breadcrumb-sep {
  margin: 0 6px;
  color: #999;
}

.title_species_page {
  font-family: 'Playfair Display', serif;
  margin-bottom: 16px;
}

.species-page-authorship {
  font-family: 'Source Sans 3', sans-serif;
  font-style: normal;
  font-size: 0.55em;
  color: #555;
  margin-left: 6px;
  font-weight: 400;
}

.species-page-section-heading {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 28px 0 8px 0;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 4px;
}

.species-page-source-badge {
  display: inline-block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1a3a8a;
  background: #f1f5ff;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
  border: 1px solid #c9d6f5;
}

.species-page-treatment {
  margin-bottom: 18px;
}

.species-page-treatment-header {
  font-size: 15px;
  margin-bottom: 6px;
}

.species-page-treatment-author {
  font-weight: 400;
  color: #666;
  font-style: italic;
}

/* The monograph citation, directly under its section heading. The shared
   .publications-list centres itself inside a 900px column, which is right for
   a page that is nothing but citations and wrong for one where the card is a
   header for the treatment below it. */
.species-page-citation {
  margin: 10px 0 20px;
  max-width: none;
}

.species-page-treatment .monograph-heading {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  margin: 16px 0 4px 0;
  color: #333;
}

.species-page-treatment p {
  line-height: 1.65;
  margin: 0 0 10px 0;
}

.species-page-treatment-source {
  font-size: 12px;
  color: #666;
  font-style: italic;
  margin-top: 4px;
}

.species-page-subspecies-list {
  list-style: none;
  padding-left: 0;
}

.species-page-subspecies-item {
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 3px solid #c9d6f5;
}

.species-page-subspecies-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  margin: 0 0 6px 0;
}

.species-page-subspecies-details summary {
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 6px;
  list-style: none;
}
.species-page-subspecies-details summary::-webkit-details-marker { display: none; }
.species-page-subspecies-details[open] summary { margin-bottom: 10px; }

.species-page-region-list,
.species-page-host-list {
  list-style: disc;
  padding-left: 22px;
  line-height: 1.6;
}

.species-page-muted {
  color: #888;
  font-style: italic;
}

.species-page-error {
  color: #a33;
}

.species-page-loading {
  color: #888;
  font-style: italic;
}

.species-page-pensoft-details {
  margin: 4px 0;
}
.species-page-pensoft-details summary {
  cursor: pointer;
  font-weight: 600;
}

.species-page-host-note {
  color: #777;
  font-size: 0.9em;
}

/* Dark mode overrides */
[data-theme="dark"] .nomenclature-hover-monograph {
  border-top-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .nomenclature-hover-monograph-badge {
  background: #22304f;
  color: #bcd4ff;
  border-color: #3b527f;
}
[data-theme="dark"] .nomenclature-hover-monograph-as {
  color: #a9adc4;
}
[data-theme="dark"] .nomenclature-hover-monograph-details summary {
  background: #23253a;
  border-color: #383b56;
}
[data-theme="dark"] .nomenclature-hover-monograph-details summary:hover,
[data-theme="dark"] .nomenclature-hover-monograph-details summary:focus-visible {
  background: #2c2f48;
  border-color: #4a4e70;
}
[data-theme="dark"] .nomenclature-hover-monograph-hint {
  color: #8e93ad;
}
[data-theme="dark"] .nomenclature-hover-monograph-body .monograph-heading,
[data-theme="dark"] .nomenclature-hover-monograph-subsp-name {
  color: #a9adc4;
}
[data-theme="dark"] .nomenclature-hover-monograph-subsp-name {
  color: #d7d9e6;
  border-top-color: rgba(255,255,255,0.14);
}

[data-theme="dark"] .nomenclature-hover-monograph-teaser {
  background: #22304f;
  color: #bcd4ff;
  border-color: #3b527f;
}
[data-theme="dark"] .nomenclature-hover-monograph-teaser:hover,
[data-theme="dark"] .nomenclature-hover-monograph-teaser:focus {
  background: #bcd4ff;
  color: #0b1530;
  border-color: #bcd4ff;
}

[data-theme="dark"] .genus-monograph-details > summary {
  background: #23253a;
  border-color: #3a3d55;
  color: #d7d9e6;
}
[data-theme="dark"] .genus-monograph-details > summary:hover,
[data-theme="dark"] .genus-monograph-details > summary:focus-visible {
  background: #2c2f48;
  border-color: #4a4e70;
}
[data-theme="dark"] .monograph-figure a {
  border-color: #3a3d55;
  background: #1a1c2e;
}
[data-theme="dark"] .monograph-figure a:hover,
[data-theme="dark"] .monograph-figure a:focus-visible {
  border-color: #6b7099;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .monograph-figure img { background: #23253a; }
[data-theme="dark"] .monograph-figure figcaption { color: #8e93ad; }

[data-theme="dark"] .genus-monograph-hint,
[data-theme="dark"] .genus-monograph-as {
  color: #8e93ad;
}
[data-theme="dark"] .species-page-section-heading,
[data-theme="dark"] .species-page-section-heading,
[data-theme="dark"] .species-page-subspecies-name,
[data-theme="dark"] .species-page-treatment .monograph-heading,
[data-theme="dark"] .genus-monograph-article .monograph-heading {
  color: #f1f2fa;
}
[data-theme="dark"] .species-page-section-heading {
  border-bottom-color: #3a3d55;
}
[data-theme="dark"] .monograph-table-wrap th,
[data-theme="dark"] .monograph-table-wrap td {
  border-bottom-color: #3a3d55;
}
[data-theme="dark"] .monograph-table-wrap th {
  color: #b9bcd0;
}
[data-theme="dark"] .species-page-treatment-source,
[data-theme="dark"] .species-page-treatment-author,
[data-theme="dark"] .species-page-muted,
[data-theme="dark"] .species-page-loading,
[data-theme="dark"] .species-page-host-note,
[data-theme="dark"] .gallery_caption_note,
[data-theme="dark"] .gallery-tribe-heading,
[data-theme="dark"] .gallery-tribe-count {
  color: #a0a3bf;
}

[data-theme="dark"] .gallery-tribe-heading {
  border-bottom-color: #3a3a52;
}
[data-theme="dark"] .species-page-source-badge {
  background: #22304f;
  color: #bcd4ff;
  border-color: #3b527f;
}
[data-theme="dark"] .species-page-subspecies-item {
  border-left-color: #3b527f;
}
[data-theme="dark"] .species-breadcrumb {
  color: #a0a3bf;
}
[data-theme="dark"] .species-breadcrumb a {
  color: #bcd4ff;
}

@media (max-width: 750px) {
  .species_container { padding: 0; }
  .species-page-section-heading { font-size: 19px; }
  .title_species_page { font-size: 26px; }
}

/* — Bio page: link pills + inline links — */
[data-theme="dark"] .bio_content > li a {
  background: #1c1e30;
  border-color: #b8463f;
  color: #e89a98;
}

[data-theme="dark"] .bio_content > li a:hover {
  background: #c83f3f;
  border-color: #d9534f;
  color: #fff;
}

[data-theme="dark"] .bio_content > li:not(:has(a)) {
  background: #181a2a;
  border-color: #3a3c58;
  color: #9a9ab0;
}

[data-theme="dark"] .bio_content a:not(li a) {
  color: #ec8584;
}

[data-theme="dark"] .bio_content a:not(li a):hover {
  color: #f4a3a2;
}

/* Section divider between bios */
[data-theme="dark"] .bio_content_flex + .bio_content_flex,
[data-theme="dark"] .bio_publications_section + .bio_content_flex {
  border-top-color: #282a44;
}

/* Nomenclature section (original descriptions) */
[data-theme="dark"] .nomenclature-hover-nomen {
  border-top-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .nomenclature-hover-od-label {
  color: #9a9aae;
}
[data-theme="dark"] .nomenclature-hover-od-details > summary {
  color: #a8b8d8;
}
[data-theme="dark"] .nomenclature-hover-od-item .nomenclature-hover-od-ref {
  color: #b8b8c6;
}

/* Combination history rows */
[data-theme="dark"] .nomenclature-hover-comb-cite {
  color: #9a9aae;
}

/* Type material rows */
[data-theme="dark"] .nomenclature-hover-tm-label { color: #8a8a9e; }
[data-theme="dark"] .nomenclature-hover-tm-cite { color: #9a9aae; }
[data-theme="dark"] .nomenclature-hover-tm-lost { color: #e08a84; }
[data-theme="dark"] .nomenclature-hover-comb-orig { color: #8a8a9e; }

/* Published figures section */
[data-theme="dark"] .published-figures-intro { color: #9a9aae; }
[data-theme="dark"] .map-provenance-note { color: #9a9aae; }
[data-theme="dark"] .nomenclature-hover-morpho-note { color: #9a9aae; }