/* ============================================================
   Design system — extends the living-collection dendrogram.
   Near-black, glassmorphic, Crimson Pro + Inter + JetBrains Mono.
   ============================================================ */

:root {
  --bg-0: #050607;
  --bg-1: #090a0d;
  --bg-2: #111318;
  --surface-veil:   rgba(14, 16, 20, 0.72);
  --surface-soft:   rgba(14, 16, 20, 0.85);
  --surface-solid:  rgba(14, 16, 20, 0.96);
  --surface-inset:  rgba(20, 22, 28, 0.85);
  --border-hair:    rgba(255, 255, 255, 0.04);
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);

  --text-1: #ededed;       /* primary */
  --text-2: #bdbdbd;       /* secondary */
  --text-3: #8a8a8a;       /* tertiary */
  --text-4: #5d5d5d;       /* muted */
  --text-5: #3a3a3a;       /* disabled / separators */

  --accent:       #b06dd1;
  --accent-glow:  rgba(142, 36, 170, 0.28);
  --accent-wash:  rgba(142, 36, 170, 0.08);
  --highlight:    #f4cf5c;

  --status-alive: #8fb97a;
  --status-lost:  #c07575;
  --status-given: #7a9bbd;

  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Crimson Pro', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step-xs: 0.6875rem;  /* 11 */
  --step-sm: 0.8125rem;  /* 13 */
  --step-md: 0.9375rem;  /* 15 */
  --step-lg: 1.125rem;   /* 18 */
  --step-xl: 1.5rem;     /* 24 */
  --step-2xl: 2rem;      /* 32 */
  --step-3xl: 2.75rem;   /* 44 */

  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;

  --elev-1: 0 4px 16px rgba(0, 0, 0, 0.35);
  --elev-2: 0 8px 32px rgba(0, 0, 0, 0.45);
  --elev-3: 0 16px 64px rgba(0, 0, 0, 0.55);

  --ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-swift:    cubic-bezier(0.22, 1, 0.36, 1);

  --nav-height: 72px;
  --measure: 66ch;
  --page-max: 1120px;
}

/* ----- Reset / base ----- */

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

html, body { margin: 0; padding: 0; }

html {
  background: var(--bg-1);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  color: var(--text-2);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--step-md);
  line-height: 1.6;
  letter-spacing: 0.005em;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(142, 36, 170, 0.05), transparent 55%),
    radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg-1) 50%, var(--bg-0) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* A subtle vignette — mirrors the dendrogram */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  z-index: 0;
}

/* All content above the vignette */
.site-header,
.site-footer,
.site-main { position: relative; z-index: 1; }

/* ----- Typography ----- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-1);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.4em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 300; }
h2 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); margin-top: 2.5em; }
h3 { font-size: 1.2rem; margin-top: 2em; color: var(--text-1); }
h4 {
  margin-top: 1.8em;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--text-1);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 109, 209, 0.35);
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Italics inherit the surrounding font (Inter in body, Crimson Pro in
   display contexts) so a binomial mid-sentence doesn't introduce a
   jarring font switch. `.taxon` keeps the explicit display-serif
   italic for labelled-taxon contexts (tile captions, headings). */
em, i { font-style: italic; color: var(--text-1); }
.taxon { font-style: italic; font-family: var(--font-display); color: var(--text-1); }

strong, b { color: var(--text-1); font-weight: 500; }

small { font-size: var(--step-xs); color: var(--text-4); }

blockquote {
  margin: 1.5em 0;
  padding: 0.25em 1.2em;
  border-left: 1px solid var(--border-strong);
  color: var(--text-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: 3em 0;
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.86em;
}
code {
  padding: 0.1em 0.38em;
  background: var(--surface-inset);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-1);
  color: var(--text-1);
}
pre {
  padding: 1em 1.1em;
  background: var(--surface-solid);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  overflow-x: auto;
  line-height: 1.55;
  box-shadow: var(--elev-1);
}
pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

ul, ol {
  padding-left: 1.3em;
  margin: 0 0 1.2em;
}
li { margin-bottom: 0.3em; }
li::marker { color: var(--text-4); }

/* Tables: reused by species lists, wishlists, schema docs */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-sm);
  margin: 1.5em 0;
  background: var(--surface-veil);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
th, td {
  padding: 0.7em 1em;
  text-align: left;
  vertical-align: top;
}
thead th {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.015);
  border-bottom: 1px solid var(--border-strong);
}
tbody tr { border-top: 1px solid var(--border-hair); }
tbody tr:first-child { border-top: none; }
tbody tr:hover { background: rgba(176, 109, 209, 0.04); }

/* Photo grid shortcode */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem;
  margin: 2rem 0 1rem;
}
.photo-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  box-shadow: var(--elev-1);
  text-decoration: none;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.photo-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
  border-color: var(--accent-glow);
}
.photo-tile img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease-out);
}
.photo-tile:hover img { transform: scale(1.06); }
.photo-tile__caption {
  /* Moved out from over the image — no more gradient band clipping the
     lower portion. Caption sits below the image as its own text block. */
  padding: 0.6rem 0.2rem 0.1rem;
  color: var(--text-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-sm);
  line-height: 1.3;
}

/* Photo-tile is now a <button>; reset UA styling so it reads like a tile */
button.photo-tile {
  background: none;
  border: 1px solid var(--border-subtle);
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
button.photo-tile:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}

/* ── Collection lightbox ─────────────────────────────────────────────── */
.collection-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 7, 10, 0.92);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}
.collection-lightbox[hidden] { display: none; }
.cl-stage {
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.cl-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-2);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  background: #0c0d11;
}
.cl-caption {
  color: var(--text-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-sm);
  text-align: center;
  max-width: 80ch;
}
.cl-caption .cl-taxon { color: var(--text-1); }
.cl-caption .cl-counter {
  font-style: normal;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: 0.82em;
  letter-spacing: 0.06em;
}
.cl-close,
.cl-arrow {
  position: absolute;
  background: rgba(14, 16, 20, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ddd;
  backdrop-filter: blur(10px);
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.cl-close {
  top: 1.4rem;
  right: 1.4rem;
  width: 42px; height: 42px;
  font-size: 22px;
}
.cl-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 30px;
  font-family: Georgia, serif;
}
.cl-arrow[hidden] { display: none; }
.cl-prev { left: 1.4rem; }
.cl-next { right: 1.4rem; }
.cl-close:hover,
.cl-arrow:hover {
  color: #fff;
  border-color: var(--accent-glow);
}
.cl-arrow:hover { transform: translateY(-50%) scale(1.08); }

@media (max-width: 720px) {
  .collection-lightbox { padding: 1rem; }
  .cl-close { top: 0.6rem; right: 0.6rem; width: 38px; height: 38px; }
  .cl-arrow { width: 40px; height: 40px; font-size: 22px; }
  .cl-prev { left: 0.4rem; }
  .cl-next { right: 0.4rem; }
  .cl-img { max-height: 72vh; }
}
.photo-tile__caption em { font-style: italic; color: inherit; }
.photo-tile__count {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: rgba(14, 16, 20, 0.8);
  color: var(--text-2);
  letter-spacing: 0.1em;
  backdrop-filter: blur(4px);
}

/* Species-list shortcode */
.species-meta {
  color: var(--text-3);
  margin: 0.5em 0 1.3em;
  letter-spacing: 0.02em;
}
.species-meta strong { color: var(--text-1); font-weight: 500; }
.species-meta .status { margin-left: 0.15em; font-size: 0.62rem; }

.species-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; }
.species-table {
  margin: 0;
  font-variant-numeric: tabular-nums;
  min-width: 640px;
}
.species-table th.num, .species-table td.num { text-align: right; white-space: nowrap; }
.species-table tr.row--lost  em { color: var(--text-4); }
.species-table tr.row--lost  td { color: var(--text-4); }
.species-table tr.row--given em { color: var(--text-2); }
.species-table tr.row--alive em { color: var(--text-1); }

.species-table__photo-col { width: 58px; padding: 0.7em 0.3em 0.7em 1em; }
.species-table__photo { width: 58px; padding: 0.35em 0.3em 0.35em 1em; vertical-align: middle; }
.species-table__photo a,
.species-table__photo-btn {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
  border-radius: var(--r-2);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
  padding: 0;
  cursor: pointer;
}
.species-table__photo a:hover,
.species-table__photo-btn:hover {
  border-color: var(--accent-glow);
  transform: scale(1.08);
}
.species-table__photo-btn:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 2px;
}
.species-table__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.species-table__photo-count {
  position: absolute;
  right: -4px;
  top: -4px;
  background: var(--surface-solid);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  padding: 0.12em 0.4em;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  letter-spacing: 0.04em;
}
.row--lost .species-table__photo a,
.row--lost .species-table__photo-btn { opacity: 0.55; }
.row--lost .species-table__photo img { filter: grayscale(0.6); }

/* Latest acquisitions — grid of recent plant tiles below "Golden Three" */
.latest-acquisitions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}
.latest-acquisitions__item {
  display: flex;
  flex-direction: column;
  margin: 0;
  gap: 0.45rem;
}
.latest-acquisitions__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  padding: 0;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.latest-acquisitions__btn:hover { border-color: var(--accent-glow); transform: translateY(-2px); }
.latest-acquisitions__btn:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; }
.latest-acquisitions__btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-acquisitions__btn--empty {
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.latest-acquisitions__btn--empty:hover { border-color: var(--border-subtle); transform: none; }
.latest-acquisitions__count {
  position: absolute; right: 6px; top: 6px;
  background: var(--surface-solid); color: var(--text-2);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500;
  padding: 0.14em 0.5em; border-radius: 999px; border: 1px solid var(--border-subtle);
}
.latest-acquisitions figcaption {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.86rem; line-height: 1.35;
}
.latest-acquisitions__meta { font-size: 0.72rem; }

/* Status pills for the collection / wishlist tables */
.status {
  display: inline-block;
  font-size: var(--step-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.14em 0.55em;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--text-3);
}
.status--alive { color: var(--status-alive); }
.status--lost  { color: var(--status-lost); opacity: 0.8; }
.status--given { color: var(--status-given); }

/* Per-plant location badge (genus pages, Where column) */
.loc-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.16em 0.55em;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--text-4);
  white-space: nowrap;
}
.loc-badge--highland   { color: var(--status-alive); }
.loc-badge--shelves    { color: var(--accent); }
.loc-badge--outdoor    { color: var(--highlight, #d4a74a); }
.loc-badge--windowsill { color: var(--text-3); }
.loc-badge--seasonal   { color: #7fb3d1; }  /* cool sky blue — "balcony in summer, shelves in winter" */

/* ----- giscus comments block on blog posts ----- */

.giscus-wrap {
  margin: 3.5rem auto 2rem;
  max-width: var(--page-max);
  border-top: 1px solid var(--border-hair);
  padding-top: 1.8rem;
}
.giscus-head {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  color: var(--text-1);
  margin: 0 0 0.4rem;
}
.giscus-note {
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  color: var(--text-3);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}
.giscus-note a {
  color: var(--text-2);
  border-bottom: 1px solid var(--border-subtle);
  transition: color 160ms ease, border-color 160ms ease;
}
.giscus-note a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.giscus, .giscus-frame { width: 100%; }

/* ----- Universal back-to-top button (every page except home) ----- */

.back-to-top {
  position: fixed;
  right: 1.3rem;
  bottom: 1.3rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  color: var(--text-2);
  background: rgba(14, 16, 20, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  box-shadow: var(--elev-2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), color 160ms ease, border-color 160ms ease;
  z-index: 40;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--text-1);
  border-color: var(--accent-glow);
}

/* ----- Layout ----- */

.site-main {
  min-height: calc(100vh - var(--nav-height));
  padding: calc(var(--nav-height) + 2.5rem) 1.5rem 4rem;
}

.page {
  max-width: var(--page-max);
  margin: 0 auto;
}

.page--prose {
  max-width: var(--measure);
}

/* Hero — for page titles on single pages */
.page-hero {
  text-align: left;
  margin-bottom: 2.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--border-hair);
}
.page-hero .kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 500;
  color: var(--text-4);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.page-hero h1 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
}
.page-hero .lede {
  color: var(--text-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  max-width: 58ch;
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: var(--surface-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hair);
  z-index: 20;
}

.site-header .brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: none;
}
.site-header .brand .mark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text-1);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.site-header .brand .sub {
  font-size: 0.62rem;
  color: var(--text-4);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.8rem);
  align-items: center;
}
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  border: none;
  padding: 6px 0;
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--accent);
  transition: right 220ms var(--ease-swift);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] {
  color: var(--text-1);
}
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after {
  right: 0;
}

.site-nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: clamp(0.3rem, 1vw, 0.6rem);
  padding-left: clamp(0.5rem, 1.2vw, 0.9rem);
  border-left: 1px solid var(--border-hair);
}
.site-nav__lang a {
  padding: 6px 0;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
}
.site-nav__lang a::after { display: none; }
.site-nav__lang a[aria-current="true"] { color: var(--accent); }

.site-header .menu-toggle { display: none; }

@media (max-width: 820px) {
  :root { --nav-height: 60px; }
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.4rem 1.5rem 0.8rem;
    background: #0a0b0e;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55);
  }
  .site-nav.is-open a {
    padding: 0.9rem 0;
    font-size: var(--step-sm);
    border-bottom: 1px solid var(--border-hair);
  }
  .site-nav.is-open a:last-child { border-bottom: 0; }
  .site-nav.is-open a::after { display: none; }
  .site-header .menu-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: 1.2rem;
    transform: translateY(-50%);
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-2);
    padding: 6px 10px;
    color: var(--text-2);
    font-family: var(--font-sans);
    font-size: var(--step-xs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
  }
}

/* ----- Footer ----- */

.site-footer {
  padding: 3rem 1.5rem 2.5rem;
  border-top: 1px solid var(--border-hair);
  font-size: var(--step-xs);
  color: var(--text-4);
  text-align: center;
  letter-spacing: 0.04em;
}
.site-footer a {
  color: var(--text-3);
  border-bottom-color: transparent;
}
.site-footer a:hover { color: var(--text-1); }
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.site-footer__links a { color: var(--text-2); }
.site-footer__license a { color: var(--text-4); }
.site-footer__meta { font-family: var(--font-sans); }
.site-footer__counter {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.site-footer__counter-num { color: var(--text-2); }
.site-footer__counter-label {
  font-style: italic;
  letter-spacing: 0.04em;
}

/* ----- Cards / grids ----- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin: 2rem 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.2rem 1.3rem 1.25rem;
  background: var(--surface-veil);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--elev-1);
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  position: relative;
  text-decoration: none;
  color: inherit;
}
a.card { border-bottom: 1px solid var(--border-subtle); }
.card:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
.card .kicker {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-4);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.card .title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--text-1);
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0;
}
.card .body {
  font-size: var(--step-sm);
  color: var(--text-3);
  line-height: 1.55;
}
.card .meta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--step-xs);
  color: var(--text-4);
  letter-spacing: 0.08em;
}

/* Image-led card — for genus tiles and photo grids */
.card--image {
  padding: 0;
  overflow: hidden;
}
.card--image .card-img {
  aspect-ratio: 4 / 3;
  background: #1a1c22 center / cover no-repeat;
  position: relative;
}
.card--image .card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
}
.card--image .card-body {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  color: var(--text-1);
  z-index: 2;
}

/* ----- Prose (single page / docs / blog) ----- */

.prose {
  font-size: 1.01rem;
  color: var(--text-2);
  max-width: var(--measure);
  line-height: 1.7;
}
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose h1,
.prose h2,
.prose h3 { position: relative; }
.prose h2 { border-bottom: 1px solid var(--border-hair); padding-bottom: 0.4em; }
.heading-anchor {
  position: absolute;
  left: -1.2em;
  color: var(--text-5);
  border: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.75em;
  padding-right: 0.4em;
  opacity: 0;
  transition: opacity 160ms var(--ease-out), color 160ms var(--ease-out);
}
.prose h1:hover .heading-anchor,
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--accent); }
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-3);
  border: 1px solid var(--border-hair);
  display: block;
  margin: 1.5em auto;
  box-shadow: var(--elev-1);
}
.prose figure { margin: 1.8em 0; }
.prose figcaption {
  font-size: var(--step-xs);
  color: var(--text-4);
  text-align: center;
  margin-top: 0.5em;
  letter-spacing: 0.06em;
  font-style: italic;
}

/* ----- Breadcrumb ----- */

.breadcrumb {
  font-size: var(--step-xs);
  color: var(--text-4);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--text-3);
  border: none;
}
.breadcrumb a:hover { color: var(--text-1); }
.breadcrumb .sep { color: var(--text-5); }

/* ----- Selection + scrollbar ----- */

::selection {
  background: rgba(176, 109, 209, 0.4);
  color: var(--text-1);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.18); background-clip: padding-box; }

/* ----- Homepage-specific ----- */

.home-hero {
  min-height: calc(88vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 4rem 0 6rem;
  max-width: 820px;
}
.home-hero--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: clamp(1.6rem, 3vw, 3rem);
  align-items: center;
}
.home-hero--split .home-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 62ch;
}
.home-hero--split .home-hero__figure {
  position: relative;
  display: block;
  align-self: stretch;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-4);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elev-3);
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
}
.home-hero--split .home-hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-hero--split .home-hero__figure figcaption {
  /* Caption now below the image, matching the mosaic/residents pattern. */
  padding: 0.7rem 0.9rem 0.8rem;
  color: var(--text-3);
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.05em;
}
.home-hero--split .home-hero__figure figcaption em {
  font-family: var(--font-display);
  font-size: var(--step-md);
  color: var(--text-1);
  font-style: italic;
}
.home-hero--split .home-hero__figure:hover {
  transform: translateY(-2px);
  border-color: var(--accent-glow);
  box-shadow: 0 28px 48px rgba(0,0,0,0.6);
}
.home-hero .kicker {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 1.4rem;
}
.home-hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.08;
  margin: 0 0 1.3rem;
  letter-spacing: -0.012em;
}
.home-hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-family: var(--font-display);
}
.home-hero .lede {
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--text-3);
  max-width: 62ch;
  line-height: 1.6;
  font-family: var(--font-display);
  font-weight: 300;
}

.home-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1rem;
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.8rem 1.8rem 1.6rem;
  background: var(--surface-veil);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--elev-1);
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
  position: relative;
}
.home-section:hover {
  border-color: var(--accent-glow);
  transform: translateY(-3px);
  box-shadow: var(--elev-2);
  background: var(--surface-soft);
}

.home-section__header {
  display: block;
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
  position: relative;
  padding-right: 2rem;
}
.home-section__header::after {
  content: "→";
  position: absolute;
  top: 0.2rem;
  right: 0;
  color: var(--text-4);
  font-size: 1.1rem;
  transition: transform 220ms var(--ease-swift), color 220ms var(--ease-out);
}
.home-section__header:hover::after {
  color: var(--accent);
  transform: translateX(4px);
}

.home-section .num {
  font-family: var(--font-mono);
  font-size: var(--step-xs);
  color: var(--text-4);
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
}
.home-section .title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin: 0 0 0.4rem;
}
.home-section .title em { color: var(--accent); font-style: italic; }
.home-section .body {
  font-size: var(--step-sm);
  color: var(--text-3);
  line-height: 1.55;
  max-width: 40ch;
}

.home-section__links {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border-hair);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
.home-section__links li { margin: 0; }
.home-section__links a {
  color: var(--text-2);
  border-bottom: 0;
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  padding: 0.15em 0;
  transition: color 180ms var(--ease-out);
}
.home-section__links a:hover { color: var(--text-1); }
.home-section__links a .arrow {
  color: var(--text-5);
  font-family: var(--font-mono);
  font-size: 0.85em;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-swift);
}
.home-section__links a:hover .arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.home-prose {
  max-width: var(--page-max);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-hair);
}

/* ----- Utilities ----- */

.stack > * + * { margin-top: var(--stack-gap, 1.2rem); }
.stack-sm > * + * { margin-top: 0.5rem; }
.stack-lg > * + * { margin-top: 2rem; }
.stack-xl > * + * { margin-top: 3rem; }

.muted { color: var(--text-4); }
.dim { color: var(--text-3); }
.hushed { color: var(--text-5); font-size: var(--step-xs); letter-spacing: 0.08em; }
.center { text-align: center; }
.small { font-size: var(--step-xs); }
.mono  { font-family: var(--font-mono); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ----- Zeer pot (invention) adapted into dendrogram palette ----- */

.invention-tabs {
  display: flex;
  gap: 0;
  margin: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  overflow-x: auto;
}
.invention-tab {
  padding: 0.65rem 1.2rem;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
  white-space: nowrap;
}
.invention-tab:hover { color: var(--text-1); }
.invention-tab.is-active {
  color: var(--text-1);
  border-bottom-color: var(--accent);
}

/* ----- Bio / About page ----- */

.bio-portrait {
  float: right;
  width: clamp(180px, 28vw, 280px);
  margin: 0.2rem 0 1.2rem 1.6rem;
  padding: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  box-shadow: var(--elev-2);
  shape-outside: margin-box;
}
.bio-portrait img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
.bio-portrait figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-xs);
  color: var(--text-4);
  padding: 0.55rem 0.8rem 0.65rem;
  letter-spacing: 0.03em;
  text-align: left;
  border-top: 1px solid var(--border-hair);
}

@media (max-width: 640px) {
  .bio-portrait {
    float: none;
    margin: 0 auto 1.5rem;
    width: min(320px, 80%);
  }
}

/* Elsewhere — rel=me link list on about page */
.elsewhere {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2.5rem;
  display: grid;
  /* 8 identity links → 4 cols × 2 rows (clean). */
  grid-template-columns: repeat(4, 1fr);
  gap: 0.1rem;
  border-top: 1px solid var(--border-hair);
  border-left: 1px solid var(--border-hair);
}
.elsewhere li { margin: 0; }
.elsewhere a {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.9rem 1rem;
  background: var(--surface-veil);
  border-right: 1px solid var(--border-hair);
  border-bottom: 1px solid var(--border-hair);
  text-decoration: none;
  color: var(--text-1);
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.elsewhere a:hover {
  background: var(--accent-wash);
  color: var(--text-1);
  border-bottom-color: var(--accent-glow);
}
.elsewhere .elsewhere__key {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-4);
}
.elsewhere .elsewhere__val {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text-2);
}

/* ----- Ledger — home rough 3-year totals with playful equivalents ----- */

.home-ledger {
  margin: 2.6rem 0 2.8rem;
  padding: 2rem 2.2rem 2.4rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  background:
    linear-gradient(180deg, rgba(143, 185, 122, 0.04), rgba(14, 16, 20, 0.55)),
    var(--surface-veil);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-ledger__head { margin-bottom: 1.6rem; max-width: 62ch; }
.home-ledger__head .kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-4);
  margin-bottom: 0.6rem;
}
.home-ledger__head h2 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.home-ledger__head .lede {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-3);
}

.home-ledger__grid {
  display: grid;
  /* 6 cards → 3 cols × 2 rows (clean). No auto-fit so content width
     doesn't push us to a cliffhanger 4+2 layout on wide screens. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin: 0;
}
.home-ledger__grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.2rem 1.1rem;
  background: var(--surface-veil);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-3);
}
.home-ledger__grid dt {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-4);
  margin: 0;
}
.home-ledger__grid dd {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--text-1);
  margin: 0;
  line-height: 1;
  font-feature-settings: "tnum", "lnum";
}
.home-ledger__grid dd small {
  font-family: var(--font-sans);
  font-size: 0.55em;
  color: var(--text-3);
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
  margin-left: 0.25rem;
}
.home-ledger__grid dd.rate {
  font-size: 0.92rem;
  color: var(--text-2);
  margin-top: 0.35rem;
  font-feature-settings: "tnum", "lnum";
}
.home-ledger__grid dd.rate small {
  font-size: 0.7em;
  margin-left: 0.15rem;
}
.home-ledger__grid dd.rate small.per {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-3);
  font-style: italic;
  margin-left: 0.35rem;
}
.home-ledger__grid p {
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-3);
  font-family: var(--font-display);
  font-weight: 300;
}

/* ----- Blog ---------------------------------------------------------- */

.blog-index {
  list-style: none;
  padding: 0;
  margin: 2rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.blog-index__item { margin: 0; }
.blog-index__link {
  display: block;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.blog-index__link:hover {
  transform: translateY(-2px);
  border-color: var(--accent-glow);
  box-shadow: var(--elev-1);
}
.blog-index__date {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.blog-index__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-xl);
  line-height: 1.2;
  color: var(--text-1);
}
.blog-index__lede {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-2);
  font-size: var(--step-sm);
  line-height: 1.45;
}
.blog-index__tags,
.blog-post__tags {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.blog-index__tags li,
.blog-post__tags li {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-veil);
  border: 1px solid var(--border-hair);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
  text-transform: uppercase;
}

.blog-post__head {
  margin-bottom: 1.6rem;
}
.blog-post__date {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.blog-post__meta {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-3);
  letter-spacing: 0.08em;
}
.blog-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-2);
  margin: 1.2rem auto;
  display: block;
  box-shadow: var(--elev-1);
}
.blog-post__body figure {
  margin: 1.6rem 0;
  text-align: center;
}
.blog-post__body figure img { margin: 0 auto 0.5rem; }
/* Smaller in-body figures — for detail shots and habitat photos that
   shouldn't dominate the reading column. Hero figure (first one) stays
   full-width. */
.blog-post__body figure.fig-inline { max-width: 520px !important; margin: 1.6rem auto; }
.blog-post__body figure.fig-inline img { width: 100% !important; max-width: 520px !important; }
/* Click-to-enlarge cue: images in blog posts open in a lightbox. */
.blog-post__body figure img { cursor: zoom-in; transition: filter 0.18s ease; }
.blog-post__body figure img:hover { filter: brightness(1.06); }

/* Minimal lightbox overlay — full-viewport image + arrow nav. */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain;
  border-radius: var(--r-2);
  box-shadow: 0 12px 60px rgba(0,0,0,0.7);
}
.lightbox-overlay__caption {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  max-width: 80vw;
  color: var(--text-2, #ccc);
  font-family: var(--font-display, serif);
  font-style: italic; font-size: var(--step-sm, 0.9rem);
  text-align: center; line-height: 1.4;
  padding: 0.4rem 0.9rem;
  background: rgba(0,0,0,0.4);
  border-radius: var(--r-2);
}
.lightbox-overlay__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 0;
  color: rgba(255,255,255,0.6);
  font-size: 3rem; line-height: 1;
  padding: 0 1.4rem;
  cursor: pointer;
  user-select: none;
}
.lightbox-overlay__nav:hover { color: rgba(255,255,255,0.95); }
.lightbox-overlay__nav--prev { left: 0; }
.lightbox-overlay__nav--next { right: 0; }
.lightbox-overlay__close {
  position: absolute; top: 1rem; right: 1.4rem;
  background: none; border: 0;
  color: rgba(255,255,255,0.7); font-size: 2rem; line-height: 1;
  cursor: pointer;
}
.lightbox-overlay__close:hover { color: white; }
@media (max-width: 640px) {
  .blog-post__body figure.fig-inline { max-width: 100%; }
  .lightbox-overlay__nav { font-size: 2rem; padding: 0 0.8rem; }
}
.blog-post__body figcaption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-sm);
  color: var(--text-3);
  line-height: 1.4;
}
.blog-post__tags { margin-top: 2rem; }
.blog-post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.6rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--border-subtle);
}
.blog-post__nav-link {
  display: block;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms var(--ease-out);
}
.blog-post__nav-link:hover { border-color: var(--accent-glow); }
.blog-post__nav-link--next { text-align: right; }
.blog-post__nav-dir {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.blog-post__nav-title {
  display: block;
  font-family: var(--font-display);
  color: var(--text-1);
  font-size: var(--step-sm);
  line-height: 1.3;
}
.blog-post__back { margin-top: 1.4rem; }
.blog-post__back a { color: var(--text-2); }

@media (max-width: 720px) {
  .blog-post__nav { grid-template-columns: 1fr; }
  .blog-post__nav-link--next { text-align: left; }
}

/* ----- Golden three block (collection landing) ---------------------- */
.golden-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin: 1.6rem 0 2.4rem;
}
.golden-item { margin: 0; }
.golden-item a { display: block; }
.golden-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: var(--r-3);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elev-1);
  transition: transform 400ms var(--ease-out);
}
.golden-item a:hover img { transform: translateY(-3px); }
.golden-item figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-size: var(--step-sm);
  line-height: 1.5;
  color: var(--text-2);
}
.golden-item figcaption strong { color: var(--text-1); font-weight: 400; }
@media (max-width: 720px) {
  .golden-three { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* ----- Highland residents grid (featured genera on /highland/) ----- */

.highland-residents {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 2.6rem;
  display: grid;
  /* 6 genera → 3 columns × 2 rows. Explicit count to avoid cliffhangers. */
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}
.highland-residents li { margin: 0; }
.highland-residents a {
  display: block;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.highland-residents a:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
}
.highland-residents img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.highland-residents a:hover img { transform: scale(1.06); }
.highland-residents span {
  /* Label now sits BELOW the image, matching the home mosaic style. */
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.9rem 0.8rem;
  color: var(--text-1);
}
.highland-residents em {
  font-style: italic;
  font-family: var(--font-display);
  font-size: var(--step-md);
  line-height: 1.2;
}
.highland-residents small {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.06em;
  color: var(--text-3);
}

/* ----- Chronological interior-photo timeline (content/highland/photos) ----- */

.interior-timeline {
  list-style: none;
  padding: 0;
  margin: 2.2rem 0 3rem;
  display: grid;
  gap: 2.4rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.interior-timeline li { margin: 0; }
.interior-timeline li.featured { grid-column: 1 / -1; }
.interior-timeline a {
  display: block;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.interior-timeline a:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
}
.interior-timeline img {
  display: block;
  width: 100%;
  height: auto;
}
.interior-timeline p {
  margin: 0.7rem 0.2rem 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--text-2);
}
.interior-timeline strong {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-1);
  font-size: 0.78rem;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

/* ----- Figure: narrative "moment" block (e.g. grower with a plant) ----- */

figure.moment {
  margin: 2.4rem 0 2.8rem;
  padding: 0;
}
figure.moment img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  background: var(--bg-1);
  box-shadow: var(--elev-2);
}
figure.moment figcaption {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text-3);
  padding: 0 0.3rem;
}

/* ----- Press & re-use page ----- */

.press-asset {
  margin: 1.2rem 0 1.8rem;
  padding: 0;
}
.press-asset img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  background: var(--bg-1);
}
.press-asset figcaption {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-3);
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
}

.press-hero-list {
  list-style: none;
  padding: 0;
  margin: 1.8rem 0 2.6rem;
  display: grid;
  /* 6 hero photos → 3 columns × 2 rows. Clean, no cliffhanger. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem 1rem;
}
.press-hero-list li { margin: 0; }
.press-hero-list a {
  display: block;
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.press-hero-list a:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
}
.press-hero-list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.press-hero-list p {
  margin: 0.55rem 0.15rem 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-2);
}

/* ----- Contact page ----- */

.contact-grid {
  display: grid;
  /* 6 contact cards → 3 cols × 2 rows. grid-auto-rows: 1fr keeps
     every card the same height regardless of body length, so the
     two rows line up perfectly instead of the first being taller
     just because its descriptions happen to be longer. */
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1rem;
  margin: 2rem 0 3rem;
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.3rem 1.4rem 1.3rem;
  background: var(--surface-veil);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), background 220ms var(--ease-out);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.contact-card:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
  background: var(--surface-soft);
}
.contact-card .kicker {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-4);
}
.contact-card .title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-1);
  line-height: 1.25;
}
.contact-card .body {
  font-size: var(--step-sm);
  color: var(--text-3);
  line-height: 1.5;
  margin-top: 0.15rem;
}

/* ----- Highland landing hero ----- */

.highland-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 2rem 0 2.5rem;
}
.highland-hero a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  box-shadow: var(--elev-2);
  text-decoration: none;
  color: inherit;
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.highland-hero a:hover {
  transform: translateY(-3px);
  border-color: var(--accent-glow);
  box-shadow: var(--elev-3);
}
.highland-hero img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.highland-hero__schematic img {
  object-fit: contain;
  background: var(--bg-1);
  padding: 1rem;
}
.highland-hero__dashboard img {
  object-fit: cover;
  object-position: center;
  background: var(--bg-1);
}
.highland-hero figcaption {
  /* Caption now sits BELOW the image, matching the home mosaic style
     (no gradient band over the photo). */
  padding: 0.7rem 0.9rem 0.8rem;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-align: left;
}
.highland-hero figcaption em {
  font-family: var(--font-display);
  font-size: var(--step-md);
  color: var(--text-1);
  font-style: italic;
}

@media (max-width: 720px) {
  .highland-hero { grid-template-columns: 1fr; }
}

.highland-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: -1rem 0 2.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-veil);
  border: 1px solid var(--border-hair);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  justify-content: center;
}
.highland-hero-links a {
  color: var(--text-3);
  text-decoration: none;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
}
.highland-hero-links a:hover,
.highland-hero-links a:focus-visible {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 720px) {
  .highland-hero-links {
    border-radius: var(--r-3);
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    padding: 0.6rem 0.8rem;
  }
}

.highland-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border-hair);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  margin: 1.5rem 0 2.5rem;
  overflow: hidden;
}
.highland-stats > div {
  background: var(--surface-veil);
  padding: 0.9rem 1.1rem 1rem;
}
.highland-stats dt {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-4);
  margin: 0 0 0.2rem;
}
.highland-stats dd {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-1);
  margin: 0;
  line-height: 1.15;
  font-feature-settings: "tnum", "lnum";
}

/* ----- Highland live conditions (polled from Pi) ----- */

.highland-live {
  margin: 1.5rem 0 0.5rem;
  padding: 1rem 1.2rem 1.1rem;
  background: linear-gradient(180deg, rgba(143, 185, 122, 0.05), rgba(14, 16, 20, 0.85));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 240ms var(--ease-out);
}
.highland-live[data-stale="true"] { opacity: 0.55; }

.highland-live__head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}
.highland-live__label {
  color: var(--text-2);
  font-weight: 500;
}
.highland-live__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-alive);
  box-shadow: 0 0 0 0 rgba(143, 185, 122, 0.55);
  animation: livePulse 2.4s ease-out infinite;
  flex-shrink: 0;
  align-self: center;
}
.highland-live[data-stale="true"] .highland-live__dot {
  background: var(--text-4);
  animation: none;
  box-shadow: none;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 185, 122, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(143, 185, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 185, 122, 0); }
}

.highland-live__updated {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--text-4);
}

.highland-live__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem 1.2rem;
  margin: 0;
}
.highland-live__grid > div { display: flex; flex-direction: column; gap: 0.15rem; }
.highland-live__grid dt {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-4);
  margin: 0;
}
.highland-live__grid dd {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--text-1);
  margin: 0;
  line-height: 1.05;
  font-feature-settings: "tnum", "lnum";
}
.highland-live__sub {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-4);
  margin-top: 0.1rem;
  font-feature-settings: "tnum", "lnum";
  min-height: 1em;
}
.highland-live__state[data-on="true"]  { color: var(--status-alive); }
.highland-live__state[data-on="false"] { color: var(--text-3); }

.highland-envelope {
  margin: 0.9rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-4);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ----- Home-page "Live" section (wraps highland-live partial) ----- */

.home-live {
  margin: 3.5rem 0 2.5rem;
}
.home-live__head {
  margin-bottom: 1.2rem;
  max-width: 760px;
}
.home-live__head .kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-4);
  margin-bottom: 0.7rem;
}
.home-live__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.home-live__foot {
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.home-live__foot a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: color 160ms ease, border-color 160ms ease;
}
.home-live__foot a:hover,
.home-live__foot a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.home-live__foot .sep {
  margin: 0 0.6em;
  color: var(--text-4);
}

/* ----- Home page sticky section jump-nav ----- */

.home-subnav {
  position: fixed;
  top: calc(var(--nav-height) + 8px);
  left: 50%;
  transform: translate(-50%, -10px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.7rem;
  background: rgba(14, 16, 20, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  box-shadow: var(--elev-2);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
  max-width: calc(100vw - 1.5rem);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.home-subnav::-webkit-scrollbar { display: none; }
.home-subnav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.home-subnav a {
  color: var(--text-3);
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
}
.home-subnav a:hover,
.home-subnav a:focus-visible {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.06);
}
.home-subnav__top {
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.25rem 0.45rem !important;
  color: var(--text-2) !important;
  letter-spacing: 0;
}

@media (max-width: 720px) {
  .home-subnav {
    font-size: 0.62rem;
    padding: 0.3rem 0.45rem;
    gap: 0.1rem;
  }
  .home-subnav a { padding: 0.25rem 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .highland-live__dot { animation: none; }
}

/* ----- Home mosaic (featured species grid) ----- */

.home-mosaic {
  margin: 3.5rem 0 2.5rem;
}
.home-mosaic__head {
  margin-bottom: 1.5rem;
  max-width: 760px;
}
.home-mosaic__head .kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--text-4);
  margin-bottom: 0.7rem;
}
.home-mosaic__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--text-1);
  letter-spacing: -0.005em;
}

/* Explicit column counts that divide the photo counts cleanly:
   - Indoor mosaic has 10 photos → 5 cols = 2 clean rows
   - Outdoor mosaic has 6 photos → 3 cols = 2 clean rows
   (auto-fit with minmax left a cliffhanger last row of 2 tiles.) */
.home-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
}
.home-mosaic__grid--outdoor {
  grid-template-columns: repeat(3, 1fr);
  max-width: none;
}
.home-mosaic--outdoor { margin-top: 2rem; }
.home-mosaic--outdoor .home-mosaic__head .kicker { color: var(--text-3); }

.mosaic-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  /* aspect-ratio moved onto the image so the caption below can flow naturally */
  border-radius: var(--r-3);
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  box-shadow: var(--elev-1);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.mosaic-tile:hover,
.mosaic-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--elev-2);
  border-color: var(--accent-glow);
  outline: none;
}
.mosaic-tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--ease-out), filter 400ms var(--ease-out);
  filter: saturate(0.92) contrast(1.02);
}
.mosaic-tile:hover img {
  transform: scale(1.07);
  filter: saturate(1) contrast(1.05);
}
.mosaic-tile__caption {
  /* Caption now sits BELOW the image — no more gradient band covering
     the lower third of each photo. */
  padding: 0.7rem 0.9rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.mosaic-tile__caption .taxon {
  font-family: var(--font-display);
  font-size: var(--step-md);
  color: var(--text-1);
  line-height: 1.2;
}
.mosaic-tile__caption .taxon em {
  font-style: italic;
  font-family: var(--font-display);
  color: var(--text-1);
}
.mosaic-tile__caption .provenance {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  color: var(--text-3);
  letter-spacing: 0.06em;
}

.home-mosaic__foot {
  margin: 1.5rem 0 0;
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.home-mosaic__foot a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: color 160ms ease, border-color 160ms ease;
}
.home-mosaic__foot a:hover,
.home-mosaic__foot a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.home-mosaic__foot em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}
.home-mosaic__foot .sep {
  margin: 0 0.5em;
  color: var(--text-4);
}
.home-mosaic--outdoor .home-mosaic__foot { text-align: center; }

.home-ledger__foot {
  margin: 1.5rem 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.home-ledger__foot a {
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: color 160ms ease, border-color 160ms ease;
}
.home-ledger__foot a:hover,
.home-ledger__foot a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.home-ledger__foot .sep {
  margin: 0 0.6em;
  color: var(--text-4);
}

.home-mosaic__link {
  font-family: var(--font-sans);
  font-size: var(--step-sm);
  color: var(--text-2);
  border-bottom-color: var(--border-subtle);
  letter-spacing: 0.04em;
}
.home-mosaic__link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ----- Home stats strip ----- */

.home-stats {
  display: grid;
  /* 6 stats → 6×1 on desktop, 3×2 on tablet, 2×3 on phone,
     1×6 on very narrow. Every breakpoint divides cleanly. */
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border-hair);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  margin: 0 0 2.4rem;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-stats > div {
  background: var(--surface-veil);
  padding: 0.95rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.home-stats dt {
  font-family: var(--font-sans);
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-4);
  margin: 0;
}
.home-stats dd {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--text-1);
  margin: 0;
  line-height: 1.05;
  font-feature-settings: "tnum", "lnum";
}
.home-stats dd em { font-style: italic; color: var(--accent); font-family: var(--font-display); }

/* ============================================================
   Mobile polish — consolidated responsive overrides.
   Everything above uses clamp()/auto-fit so it scales reasonably;
   the rules below tighten rhythm, typography, and tap targets
   for phone widths.
   ============================================================ */

/* Midrange tablets/laptops: 12-cell live grid folds to 3×4 and
   the 6-cell home-stats strip folds to 3×2 so each cell stays
   readable (below this, the narrower rules take over). */
@media (max-width: 1080px) {
  .highland-live__grid { grid-template-columns: repeat(3, 1fr); }
  .home-stats          { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  /* Less top/bottom padding under the nav; let content breathe */
  .site-main {
    padding: calc(var(--nav-height) + 1rem) 1.1rem 3rem;
  }

  /* Brand mark shrinks and loosens letter-spacing on narrow screens */
  .site-header .brand .mark {
    font-size: 0.82rem;
    letter-spacing: 0.18em;
  }
  .site-header .brand .sub { font-size: 0.58rem; }

  /* Hero — half the dead space, smaller h1 floor */
  .home-hero {
    min-height: auto;
    padding: 1rem 0 2.5rem;
  }
  .home-hero h1 { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; }

  /* Split hero collapses to stacked layout: figure on top, text below */
  .home-hero--split {
    grid-template-columns: 1fr;
    row-gap: 1.4rem;
    min-height: auto;
    padding: 0.5rem 0 2.2rem;
  }
  .home-hero--split .home-hero__figure {
    order: -1;
    aspect-ratio: 4 / 3;
    max-height: 40vh;
  }
  .home-hero--split .home-hero__text { max-width: 100%; }

  /* Page hero (single / list pages) tightens too */
  .page-hero { margin-bottom: 1.8rem; padding-bottom: 1rem; }
  .page-hero h1 { font-size: clamp(1.75rem, 7vw, 2.4rem); }

  /* h2 margins are enormous on mobile otherwise */
  h2 { margin-top: 1.8em; }

  /* Stats strips: 2 columns at phone width, no awkward label wraps */
  .home-stats { grid-template-columns: repeat(2, 1fr); }
  .home-stats dd { font-size: 1.25rem; }
  .highland-stats { grid-template-columns: repeat(2, 1fr); }
  .highland-stats dd { font-size: 1.05rem; }
  .highland-live__grid { grid-template-columns: repeat(2, 1fr); }
  .highland-live__grid dd { font-size: 1.25rem; }
  .highland-live__head { flex-wrap: wrap; gap: 0.4rem 0.7rem; }

  /* Home mosaic: 2 columns looks sharper than 1-big on mobile */
  .home-mosaic__grid { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .home-mosaic__grid--outdoor { grid-template-columns: repeat(2, 1fr); }
  .mosaic-tile__caption { padding: 0.7rem 0.7rem 0.45rem; }
  .mosaic-tile__caption .taxon { font-size: 0.82rem; }
  .mosaic-tile__caption .provenance { font-size: 0.66rem; }

  /* Ledger, residents, press heroes: collapse to 2-col on mobile so
     each card has enough breathing room and tiles stay touch-sized. */
  .home-ledger__grid      { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
  .highland-residents     { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
  .press-hero-list        { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.8rem; }
  .photo-grid             { grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }

  /* Home sections stack to one column */
  .home-sections { grid-template-columns: 1fr; }
  .home-section { padding: 1.3rem 1.3rem 1.2rem; }

  /* Contact cards and elsewhere: full-width single column */
  .contact-grid { grid-template-columns: 1fr; }
  .elsewhere { grid-template-columns: 1fr; }
  .elsewhere a { padding: 0.95rem 1rem; }

  /* Genus / wide pages: let .prose stretch full width on mobile */
  .page--prose,
  .page.page--prose { max-width: 100%; }
  .prose[style] { max-width: 100% !important; }

  /* Species table becomes a stack of cards */
  .species-table-wrap { overflow-x: visible; margin: 0 -0.2rem 1.5rem; }
  .species-table,
  .species-table thead,
  .species-table tbody,
  .species-table tr,
  .species-table th,
  .species-table td { display: block; width: 100%; min-width: 0; }
  .species-table {
    background: transparent;
    border: 0;
    padding: 0;
    backdrop-filter: none;
  }
  .species-table thead { position: absolute; left: -9999px; top: -9999px; }
  .species-table tr {
    position: relative;
    padding: 0.9rem 1rem 0.9rem 76px;
    margin: 0 0 0.7rem;
    background: var(--surface-veil);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-3);
    min-height: 72px;
  }
  .species-table td {
    padding: 0.1rem 0;
    border: 0;
    font-size: var(--step-sm);
    line-height: 1.4;
  }
  .species-table td[data-label]::before {
    content: attr(data-label);
    display: inline;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-4);
    margin-right: 0.4em;
  }
  /* Override right-align on .num so prices sit with other labels, not drift right */
  .species-table td.num { text-align: left; }
  /* Thumbnail pinned top-left of each card */
  .species-table .species-table__photo {
    position: absolute;
    top: 0.7rem; left: 0.7rem;
    padding: 0;
    width: 56px; height: 56px;
  }
  .species-table .species-table__photo a { width: 56px; height: 56px; }
  .species-table .species-table__photo::before { display: none; }
  .species-table td:empty { display: none; }
  .species-table__photo-count { font-size: 0.5rem; }

  /* Dendrogram embed: too dense on phone → promote the full-screen link */
  .dendro-frame-wrap {
    height: 60vh;
    min-height: 420px;
  }
  .dendro-hint {
    margin-top: 0.9rem;
    font-size: var(--step-sm);
    color: var(--text-2);
  }
  .dendro-hint a {
    display: inline-block;
    padding: 0.7rem 1.1rem;
    margin-top: 0.4rem;
    border: 1px solid var(--accent-glow);
    border-radius: var(--r-2);
    color: var(--text-1);
    background: var(--accent-wash);
    letter-spacing: 0.06em;
  }

  /* Highland hero stacks, schematic keeps aspect */
  .highland-hero img { aspect-ratio: 4 / 3; }
  .highland-hero__schematic img { padding: 0.6rem; }

  /* Bio portrait already re-arranges at 640px (see .bio-portrait) */

  /* Tables inside .prose get horizontal scroll fallback */
  .prose table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Quote + prose sizes */
  .prose { font-size: 0.98rem; line-height: 1.65; }

  /* Footer stacks cleanly */
  .site-footer { padding: 2rem 1rem 2.2rem; font-size: 0.68rem; }
}

/* Extra-narrow (≤380 px) — single column for mosaic */
@media (max-width: 380px) {
  .home-mosaic__grid { grid-template-columns: 1fr; }
  .home-stats { grid-template-columns: 1fr; }
  .highland-stats { grid-template-columns: 1fr; }
  .highland-live__grid { grid-template-columns: 1fr; }
}

/* Print */
@media print {
  body { background: #fff; color: #111; }
  .site-header, .site-footer { display: none; }
  a { color: #111; border-bottom-color: #aaa; }
  .bio-portrait { box-shadow: none; }
  .home-stats dd, .highland-stats dd, h1, h2, h3 { color: #111; }
}