/* =========================================================================
   Content pages (server-crawlable region & animal pages generated by
   scripts/gen-pages.mjs). Kept intentionally simple and self-contained so
   the pages are fast, robust and match the app's brand.
   ========================================================================= */
:root{
  --paper:#f6efe2; --card:#fffdf8; --ink:#2b2620; --ink-soft:#897b6b;
  --line:#e8ddca; --clay:#c2653f; --spruce:#2f6b5d; --gold:#cf9a3c;
  --shadow:0 6px 20px rgba(60,45,20,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.62;
  font-family:"Spline Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,.eyebrow{font-family:"Space Grotesk","Spline Sans",system-ui,sans-serif}
a{color:var(--clay)}

.wrap{max-width:760px;margin:0 auto;padding:40px 22px 96px}
.back{display:inline-flex;align-items:center;gap:6px;margin-bottom:26px;font-weight:600;
  text-decoration:none;color:var(--spruce)}
.back:hover{text-decoration:underline}

.eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
h1{font-size:34px;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em}
h1 .emoji{margin-right:8px}
.sci{margin:0 0 18px;color:var(--ink-soft);font-style:italic;font-size:16px}
.lede{font-size:18px;margin:0 0 26px}

/* fact grid (animal pages) */
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 30px}
.fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 15px;box-shadow:var(--shadow)}
.fact b{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:3px}
.fact span{font-size:16px;font-weight:500}
.status-chip{display:inline-block;padding:3px 12px;border-radius:999px;color:#fff;font-size:13px;font-weight:600}
.st-LC{background:#2f6b5d}.st-NT{background:#9a8431}.st-VU{background:#cf9a3c}
.st-EN{background:#c2653f}.st-CR{background:#9d3b2f}

section{margin:0 0 30px}
section h2{font-size:20px;margin:0 0 10px}
.conds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.conds{grid-template-columns:1fr}}
.cond{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
.cond b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:4px}
ul.trivia{padding-left:20px;margin:0}
ul.trivia li{margin:0 0 8px;font-size:16px}

/* lists of links (hub pages + "animals in this region") */
.tiles{list-style:none;padding:0;margin:8px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.tiles a{display:flex;align-items:center;gap:11px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .14s,border-color .14s}
.tiles a:hover{transform:translateY(-2px);border-color:var(--spruce)}
.tiles .t-emoji{font-size:22px;line-height:1}
.tiles .t-name{font-weight:600;font-size:15.5px}
.tiles .t-sub{display:block;font-size:12.5px;color:var(--ink-soft);font-style:italic}

.cta{display:inline-block;margin:8px 0 0;background:var(--spruce);color:#fff;font-weight:600;
  text-decoration:none;padding:12px 22px;border-radius:999px;box-shadow:var(--shadow)}
.cta:hover{filter:brightness(1.06)}

.page-foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--ink-soft)}
.page-foot a{color:var(--spruce);font-weight:600;text-decoration:none}
.page-foot a:hover{text-decoration:underline}
.wikilink{color:var(--clay);font-weight:600}