/* Wildlife of Borneo: species-first layout (India design), light theme.
   Loaded AFTER styles.css, and only by the pages that have been converted
   (index.html, mammals-of-borneo.html). Nothing else links this file, so the
   rest of the site is untouched. Borneo's own lime accent and proboscis logo
   are kept: lime fills with dark text, an olive "ink" where lime would be
   unreadable on white. */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #eeecea;
  --accent: #d8fb4c;
  --accent-text: #1a1d0c;
  --accent-ink: #4f6b00;
  --text: #393939;
  --muted: #6b6b6b;
  --border: rgba(0, 0, 0, 0.1);
  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --bar: #111111;
  --saffron: #d8fb4c;
  --forest: #1d1d20;
  --g-mammals: #e07b00;
  --g-birds: #0f7c8c;
  --g-reptiles: #2e7d32;
  --g-amphibians: #8e3b6e;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --wrap: 1200px;
  --gutter: max(20px, calc((100% - var(--wrap)) / 2));
  color-scheme: light;
}
body { font-family: Roboto, "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; }

/* ====== India design layer (2026-09-25 experiment)
   WWF-style layout language: black bar with a logo block, full-bleed
   photo carousel, uppercase condensed headings, captioned image cards,
   grey topic cards with a full-width CTA bar. Our own palette.
   ===================================================================== */

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

body { line-height: 1.5; }
.app { max-width: none; }
.section { max-width: calc(var(--wrap) + 40px); margin: 0 auto; }

/* Uppercase condensed display type for every heading the pages share */
.hero h2, .section h2, .section h3, .species-group-heading, .detail-topbar h1, .stats-title,
.tab-btn, .btn, .loc-card h4, .feature-card h4 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.section h3 { color: var(--text); font-size: 20px; font-weight: 500; }
.section h2 { font-weight: 500; }
.species-group-heading { font-size: 15px; font-weight: 500; color: var(--text); border-bottom: 3px solid var(--text); padding-bottom: 6px; }
.btn { border-radius: 0; font-weight: 500; font-size: 15px; }

/* ---------- Top bar: black, logo block, uppercase nav, colour tabs ---------- */
.topbar {
  background: var(--bar);
  color: #fff;
  padding: 0 0 0 20px;
  min-height: 64px;
}
.topbar .brand h1, .topbar .brand .sub { color: #fff; }
.topbar .brand h1 { font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 19px; letter-spacing: 0.03em; }
.topbar .brand .sub { color: rgba(255, 255, 255, 0.65); }
.topbar .brand .logo { background: #fff; border-radius: 0; }
.menu-burger { background: transparent; color: #fff; border-radius: 0; width: 56px; height: 64px; font-size: 22px; }
.menu-burger:hover { background: #2a2a2a; }
.menu-dropdown { border-radius: 0; background: var(--bar); border: none; }
.menu-dropdown a { color: #fff; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; border-radius: 0; }
.menu-dropdown a:hover { background: #2a2a2a; }
.back-btn { background: #2a2a2a; color: #fff; border-radius: 0; }

.site-bar { padding: 0; gap: 0; justify-content: flex-start; align-items: stretch; }
.bar-logo {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--bar);
  padding: 8px 14px 8px 10px;
  font-family: var(--display); text-transform: uppercase; font-weight: 600;
  font-size: 15px; line-height: 1.05; letter-spacing: 0.02em;
  flex: 0 0 auto;
  position: relative; z-index: 2;
}
.bar-logo img { width: 48px; height: 48px; display: block; }
.bar-nav { display: none; }
.bar-search { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 56px; color: #fff; }
.bar-search:hover { background: #2a2a2a; }
.bar-tabs { display: none; }
.site-bar .menu-burger-wrap { display: flex; align-items: stretch; }

@media (min-width: 900px) {
  .bar-logo { padding: 12px 18px 12px 14px; font-size: 17px; margin-bottom: -18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }
  .bar-logo img { width: 64px; height: 64px; }
  .bar-nav { display: flex; align-items: stretch; margin-left: 28px; }
  .bar-nav a {
    display: flex; align-items: center; padding: 0 16px;
    color: #fff; font-family: var(--display); text-transform: uppercase;
    font-size: 17px; letter-spacing: 0.04em;
  }
  .bar-nav a:hover, .bar-nav a.active { background: #2a2a2a; }
  .bar-nav a.active { box-shadow: inset 0 -4px 0 var(--saffron); }
  .bar-tabs { display: flex; align-items: stretch; }
  .bar-tabs a {
    display: flex; align-items: center; padding: 0 18px;
    color: #fff; font-family: var(--display); text-transform: uppercase;
    font-size: 15px; letter-spacing: 0.05em;
  }
  .bar-tabs a:hover { filter: brightness(1.12); }
}
.g-mammals { --g: var(--g-mammals); }
.g-birds { --g: var(--g-birds); }
.g-reptiles { --g: var(--g-reptiles); }
.g-amphibians { --g: var(--g-amphibians); }
.bar-tabs a { background: var(--g); }

/* ---------- Bottom nav: app navigation on phones only ---------- */
.bottom-nav { background: var(--bar); border: none; border-radius: 0; bottom: 0; width: 100%; max-width: none; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2); }
.bottom-nav a { color: rgba(255, 255, 255, 0.7); border-radius: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 400; }
.bottom-nav a .nav-icon { background: transparent; }
.bottom-nav a.active { color: #fff; }
.bottom-nav a.active .nav-icon { background: transparent; box-shadow: inset 0 -3px 0 var(--saffron); border-radius: 0; }
body { padding-bottom: 72px; }
@media (min-width: 900px) {
  .page-home .bottom-nav { display: none; }
  .page-home { padding-bottom: 0; }
}

/* ---------- Buttons ---------- */
.btn-ghost {
  display: inline-block; padding: 11px 22px;
  border: 2px solid #fff; color: #fff;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px;
  transition: background 0.15s, color 0.15s;
}
.btn-ghost:hover { background: #fff; color: var(--bar); }
.btn-solid {
  display: inline-block; padding: 14px 26px;
  background: var(--accent); color: var(--accent-text);
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px;
}
.btn-solid:hover { filter: brightness(1.1); }

/* ---------- Hero carousel ---------- */
.hero-carousel { position: relative; background: var(--bar); }
.hc-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.hc-track::-webkit-scrollbar { display: none; }
.hc-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  height: min(78vh, 600px); min-height: 440px; overflow: hidden;
}
.hc-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 90px 20px 58px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 30%, rgba(0, 0, 0, 0));
  color: #fff;
}
.hc-kicker { margin: 0 0 6px; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--saffron); }
.hc-panel h2 { margin: 0 0 10px; font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 36px; line-height: 1.05; letter-spacing: 0.01em; }
.hc-panel p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.88); max-width: 34em; }
.hc-credit { position: absolute; right: 10px; top: 8px; font-size: 10.5px; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95); max-width: 60%; text-align: right; }
.hc-arrow {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 44px; height: 64px; border: none; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 40px; line-height: 1;
  display: none;
}
.hc-arrow:hover { background: rgba(0, 0, 0, 0.6); }
.hc-prev { left: 0; }
.hc-next { right: 0; }
.hc-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 8px; }
.hc-dots button { width: 10px; height: 10px; padding: 0; border: 2px solid #fff; background: transparent; cursor: pointer; }
.hc-dots button[aria-selected="true"] { background: #fff; }

@media (min-width: 900px) {
  .hc-panel {
    top: 0; right: auto; bottom: 0; width: 400px;
    padding: 0 40px 0 max(40px, calc((100vw - var(--wrap)) / 2));
    box-sizing: content-box;
    display: flex; flex-direction: column; justify-content: center;
    background: rgba(0, 0, 0, 0.55);
  }
  .hc-panel h2 { font-size: 50px; }
  .hc-panel .btn-ghost { align-self: flex-start; }
  .hc-panel p { font-size: 16px; }
  .hc-arrow { display: block; top: 50%; }
  .hc-credit { top: auto; bottom: 14px; right: 60px; }
}

/* ---------- Home: search band ---------- */
.home-search { background: var(--surface-2); padding: 26px var(--gutter); }
.home-search form { display: flex; max-width: 820px; margin: 0 auto; box-shadow: var(--shadow); }
.home-search input {
  flex: 1; min-width: 0; border: 2px solid var(--bar); border-right: none;
  padding: 16px 18px; font-size: 17px; font-family: inherit; color: var(--text); background: #fff; border-radius: 0;
}
.home-search input:focus { outline: 3px solid var(--saffron); outline-offset: -3px; }
.home-search button {
  border: none; background: var(--accent); color: var(--accent-text); padding: 0 26px; cursor: pointer;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 17px;
}
.home-search-count { text-align: center; margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.home-search-count strong { color: var(--text); font-family: var(--display); font-weight: 500; font-size: 18px; }

/* ---------- Home: blocks ---------- */
.home-block { padding: 44px var(--gutter) 8px; }
.home-band { background: var(--surface-2); padding-bottom: 40px; margin-top: 36px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.block-title {
  margin: 0 0 20px; font-family: var(--display); text-transform: uppercase;
  font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--text); letter-spacing: 0.01em;
}
.block-head .block-title { margin: 0; }
.block-more { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-ink); font-size: 16px; }
.block-more:hover { text-decoration: underline; }
.block-sub { margin: 0; color: var(--muted); font-size: 14px; flex-basis: 100%; }
@media (min-width: 900px) { .block-title { font-size: 40px; } }

/* Group tiles: photo with a colour label bar */
.group-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 900px) { .group-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.group-tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--g); }
.group-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.group-tile:hover img { transform: scale(1.04); }
.group-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  background: var(--g); color: #fff; padding: 9px 12px;
}
.group-tile-label strong { font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 18px; letter-spacing: 0.03em; }
.group-tile-label em { font-style: normal; font-size: 12.5px; opacity: 0.9; }
@media (min-width: 900px) { .group-tile-label { padding: 12px 16px; } .group-tile-label strong { font-size: 22px; } }

/* Caption cards: image with an uppercase caption underneath */
.caption-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; }
@media (min-width: 700px) { .caption-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .caption-grid { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; } }
.caption-card { display: block; }
.caption-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2); margin-bottom: 10px; }
.caption-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.caption-card:hover .caption-img img { transform: scale(1.04); }
.caption-card strong { display: block; font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: 17px; line-height: 1.2; color: var(--text); letter-spacing: 0.01em; }
.caption-card em { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.caption-card:hover strong { color: var(--accent-ink); }

/* Horizontal strip */
.strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 10px; scrollbar-width: thin; }
.strip .caption-card { flex: 0 0 200px; scroll-snap-align: start; }
@media (min-width: 900px) { .strip .caption-card { flex-basis: 240px; } }

/* Topic cards: grey card, photo, centred uppercase title, full-width CTA bar */
.topic-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .topic-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.topic-card { display: flex; flex-direction: column; background: var(--surface-2); }
.topic-card img, .topic-noimg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #d9d5d0; }
.topic-body { flex: 1; padding: 18px 18px 20px; text-align: center; }
.topic-body strong { display: block; font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 24px; line-height: 1.1; margin-bottom: 10px; color: var(--text); }
.topic-body span { font-size: 14px; color: var(--muted); line-height: 1.55; }
.topic-cta {
  display: block; background: var(--accent); color: var(--accent-text); text-align: center; padding: 13px 10px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px;
}
.topic-card:hover .topic-cta { filter: brightness(1.12); }

/* Contribute band */
.contribute-band {
  margin-top: 48px; padding: 40px var(--gutter);
  background: var(--forest); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
}
.contribute-band h2 { margin: 0 0 8px; font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 30px; line-height: 1.1; }
.contribute-band p { margin: 0; max-width: 44em; color: rgba(255, 255, 255, 0.88); }

/* Footer */
.site-footer { background: var(--bar); color: rgba(255, 255, 255, 0.72); padding: 40px var(--gutter) 28px; font-size: 14px; }
.footer-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 60px; }
.footer-cols > div { max-width: 28em; }
.footer-brand { font-family: var(--display); text-transform: uppercase; font-size: 24px; color: #fff; margin: 0 0 8px; letter-spacing: 0.03em; }
.footer-cols p { margin: 0; }
.site-footer a { color: #fff; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 36px; align-content: start; }
.site-footer nav a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; }
.site-footer nav a:hover { color: var(--saffron); }
.footer-note { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 12.5px; }

/* ---------- Shared components on the light theme ---------- */
.species-card, .search-result-card, .feature-card, .loc-card, .stats-card, .sub-location-card, .operator-card { box-shadow: none; }
.species-card .thumb, .search-result-card .thumb { border-radius: 0; }
.tab-btn { border-radius: 0; font-size: 15px; font-weight: 500; }
.card-toggle-seen[aria-pressed="true"] .card-toggle-track, .trip-toggle-seen[aria-pressed="true"] .trip-toggle-track { background: var(--g-birds); }
.card-toggle-seen[aria-pressed="true"] .card-toggle-thumb, .trip-toggle-seen[aria-pressed="true"] .trip-toggle-thumb { background: #fff; }
.trip-toggle-seen[aria-pressed="true"] .trip-toggle-label { color: var(--g-birds); }
.leaflet-control-attribution { background: rgba(255, 255, 255, 0.85) !important; }
.danger-btn { color: #b3261e; border-color: rgba(179, 38, 30, 0.35); }
.danger-btn:hover { background: rgba(200, 16, 46, 0.08); }

/* ---------- Inner pages: title band ---------- */
.page-inner .topbar.site-bar { position: sticky; top: 0; }
.page-head {
  background: var(--surface-2);
  padding: 30px var(--gutter) 26px;
  border-bottom: 4px solid var(--bar);
}
.page-head h1 {
  margin: 0; font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 34px; line-height: 1.05; color: var(--text); letter-spacing: 0.01em;
}
.page-head p { margin: 8px 0 0; color: var(--muted); font-size: 15px; max-width: 44em; }
.page-back {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; color: var(--accent-ink);
}
.page-back:hover { text-decoration: underline; }
.page-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.page-head .loc-tag, .loc-tag {
  border-radius: 0; background: var(--bar); color: #fff;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; font-size: 12px; padding: 5px 10px;
}
@media (min-width: 900px) {
  .page-head { padding: 48px var(--gutter) 40px; }
  .page-head h1 { font-size: 52px; }
  .page-head p { font-size: 17px; }
}
.page-inner .section { padding-top: 28px; padding-bottom: 40px; }
.page-inner .site-footer { margin-top: 40px; }
@media (min-width: 900px) {
  .page-inner .bottom-nav { display: none; }
  .page-inner { padding-bottom: 0; }
}

/* ---------- Tabs: square, the species tabs take their group colour ---------- */
.tabs { gap: 4px; margin-bottom: 22px; border-bottom: 4px solid var(--bar); padding-bottom: 0; }
.tab-btn {
  background: var(--surface-2); color: var(--text); border: none; padding: 11px 18px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em;
}
.tab-btn:hover { background: #e2dfdb; }
.tab-btn.active { background: var(--bar); color: #fff; }
.tab-btn[data-tab="mammals"].active { background: var(--g-mammals); }
.tab-btn[data-tab="birds"].active { background: var(--g-birds); }
.tab-btn[data-tab="lizards"].active, .tab-btn[data-tab="snakes"].active, .tab-btn[data-tab="turtlescrocs"].active { background: var(--g-reptiles); }
.tab-btn[data-tab="amphibians"].active { background: var(--g-amphibians); }
@media (min-width: 900px) { .tab-btn { font-size: 17px; padding: 13px 24px; } }

/* ---------- Species list: a grid of cards on wide screens ---------- */
.species-card { border-radius: 0; padding: 10px 12px; align-items: center; }
.species-card:hover { border-color: var(--text); }
.species-card .thumb { width: 64px; height: 64px; font-size: 26px; }
.species-card .info h5, .search-result-card .info h5 { font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 15px; letter-spacing: 0.02em; }
.species-group-heading { margin: 30px 0 12px; }
@media (min-width: 700px) {
  .page-species .tab-panel.active { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; align-items: start; }
  .page-species .species-group-heading { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .page-species .tab-panel.active { grid-template-columns: repeat(3, 1fr); }
}
.search-result-card { border-radius: 0; }
.search-result-card .thumb { width: 52px; height: 52px; }
.page-search .section { max-width: 860px; }
#search-input { border-radius: 0; border: 2px solid var(--bar); font-size: 17px; padding: 14px 16px; }

/* ---------- Detail pages: photos left, facts right on wide screens ---------- */
.detail-cover { border-radius: 0; }
.detail-latin { font-size: 16px; margin: 0 0 16px; }
.stats-card { border-radius: 0; background: var(--surface-2); border: none; }
.stats-title { font-weight: 500; }
.stat-icon { border-radius: 0; background: #fff; }
.trip-toggle { border-radius: 0; }
.upload-photo-btn { background: var(--accent); color: var(--accent-text); border: none; }
@media (min-width: 900px) {
  .page-species-detail .section, .page-guide-detail .section {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 44px; align-items: start;
  }
  .page-species-detail .section > *, .page-guide-detail .section > * { grid-column: 2; }
  .page-species-detail .sp-swipe-wrap, .page-species-detail .sp-swipe-hint,
  .page-guide-detail #guide-cover-gallery { grid-column: 1; grid-row: 1 / span 30; }
  .page-species-detail .detail-cover, .page-location .detail-cover, .page-guide-detail .detail-cover { height: 460px; }
}

/* ---------- Other shared components ---------- */
.loc-card, .sub-location-card, .operator-card, .feature-card { border-radius: 0; }
.section p.lead { font-size: 15px; }
.section h3 { font-size: 22px; }

.search-input, .popup-trip-btn, .install-banner-btn { border-radius: 0; }
@media (min-width: 900px) { #locations-map, #trip-map { height: 540px; } }

/* ---------- Places: region intro then a grid of place cards ---------- */
.page-locations .tab-panel.active { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.page-locations .tab-panel > h3, .page-locations .tab-panel > .lead { grid-column: 1 / -1; margin-bottom: 0; }
.page-locations .loc-card { margin-bottom: 0; display: flex; flex-direction: column; height: 100%; border: none; background: var(--surface-2); }
.page-locations .loc-card .cover { height: auto; aspect-ratio: 16 / 10; }
.page-locations .loc-card h4 { font-size: 22px; font-weight: 500; line-height: 1.1; }
.page-locations .loc-card .loc-top { flex-direction: column; gap: 6px; }
@media (min-width: 700px) { .page-locations .tab-panel.active { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .page-locations .tab-panel.active { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.loc-highlights b { font-family: var(--display); text-transform: uppercase; font-weight: 500; letter-spacing: 0.04em; }
@media (min-width: 900px) { .page-locations .tabs { flex-wrap: wrap; overflow: visible; } }

/* Static species pages (build-static-species.js): photo credit line and "Quick answers" block. */
.sp-credit { font-size: 11.5px; color: var(--muted); margin: 6px 0 12px; }
.sp-faq { margin: 24px 0 8px; }
.sp-faq h2 { font-family: var(--display); text-transform: uppercase; font-weight: 500; letter-spacing: 0.04em; font-size: 18px; margin: 0 0 12px; }
.sp-faq dt { font-weight: 700; font-size: 13.5px; margin: 14px 0 3px; }
.sp-faq dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text); }

/* ---------- Borneo extras: more animal groups than India ---------- */
.g-insects { --g: #b45309; }
.g-fish { --g: #2b6cb0; }
.g-plants { --g: #3f7d20; }
.page-home .topic-grid { grid-template-columns: 1fr; }
@media (min-width: 700px) { .page-home .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .page-home .topic-grid { grid-template-columns: repeat(4, 1fr); } }
.app-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.app-badges img { height: 44px; width: auto; display: block; }
.home-about p { max-width: 52em; line-height: 1.6; }
.home-more-links { margin: 14px 0 0; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.05em; }
.home-more-links a { color: var(--accent-ink); }
.app-soon { font-size: 13px; color: var(--muted); }

/* Equal-height group tile labels: the name never wraps, the count sits under it,
   so every tile shows the same amount of photo (long names like "Freshwater Fish"
   used to wrap and make some labels taller than others). */
.group-tile-label { flex-direction: column; align-items: flex-start; justify-content: center; flex-wrap: nowrap; gap: 1px; height: 46px; padding-top: 0; padding-bottom: 0; }
.group-tile { aspect-ratio: 1 / 1; }
.group-tile-label strong { white-space: nowrap; font-size: clamp(15px, 4.3vw, 18px); line-height: 1.2; }
@media (min-width: 900px) { .group-tile { aspect-ratio: 4 / 3; } .group-tile-label { height: 60px; } .group-tile-label strong { font-size: 22px; } }

/* Photo credit (i) button on the light theme: styles.css gave it var(--text), which is dark
   grey here and unreadable on the dark button and panel. Also places it on home-page photos. */
.credit-icon { color: #fff; }
.credit-panel { color: #f5f5f2; }
.credit-panel .credit-license { color: rgba(255, 255, 255, 0.7); }
.credit-panel a { color: var(--accent); }
.group-tile .credit-icon, .topic-card .credit-icon { top: 8px; bottom: auto; right: 8px; }
.group-tile .credit-panel, .topic-card .credit-panel { top: 38px; bottom: auto; }
.caption-img { position: relative; }
.topic-card { position: relative; }
.hc-slide .credit-icon { top: 12px; bottom: auto; right: 12px; }
.hc-slide .credit-panel { top: 42px; bottom: auto; left: auto; right: 12px; width: min(320px, calc(100% - 24px)); }

/* Readability on the light theme. Lime is a FILL colour here (buttons, tags, the active tab);
   styles.css also used it as TEXT colour, which is unreadable on white, so text uses the olive
   ink instead. White-on-lime text becomes dark-on-lime. */
.loc-website-link,
.species-card .info .status,
.operator-contact a, .operator-contact .operator-note,
.top-contributor-badge, .contributor-source-link,
.references-list a, .search-group-heading,
.locations-map-popup a, .trip-map-popup a,
.link-btn, .sighting-photo-count,
.section h3.article-sub a::after, .target-list li.linked a::after,
p[data-i18n="sightings.footer"] a { color: var(--accent-ink); }
.lang-btn.active, .back-to-top { color: var(--accent-text); }
.checklist-item.seen .checklist-check { color: var(--accent-text); }

/* Chips and buttons that sit on a dark overlay on photos (counter, arrows, lightbox controls,
   map attribution): styles.css gave them var(--text), which is dark grey on the light theme. */
.carousel-counter, .carousel-arrow, .lightbox-nav, .lightbox-close, .lightbox-counter { color: #fff; }
.carousel-arrow:hover { color: var(--accent-text); }
.leaflet-control-attribution { color: rgba(255, 255, 255, 0.78) !important; }

/* ---------- Wildlife of Everywhere strip (above the site header) ---------- */
.woe-strip { background: #000; border-bottom: 1px solid #2a2a2a; }
.woe-strip a {
  display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%;
  padding: 4px 14px; color: rgba(255, 255, 255, 0.85);
  font-family: var(--display, "Oswald", sans-serif); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.1em; line-height: 1;
}
.woe-strip a:hover { color: #fff; }
.woe-strip a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.woe-strip img { flex: 0 0 auto; display: block; background: #fff; padding: 3px 5px; border-radius: 2px; width: 34px; height: auto; }
.woe-strip em { font-style: normal; color: rgba(255, 255, 255, 0.5); }
.woe-strip em::before { content: "\00b7"; margin-right: 7px; }
@media (min-width: 900px) { .woe-strip a { padding: 6px 20px; } }