/* ============================================================
   TECHNATURA.CSS
   Field Catalogue of Consumer Apparatus
   technatura.co
   ============================================================ */

/* ── CUSTOM PROPERTIES ────────────────────────────────────── */
:root {
  --cream:          #f5f0e8;
  --cream-dark:     #ede6d6;
  --cream-darker:   #e0d5c0;
  --ink:            #1c1409;
  --ink-faded:      #3d2f1a;
  --ink-light:      #6b5a3e;
  --ink-lighter:    #9a8670;
  --accent:         #8b3a1a;
  --accent-light:   #c4723a;
  --accent-pale:    #f5ede6;
  --amber:          #7a5c1e;
  --amber-light:    #c9a050;
  --amber-pale:     #faf3e0;
  --moss:           #3d5230;
  --rule:           #b8a888;
  --trail-bg:       #faf8f3;
  --ring-stain-rgb: 70, 58, 44;

  --font-serif:     'Crimson Text', Georgia, serif;
  --font-display:   'IM Fell English', Georgia, serif;
  --font-sc:        'IM Fell English SC', Georgia, serif;
  --font-mono:      'Special Elite', 'Courier New', monospace;

  --max-width:      860px;
  --page-padding:   28px;
}

/* ── DARK MODE VARIABLES ──────────────────────────────────── */
[data-theme="dark"] {
  /* Lamplight, not midnight: a warm umber room with softened ink,
     kept gentle on the eyes — the lamp is turned low, not off. */
  --cream:          #322a1d;
  --cream-dark:     #3b3121;
  --cream-darker:   #453927;
  --ink:            #ded1b6;
  --ink-faded:      #c6b493;
  --ink-light:      #a5906e;
  --ink-lighter:    #82715a;
  --accent:         #cd8451;
  --accent-light:   #e2a273;
  --accent-pale:    #3e3020;
  --amber:          #c9a050;
  --amber-light:    #ddc077;
  --amber-pale:     #362c1a;
  --moss:           #86a06c;
  --rule:           #564630;
  --trail-bg:       #403421;
  --ring-stain-rgb: 222, 209, 182;
}

/* By lamplight every plate dims into the room — the pale scans would
   otherwise glare like windows. The lightbox is exempt: it is the
   magic lantern, and the lantern brings its own light. */
main img { transition: filter 0.4s ease; }
[data-theme="dark"] main img:not(.tn-lightbox-img) {
  filter: brightness(0.72) sepia(0.14) contrast(0.96);
}

.tn-footer-meta-sep {
  color: var(--ink-lighter);
  margin: 0 8px;
}

/* ── THE PULL CHAIN ────────────────────────────────────────
   Drops out from beneath the header bar, below the T of the
   masthead. Pulling lets more chain out; it retracts as the
   lamp answers. */
.tn-lamp-pull {
  position: absolute;
  z-index: 5;
  width: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Hangs nowhere until the script has measured a real anchor, so a chain
     hung at the wrong coordinates is never painted */
  visibility: hidden;
}

.tn-lamp-pull.is-placed { visibility: visible; }

/* The wordmark reads in front of the chain */
.tn-nav-logo { position: relative; z-index: 6; }

.tn-lamp-chain {
  width: 2px;
  height: var(--chain-len, 24px);
  background: repeating-linear-gradient(
    to bottom,
    var(--ink-light) 0 3px,
    transparent 3px 5px
  );
  /* recoil: the spring snaps the chain home faster than the hand drew it */
  transition: height 0.09s ease-in;
}

.tn-lamp-pull.is-pulled .tn-lamp-chain {
  /* the draw: smooth and slightly elastic under the hand */
  transition: height 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* Pulled: more chain is let out from beneath the header */
.tn-lamp-pull.is-pulled .tn-lamp-chain {
  height: calc(var(--chain-len, 24px) + 16px);
}

.tn-lamp-knob {
  width: 8px;
  height: 10px;
  border-radius: 45% 45% 50% 50%;
  background: linear-gradient(135deg, #c9a45e 20%, #8a6a34 80%);
  box-shadow: 0 1px 2px rgba(28, 20, 9, 0.35);
  transition: box-shadow 0.4s ease;
}

.tn-lamp-pull:hover .tn-lamp-knob {
  box-shadow: 0 1px 4px rgba(201, 164, 94, 0.7);
}

/* When the lamp is lit, the knob catches its light */
[data-theme="dark"] .tn-lamp-knob {
  box-shadow: 0 0 6px rgba(224, 192, 112, 0.55);
}

/* ── THEME TRANSITION ─────────────────────────────────────── */
body, .tn-site-header, .tn-site-footer,
.tn-search-modal, .tn-specimen-card,
.tn-support-strip, .tn-collapsible {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── BASE ─────────────────────────────────────────────────── */
html {
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1.7;
  min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover { color: var(--ink); }

img { max-width: 100%; display: block; }
/* ── Responsive image hardening (2026 <picture> migration) ──
   1. Picture wrappers must not participate in layout.
   2. The width/height attributes on generated imgs must never win
      over fluid sizing: force height to follow the aspect ratio.
   3. Grid columns must never expand to an image's intrinsic width. */
picture { display: contents; }
picture > img { width: 100%; height: auto; }
.tn-grid > div { min-width: 0; }

/* ── SITE NAVIGATION ──────────────────────────────────────── */
.tn-support-strip {
  position: sticky;
  top: 0;
  z-index: 101;
  background: var(--cream);
}

.tn-site-header {
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: var(--support-strip-height, 34px);
  z-index: 100;
  background: var(--cream);
}

/* ── PER-PAGE SUPPORT STRIP ─────────────────────────────────── */
.tn-support-strip {
  max-width: 100%;
  margin: 0;
  padding: 7px var(--page-padding) 8px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  letter-spacing: 0.04em;
  text-align: center;
}
.tn-support-link {
  color: var(--ink-light);
  border-bottom: 1px dotted var(--rule);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.tn-support-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tn-support-divider {
  margin: 0 0.5em;
  color: var(--rule);
}
.tn-support-link--secondary {
  color: var(--ink-lighter);
  border-bottom-color: color-mix(in srgb, var(--rule) 60%, transparent);
}
.tn-support-link--secondary:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tn-site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0px, var(--ink) 2px,
    transparent 2px, transparent 8px
  );
  opacity: 0.2;
}

.tn-site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px var(--page-padding);
}

.tn-nav-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: 28px;
}

.tn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  width: 22px;
}

.tn-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink-light);
  border-radius: 1px;
  transition: transform 0.22s ease, opacity 0.18s ease, background 0.18s ease;
  transform-origin: center;
}

.tn-hamburger:hover span { background: var(--accent); }

.tn-hamburger.is-open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
  background: var(--accent);
}
.tn-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.tn-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  background: var(--accent);
}

.tn-nav-logo {
  font-family: var(--font-sc);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--ink);
  margin-right: auto;
}

.tn-nav-logo:hover { color: var(--accent); }

.tn-nav-hedera {
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0;
  margin-left: 2px;
  vertical-align: middle;
  line-height: 1;
}

.tn-nav-links {
  display: flex;
  gap: 28px;
  font-family: var(--font-sc);
  font-size: 14px;
  letter-spacing: 0.15em;
}

.tn-nav-links a {
  color: var(--ink-light);
}

.tn-nav-links a:hover { color: var(--accent); }

/* ── SEARCH TRIGGER BUTTON ───────────────────────────────── */
.tn-search-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  transition: color 0.15s;
  margin-left: 4px;
}
.tn-search-trigger:hover { color: var(--accent); }

/* ── SEARCH MODAL ────────────────────────────────────────── */
.tn-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 14, 0.55);
  z-index: 1000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.tn-search-overlay.is-open { display: flex; }

.tn-search-modal {
  background: var(--cream-dark);
  border: 1px solid var(--rule);
  width: 100%;
  max-width: 580px;
  margin: 0 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}

.tn-search-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-lighter);
}

.tn-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  padding: 0;
}
.tn-search-input::placeholder { color: var(--ink-lighter); font-style: italic; }

.tn-search-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-lighter);
  font-size: 13px;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}
.tn-search-close:hover { color: var(--accent); }

.tn-search-results { max-height: 460px; overflow-y: auto; }

.tn-search-result {
  display: block;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
.tn-search-result:last-child { border-bottom: none; }
.tn-search-result:hover,
.tn-search-result.is-active { background: var(--accent-pale); }

.tn-search-result-name {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 3px;
}
.tn-search-result-binomial {
  font-size: 14px;
  color: var(--ink-faded);
  margin-bottom: 6px;
}
.tn-search-result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
}
.tn-search-result-status.extant { color: #4a7c4e; }
.tn-search-result-status.discontinued { color: var(--ink-lighter); }

.tn-search-result-excerpt {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-faded);
  line-height: 1.6;
  margin-bottom: 8px;
}
.tn-search-result-excerpt mark {
  background: none;
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}

.tn-search-empty {
  padding: 24px 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-lighter);
  text-align: center;
}

/* ── SITE FOOTER ──────────────────────────────────────────── */
.tn-site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 80px;
  padding: 32px var(--page-padding);
}

.tn-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-light);
  line-height: 1.8;
}

.tn-footer-center {
  text-align: center;
  font-size: 18px;
  color: var(--rule);
  letter-spacing: 0.3em;
}

.tn-footer-pub {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-lighter);
  margin-top: 4px;
}

.tn-footer-social {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.tn-footer-icon-link {
  color: var(--ink-lighter);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.tn-footer-icon-link:hover {
  color: var(--accent);
}

.tn-footer-right {
  text-align: right;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-lighter);
}

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.tn-page,
.tn-idx {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px var(--page-padding) 80px;
  animation: tn-reveal 0.7s ease both;
}

@keyframes tn-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SPONSORED PALETTE ────────────────────────────────────── */
.tn-sponsored {
  --accent:       var(--amber);
  --accent-light: var(--amber-light);
  --accent-pale:  var(--amber-pale);
}

/* ── NOTICE BANNERS ───────────────────────────────────────── */
.tn-sponsor-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--amber-pale);
  border: 1px solid var(--amber-light);
  border-bottom: none;
  padding: 8px 18px;
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--amber);
}

.tn-sponsor-banner-right {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-lighter);
  font-style: italic;
  letter-spacing: 0.05em;
}

.tn-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid;
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.6;
}

.tn-notice--cautionary {
  background: #fdf5ee;
  border-color: var(--accent-light);
  color: var(--ink-faded);
}

.tn-notice--observation {
  background: #eef5ee;
  border-color: var(--moss);
  color: var(--ink-faded);
}

/* Notices by lamplight: the same warnings, no longer floodlit */
[data-theme="dark"] .tn-notice--cautionary {
  background: #3a2b1d;
  border-color: #8a5a34;
}

[data-theme="dark"] .tn-notice--observation {
  background: #2d3423;
  border-color: #5a7046;
}

.tn-notice--type {
  background: var(--cream-dark);
  border-color: var(--rule);
  color: var(--ink-light);
  align-items: center;
}

.tn-notice-cta {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 12px;
  padding: 7px 16px;
  color: #ffffff !important;
}

.tn-notice-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.tn-notice strong {
  font-family: var(--font-sc);
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: normal;
}

/* ── MASTHEAD ─────────────────────────────────────────────── */
.tn-masthead {
  text-align: center;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: 24px 20px 18px;
  margin-bottom: 0;
  position: relative;
}

.tn-sponsored .tn-masthead {
  border-top-color: var(--accent);
  border-color: var(--accent-light);
  background: var(--accent-pale);
}

.tn-masthead::before {
  content: '❧';
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  color: var(--rule);
  display: block;
  margin-bottom: 6px;
}

.tn-pub-title {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
  margin-bottom: 4px;
}

.tn-sponsored .tn-pub-title { color: var(--accent); }

.tn-specimen-name {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1;
  color: var(--ink);
  margin: 6px 0 6px;
}

.tn-binomial {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-light);
  margin-bottom: 4px;
}

.tn-masthead-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
  letter-spacing: 0.06em;
}

.tn-sponsored .tn-masthead-sub { color: var(--accent); }

/* ── TAXONOMY TRAIL ───────────────────────────────────────── */
.tn-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 1px solid var(--rule);
  border-top: none;
  border-bottom: none;
  background: var(--trail-bg);
  font-family: var(--font-serif);
  font-size: 13px;
  gap: 0;
}

.tn-sponsored .tn-trail {
  border-color: var(--accent-light);
  background: var(--accent-pale);
}

.tn-taxon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tn-rank {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  line-height: 1;
  margin-bottom: 2px;
}

.tn-taxon-name {
  font-style: italic;
  color: var(--ink-faded);
  white-space: nowrap;
  padding: 2px 5px;
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}

a.tn-taxon-name:hover {
  background: var(--cream-darker);
  color: var(--accent);
}

/* Solo taxonomy — no catalogue page exists, plain text, no hover affordance */
.tn-taxon-name--solo {
  cursor: default;
  color: var(--ink-lighter);
}

.tn-taxon-name.tn-current {
  font-weight: 600;
  color: var(--accent);
  font-size: 14px;
  cursor: default;
}

.tn-arrow {
  color: var(--rule);
  padding: 0 3px;
  font-size: 12px;
  align-self: flex-end;
  margin-bottom: 5px;
  line-height: 1.6;
}

.tn-trail-cap {
  border: 1px solid var(--rule);
  border-top: none;
  height: 8px;
  background: linear-gradient(to bottom, var(--trail-bg), var(--cream));
  margin-bottom: 32px;
}

.tn-sponsored .tn-trail-cap {
  border-color: var(--accent-light);
  background: linear-gradient(to bottom, var(--accent-pale), var(--cream));
}

/* ── MAIN GRID ────────────────────────────────────────────── */
.tn-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

@media (max-width: 620px) {
  .tn-grid { grid-template-columns: 1fr; }
  .tn-specimen-name { font-size: 34px; }
  .tn-trail { font-size: 11px; }
}

/* ── ILLUSTRATION FRAME ───────────────────────────────────── */
.tn-frame {
  border: 1px solid var(--ink-light);
  padding: 16px;
  background: var(--cream-dark);
  position: relative;
}

.tn-frame::after {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.tn-illustration {
  width: 100%;
  display: block;
}

.tn-illustration-placeholder {
  width: 100%;
  min-height: 280px;
  background: var(--cream-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
  font-style: italic;
}

.tn-caption {
  margin-top: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-light);
  line-height: 1.6;
}

/* ── MORPH SWATCHES ───────────────────────────────────────── */
.tn-morphs { margin-top: 18px; }

.tn-morphs-title {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-light);
  margin-bottom: 8px;
}

.tn-morphs-title-note {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-lighter, var(--ink-light));
  opacity: 0.7;
}

.tn-morphs-illustration {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
}

.tn-swatches { display: flex; gap: 10px; flex-wrap: wrap; }

.tn-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tn-swatch-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.tn-swatch-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-light);
  text-align: center;
  max-width: 42px;
  line-height: 1.2;
}

/* ── TAXONOMY BLOCK ───────────────────────────────────────── */
.tn-taxblock {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
  position: relative;
  z-index: 1;
}

.tn-taxblock-title {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 10px;
}

.tn-taxrow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dotted var(--cream-darker);
  font-size: 16px;
}

.tn-taxrow:last-child { border-bottom: none; }

.tn-taxrow-rank {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink-lighter);
  min-width: 90px;
}

.tn-taxrow-value {
  font-style: italic;
  color: var(--ink-faded);
  text-align: right;
}

.tn-taxrow-value.tn-highlight {
  color: var(--accent);
  font-weight: 600;
  font-size: 17px;
}

/* Field data block — notecard style */
.tn-fielddata {
  margin-top: 24px;
  padding: 14px 18px 22px;
  background-color: #f0e6c4;
  border: 1px solid #c8aa6a;
  transform-origin: top left;
  box-shadow:
    3px 6px 18px rgba(0,0,0,0.22),
    1px 2px 4px rgba(0,0,0,0.14),
    inset 0 0 80px rgba(140,110,50,0.07);
  position: relative;
  /* Solid cover blanks the title area, then green ruled lines below the red line */
  background-image:
    linear-gradient(
      #f0e6c4 0px,
      #f0e6c4 48px,
      transparent 48px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 20px,
      rgba(55, 110, 88, 0.45) 20px,
      rgba(55, 110, 88, 0.45) 21.5px,
      transparent 21.5px,
      transparent 28px
    );
  background-position: 0 0, 0 48px;
  transition: box-shadow 0.2s ease;
}

/* Red title separator line */
.tn-fielddata::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: rgba(162, 42, 38, 0.58);
  pointer-events: none;
}

.tn-fielddata:hover {
  box-shadow:
    4px 8px 22px rgba(0,0,0,0.26),
    1px 2px 5px rgba(0,0,0,0.16),
    inset 0 0 80px rgba(140,110,50,0.07);
}

/* Hide disclosure triangle on field data — it's a notecard, not a drawer */
.tn-fielddata summary.tn-collapsible-title::after {
  display: none;
}

/* Title in Special Elite — sits above the red line */
.tn-fielddata summary.tn-collapsible-title {
  font-family: 'Special Elite', var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #5c4320;
  line-height: 26px;
  margin-bottom: 8px;
  text-transform: uppercase;
  cursor: default;
}

/* Taxrows track the ruled lines, which repeat every 28px. Rows used to be
   pinned to a hard 28px with overflow hidden, clipping any value longer
   than one line (e.g. Habitat, Named for). Instead: no padding, and
   line-height set to exactly 28px, so a wrapped value's 2nd/3rd line each
   consume another full 28px — the row grows in whole multiples of the
   ruled-line pitch instead of a fixed single-line box, so the lines stay
   aligned under it no matter how many lines it wraps to. */
.tn-fielddata .tn-taxrow {
  border-bottom: none;
  padding: 0;
  min-height: 28px;
  line-height: 28px;
  align-items: flex-start;
  font-family: 'Special Elite', var(--font-serif);
  font-size: 13px;
}

.tn-fielddata .tn-taxrow-rank {
  font-family: 'Special Elite', var(--font-serif);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #7a6030;
}

.tn-fielddata .tn-taxrow-value {
  font-family: 'Special Elite', var(--font-serif);
  font-size: 12.5px;
  font-style: normal;
  color: #2e2210;
}

.tn-sponsored .tn-fielddata {
  background-color: var(--accent-pale);
  border-color: var(--accent-light);
}

/* By lamplight the notecard dims like the plates do — the same manila,
   turned down to about three-quarters, title area included */
[data-theme="dark"] .tn-fielddata {
  background-color: #b3a887;
  border-color: #96804f;
  background-image:
    linear-gradient(
      #b3a887 0px,
      #b3a887 48px,
      transparent 48px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 20px,
      rgba(55, 110, 88, 0.45) 20px,
      rgba(55, 110, 88, 0.45) 21.5px,
      transparent 21.5px,
      transparent 28px
    );
  box-shadow:
    3px 6px 18px rgba(0, 0, 0, 0.35),
    1px 2px 4px rgba(0, 0, 0, 0.25),
    inset 0 0 80px rgba(90, 70, 30, 0.12);
}

/* The card keeps daylight ink even by lamplight — its text sits on
   manila, not on the dark page, so the flipped palette doesn't apply */
[data-theme="dark"] .tn-fielddata summary.tn-collapsible-title {
  color: #5c4320;
}

/* ── COLLAPSIBLE PANELS (Field Data, Accessories) ─────────── */
.tn-collapsible {
  list-style: none;
}

.tn-collapsible summary.tn-collapsible-title {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  margin-bottom: 10px;
}

.tn-collapsible summary.tn-collapsible-title::after {
  content: '▸';
  font-size: 10px;
  font-style: normal;
  color: var(--ink-lighter);
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.tn-collapsible[open] summary.tn-collapsible-title::after {
  transform: rotate(90deg);
}

.tn-collapsible summary.tn-collapsible-title::-webkit-details-marker,
.tn-collapsible summary.tn-collapsible-title::marker {
  display: none;
  content: '';
}

/* ── COLLAPSIBLE PROSE SECTIONS ───────────────────────────── */
.tn-prose-section {
  margin-bottom: 0;
  border-bottom: 1px dotted var(--rule);
}

.tn-prose-section:last-of-type {
  border-bottom: none;
}

.tn-prose-summary {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  user-select: none;
}

.tn-prose-summary::after {
  content: '▸';
  font-size: 10px;
  color: var(--ink-lighter);
  transition: transform 0.2s ease;
}

.tn-prose-section[open] .tn-prose-summary::after {
  transform: rotate(90deg);
}

.tn-prose-summary::-webkit-details-marker,
.tn-prose-summary::marker {
  display: none;
  content: '';
}

.tn-prose-section[open] .tn-prose-summary {
  margin-bottom: 4px;
}

/* ── ASSOCIATED EQUIPMENT ─────────────────────────────────── */
.tn-accessories {
  margin-top: 16px;
  padding: 14px;
  background: var(--cream-dark);
  border: 1px solid var(--rule);
}

.tn-accessories summary {
  margin-bottom: 10px;
}

.tn-accessory-row {
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
  font-size: 15px;
}

.tn-accessory-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tn-accessory-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-style: italic;
  color: var(--ink);
}

.tn-accessory-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}

.tn-accessory-link:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.tn-accessory-role {
  font-family: var(--font-sc);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--ink-lighter);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  flex-shrink: 0;
}

.tn-accessory-notes {
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink-faded);
  font-style: italic;
  line-height: 1.4;
}

/* ── PROSE CONTENT ────────────────────────────────────────── */
.tn-prose {
  margin-top: 8px;
}

.tn-prose h2 {
  font-family: var(--font-sc);
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: normal;
  margin: 32px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* Section numerals styled from markdown ## headings */
.tn-prose h2::before {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--rule);
  line-height: 1;
  content: attr(data-numeral);
}

.tn-prose p {
  font-size: 17px;
  color: var(--ink-faded);
  margin-bottom: 14px;
  line-height: 1.75;
}

.tn-prose p:last-child { margin-bottom: 0; }

.tn-prose em { color: var(--ink); }

.tn-prose strong {
  font-weight: 600;
  color: var(--ink);
}

.tn-prose h3 {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--ink-light);
  font-weight: normal;
  margin: 20px 0 10px;
}

/* Horizontal rules between sections */
.tn-prose hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 28px 0;
}

/* Tables within prose */
.tn-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 16px 0;
}

.tn-prose th {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--ink-lighter);
  text-align: left;
  padding: 4px 8px 6px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: normal;
}

.tn-prose td {
  padding: 6px 8px 6px 0;
  border-bottom: 1px dotted var(--cream-darker);
  color: var(--ink-faded);
  font-style: italic;
  vertical-align: top;
  font-size: 15px;
}

.tn-prose tr:last-child td { border-bottom: none; }

.tn-prose td:first-child {
  font-style: normal;
  font-family: var(--font-sc);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--ink-light);
  white-space: nowrap;
}

/* Blockquotes — used for notices in markdown */
.tn-prose blockquote {
  border-left: 2px solid var(--accent-light);
  padding: 10px 16px;
  margin: 16px 0;
  background: var(--accent-pale);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
}

/* ── OBSERVATION PULLOUT ──────────────────────────────────── */
.tn-observation {
  border-left: 2px solid var(--accent-light);
  padding: 10px 16px;
  margin: 16px 0;
  background: var(--accent-pale);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
  position: relative;
}

.tn-observation::before {
  content: 'Field Observation';
  display: block;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-style: normal;
  margin-bottom: 5px;
}

/* ── VESTIGIAL BADGE ──────────────────────────────────────── */
.tn-vestigial-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cream-darker);
  border: 1px solid var(--rule);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-light);
  margin-top: 10px;
  flex-wrap: wrap;
}

/* ── ACQUISITION BLOCK ────────────────────────────────────── */
.tn-acquisition {
  margin-top: 20px;
  padding: 20px 22px;
  background: var(--accent-pale);
  border: 1px solid var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.tn-acquisition-text {
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
  max-width: 420px;
  line-height: 1.5;
}

.tn-acquisition-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--accent);
  font-family: var(--font-sc);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.tn-acquisition-cta:hover {
  background: var(--accent);
  color: var(--cream);
}

.tn-acquisition-cta::before { content: '→'; font-size: 14px; }

/* ── PAGE FOOTER ──────────────────────────────────────────── */
.tn-footer {
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  margin-top: 36px;
}

.tn-sponsored .tn-footer { border-top-color: var(--accent); }

.tn-footer-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.tn-footer-ornament {
  font-size: 18px;
  color: var(--rule);
  letter-spacing: 0.3em;
}

.tn-stamp {
  border: 1.5px solid var(--ink-light);
  color: var(--ink-light);
  padding: 6px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  display: inline-block;
}

/* Stamped within the last week: the ink is still wet — pressed harder,
   sitting more crooked, not yet faded into the page */
.tn-stamp--fresh {
  transform: rotate(-4.5deg) scale(1.05);
  color: var(--ink);
  border-color: var(--ink);
  text-shadow: 0 0 1px rgba(70, 58, 44, 0.4);
  box-shadow: 0 0 5px rgba(70, 58, 44, 0.12);
}

.tn-sponsored .tn-stamp {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── SPECIMEN CTA (patron page "Become a Patron" etc.) ───── */
.tn-specimen-cta {
  margin-top: 16px;
  text-align: center;
}

.tn-specimen-cta-link {
  display: inline-block;
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #ffffff;
  background: var(--accent);
  padding: 10px 22px;
  text-decoration: none;
  border: 1.5px solid var(--accent);
  transition: background 0.15s, color 0.15s;
}

.tn-specimen-cta-link:hover {
  background: transparent;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   INDEX PAGE STYLES
   ═══════════════════════════════════════════════════════════ */

/* ── INDEX MASTHEAD ───────────────────────────────────────── */
.tn-idx-masthead {
  text-align: center;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: 22px 20px 16px;
  margin-bottom: 0;
}

.tn-idx-masthead::before {
  content: '❧';
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  color: var(--rule);
  display: block;
  margin-bottom: 6px;
}

.tn-idx-pub {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
  margin-bottom: 4px;
}

.tn-idx-rank-label {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 4px;
}

.tn-idx-taxon-name {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  font-style: italic;
  color: var(--ink);
  margin: 4px 0 6px;
}

.tn-idx-meaning {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-light);
  margin-bottom: 4px;
}

.tn-idx-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-light);
  line-height: 1.55;
  max-width: 540px;
  margin: 10px auto 0;
}

.tn-idx-count {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-lighter);
  letter-spacing: 0.06em;
  margin-top: 14px;
}

/* ── TAXON DESCRIPTION ────────────────────────────────────── */
.tn-idx-description {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2rem var(--page-padding);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-light);
}

.tn-idx-description p {
  margin: 0 0 1em;
}

.tn-idx-description p:last-child {
  margin-bottom: 0;
}

/* ── LINEAGE RECORD ───────────────────────────────────────── */
.tn-lineage {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tn-lineage-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--rule);
}

.tn-lin-th {
  background: #f5f2eb;
  border: 1px solid var(--rule);
  padding: 8px 12px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  white-space: nowrap;
}

.tn-lin-th--year    { width: 56px; }
.tn-lin-th--specimen { width: 160px; }
.tn-lin-th--additions { width: 22%; }
.tn-lin-th--removals  { width: 18%; }
.tn-lin-th--notes     { /* fills remainder */ }

.tn-lin-row {
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.tn-lin-row:last-child {
  border-bottom: none;
}

.tn-lin-row--founding {
  background: #fdf9f0;
}

.tn-lin-row--founding .tn-lin-year {
  font-weight: 700;
}

.tn-lin-row:hover {
  background: #faf7ef;
}

.tn-lin-row--founding:hover {
  background: #f9f4e4;
}

/* Lineage tables by lamplight */
[data-theme="dark"] .tn-lin-th { background: var(--cream-dark); }
[data-theme="dark"] .tn-lin-row--founding { background: var(--amber-pale); }
[data-theme="dark"] .tn-lin-row:hover { background: var(--cream-dark); }
[data-theme="dark"] .tn-lin-row--founding:hover { background: var(--cream-darker); }

.tn-lin-year {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-light);
  white-space: nowrap;
}

.tn-lin-specimen {
  border: 1px solid var(--rule);
  padding: 10px 12px;
}

.tn-lin-link {
  display: block;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 3px;
}

.tn-lin-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.tn-lin-binomial {
  display: block;
  font-size: 11px;
  color: var(--ink-light);
}

.tn-lin-additions,
.tn-lin-removals,
.tn-lin-notes {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}

.tn-lin-notes {
  color: var(--ink-light);
  font-style: italic;
}

.tn-lin-list {
  margin: 0;
  padding: 0 0 0 14px;
  list-style: disc;
}

.tn-lin-list li {
  margin-bottom: 3px;
  padding-left: 2px;
}

.tn-lin-list li:last-child {
  margin-bottom: 0;
}

.tn-lin-list--removals li::marker {
  color: #9a6060;
}

.tn-lin-list--removals li {
  color: #7a4a4a;
}

/* ── INDEX TRAIL ──────────────────────────────────────────── */
.tn-idx-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 1px solid var(--rule);
  border-top: none;
  border-bottom: none;
  background: var(--trail-bg);
  font-family: var(--font-serif);
  font-size: 13px;
  gap: 0;
}

.tn-idx-taxon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tn-idx-rank {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  line-height: 1;
  margin-bottom: 2px;
}

.tn-idx-crumb {
  font-style: italic;
  color: var(--ink-faded);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

a.tn-idx-crumb:hover {
  background: var(--cream-darker);
  color: var(--accent);
}

.tn-idx-crumb.tn-idx-current {
  font-weight: 600;
  color: var(--accent);
  font-size: 15px;
  cursor: default;
}

.tn-idx-arrow {
  color: var(--rule);
  padding: 0 3px;
  font-size: 12px;
  align-self: flex-end;
  margin-bottom: 5px;
  line-height: 1.6;
}

.tn-idx-trail-cap {
  border: 1px solid var(--rule);
  border-top: none;
  height: 8px;
  background: linear-gradient(to bottom, var(--trail-bg), var(--cream));
  margin-bottom: 36px;
}

/* ── STATS BAR ────────────────────────────────────────────── */
.tn-idx-stats {
  display: flex;
  border: 1px solid var(--rule);
  margin-bottom: 36px;
}

.tn-idx-stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid var(--rule);
}

.tn-idx-stat:last-child { border-right: none; }

.tn-idx-stat-value {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
  display: block;
}

.tn-idx-stat-label {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-lighter);
  display: block;
  margin-top: 3px;
}

/* ── CHILD TAXA PILLS ─────────────────────────────────────── */
.tn-child-taxa {
  margin-bottom: 36px;
  padding: 18px 20px;
  background: var(--cream-dark);
  border: 1px solid var(--rule);
}

.tn-child-taxa-title {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.2em;
  color: var(--ink-lighter);
  margin-bottom: 12px;
}

.tn-child-taxa-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tn-child-pill {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  background: var(--cream);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  min-width: 120px;
}

.tn-child-pill:hover {
  border-color: var(--accent);
  background: var(--accent-pale);
}

.tn-child-pill-rank {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-lighter);
  margin-bottom: 3px;
}

.tn-child-pill-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faded);
}

.tn-child-pill:hover .tn-child-pill-name { color: var(--accent); }

.tn-child-pill-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  margin-top: 3px;
}

/* ── LIST HEADER & FILTERS ────────────────────────────────── */
.tn-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 8px;
}

.tn-list-title {
  font-family: var(--font-sc);
  font-size: 16px;
  letter-spacing: 0.15em;
  color: var(--ink);
}

.tn-list-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
}

.tn-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center;
}

.tn-filter {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.15em;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  color: var(--ink-lighter);
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
}

.tn-filter:hover,
.tn-filter.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-pale);
}

/* ── SPECIMEN CARDS ───────────────────────────────────────── */
.tn-card {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--rule);
  border-bottom: none;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  align-items: start;
  background: var(--cream-dark);
}

.tn-card:hover {
  border-color: var(--accent);
  background: var(--accent-pale);
}

.tn-card:hover .tn-card-name { color: var(--accent); }
.tn-card:last-of-type { border-bottom: 1px solid var(--rule); }

@media (max-width: 520px) {
  .tn-card { grid-template-columns: 80px 1fr; gap: 14px; }
}

.tn-card-thumb {
  border: 1px solid var(--rule);
  padding: 8px;
  background: var(--cream);
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tn-card-thumb::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid var(--cream-darker);
  pointer-events: none;
}

.tn-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tn-thumb-placeholder {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  font-style: italic;
  text-align: center;
}

.tn-card-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}

.tn-card-genus-tag {
  font-family: var(--font-sc);
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--ink-lighter);
  border: 1px solid var(--rule);
  padding: 1px 6px;
}

.tn-card-status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
}

.tn-card-status.extant       { color: var(--moss); }
.tn-card-status.discontinued { color: var(--ink-lighter); }
.tn-card-status.observation  { color: var(--moss); }
.tn-card-status.cautionary   { color: var(--accent); }
.tn-card-status.type         { color: var(--amber); }

.tn-card-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 2px;
  transition: color 0.15s;
}

/* Titles run to one line or three, which used to leave the binomial floating
   at whatever height the name happened to end. Collecting the slack above the
   binomial instead pins it, and the dotted rule beneath it, to the foot of the
   card, so a row of cards reads along two straight lines. */
.tn-card-binomial {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-light);
  margin-top: auto;
  margin-bottom: 8px;
  line-height: 1.18;
}

.tn-card-desc {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 10px;
}

.tn-card-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dotted var(--rule);
}

.tn-card-meta-item {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faded);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tn-card-meta-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ink-lighter);
}

.tn-card-accession {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  letter-spacing: 0.06em;
  margin-top: 8px;
}

/* In grid cards, pin the accession line to the card bottom so rows align
   even when the title or binomial wraps to an extra line */
.tn-specimen-card .tn-card-accession {
  margin-top: auto;
  border-top: 1px dotted var(--rule);
  padding-top: 8px;
}

/* Divider between extant and discontinued in lists */
.tn-idx-divider {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-lighter);
  padding: 12px 8px 8px;
  border-bottom: 1px dotted var(--rule);
  background: none;
}

/* ── CATALOGUE GROUP (master catalogue page) ──────────────── */
.tn-catalogue-group {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

.tn-catalogue-group:last-child { border-bottom: none; }

.tn-catalogue-group-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tn-catalogue-rank-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-lighter);
}

.tn-catalogue-taxon-link {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
}

.tn-catalogue-taxon-link:hover { color: var(--accent); }

.tn-catalogue-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
}

/* ── TAXONOMY ACCORDION (taxonomy landing page) ───────────── */
.tn-tax-accordion { margin-top: 8px; }

.tn-tax-acc {
  border-top: 1px solid var(--rule);
}

.tn-tax-acc:last-child { border-bottom: 1px solid var(--rule); }

.tn-tax-acc-summary {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 4px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  color: inherit;
}

.tn-tax-acc-summary:hover .tn-tax-acc-name { color: var(--accent); }

.tn-tax-acc-rank {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-lighter);
  min-width: 60px;
}

.tn-tax-acc-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  transition: color 0.15s;
}

.tn-tax-acc-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
  margin-left: auto;
}

.tn-tax-acc-chev {
  color: var(--ink-lighter);
  font-size: 13px;
  transition: transform 0.15s;
}

.tn-tax-acc.tn-is-open .tn-tax-acc-chev { transform: rotate(180deg); }

/* Panel height is measured and set in JS (max-height, in px) rather than
   toggled instantly, so the row unrolls open instead of snapping. */
.tn-tax-acc-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.tn-tax-acc-panel {
  padding: 4px 4px 24px 4px;
}

/* Tree: nested Class → Genus → Specimen, connected by animated guide
   lines. Each <li> draws its own vertical trunk line (::before), sized to
   the <li>'s full height so it reaches every nested child — that part is
   correct even for branches with lots of descendants. The horizontal tick
   and dot, though, must NOT be centered on the whole <li> (which would
   include all its nested children and drift down the page); they belong
   to just that node's own label. So each node's dot + label sit inside a
   dedicated .tn-tax-head with a fixed height, and the tick/dot are
   positioned relative to that — always landing on this node's own row,
   regardless of how much is nested below it. Animations only run while
   .tn-anim is present — the accordion script adds it (after a reflow)
   each time a phylum opens, so the trace-in replays on every open. */
.tn-tax-tree, .tn-tax-tree ul { list-style: none; margin: 0; padding-left: 0; }
.tn-tax-tree { padding-left: 6px; }
.tn-tax-tree ul { padding-left: 8px; margin-top: 4px; }

.tn-tax-tree li {
  position: relative;
  padding-left: 22px;
  margin: 5px 0;
}

.tn-tax-tree li::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: 100%;
  background: var(--rule);
  transform-origin: top;
  transform: scaleY(0);
}

/* Stub for the last sibling: stop the trunk exactly at this node's own
   head height (fixed, below), not partway through its nested children. */
.tn-tax-tree li:last-child::before { height: 12px; }

.tn-tax-head {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.tn-tax-head::after {
  content: "";
  position: absolute;
  top: 50%; left: -22px;
  width: 14px;
  height: 1px;
  margin-top: -0.5px;
  background: var(--rule);
  transform-origin: left;
  transform: scaleX(0);
}

.tn-tax-dot {
  position: absolute;
  top: 50%; left: -11px;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  z-index: 1;
}

.tn-node {
  display: inline-block;
  opacity: 0;
  transform: translateX(-6px);
}

.tn-tax-tree.tn-anim li::before {
  animation: tnTaxGrowY 0.45s ease-out forwards;
  animation-delay: var(--d, 0ms);
}

.tn-tax-tree.tn-anim .tn-tax-head::after {
  animation: tnTaxGrowX 0.25s ease-out forwards;
  animation-delay: calc(var(--d, 0ms) + 320ms);
}

.tn-tax-tree.tn-anim .tn-tax-dot {
  animation: tnTaxPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(var(--d, 0ms) + 380ms);
}

.tn-tax-tree.tn-anim .tn-node {
  animation: tnTaxFadeIn 0.3s ease-out forwards;
  animation-delay: calc(var(--d, 0ms) + 440ms);
}

.tn-tax-cls-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-lighter);
}

.tn-tax-gen-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-light);
}

.tn-tax-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 8px 2px 0;
  text-decoration: none;
  border-radius: 2px;
}

.tn-tax-row:hover { background: var(--accent-pale); }
.tn-tax-row:hover .tn-tax-row-name { color: var(--accent); }

.tn-tax-row-name {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
  transition: color 0.15s;
}

.tn-tax-row-binomial {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink-light);
}

@keyframes tnTaxGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tnTaxGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tnTaxPop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes tnTaxFadeIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .tn-tax-acc-collapse { transition: none !important; }
  .tn-tax-tree li::before,
  .tn-tax-head::after,
  .tn-tax-dot,
  .tn-node {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 520px) {
  .tn-tax-acc-name { font-size: 22px; }

  /* Specimen rows stack the common name above the binomial rather than
     sitting side by side — deliberate on mobile, not just a fit fix.
     Because of that, the connector shouldn't split the difference
     between the two lines: it should point at the common name (the
     first line) same as it would for a single-line label, with the
     binomial simply hanging underneath. So .tn-tax-head--leaf stays
     tall enough to reserve room for both lines (avoiding the overlap
     the wrapping version had), but aligns its content to the top and
     pins the connector to that top line's height, not the box's center. */
  .tn-tax-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .tn-tax-head--leaf {
    height: 40px;
    align-items: flex-start;
  }
  .tn-tax-head--leaf::after { top: 12px; margin-top: -0.5px; }
  .tn-tax-head--leaf .tn-tax-dot { top: 12px; margin-top: -3px; }
  .tn-tax-tree li:last-child:has(> .tn-tax-head--leaf)::before { height: 12px; }

  /* Body line-height (1.7) gives each stacked line generous leading on
     its own, which — combined with the row's 2px gap — made title and
     binomial read as too far apart. .tn-tax-row-name/-binomial above are
     tightened to line-height: 1.2 to close that up; here, push the other
     direction and add clearer breathing room after the whole specimen
     block before the next node starts. */
  .tn-tax-tree li:has(> .tn-tax-head--leaf) { margin-bottom: 14px; }
}

.tn-cat-filter-notice {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--accent-light);
  border-radius: 2px;
  padding: 6px 12px;
  margin: 0 0 20px;
  letter-spacing: 0.05em;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 680px) {
  .tn-idx-taxon-name { font-size: 38px; }
  .tn-idx-stats { flex-wrap: wrap; }
  .tn-idx-stat { min-width: 50%; border-right: none; border-bottom: 1px solid var(--rule); }
  .tn-idx-stat:last-child { border-bottom: none; }
  .tn-support-strip { position: relative; }
  .tn-site-header { position: sticky; top: 0; }
  .tn-site-nav { padding: 16px var(--page-padding); }
  .tn-nav-logo { margin-right: auto; }
  .tn-nav-controls { margin-left: 0; gap: 14px; }
  .tn-hamburger { display: flex; }

  .tn-nav-links {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid var(--rule);
  }
  .tn-nav-links.is-open { display: flex; }
  .tn-nav-links a {
    width: 100%;
    text-align: center;
    padding: 16px 0;
    font-size: 17px;
    letter-spacing: 0.12em;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-light);
  }
  .tn-nav-links a:last-child { border-bottom: none; }
  .tn-nav-links a:hover { color: var(--accent); }

  .tn-nav-logo { font-size: 17px; }

  .tn-prose table { font-size: 14px; }
  .tn-prose td:first-child {
    white-space: normal;
    min-width: 90px;
    max-width: 35%;
  }
}

@media (max-width: 480px) {
  :root { --page-padding: 16px; }
  .tn-trail { font-size: 12px; }
  .tn-specimen-name { font-size: 30px; }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE STYLES
   ═══════════════════════════════════════════════════════════ */

/* ── HOME WRAPPER ─────────────────────────────────────────── */
.tn-home {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

/* ── HOME MASTHEAD ────────────────────────────────────────── */
.tn-home-masthead {
  border-bottom: 2px solid var(--ink);
  padding: 32px 0 24px;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
}


.tn-home-pub-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
  margin-bottom: 8px;
}

.tn-home-title {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--ink);
  font-weight: normal;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.tn-home-subtitle {
  font-family: var(--font-sc);
  font-size: 16px;
  letter-spacing: 0.3em;
  color: var(--ink-light);
}

.tn-home-ornament {
  margin-top: 16px;
  font-size: 16px;
  color: var(--rule);
  letter-spacing: 0.3em;
}

/* ── HERO SPLIT ───────────────────────────────────────────── */
.tn-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 52px;
  align-items: start;
}

@media (max-width: 700px) {
  .tn-home-hero { grid-template-columns: 1fr; gap: 32px; }
  .tn-home-title { font-size: 52px; }
}

/* ── INTRODUCTION ─────────────────────────────────────────── */
.tn-home-intro-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tn-home-intro-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.tn-home-intro-lead {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
  font-style: italic;
}

.tn-home-intro-body {
  font-size: 17px;
  color: var(--ink-faded);
  line-height: 1.75;
  margin-bottom: 14px;
}

.tn-home-intro-rule {
  border-top: 1px solid var(--rule);
  margin: 24px 0;
}

/* ── HOMEPAGE FOOTNOTE (classic bottom-of-page style, not the popup system) ── */
.tn-home-fn-marker {
  font-size: 0.7em;
  color: var(--accent);
}

.tn-home-fn {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-lighter);
  line-height: 1.6;
  margin: -6px 0 14px;
}

.tn-home-fn sup {
  font-size: 0.85em;
  margin-right: 2px;
}

/* ── STATS ────────────────────────────────────────────────── */
.tn-home-stats {
  display: flex;
  gap: 0;
}

.tn-home-stat {
  flex: 1;
  text-align: center;
  padding: 12px 4px;
  border-right: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tn-home-stat:first-child { border-left: 1px solid var(--rule); }

.tn-home-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--ink);
  line-height: 1;
}

.tn-home-stat-label {
  display: block;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-lighter);
  margin-bottom: 4px;
}

/* ── PULL QUOTE ───────────────────────────────────────────── */
.tn-home-pullquote {
  border-left: 2px solid var(--accent-light);
  padding: 12px 18px;
  background: var(--accent-pale);
  margin: 0 0 24px;
}

.tn-home-pullquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
  line-height: 1.7;
  margin-bottom: 8px;
}

.tn-home-pullquote cite {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  font-style: normal;
}

.tn-home-pullquote cite a {
  color: var(--accent);
}

/* ── CTA ──────────────────────────────────────────────────── */
.tn-home-cta {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1.5px solid var(--ink);
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.tn-home-cta:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

/* ── SPECIMEN PANELS ──────────────────────────────────────── */
.tn-home-specimens {
  position: sticky;
  top: 24px;
}

.tn-home-specimen-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink-lighter);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tn-home-specimen-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.tn-home-specimen-card {
  display: block;
  border: 1px solid var(--rule);
  background: var(--cream-dark);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 6px;
}

.tn-home-specimen-card:hover {
  border-color: var(--accent);
  background: var(--accent-pale);
}

/* Sponsor / patron card — accent-coloured variant */
.tn-home-specimen-card--sponsor {
  border-color: var(--accent);
  background: var(--accent-pale);
}
.tn-home-specimen-card--sponsor:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-pale) 70%, white);
}
.tn-home-specimen-card--sponsor .tn-home-specimen-frame {
  background: color-mix(in srgb, var(--accent-pale) 60%, var(--paper));
  border-bottom-color: var(--accent);
}
.tn-home-specimen-card--sponsor .tn-home-specimen-family {
  color: var(--accent);
}
.tn-home-specimen-card--sponsor .tn-home-specimen-status {
  color: var(--accent-light);
}
.tn-home-specimen-card--sponsor .tn-home-specimen-placeholder {
  color: var(--accent-light);
}

.tn-home-specimen-frame {
  border-bottom: 1px solid var(--rule);
  background: var(--cream-darker);
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tn-home-specimen-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.tn-home-specimen-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tn-home-specimen-placeholder span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
}

.tn-home-specimen-placeholder em {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rule);
}

.tn-home-specimen-info {
  padding: 12px 14px;
}

.tn-home-specimen-family {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--ink-lighter);
  margin-bottom: 2px;
}

.tn-home-specimen-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 2px;
}

.tn-home-specimen-binomial {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-light);
  margin-bottom: 6px;
}

.tn-home-specimen-status {
  font-family: var(--font-mono);
  font-size: 11px;
}

.tn-home-specimen-status.extant       { color: var(--moss); }
.tn-home-specimen-status.discontinued { color: var(--ink-lighter); }

.tn-home-specimen-divider {
  text-align: center;
  color: var(--rule);
  font-size: 13px;
  letter-spacing: 0.3em;
  margin: 20px 0;
}

/* ── BELOW-HERO: Field Notable + two From the Archive ─────── */
.tn-home-lower {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  margin-bottom: 48px;
}

.tn-home-lower-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tn-home-lower-col {
  display: flex;
  flex-direction: column;
}

.tn-home-lower-col .tn-home-specimen-card {
  flex: 1;
}

@media (max-width: 700px) {
  .tn-home-lower-grid {
    grid-template-columns: 1fr;
  }
}

/* ── TAXONOMY BROWSE ──────────────────────────────────────── */
.tn-home-browse {
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  margin-bottom: 48px;
}

.tn-home-browse-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tn-home-browse-label::before,
.tn-home-browse-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.tn-home-browse-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tn-home-browse-pill {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: var(--cream-dark);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
  min-width: 140px;
}

.tn-home-browse-pill:hover {
  border-color: var(--accent);
  background: var(--accent-pale);
}

.tn-home-browse-rank {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-lighter);
  margin-bottom: 3px;
}

.tn-home-browse-name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-faded);
  margin-bottom: 2px;
}

.tn-home-browse-pill:hover .tn-home-browse-name { color: var(--accent); }

.tn-home-browse-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-lighter);
  margin-top: 2px;
}

/* ── HOME FOOTER ORNAMENT ─────────────────────────────────── */
.tn-home-footer-ornament {
  text-align: center;
  color: var(--rule);
  font-size: 16px;
  letter-spacing: 0.3em;
  padding: 32px 0 0;
  border-top: 1px solid var(--rule);
}

.tn-home-footer-pub {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-lighter);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   CATALOGUE RANK PAGES & SPECIMEN GRID
   ═══════════════════════════════════════════════════════════ */

/* ── ANCESTOR TRAIL ───────────────────────────────────────── */
.tn-cat-ancestors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}

.tn-cat-anc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tn-cat-anc-rank {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-lighter);
  text-transform: uppercase;
  line-height: 1;
}

.tn-cat-anc-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--accent);
  font-style: italic;
  text-decoration: none;
  line-height: 1.2;
  transition: color 0.15s;
}

.tn-cat-anc-name:hover { color: var(--ink); }

.tn-cat-anc-sep {
  font-size: 11px;
  color: var(--rule);
  align-self: flex-end;
  margin-bottom: 3px;
  line-height: 1.5;
}

/* ── CATALOGUE SECTION LABELS ─────────────────────────────── */
.tn-cat-section {
  margin-bottom: 36px;
}

.tn-cat-section-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--ink-lighter);
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

/* ── SPECIMEN CARD GRID ───────────────────────────────────── */
.tn-specimen-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.tn-specimen-card {
  display: flex;
  flex-direction: column;
  background: var(--cream-dark);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.tn-specimen-card:hover {
  background: var(--accent-pale);
  text-decoration: none;
}

.tn-card-frame {
  border-bottom: 1px solid var(--rule);
  background: var(--cream-darker);
  overflow: hidden;
}

.tn-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 14px;
  display: block;
}

.tn-card-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--cream-darker);
  color: var(--ink-lighter);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: italic;
  padding: 16px;
  text-align: center;
}

.tn-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

/* Override the list-style .tn-card-name for grid cards */
.tn-specimen-card .tn-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.1;
  color: var(--ink);
  transition: color 0.15s;
}

.tn-specimen-card:hover .tn-card-name { color: var(--accent); }

.tn-specimen-card .tn-card-binomial {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink-light);
  /* All the slack collects above the binomial, so it and the dotted rule sit
     at the foot of the card no matter how many lines the common name runs to.
     Declared here as well as on the base rule because this selector wins. */
  margin-top: auto;
  margin-bottom: 4px;
  /* A binomial that wraps is one name, not two lines of prose: set tight. */
  line-height: 1.18;
}

.tn-specimen-card .tn-card-desc {
  font-size: 14px;
  color: var(--ink-faded);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 0;
}

.tn-specimen-card .tn-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  /* The slack is claimed by .tn-card-binomial above, which carries this row
     down with it. An auto margin here as well would split the free space
     between the two, leaving the binomial stranded half way up the card. */
  border-top: 1px dotted var(--rule);
  padding-top: 8px;
}

.tn-card-accession-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  letter-spacing: 0.04em;
}

@media (max-width: 520px) {
  .tn-specimen-cards { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════ */

.tn-about {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--page-padding) 80px;
}

/* ── HEADER ─────────────────────────────────────────────── */
.tn-about-header {
  text-align: center;
  margin-bottom: 48px;
}

.tn-about-label {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink-lighter);
  margin-bottom: 12px;
}

.tn-about-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: normal;
  color: var(--ink);
  margin-bottom: 20px;
}

.tn-about-rule {
  width: 80px;
  height: 1px;
  background: var(--rule);
  margin: 0 auto;
}

/* ── BODY LAYOUT ────────────────────────────────────────── */
.tn-about-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: start;
}

@media (max-width: 700px) {
  .tn-about-body { grid-template-columns: 1fr; gap: 40px; }
}

/* ── PROSE ──────────────────────────────────────────────── */
.tn-about-prose {
  font-size: 17px;
  color: var(--ink-faded);
  line-height: 1.8;
}

.tn-about-prose p { margin-bottom: 20px; }
.tn-about-prose strong { color: var(--ink); font-weight: 600; }

.tn-about-drop {
  position: relative;
}

.tn-about-dropcap {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.8;
  float: left;
  margin-right: 6px;
  margin-top: 6px;
  color: var(--ink);
}

.tn-about-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-light);
  border-left: 2px solid var(--rule);
  padding-left: 16px;
  margin-top: 28px;
}

/* ── SIDEBAR CARDS ──────────────────────────────────────── */
.tn-about-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tn-about-card {
  border: 1px solid var(--rule);
  background: var(--cream-dark);
  padding: 24px;
}

.tn-about-card-label {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-lighter);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.tn-about-card-note {
  font-size: 14px;
  color: var(--ink-light);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* ── SOCIAL LINKS ───────────────────────────────────────── */
.tn-about-socials {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tn-social-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.tn-social-link:hover {
  border-color: var(--accent);
  background: var(--cream-darker);
  color: var(--ink);
}

.tn-social-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tn-social-link:hover .tn-social-icon { color: var(--accent); }

.tn-social-icon svg {
  width: 22px;
  height: 22px;
}

.tn-social-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.tn-social-name {
  font-family: var(--font-sc);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--ink-light);
}

.tn-social-handle {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0.03em;
}

/* ── CORRECTIONS BLOCK ──────────────────────────────────── */
.tn-about-corrections-block {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.tn-about-corrections-label {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.tn-about-corrections-note {
  font-size: 13px;
  color: var(--ink-light);
  line-height: 1.6;
  margin: 0 0 12px;
}

.tn-about-corrections-link {
  display: inline-block;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-lighter);
  padding-bottom: 1px;
  transition: color 0.15s, border-color 0.15s;
}

.tn-about-corrections-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── COFFEE BUTTON ──────────────────────────────────────── */
.tn-about-card--coffee .tn-about-card-note {
  margin-bottom: 18px;
}

.tn-coffee-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-sc);
  font-size: 14px;
  letter-spacing: 0.15em;
  border: none;
  transition: background 0.15s, color 0.15s;
}

.tn-coffee-btn:hover {
  background: var(--ink);
  color: var(--cream);
}

.tn-coffee-icon {
  font-size: 16px;
  line-height: 1;
  /* de-emoji it so it reads as text */
  font-family: serif;
}

/* ── PAGE FOOTER ────────────────────────────────────────── */
.tn-about-sponsorship {
  max-width: 640px;
  margin: 56px auto 0;
  scroll-margin-top: 80px;
}
.tn-about-section-rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin-bottom: 32px;
}
.tn-about-section-label {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tn-about-section-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: normal;
  color: var(--ink);
  margin: 0 0 20px;
}
.tn-about-section-body p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-faded);
  margin-bottom: 1em;
}
.tn-about-section-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tn-about-footer {
  text-align: center;
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.tn-about-footer-rule {
  font-size: 14px;
  color: var(--rule);
  letter-spacing: 0.3em;
  margin-bottom: 12px;
}

.tn-about-footer-note {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--ink-lighter);
}

/* ═══════════════════════════════════════════════════════════
   FOOTER META LINK (Corrections)
   ═══════════════════════════════════════════════════════════ */

.tn-footer-meta {
  border-top: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
  margin-top: 12px;
  padding-top: 10px;
  text-align: center;
}

.tn-footer-meta-label {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  opacity: 0.6;
  font-style: italic;
  margin-right: 2px;
}

.tn-footer-meta-link {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  text-decoration: none;
}

.tn-footer-meta-link:hover {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIONS & ADDENDA PAGE
   ═══════════════════════════════════════════════════════════ */

.tn-corrections {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding) 4rem;
}

.tn-corrections-header {
  padding: 3rem 0 0;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
}

.tn-corrections-label {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.tn-corrections-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: normal;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.tn-corrections-intro {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-light);
  line-height: 1.7;
  max-width: 64ch;
  margin: 0;
}

.tn-corrections-rule {
  display: none; /* border-bottom on header does the work */
}

.tn-corrections-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tn-corrections-empty {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ── Individual specimen block ── */
.tn-corrections-entry {
  border-bottom: 1px solid var(--rule);
  padding: 2rem 0;
}

.tn-corrections-entry:last-child {
  border-bottom: none;
}

.tn-corrections-entry-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.tn-corrections-entry-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ink);
  text-decoration: none;
}

.tn-corrections-entry-title:hover {
  color: var(--accent);
}

.tn-corrections-entry-binomial {
  font-size: 0.9rem;
  color: var(--ink-light);
}

.tn-corrections-entry-accession {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-left: auto;
}

/* ── Addendum / Corrigendum rows ── */
.tn-corrections-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1rem;
  padding-left: 0;
}

.tn-corrections-item:last-child {
  margin-bottom: 0;
}

.tn-corrections-item-type {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 0.2em;
  color: var(--text-muted);
}

.tn-corrections-item--addendum .tn-corrections-item-type {
  color: var(--accent);
}

.tn-corrections-item-content {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink);
}

.tn-corrections-item-date {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.tn-corrections-item-body {
  color: var(--ink);
}

.tn-corrections-item-body p {
  margin: 0 0 0.75em;
}

.tn-corrections-item-body p:last-child {
  margin-bottom: 0;
}

.tn-corrections-item-credit {
  margin: 0;
  color: var(--ink-light);
}

/* ── Page footer ── */
.tn-corrections-footer {
  text-align: center;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}

.tn-corrections-footer-ornament {
  font-size: 14px;
  color: var(--rule);
  margin-bottom: 0.75rem;
}

.tn-corrections-footer-note {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-lighter);
}

.tn-corrections-footer-note a {
  color: inherit;
  text-decoration: none;
}

.tn-corrections-footer-note a:hover {
  color: var(--accent);
}

@media (max-width: 500px) {
  .tn-corrections-item {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .tn-corrections-entry-accession {
    margin-left: 0;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════
   FOOTNOTE POPUPS
   Syntax in markdown: ^[This is a footnote]
   ═══════════════════════════════════════════════════════════ */

.tn-fn {
  position: relative;
  display: inline-block;
  vertical-align: super;
  line-height: 1;
}

.tn-fn-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-family: var(--font-sc);
  font-size: 11px;
  line-height: 1;
  color: var(--accent);
  background: var(--accent-pale);
  border: 1px solid var(--accent-light);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
  vertical-align: middle;
}

.tn-fn-marker:hover,
.tn-fn--open .tn-fn-marker {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}

/* Popup — hidden by default */
.tn-fn-popup {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 0;
  width: 280px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--ink-light);
  box-shadow: 2px 3px 12px rgba(28, 20, 9, 0.18);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-faded);
  z-index: 100;
  /* Arrow pointing down */
  --arrow-size: 7px;
}

/* Arrow: down (popup above marker) */
.tn-fn-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow-left, 20px);
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--ink-light);
}
.tn-fn-popup::before {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: var(--arrow-left, 20px);
  border: var(--arrow-size) solid transparent;
  border-top-color: var(--cream);
  z-index: 1;
}

/* Arrow: up (popup below marker, when near top of viewport) */
.tn-fn-popup--below {
  bottom: auto;
  top: 130%;
}
.tn-fn-popup--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--ink-light);
}
.tn-fn-popup--below::before {
  top: auto;
  bottom: calc(100% - 1px);
  border-top-color: transparent;
  border-bottom-color: var(--cream);
}

/* Visible when open */
.tn-fn--open .tn-fn-popup { display: block; }

/* ═══════════════════════════════════════════════════════════
   RANK DEFINITION TOOLTIPS  (.tn-rank[data-def], .tn-rankdef)
   Hover over a rank label to see what it means
   ═══════════════════════════════════════════════════════════ */

.tn-rank[data-def],
.tn-rankdef[data-def] {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--ink-lighter);
}

.tn-rank[data-def]::after,
.tn-rankdef[data-def]::after {
  content: attr(data-def);
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  z-index: 50;
  pointer-events: none;
  /* Small arrow */
  --arr: 5px;
}

.tn-rank[data-def]::before,
.tn-rankdef[data-def]::before {
  content: '';
  display: none;
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: var(--arr, 5px) solid transparent;
  border-top-color: var(--ink);
  z-index: 51;
  pointer-events: none;
}

.tn-rank[data-def]:hover::after,
.tn-rank[data-def]:hover::before,
.tn-rankdef[data-def]:hover::after,
.tn-rankdef[data-def]:hover::before {
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   RELATED SPECIMENS
   ═══════════════════════════════════════════════════════════ */

.tn-related {
  max-width: var(--max-width);
  margin: 3rem auto 0;
  padding: 2.5rem var(--page-padding) 0;
  border-top: 1px solid var(--rule);
}

.tn-related-label {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.tn-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.tn-related-card {
  font-size: 0.9em;
}

.tn-related-card .tn-home-specimen-frame {
  min-height: 140px;
}

/* ═══════════════════════════════════════════════════════════
   ADDENDA
   ═══════════════════════════════════════════════════════════ */

.tn-addenda {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem var(--page-padding) 0;
  border-top: 1px solid var(--rule);
}

.tn-addendum + .tn-addendum {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--rule);
}

.tn-addendum-header {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.tn-addendum-body {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink);
}

.tn-addendum-body p {
  margin: 0 0 1em;
}

.tn-addendum-body p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   ERRATA
   ═══════════════════════════════════════════════════════════ */

.tn-errata {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem var(--page-padding) 0;
}

.tn-erratum {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.4em;
  line-height: 1.6;
}

.tn-erratum:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   GENUS NAVIGATION
   ═══════════════════════════════════════════════════════════ */

.tn-genus-nav {
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding: 1.5rem var(--page-padding) 2rem;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

.tn-genus-nav-label {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  text-align: center;
  margin-bottom: 1rem;
}

.tn-genus-nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tn-genus-nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink-faded);
  padding: 0.65rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 3px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  min-width: 0;
}

.tn-genus-nav-item:hover {
  color: var(--ink);
  border-color: var(--rule);
  background: var(--cream-dark, #f5efe4);
}

.tn-genus-nav-item--prev {
  flex-direction: row;
}

.tn-genus-nav-item--next {
  flex-direction: row-reverse;
  text-align: right;
}

.tn-genus-nav-item--empty {
  flex: 1;
  pointer-events: none;
  border-color: transparent !important;
  background: none !important;
}

.tn-genus-nav-arrow {
  font-size: 1.1rem;
  color: var(--ink-light);
  flex-shrink: 0;
  transition: color 0.15s;
}

.tn-genus-nav-item:hover .tn-genus-nav-arrow {
  color: var(--accent);
}

.tn-genus-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  overflow: hidden;
}

.tn-genus-nav-dir {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-lighter, var(--ink-light));
}

.tn-genus-nav-binomial {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tn-genus-nav-title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink-faded);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tn-genus-nav-item:hover .tn-genus-nav-title {
  color: var(--ink);
}

/* Centre dot-link to genus catalogue */
.tn-genus-nav-centre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0.5rem;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.tn-genus-nav-centre:hover {
  opacity: 0.8;
}

.tn-genus-nav-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}

/* ── FIGURE IMAGES (clickable) ────────────────────────────── */
.tn-fig {
  cursor: zoom-in;
  transition: opacity 0.15s;
}

.tn-fig:hover {
  opacity: 0.85;
}

/* ── PLATES STRIP (additional figures below grid) ─────────── */
.tn-plates {
  margin-top: 16px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.tn-plates-label {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--ink-lighter);
  margin-bottom: 10px;
}

.tn-plates-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.tn-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
  min-width: 0;
}

.tn-plate img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border: 1px solid var(--rule);
  transition: border-color 0.15s;
  cursor: zoom-in;
}

.tn-plate img:hover {
  border-color: var(--ink-light);
}

.tn-plate figcaption {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-lighter);
  letter-spacing: 0.06em;
}

/* ── LIGHTBOX ─────────────────────────────────────────────── */
.tn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(28, 20, 9, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 72px; /* leave room for arrows */
}

.tn-lightbox--open {
  display: flex;
  animation: tn-lb-in 0.18s ease both;
}

/* ── THE MAGIC LANTERN ──
   Plates are projected: a beam vignette warms the centre and darkens
   the surround, and each slide arrives with a flicker of the lamp. */
.tn-lightbox::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(255, 236, 190, 0.05) 0%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.45) 100%);
}

/* No two flickers of an old lamp are quite alike */
.tn-lantern-blink-a { animation: tn-lantern-flicker-a 0.55s ease-out both; }
.tn-lantern-blink-b { animation: tn-lantern-flicker-b 0.7s ease-out both; }
.tn-lantern-blink-c { animation: tn-lantern-flicker-c 0.45s ease-out both; }

@keyframes tn-lantern-flicker-a {
  0%   { opacity: 0; }
  10%  { opacity: 0.85; }
  18%  { opacity: 0.35; }
  28%  { opacity: 1; }
  38%  { opacity: 0.7; }
  52%  { opacity: 1; }
  100% { opacity: 1; }
}

/* The lamp catches slowly, sputters twice */
@keyframes tn-lantern-flicker-b {
  0%   { opacity: 0; }
  14%  { opacity: 0.4; }
  22%  { opacity: 0.15; }
  34%  { opacity: 0.8; }
  42%  { opacity: 0.45; }
  56%  { opacity: 0.95; }
  68%  { opacity: 0.8; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

/* The lamp catches at once, dips once late */
@keyframes tn-lantern-flicker-c {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  55%  { opacity: 1; }
  64%  { opacity: 0.55; }
  76%  { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes tn-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tn-lightbox-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 144px);
  max-height: 92vh;
  position: relative; /* anchors the loupe button/zoom control to the plate */
}

.tn-lightbox-img {
  max-width: 100%;
  max-height: calc(92vh - 72px);
  width: auto;
  height: auto;
  display: block;
  border: 1px solid rgba(184, 168, 136, 0.25);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.55);
  object-fit: contain;
}

.tn-lightbox-meta {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.tn-lightbox-caption {
  font-family: var(--font-mono);
  font-size: 15px;
  color: rgba(245, 240, 232, 0.65);
  max-width: 560px;
  line-height: 1.5;
  font-style: italic;
}

.tn-lightbox-counter {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(184, 168, 136, 0.5);
}

/* Close button */
.tn-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: rgba(245, 240, 232, 0.55);
  font-size: 30px;
  cursor: pointer;
  line-height: 1;
  padding: 6px 10px;
  transition: color 0.15s;
  font-family: var(--font-serif);
}

.tn-lightbox-close:hover {
  color: rgba(245, 240, 232, 1);
}

/* Prev / Next arrows */
.tn-lightbox-prev,
.tn-lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(245, 240, 232, 0.45);
  font-size: 48px;
  cursor: pointer;
  line-height: 1;
  padding: 16px 10px;
  transition: color 0.15s;
  font-family: var(--font-serif);
}

.tn-lightbox-prev { left: 12px; }
.tn-lightbox-next { right: 12px; }

.tn-lightbox-prev:hover,
.tn-lightbox-next:hover {
  color: rgba(245, 240, 232, 0.95);
}

@media (max-width: 600px) {
  .tn-lightbox {
    padding: 56px 6px 12px; /* top clears close button; sides nearly flush */
  }
  .tn-lightbox-frame {
    max-width: 100%;
    gap: 10px;
  }
  .tn-lightbox-img {
    max-width: calc(100vw - 12px);
    max-height: calc(88vh - 80px);
  }
  .tn-lightbox-prev { left: 4px; }
  .tn-lightbox-next { right: 4px; }
  .tn-lightbox-prev,
  .tn-lightbox-next {
    font-size: 36px;
    padding: 12px 8px;
    background: rgba(28, 20, 9, 0.35);
    border-radius: 4px;
  }
  .tn-lightbox-video { max-height: calc(88vh - 80px); max-width: calc(100vw - 12px); }
  .tn-lightbox-caption { font-size: 12px; }
}

/* ── VIDEO PLATES & LIGHTBOX ───────────────────────────────── */

/* Video thumbnail in plates strip */
.tn-plate--video .tn-plate-video-thumb {
  position: relative;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 130px;
  background: #111;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.tn-plate-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.tn-plate-video-bg {
  position: absolute;
  inset: 0;
  background: #1a1a1a;
}

.tn-plate-play-icon {
  position: relative;
  z-index: 1;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
  pointer-events: none;
  transition: transform 0.15s ease, color 0.15s ease;
}

.tn-plate--video .tn-plate-video-thumb:hover .tn-plate-play-icon {
  transform: scale(1.2);
  color: #fff;
}

/* Video in lightbox */
.tn-lightbox-video {
  display: none;
  max-width: 90vw;
  max-height: calc(85vh - 60px);
  width: auto;
  height: auto;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .tn-lightbox-video { max-height: calc(85vh - 60px); max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   THE IVY — tended by clicking the hedera ❧ in the masthead
   ═══════════════════════════════════════════════════════════ */

.tn-ivy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  pointer-events: none;
  color: var(--accent);
  opacity: .85;
  z-index: 1;
}
.tn-ivy-leaf {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1;
}
/* The ivy is tended in the masthead only — when the hamburger menu is
   open the vine would trail across the nav links, so it retreats.
   The lamp chain likewise gets out of the menu's way. */
.tn-site-nav:has(.tn-nav-links.is-open) .tn-ivy,
.tn-site-nav:has(.tn-nav-links.is-open) .tn-lamp-pull { display: none; }
.tn-ivy-glyph { display: inline-block; }
.tn-ivy-leaf--new {
  transform-origin: left center;
  animation: tn-ivy-grow .6s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes tn-ivy-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tn-nav-hedera { display: inline-block; }
.tn-hedera-full { animation: tn-hedera-shake .5s; }
@keyframes tn-hedera-shake {
  25% { transform: rotate(10deg); } 50% { transform: rotate(-8deg); } 75% { transform: rotate(5deg); }
}

/* ═══════════════════════════════════════════════════════════
   VISITORS' BOOK — the ledger at the door
   ═══════════════════════════════════════════════════════════ */

.tn-vb-ledger {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.tn-vb-th {
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  text-align: left;
  padding: 6px 12px 6px 0;
  border-bottom: 1px solid var(--rule);
}

.tn-vb-row td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px dotted var(--rule);
  vertical-align: top;
  font-size: 0.9rem;
}

.tn-vb-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-lighter);
  white-space: nowrap;
}

.tn-vb-name { font-family: var(--font-serif); color: var(--ink); white-space: nowrap; }
.tn-vb-residence { color: var(--ink-light); white-space: nowrap; }
.tn-vb-remarks { color: var(--ink-faded); line-height: 1.6; }

@media (max-width: 620px) {
  .tn-vb-residence { display: none; }
  .tn-vb-th:nth-child(3) { display: none; }
}

/* ── Apparatus of the Archive: observation records ── */
.tn-app-bin { font-size: 0.85em; color: var(--ink-lighter); }

.tn-app-observed {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  border: 1px solid var(--moss);
  border-radius: 2px;
  padding: 2px 7px;
  display: inline-block;
  transform: rotate(-2deg);
}

.tn-app-unobserved { color: var(--ink-lighter); font-size: 0.85em; }

/* Particulars withheld pending verification: blotted in the
   Naturalist's own ink, roughly the width of the hidden words */
.tn-app-blot {
  display: inline-block;
  height: 0.85em;
  max-width: 100%;
  vertical-align: baseline;
  border-radius: 2px;
  background: var(--ink);
  opacity: 0.75;
  transform: rotate(-0.4deg);
  filter: blur(0.4px);
}

.tn-app-row--unconfirmed .tn-vb-residence,
.tn-app-row--unconfirmed .tn-app-bin {
  color: var(--ink-light);
}

.tn-app-tally { font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   ADVERTISEMENTS & NOTICES — the back-matter
   ═══════════════════════════════════════════════════════════ */

.tn-ads-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 1.5rem;
}

@media (max-width: 620px) {
  .tn-ads-grid { grid-template-columns: minmax(0, 1fr); }
}

.tn-ad {
  position: relative;
  border: 1px solid var(--ink-light);
  outline: 1px solid var(--rule);
  outline-offset: 3px;
  padding: 18px 20px 14px;
  background: var(--cream-dark);
  text-align: center;
}

.tn-ad-title {
  font-family: var(--font-sc);
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-bottom: 10px;
}

.tn-ad-body {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-faded);
  margin-bottom: 12px;
}

.tn-ad-foot {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-lighter);
  border-top: 1px dotted var(--rule);
  padding-top: 8px;
}

/* Linked notices are clickable across their whole box */
.tn-ad-link { position: absolute; inset: 0; }
.tn-ad:has(.tn-ad-link):hover { border-color: var(--accent); }

/* The vacant box advertises with less confidence */
.tn-ad--tolet {
  border-style: dashed;
  background: var(--cream);
}

.tn-ad--tolet .tn-ad-title { color: var(--ink-light); }

/* End-of-entry pointer to the back-matter */
.tn-adverts-pointer {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
}

.tn-adverts-pointer a { color: var(--ink-lighter); }
.tn-adverts-pointer a:hover { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   PRONUNCIATION & CITATION
   ═══════════════════════════════════════════════════════════ */

.tn-binomial em.tn-phonetic {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.85em;
  letter-spacing: 0.04em;
}

.tn-cite-card {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  background: var(--cream-dark);
}

.tn-cite-label {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-lighter);
  margin-bottom: 6px;
}

.tn-cite-text {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
  margin-bottom: 10px;
}

.tn-cite-copy {
  font-family: var(--font-sc);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  background: var(--cream);
  border: 1px solid var(--ink-light);
  border-radius: 999px;
  padding: 4px 14px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.tn-cite-copy:hover { color: var(--cream); background: var(--ink); border-color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   THE NATURALIST'S LOUPE — brass lens over the plates
   ═══════════════════════════════════════════════════════════ */

.tn-loupe-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-light);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink-light);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.tn-loupe-btn:hover { opacity: 1; color: var(--ink); }

.tn-loupe-btn.is-active {
  opacity: 1;
  background: var(--accent);
  color: var(--cream);
}

.tn-loupe-btn.is-polishing { animation: tn-loupe-polish 0.9s ease infinite; }
@keyframes tn-loupe-polish { 50% { opacity: 0.35; } }

/* Magnification dropdown — slides out beneath the loupe button */
.tn-loupe-zoom {
  position: absolute;
  top: 38px;
  right: 8px;
  align-items: flex-end;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.tn-loupe-zoom.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tn-loupe-zoom button {
  width: 28px;
  height: 28px;
  font-family: var(--font-sc);
  font-size: 11px;
  color: var(--ink-light);
  background: var(--cream);
  border: 1px solid var(--ink-light);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}

.tn-loupe-zoom button:hover { color: var(--ink); }

.tn-loupe-zoom button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--cream);
  border-color: var(--accent);
}

.tn-loupe {
  position: fixed;
  top: 0;
  left: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: none;
  pointer-events: none;
  z-index: 950;
  background-color: var(--cream);
  background-repeat: no-repeat;
  border: 6px solid #38302a;                       /* the barrel */
  box-shadow:
    0 0 0 2px #96793f,                             /* outer brass collar */
    0 0 0 4px #241d15,                             /* turned dark edge */
    inset 0 0 0 2px #b08d4f,                       /* inner brass ring */
    inset 0 0 0 4px rgba(36, 29, 21, 0.55),        /* ring's own shadow */
    inset 0 0 28px rgba(28, 20, 9, 0.2),           /* glass depth */
    0 12px 26px rgba(28, 20, 9, 0.4);              /* held above the page */
}

/* The lightbox itself sits at z-index 9000 — its own lens needs to
   clear that, or the glass would show up behind the lantern. */
.tn-loupe--lb { z-index: 9500; }

.tn-loupe::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%,
      rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle at 70% 78%,
      rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
}

/* Touch coaching note — speaks from beside the loupe button */
.tn-loupe-hint {
  position: absolute;
  top: 8px;
  right: 44px;                 /* sits to the left of the loupe button */
  z-index: 4;
  max-width: 65%;
  padding: 9px 14px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 3px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
  box-shadow: 0 4px 12px rgba(28, 20, 9, 0.3);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}

/* Small arrow pointing at the loupe button */
.tn-loupe-hint::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 12px;
  border: 6px solid transparent;
  border-right: none;
  border-left: 6px solid var(--ink);
}

.tn-loupe-hint.is-shown {
  opacity: 1;
  transform: translateX(0);
}

/* While the loupe is up, the iOS save-image callout stays away */
.tn-loupe-mode .tn-illustration,
.tn-loupe-mode .tn-morphs-illustration {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════
   THE GULL FILE — search results for the rival naturalist
   ═══════════════════════════════════════════════════════════ */

.tn-search-file-head {
  padding: 14px 18px 12px;
  border-bottom: 1px dashed var(--rule);
  background: var(--cream-dark);
}

.tn-search-file-title {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

.tn-search-file-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-light);
  margin-top: 4px;
  line-height: 1.5;
}

.tn-search-file-quote {
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════
   THE SWITCH — playback-order control on the shuffle entry
   ═══════════════════════════════════════════════════════════ */

.tn-shuffle-switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 1.75rem;
  padding: 9px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;              /* the pill recess on the specimen's edge */
  background: var(--cream-dark);
  color: var(--ink-light);
}

.tn-shuffle-glyph {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
}

.tn-shuffle-glyph:hover { opacity: 0.75; }

/* The active side reads at full strength */
.tn-shuffle-switch:not(.is-shuffle) .tn-shuffle-glyph--repeat,
.tn-shuffle-switch.is-shuffle .tn-shuffle-glyph--shuffle {
  opacity: 1;
  color: var(--ink);
}

.tn-shuffle-track {
  position: relative;
  width: 46px;
  height: 20px;
  border: 1px solid var(--ink-light);
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.tn-shuffle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.18s ease;
}

.tn-shuffle-switch.is-shuffle .tn-shuffle-knob {
  transform: translateX(26px);
}

/* ═══════════════════════════════════════════════════════════
   CORRESPONDENCE — reader corrections form
   ═══════════════════════════════════════════════════════════ */

.tn-correspondence {
  max-width: 560px;
  margin: 0 auto 3rem;
  padding: 1.75rem var(--page-padding) 2rem;
  border: 1px solid var(--rule);
  background: var(--cream-dark, #f5efe4);
}

.tn-correspondence-form { margin-top: 1.25rem; }

.tn-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

.tn-form-row { margin-bottom: 1.1rem; }

.tn-form-label {
  display: block;
  font-family: var(--font-sc);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 0.35rem;
}

.tn-form-optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }

.tn-form-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--ink);
  background: var(--cream, #fbf7ee);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.5rem 0.65rem;
}

.tn-form-input:focus {
  outline: none;
  border-color: var(--ink-light);
}

.tn-form-textarea { resize: vertical; line-height: 1.6; }

.tn-form-submit {
  font-family: var(--font-sc);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream, #fbf7ee);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tn-form-submit:hover {
  background: var(--accent, var(--ink-light));
  border-color: var(--accent, var(--ink-light));
}

.tn-correspondence-thanks {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  margin: 1.25rem 0 0;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   Honour the visitor's OS motion preference. Static decorative
   tilts remain; anything that moves is stilled.
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PRINT — specimen pages as clean field records
   Site chrome and interactive apparatus omitted; collapsed
   sections expanded via beforeprint JS; footnotes inline.
   ═══════════════════════════════════════════════════════════ */

@media print {
  .tn-support-strip,
  .tn-site-header,
  .tn-site-footer,
  .tn-genus-nav,
  .tn-lightbox,
  .tn-search-overlay,
  .tn-specimen-cta,
  .tn-acquisition,
  .tn-ivy,
  .tn-cat-filter-notice { display: none !important; }

  body { background: #fff; }

  .tn-fielddata     { transform: none !important; }
  .tn-illustration  { transform: none !important; cursor: default; }
  .tn-fig           { cursor: default; }

  /* Footnotes print inline, bracketed after their marker */
  .tn-fn-marker { border: none; background: none; }
  .tn-fn-popup {
    display: inline !important;
    position: static !important;
    width: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    font-size: 0.85em;
    font-style: italic;
  }
  .tn-fn-popup::before {
    content: " [" !important;
    display: inline !important;
    position: static !important;
    border: none !important;
  }
  .tn-fn-popup::after {
    content: "] " !important;
    display: inline !important;
    position: static !important;
    border: none !important;
  }

  /* Keep figures with captions; avoid splitting blocks across pages */
  .tn-frame, .tn-plate, .tn-taxblock, .tn-fielddata,
  .tn-addendum, .tn-prose-section { break-inside: avoid; }

  a { text-decoration: none; color: inherit; }
}