@charset "utf-8";
/* ==========================================================================
   Invertebrate Welfare
   The tokens and fluid type scale below are exact: sizes are computed from the
   size step rather than hard-coded, so every level stays on the same scale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts.  Instrument Sans (SIL Open Font License) is self-hosted for headings.
   Body copy uses a system Palatino stack, so it needs no file — it resolves
   natively on macOS and Windows and falls back to a generic serif elsewhere.
   The footer button's intended face (Orpheus Pro) is commercially licensed and
   cannot be redistributed, so it deliberately falls back to the body stack.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* The original ships identical files for 400 and 700, so bold headings render
   in the regular cut rather than being synthesised.  Reproduced verbatim. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --base-font-size: 18px;
  --max-page-width: 1400px;
  --page-padding: 4vw;
  --half-gutter: 17px;

  --body-font: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --heading-font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Orpheus Pro is commercially licensed and cannot be redistributed; the
     serif body stack is the closest substitute that may ship. */
  --button-font: var(--body-font);

  --body-line-height: 1.6em;
  --heading-line-height: 1.68em;
  --meta-line-height: 1.2em;
  --meta-letter-spacing: 0.02em;

  --h1: 3.6;
  --h2: 2.52;
  --h3: 1.98;
  --h4: 1.08;
  --text-normal: 1.2;
  --text-small: 1;
  --text-large: 1.5;

  --ink: #000;
  --paper: #fff;
}

@media (max-width: 767px) {
  :root { --page-padding: 6vw; }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: var(--base-font-size);
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 991px) {
  html { font-size: min(var(--base-font-size), 16px); }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 400;
  font-style: normal;
  line-height: var(--body-line-height);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; border: 0; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* --------------------------------------------------------------------------
   Fluid type scale (verbatim from the original)

     desktop / landscape
       min( (V-1)*1.2vw + 1rem,
            max( (V-1)*0.012*maxPageWidth + 1rem, V*1rem ) )
     mobile portrait
       (V-1) * (0.012 * min(100vh, 900px)) + 1rem

   `--fs` carries V so one rule serves every level.
   -------------------------------------------------------------------------- */
/* `1.6em` resolves against .site's own fluid font-size and is then inherited as
   a fixed length — that is what gives links, nav items and "Read More" the same
   33.72px leading as body copy on the original. */
.site { --fs: var(--text-normal); line-height: var(--body-line-height); }
h1 { --fs: var(--h1); }
h2 { --fs: var(--h2); }
h3 { --fs: var(--h3); }
h4 { --fs: var(--h4); }
.text-small { --fs: var(--text-small); }
.text-large { --fs: var(--text-large); }

@media screen and (min-width: 768px), screen and (orientation: landscape) {
  .site, h1, h2, h3, h4, .text-small, .text-large {
    font-size: min(
      calc((var(--fs) - 1) * 1.2vw + 1rem),
      max(
        calc((var(--fs) - 1) * 0.012 * var(--max-page-width) + 1rem),
        calc(var(--fs) * 1rem)
      )
    );
  }
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .site, h1, h2, h3, h4, .text-small, .text-large {
    font-size: calc((var(--fs) - 1) * (0.012 * min(100vh, 900px)) + 1rem);
  }
}

h1, h2, h3, h4 {
  margin: 2rem 0;
  font-family: var(--heading-font);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  /* the original derives heading leading from the size step, not the rendered px */
  line-height: calc(var(--heading-line-height) * (1 + (1 - var(--fs)) / 25));
}

p, .text-small, .text-large {
  margin: 1rem 0;
  line-height: var(--body-line-height);
}

/* --------------------------------------------------------------------------
   Rich text
   -------------------------------------------------------------------------- */
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }

.rich-text ul, .rich-text ol { margin: 1em 0; padding-left: 40px; }
.rich-text li { margin: 0 0 0.5em; line-height: var(--body-line-height); }
.rich-text li > p { margin: 0; }

.rich-text a,
.entry__excerpt a,
.summary__excerpt a,
figcaption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.rich-text a:hover { text-decoration-thickness: 2px; }

.rich-text hr {
  height: 1px;
  margin: 1em 0;
  border: 0;
  background: currentColor;
  opacity: 0.2;
}

/* --------------------------------------------------------------------------
   Header.  The original positions the header absolutely and pads the first
   section by its height; keeping it in normal flow is pixel-identical and
   needs no measuring script.
   -------------------------------------------------------------------------- */
.header {
  position: relative;
  /* above .mobile-nav so the burger stays reachable to close the drawer */
  z-index: 40;
  padding: 3vw var(--page-padding);
}
@media (max-width: 767px) {
  .header { padding: 6vw var(--page-padding); }
}

.header__inner {
  display: flex;
  align-items: center;
  max-width: var(--max-page-width);
  margin: 0 auto;
}

.header__logo {
  flex: 0 0 auto;
  margin-right: 32px;
  line-height: 0;
}
.header__logo img {
  display: block;
  width: auto;
  height: 85px;
  max-height: 85px;
}

.nav {
  display: inline-flex;
  align-items: center;
  list-style: none;
}
.nav__item { position: relative; margin-right: 1.1vw; }
.nav__item:last-child { margin-right: 0; }

.nav__link,
.nav__folder-toggle {
  display: inline-block;
  padding: 0 0 0.1em;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
/* 1px rule under the current page, offset like the original */
.nav__item--active > .nav__link,
.nav__link:hover,
.nav__folder-toggle:hover,
.nav__item--active > .nav__folder-toggle {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 calc(100% - 0.1em);
}

.nav__folder {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 200px;
  margin: 0;
  padding: 0.5em 1em;
  list-style: none;
  background: var(--paper);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.nav__item--folder:hover .nav__folder,
.nav__item--folder:focus-within .nav__folder,
.nav__folder-toggle[aria-expanded="true"] + .nav__folder {
  visibility: visible;
  opacity: 1;
}
.nav__folder a {
  display: block;
  padding: 0.1em 0;
  color: inherit;
  line-height: 1.3em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__folder a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* burger + mobile drawer */
.header__burger {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.header__burger span {
  display: block;
  width: 24px; height: 1px;
  margin: 6px auto;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The drawer only ever exists below the nav breakpoint. */
.mobile-nav { display: none; }

@media (max-width: 767px) {
  .header__logo img { height: auto; width: min(62vw, 300px); max-height: none; }
  .header__nav { display: none; }
  .header__burger { display: block; }

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    padding: 24vw var(--page-padding) 10vh;
    overflow-y: auto;
    background: var(--paper);
  }
  .mobile-nav[data-open="true"] { display: block; }
  .mobile-nav ul { list-style: none; }
  .mobile-nav > ul > li { margin: 0 0 0.6em; }
  .mobile-nav a,
  .mobile-nav .mobile-nav__toggle {
    display: block;
    padding: 0.15em 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--heading-font);
    font-size: 1.6rem;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-nav__sub { margin: 0.2em 0 0.6em 1em; }
  .mobile-nav__sub a { font-family: var(--body-font); font-size: 1.1rem; }
  body[data-nav-open="true"] { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Sections (Home / About / footer)
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  display: flex;
  align-items: center;
}
.section--height-small { min-height: 33vh; }
.section--height-medium { min-height: 66vh; }
.section--height-large { min-height: 100vh; }

.section__wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 6.6vmax var(--page-padding);
}
.section--height-small .section__wrapper { padding-block: 3.3vmax; }
.section--height-large .section__wrapper { padding-block: 10vmax; }

.section--left .section__wrapper { justify-content: flex-start; }
.section--right .section__wrapper { justify-content: flex-end; }

.section__content { width: 100%; min-width: 0; }
.section--narrow .section__content { width: 50%; }
.section--medium .section__content { width: 75%; }
@media (max-width: 767px) {
  .section--narrow .section__content,
  .section--medium .section__content { width: 100%; }
}

/* --------------------------------------------------------------------------
   Block grid.  Rows pull out by a half gutter so block padding forms the
   gutters, exactly as the original layout engine does.
   -------------------------------------------------------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--half-gutter));
}
.col { display: flex; flex-direction: column; min-width: 0; }
.col--1  { width: 8.3333%; }  .col--2  { width: 16.6667%; }
.col--3  { width: 25%; }      .col--4  { width: 33.3333%; }
.col--5  { width: 41.6667%; } .col--6  { width: 50%; }
.col--7  { width: 58.3333%; } .col--8  { width: 66.6667%; }
.col--9  { width: 75%; }      .col--10 { width: 83.3333%; }
.col--11 { width: 91.6667%; } .col--12 { width: 100%; }

@media (max-width: 767px) {
  .col { width: 100%; }
}

.block { padding: var(--half-gutter); }

/* page sections: first block in a column loses its top padding */
.layout--page .col > .block:first-child { padding-top: 0; }
/* blog item bodies: the first row carries no vertical block padding */
.layout--item .row:first-child .block { padding-block: 0; }

.block--spacer { padding-inline: var(--half-gutter); }
.block--spacer > div { height: calc(var(--vsize, 1) * 34px); }

.block--image img {
  display: block;
  width: 100%;
  height: auto;
}
.block--image figure.is-cropped img {
  height: 100%;
  object-fit: cover;
}
.block--image figure.is-cropped {
  position: relative;
  overflow: hidden;
}
.block--image figcaption {
  margin-top: 0.5em;
  font-size: 0.8em;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Button block
   -------------------------------------------------------------------------- */
.button {
  display: block;
  padding: 1.3rem 2.171rem;
  border: 2px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--button-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover { background: var(--ink); color: var(--paper); }

/* --------------------------------------------------------------------------
   Summary grid (the species grid on the home page)
   -------------------------------------------------------------------------- */
.summary { display: flow-root; }
/* Percentage gaps in flexbox resolve against the block axis (i.e. to zero), so
   the original's percentage margins are used instead — those resolve against
   the container width in both axes, keeping the gutters square. */
.summary__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
/* Every card keeps its bottom margin, including the last row — the original
   nominally cancels it but the negative margin never takes effect there, so
   the grid really does end with one gutter of trailing space. */
.summary__item {
  width: 21.18%;
  min-width: 0;
  margin-right: 5.09338%;
  margin-bottom: 5.09338%;
}
.summary__item:nth-child(4n) { margin-right: 0; }

@media (max-width: 991px) {
  .summary__item { width: 30.9%; margin-right: 3.65%; margin-bottom: 3.65%; }
  .summary__item:nth-child(4n) { margin-right: 3.65%; }
  .summary__item:nth-child(3n) { margin-right: 0; }
}
@media (max-width: 767px) {
  .summary__item { width: 47%; margin-right: 6%; margin-bottom: 6%; }
  .summary__item:nth-child(3n),
  .summary__item:nth-child(4n) { margin-right: 6%; }
  .summary__item:nth-child(2n) { margin-right: 0; }
}

.summary__thumb {
  display: block;
  position: relative;
  margin-bottom: 15px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.summary__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.summary__title {
  margin: 0 0 10px;
  font-family: var(--body-font);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}
.summary__title a { color: inherit; text-decoration: none; }
.summary__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.summary__excerpt { margin-bottom: 10px; }
.summary__excerpt p { margin: 0; font-size: 14px; line-height: 19.6px; }

.summary__more {
  display: block;
  margin-bottom: 10px;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
}
.summary__more:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   Collection index pages
   -------------------------------------------------------------------------- */
.collection {
  padding: var(--page-padding);
}
.collection__inner {
  max-width: var(--max-page-width);
  margin: 0 auto;
}

/* Collection intro copy: its own section, no min-height, tighter block padding.
   The original authors this as a two-row fluid-grid block, which is what the
   min-height reproduces. */
.section--intro { align-items: flex-start; }
.section--intro .section__wrapper { padding-block: 3.3vmax; }
.section--intro .layout { min-height: 3.42rem; }

/* stacked list (Animals) --------------------------------------------------- */
.entry--stacked { display: flex; flex-direction: column; padding-bottom: 120px; }
.entry--stacked .entry__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.entry--stacked .entry__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entry--stacked .entry__spacer { height: 20px; }
.entry--stacked .entry__title { --fs: var(--h1); margin: 0 0 30px; }

/* side-by-side list (Newsletter) ------------------------------------------ */
.entry--side {
  display: flex;
  align-items: center;
  margin-bottom: 100px;
}
.entry--side .entry__media {
  position: relative;
  flex: 0 0 52%;
  width: 52%;
  margin-right: 6%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.entry--side .entry__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Flex column so the title's bottom margin and "Read More"'s top margin stack
   instead of collapsing, as on the original. */
.entry--side .entry__body {
  flex: 0 0 42%;
  width: 42%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.entry--side .entry__title { --fs: var(--h2); margin: 0 0 10px; }

@media (max-width: 767px) {
  .entry--side { display: block; margin-bottom: 60px; }
  .entry--side .entry__media,
  .entry--side .entry__body { width: 100%; flex: none; margin-right: 0; }
  .entry--side .entry__media { margin-bottom: 20px; }
  .entry--stacked { padding-bottom: 60px; }
}

/* Component titles use the unreduced heading leading; only headings inside
   rich text get the size-dependent reduction. */
.entry__title, .item__title { line-height: var(--heading-line-height); }

.entry__title a { color: inherit; text-decoration: none; }
.entry__title a:hover { text-decoration: underline; text-underline-offset: 0.1em; }

.entry__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  line-height: var(--meta-line-height);
  letter-spacing: var(--meta-letter-spacing);
}
.entry__excerpt > *:first-child { margin-top: 0; }
.entry__excerpt > *:last-child { margin-bottom: 0; }

.entry__more {
  display: block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
}
.entry--side .entry__more { margin-top: 5px; }
.entry--stacked .entry__more { padding-top: 30px; }
.entry__more:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* --------------------------------------------------------------------------
   Blog item pages
   -------------------------------------------------------------------------- */
.item__inner {
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: var(--page-padding);
}
.item__article {
  width: 50%;
  margin: 0 auto;
  min-width: 0;
}
@media (max-width: 767px) {
  .item__article { width: 100%; }
}
.item__header { margin-bottom: 50px; }
.item__title { margin: 0; }
.item__content { margin-bottom: 3vw; }

/* prev / next ------------------------------------------------------------- */
.pager {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--max-page-width);
  margin: 0 auto;
  padding: 3vw var(--page-padding);
}
.pager__link {
  display: flex;
  align-items: center;
  max-width: 45%;
  color: inherit;
  text-decoration: none;
}
.pager__link--next { margin-left: auto; text-align: right; }
/* 18x32 caret with 25px of clear space towards the title, as the original */
.pager__icon { flex: 0 0 auto; width: 18px; height: 32px; }
.pager__link--prev .pager__icon { margin-right: 25px; }
.pager__link--next .pager__icon { order: 2; margin-left: 25px; }
.pager__icon svg { display: block; width: 18px; height: 32px; overflow: visible; }
.pager__title {
  display: block;
  font-family: var(--heading-font);
  font-size: min(
    calc((var(--h3) - 1) * 1.2vw + 1rem),
    max(
      calc((var(--h3) - 1) * 0.012 * var(--max-page-width) + 1rem),
      calc(var(--h3) * 1rem)
    )
  );
  font-weight: 400;
  line-height: 1;
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .pager__title { font-size: calc((var(--h3) - 1) * (0.012 * min(100vh, 900px)) + 1rem); }
}
.pager__link:hover .pager__title { text-decoration: underline; text-underline-offset: 0.1em; }
@media (max-width: 767px) {
  .pager { gap: 16px; }
  .pager__link { max-width: 48%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */
.notfound { text-align: center; }
.notfound h1 { margin-top: 0; }

@media print {
  .header, .mobile-nav, .pager { display: none; }
  body { color: #000; }
}